bootstrap中CSS的学习【DOC精选】.docx

Bootstrap学习资料整理 如何使用bootstrap 任何疑问都可以咨询本人：148334733 !DOCTYPE html html head titlebootstrap template/title meta name=viewport content=width=device-width, initial-scale=1.0 link rel=stylesheet href=/twitter-bootstrap/3.0.3/css/bootstrap.min.css /head body h1hello,world!/h1 script src=/jquery/1.10.2/jquery.min.js/script script src=/twitter-bootstrap/3.0.3/js/bootstrap.min.js/script /body /html Meta/viewport用来告诉移动客户端，在显示网页的时候仍然显示原大小。（禁止缩放） Bootstrap.min.css 是压缩版的CSS样式 Bootstrap.min.js是压缩版的JS样式 Jquery.min.js是 压缩版的JQ样式 这就构成了一个最为简单最为常见的一个bootstrap结构和所需要的东西。 实现居中 用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了width，用以匹配栅格系统。 注意，由于设置了padding?和 固定宽度，.container不能嵌套。 div class=container ... /div 栅格系统 ? “行（row）”必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。 ? 使用“行（row）”在水平方向创建一组“列（column）”。 ? 你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）”的直接子元素。 ? 类似Predefined grid classes like?.row?and?.col-xs-4?这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。 ? 通过设置padding从而创建“列（column）”之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。 ? 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。 通过研究案例，可以将这些原理应用到你的代码中。 超小屏幕设备?手机 (768px) 小屏幕设备?平板 (≥768px) 中等屏幕设备?桌面 (≥992px) 大屏幕设备?桌面 (≥1200px) 栅格系统行为 总是水平排列 开始是堆叠在一起的，超过这些阈值将变为水平排列 最大.container宽度 None (自动) 750px 970px 1170px class前缀 .col-xs- .col-sm- .col-md- .col-lg- 列数 12 最大列宽 自动 60px 78px 95px 槽宽 30px (每列左右均有15px) 可嵌套 Yes 偏移（Offsets） Yes 列排序 Yes 列偏移 使用.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度。 记住：永远是12份。 嵌套列 为了使用内置的栅格将内容嵌套，通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套row所包含的列加起来应该等于12。 Level 1: .col-md-9 Level 2: .col-md-6 Level 2: .col-md-6 div class=row div class=col-md-9 Level 1: .col-md-9 div class=row div class=col-md-6 Level 2: .col-md-6 /div div class=col-md-6 Level 2: .col-md-6 /div /div /div /div 列排序 通过使用.col-md-push-*?和?.col-md-pull-*就可以很容易的改变列的顺序。 .col-md-9 .col-md-push-3 把九份内容放到三份去 .col-md-3 .col-md-pu