BootStrap：css前端框架
一.what 前端CSS框架,另一个前端框架Foundation 前端框架:使用HTML、CSS、JavaScript编写的组件工具集,拿来可以直接用，不用从造轮子. 二.why 最流行的前端框架、用的多 Twitter公司于2011年8月开源的整体式前端框架,由Twitter的设计师Mark Otto和Jacob Thornton合作开发，短短几个月时间红遍全球,大量的Bootstrap风格的网站出现在互联网的浪潮中,而应用更为广泛的是它的后台管理页面.近两年的所有互联网项目的后台均采用了Bootstrap进行构建. 为什么如此流行 1.功能强大和样式美观 2.简单易用、文档丰富 3.高度可定制性 4.丰富的生态圈 5.布局兼容性好 三.how(第一个程序) 1.下载Bootstrap http://getbootstrap.com 最新版本bootstrap-3.3.7 不同版本的区别: 最新版本已经发展到Bootstrap 3 但是不意味着 Bootstrap2已经淘汰了,Bootstrap3采用了扁平化的风格,Bootstrap2在按钮、工具栏等位置更多采用了立体的效果,它们之间没有谁好谁坏的区别,只是设计风格的不同. 应该根据自己项目的实际需求来决定使用哪一个版本 扁平化概念的核心意义是：去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素，这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上，则强调了抽象、极简和符号化。 关于扁平化可以参考 http://baike.baidu.com/link?url=8RakX7FRvO0H7FbVWc2mBOMcSpy-humjYXGQEYZTjrbPfcCM1JNZCPjk0Hf60TlY6ma0FYvn5a992RPpfpJVA_ 2.在项目中引入Bootstrap 引入3个文件 bootstrap.css jquery.js Bootstrap.js Bootstrap要求的jquery在1.9.1版本或以上,jQuery3以下 演示代码如下： 第一个Bootstrap程序
6.工具类 (1)浮动工具 左浮动、右浮动: 为元素添加.pull-left、.pull-right类就可以设置左浮动和有浮动 演示代码如下:
按钮必须添加 data-toggle=”dropdown” 触发器
放置下拉选项的无须列表需要添加 .dropdown-menu 类
添加一个空的来分割列表项
Hello,Bootstrap!
需要注意的是因为bootstrap框架依赖于jquery,所以要先导入jquery.js再导入bootstrap.js .另外以前我们导入 js都是在head中导入,现在为什么要把它放到body中导入呢? 因为如果放到head中导入,服务器给客户端浏览器传输该页面的时候从上到下传输,这样会先传输js文件,如果用户的网速比较慢,这样在传输js文件的过程中,body中的内容还没有传输过来,这样用户看到的是一片白,影响用户的体验,所以我们通常把js文件放到后面加载,这样用户可以先看到body中的内容,再下载js来改变页面的行为,提高用户了用户的体验.(否则用户看见一片白直接关闭网页了) 普通纯HTML效果如下 比较全的第一个程序 Bootstrap 101 TemplateHello, world!!!
代码解释1： 页面宽度为设备宽度,初始缩放比例为1.0,调整比例对桌面浏览器并不起作用,只对移动端浏览器生效,比例值越大字越大 该语句是为了解决移动端浏览器显示问题 不加上面这句话,在web端访问没问题,在移动端浏览器中显示效果如下 加上这句话以后效果如下 具体详见: http://davidbcalhoun.com/2010/viewport-metatag/ 代码解释2: 条件注释 IE9以下 引入这两个文件,IE9以上(包括IE9)把它当做注释内容,不引入. 引入这两个文件为了让IE8支持HTML5元素和媒体查询. 四.基本样式 1.普通按钮 (1)按钮基本样式 演示代码: 默认 主要 成功 信息 警告 危险 危险 (2)调节按钮的大小主要 默认
主要 默认
主要 默认
主要 默认
(3)块级按钮 和 默认都是行内元素(内联元素),而对于移动端来说一个占据一行的大按钮再正常不过了 演示代码: 主要 默认 (4)不可点击的按钮 讲按钮的背景色做50%的褪色处理以呈现出无法点击的效果 主要 默认 2.关闭按钮 对按钮元素应用.close类就可以显示一个关闭按钮,如图所示 × aria-hidden=”true” 对屏幕阅读器来说这个按钮时隐藏的 屏幕阅读器,便于残障人士更方便阅读网页内容的工具 关于屏幕阅读器,可参见 http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/ 3.下拉按钮 对span元素应用caret类就可以显示一个下拉符号 下拉菜单 4.图片 5.表格 演示代码如下: bootstrap表格 tr.tableHead { background-color:#000000; color:#ffffff; } tr.tableHead>th { text-align: center; }商品信息
商品编号 商品名称 商品描述 商品种类 操作 操作 1 macbook air 苹果最新超薄笔记本 笔记本 2 ipad pro 苹果最新平板电脑 平板电脑 3 iphone6s plus 苹果最新大屏手机 手机
111
222
内部的源代码如下: .pull-right { float: right !important; } .pull-left { float: left !important; } !important; 设置该属性为最高优先级,即相当于把该属性定义在css文件最下面. (2)显示/隐藏工具 使用.show类显示, .hidden类隐藏,这种隐藏是不占位的,相当于设置了display:none
333
444
(3)居中 使用.center-block 类将元素设为块级元素并居中
555
注意必须设置元素的宽度居中才有效 5.对除了屏幕阅读器的设备隐藏 使用.sr-only类 Skip to main content 五.组件集 1.导航条 Bootstrap的导航主要分为胶囊式导航、面包屑导航、头部导航3类,可以满足大多数的开发需求. 胶囊式导航 水平胶囊导航 胶囊导航实质是一个无序列表,只需要给ul元素添加.nav和.nav-pills类即可
垂直胶囊导航 如果需要纵向的胶囊导航, 只需要在水平胶囊导航的基础上加一个.nav-stacked 类即可
面包屑导航
面包屑导航一般用于有层次关系的选项，如果想实现面包屑导航,需要给ul加一个.breadcrumb类即可.
头部导航
具体分析头部导航主要分为两层结构,第一层是最外面的
…，这一层用于设置导航的基本样式将.navbar-default类替换为 .navbar-inverse类,则显示为反色的导航(黑底白字)
第二层有两个并列的元素:
内部用于设置标题内容. 内部则用于编写具体的导航链接、搜索表单、下拉菜单等具体的导航内容。 Bootstrap提供了在小窗口下导航 收起/展开的功能 同学们可以把上面的窗口拖小的试一下 添加.navbar-fixed-top可以让导航条固定在顶部,不会随页面滚动而消失。为了防止固定在顶部后遮挡正常内容,需要设置:body{padding-top:50px;} 其中具体的值取决于导航条的高度 加了body的补白不会遮挡正常内容,不加会遮挡 2.下拉菜单 演示代码：
下拉菜单
按钮和下拉选择都要包裹在
….
内
按钮必须添加 data-toggle=”dropdown” 触发器
放置下拉选项的无须列表需要添加 .dropdown-menu 类
添加一个空的来分割列表项
3.按钮组
上面一组是放到按钮组中的效果,下面一组是没有放到按钮组的效果
按钮组用于把一组按钮放在同一行里，按钮之间没有间隙.用法很简单,只需要将一组按钮
放在
..
中即可.
演示代码:
Left Middle Right
(1)垂直排列
(2)两端对齐(按钮组拉伸到100%宽度)
演示代码:
Left Middle Right
注意:两端对齐的用法只适用于元素,因为按钮元素不能应用这些样式并将其所包含的内容两端对齐.
(3)嵌套,可以在 按钮组 内继续 嵌套 按钮组
演示代码:
4.input控件组
多个input控件放到一组中配合使用,下面演示了几种常见的组合，最常见的input控件组
非搜索框莫属.
(1)搜索框
实质就是 文本框+按钮
演示代码:
如果需要带下拉菜单的按钮,只需要将按钮换成下拉菜单即可。
(2)搜索框+文字
搜索框后不是按钮,不可点击
演示代码:
输入完成后回车
5.列表组
上图是未经美化的列表,下图是经过美化的列表
演示代码如下:
- 选项一
- 选项二
- 选项三
- 选项四
注意:列表组中使用有序列表时不会显示序号.
列表组不仅可以应用于列表,还可以将其他需要列表的元素展现为列表的样子.例如,
左图为不加样式的,右图为加上列表组样式的.
演示代码:
英格兰战胜威尔士
最新欧洲杯战况英格兰2:1战胜威尔士….
乌克兰对北爱尔兰
乌克兰对北爱尔兰….
德国对波兰
德国队波兰….
为列表组添加徽章也十分容易,Bootstrap会自动将徽章放置在右边
演示代码:
- 52 中国队金牌
- 48 美国队金牌
- 41 俄罗斯队金牌
6.分页 几乎所有的列表页面都需要分页, Bootstrap提供了一个较为美观的分页样式,如下图所示： 实现上述效果比较简单,只需给无序列表的ul元素添加pagination类即可 演示代码：
- «
- 1
- 2
- 3
- 4
- 5
- »
可以通过添加 .pagination-lg类或.pagination-sm类来获得比标准尺寸更大或更小的分页,例如: