bootstrap讲义.doc

排版样式一页面排版Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。1.页面主体Bootstrap 将全局font-size 设置为14px，line-height 行高设置为1.428(即20px)；段落元素被设置等于1/2 行高(即10px)；颜色被设置为#333。2.标题/内联元素使用标题字体Bootstrap在h1 h6 元素之间，还可以嵌入一个small 元素作为副标题，/在标题元素内插入small 元素Bootstrap 框架Bootstrap 小标题在h1 h6 下的small 样式也进行了改变，颜色变成淡灰色：#777，行高为1，粗度为400。3.内联文本元素/添加标记，元素或.mark 类Bootstrap框架/各种加线条的文本Bootstrap 框架 /删除的文本Bootstrap 框架 /无用的文本Bootstrap 框架 /插入的文本Bootstrap 框架 /效果同上，下划线文本/各种强调的文本Bootstrap 框架 /标准字号的85%Bootstrap 框架 /加粗700Bootstrap 框架 /倾斜4.对齐/设置文本对齐Bootstrap 框架 /居左Bootstrap 框架 /居中Bootstrap 框架 /居右Bootstrap 框架 /两端对齐，支持度不佳Bootstrap 框架 /不换行5.大小写/设置英文文本大小写Bootstrap 框架 /小写Bootstrap 框架 /大写Bootstrap 框架/首字母大写6.缩略语/缩略语Bootstrap框架7.地址文本/设置地址，去掉了倾斜，设置了行高，底部20pxTwitter, Inc.795 Folsom Ave, Suite 600San Francisco, CA 94107P: (123) 456-78908.引用文本/默认样式引用，增加了做边线，设定了字体大小和内外边距Bootstrap 框架/反向Bootstrap 框架9.列表排版/移出默认样式Bootstrap 框架Bootstrap 框架Bootstrap 框架Bootstrap 框架Bootstrap 框架/设置成内联Bootstrap 框架Bootstrap 框架Bootstrap 框架Bootstrap 框架Bootstrap 框架/水平排列描述列表BootstrapBootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。10.代码/内联代码<section>/用户输入press ctrl + ,/代码块<p>Please input.</p>Bootstrap 还列举了表示标记变量，表示程序输出，只不过没有重新复写CSS。表格和按钮一表格Bootstrap 提供了一些丰富的表格样式供开发者使用。1.基本格式/实现基本的表格样式注：我们可以通过Firebug 查看相应的CSS。2.条纹状表格/让里的行产生一行隔一行加单色背景效果注：表格效果需要基于基本格式.table3.带边框的表格/给表格增加边框4.悬停鼠标/让下的表格悬停鼠标实现背景效果5.状态类/可以单独设置每一行的背景样式注：一共五种不同的样式可供选择。样式说明active 鼠标悬停在行或单元格上success 标识成功或积极的动作info 标识普通的提示信息或动作warning 标识警告或需要用户注意danger 表示危险或潜在的带来负面影响的动作6.隐藏某一行/隐藏行7.响应式表格/表格父元素设置响应式，小于768px 出现边框二按钮Bootstrap 提供了很多丰富按钮供开发者使用。1.可作为按钮使用的标签或元素/转化成普通按钮LinkButton注意事项有三点：(1).针对组件的注意事项虽然按钮类可以应用到 和 元素上，但是，导航和导航条组件只支持 元素。(2).链接被作为按钮使用时的注意事项如果 元素被作为按钮使用- 并用于在当前页面触发某些功能- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置role=button 属性。(3).跨浏览器展现我们总结的最佳实践是：强烈建议尽可能使用 元素来获得在各个浏览器上获得相匹配的绘制效果。另外，我们还发现了Firefox 30 版本的浏览器上出现的一个bug，其表现是：阻止我们为基于 元素所创建的按钮设置line-height 属性，这就导致在Firefox 浏览器上不能完全和其他按钮保持一致的高度。2.预定义样式/一般信息Button样式说明btn-default 默认样式btn-success 成功样式btn-info 一般信息样式btn-warning 警告样式btn-danger 危险样式btn-primary 首选项样式btn-link 链接样式3.尺寸大小/从大到小的尺寸ButtonButtonButtonButton4.块级按钮/块级换行ButtonButton5.激活状态/激活按钮Button6.禁用状态/禁用按钮Button表单和图片一表单Bootstrap 提供了一些丰富的表单样式供开发者使用。1.基本格式/实现基本的表单样式电子邮件密码注：只有正确设置了输入框的type 类型，才能被赋予正确的样式。支持的输入框控件 包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和color。2.内联表单/让表单左对齐浮动，并表现为inline-block 内联块结构注：当小于768px，会恢复独占样式3.表单合组/前后增加片段￥.004.水平排列/让表单内的元素保持水平排列电子邮件注：这里用到了col-sm 栅格系统，后面章节会重点讲解，而control-label 表示和父元素样式同步。5.复选框和单选框/设置复选框，在一行体育音乐/设置禁用的复选框音乐/设置内联一行显示的复选框体育音乐/设置单选框男6.下拉列表/设置下拉列表123457.校验状态/设置为错误状态注：还有其他状态如下has-error 错误状态has-success 成功状态has-warning 警告状态/label 标签同步相应状态Input with success8.添加额外的图标/文本框右侧内置文本图标电子邮件注：除了glyphicon-ok 外，还有几个如下表：glyphicon-ok 成功状态glyphicon-warning-sign 警告状态glyphicon-remove 错误状态9.控制尺寸/从大到小注：也可以设置父元素form-group-lg、form-group-sm，来调整。二图片Bootstrap 提供了一些丰富的图片样式供开发者使用。1.图片形状/三种形状/响应式图片栅格系统一移动设备优先在HTML5 的项目中，我们做了移动端的项目。它有一份非常重要的meta，用于设置屏幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。/分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放二布局容器Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。由于padding 等属性的原因，这两种容器类不能相互嵌套。/固定宽度./100%宽度.栅格系统中，浏览器会随着屏幕的大小的增减自动分配最多12 列。通过一系列的行(row)与列(column)的组合来创建页面布局。工作原理如下：1.“行（row）”必须包含在.container （固定宽度）或.container-fluid （100%宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。2.通过“行（row）”在水平方向创建一组“列（column）”。3.你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。4.类似.row 和.col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的mixin 也可以用来创建语义化的布局。5.通过为“列（column）”设置padding 属性，从而创建列与列之间的间隔（gutter）。通过为.row 元素设置负值margin 从而抵消掉为.container 元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。6.负值的margin 就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。7.栅格系统中的列是通过指定1 到12 的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4 来创建。8.如果一“行（row）”中包含了的“列（column）”大于12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。9.栅格类适用于与屏幕宽度大于或等于分界点大小的设备， 并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-lg-*不存在， 也影响大屏幕设备。/创建一个响应式行./创建最多12 列的响应式行123456789101112/为了显示明显的CSS.a height: 100px;background-color: #eee;border:1px solid #ccc;/总列数都是12，每列分配多列1-45-89-121-89-12栅格参数表如上图所示，栅格系统最外层区分了四种宽度的浏览器：超小屏(=768px)、中屏(=992px)和大屏(=1200px)。而内层.container 容器的自适应宽度为：自动、750px、970px 和1170px。自动的意思为，如果你是手机屏幕，则全面独占一行显示。/四种屏幕分类全部激活444444444444/有时我们可以设置列偏移，让中间保持空隙83/也可以嵌套，嵌满也是12 列1-89-1211-12/可以把两个列交换位置，push 向左移动，pull 向右移动93辅组类和响应式工具一辅助类Bootstrap 在布局方面提供了一些细小的辅组样式，用于文字颜色以及背景色的设置、显示关闭图标等等。1. 情景文本颜色样式名描述text-muted 柔和灰text-primary 主要蓝text-success 成功绿text-info 信息蓝text-warning 警告黄text-danger 危险红/各种色调的字体Bootstrap 视频教程Bootstrap 视频教程Bootstrap 视频教程Bootstrap 视频教程Bootstrap 视频教程Bootstrap 视频教程2. 情景背景色bg-primary 主要蓝bg-success 成功绿bg-info 信息蓝bg-warning 警告黄bg-danger 危险红/各种色调的背景Bootstrap 视频教程Bootstrap 视频教程Bootstrap 视频教程Bootstrap 视频教程Bootstrap 视频教程3.关闭按钮×4.三角符号5.快速浮动左边右边注：这个浮动其实就是float，只不过使用了!important 加强了优先级。6.块级居中居中注：就是margin:x auto；并且设置了display:block;。7.清理浮动注：这个div 可以放在需要清理浮动区块的前面即可。8.显示和隐藏showhidden二响应式工具在媒体查询时，针对不同的屏幕大小，有时需要显示和隐藏部分内容。响应式工具类，就提供了这种解决方案。/超小屏幕激活显示Bootstrap/超小屏幕激活隐藏Bootstrap注：对于显示的内容，有三种变体，分别为：block、inline-block、inline。图标菜单按钮组件一小图标组件Bootstrap 提供了免费的263 个小图标（数了两次），具体可以参考中文官网的组件链接：http:/v3.bootcss./ponents/#glyphicons。可以使用或标签来配合使用，具体如下：/使用小图标/也可以结合按钮二下拉菜单组件下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。/基本格式下拉菜单首页资讯产品关于按钮和菜单需要包裹在.dropdown 的容器里，而作为被点击的元素按钮需要设置data-toggle=dropdown才能有效。对于菜单部分，设置class=dropdown-menu才能自动隐藏并添加固定样式。设置class=caret表示箭头，可上可下。/设置向上触发/菜单项居右对齐，默认值是dropdown-menu-left/设置菜单的标题，不要加超链接网站导航/设置菜单的分割线/设置菜单的禁用项产品/让菜单默认显示三按钮组组件按钮组就是多个按钮集成在一个容器里形成独有的效果。/基本格式左中右/将多个按钮组整合起来便于管理左中右123/设置按钮组大小/嵌套一个分组，比如下拉菜单左中右下拉菜单首页资讯产品关于注意：这里中并没有实现class=dropdown，通过源码分析知道嵌套本身已经有定位就不需要再设置。而右边的圆角只要多加一个class=dropdown-toggle即可。/设置按钮组垂直排列/设置两端对齐按钮组，使用标签左a ty