bootstrap基础布局教程.docx

Sir xiaPAGE \* MERGEFORMAT23 2.网格系统 Bootstrap提供了一套响应式、移动设备优先的网格系统。 Bootstrap网格系统会随着屏幕的大小的改变而进行改变，自动分为最多12列。 工作原理 网格系统通过行row和列column的组合来创建页面的布局。遵循的规则 样式指的就是class中的内容。 row必须包含在样式为.containner或者container-fluid的容器中。其中.container-fluid的宽度为100%，使用此样式的目的在于为了在网络系统中能够更好的进行排列。 列column必须包含在行row中，而其他的标签元素只能包含在列column中。其中，行使用.row的形式，而列使用类似于.col-lg-*的样式。其中*代表的意思是在1~12之间的一个数字。行中的列样式数组中和不能超过12，超过则另起一行。 通过设置行row和列column的padding与margin属性来抵消和增加其之间的间隔。 不同的屏幕大小可能会造成不同的效果，当小于屏幕临界值以后，所有的内容会堆积在一起。 不同屏幕的列中的类前缀是不同的，超小屏幕手机的（768px）的前缀.col-xs-* 小屏幕（平板）的前缀为.col-sm-* ; 中等屏幕的为.col-md-* 大屏幕的是.col-lg-*. 这几个方式的前缀我们可以同时使用，按照屏幕的大小进行自适应，但是当屏幕过小，都不满足的时候，就会堆在一起。 列偏移 在页面布局时经常使用css的margin来控制元素的偏移量，网格系统中有一个快速实现列偏移的方法，其class为：col-xs-offset-*、col-sm-offset-*、col-md-offset-*、col-lg-offset-*，其中，*代表向右偏移的列数。注意：偏移列和显示列的总和不能超过12.这种的偏移量是固定的，必要的时候我们只能使用margin进行来完成。 2.5列排序 使用col-X-push-*与col-X-pull-*几个类，可以改变列的左右浮动方向。其中col-X-push-*是向右进行浮动，而col-X-pull-*是向左浮动，*代表的是浮动的列等分。 注意：这种排序，只要满足所有加起来为12就行，不需要将空出来的计算在里面，不同于列偏移。并且会存在覆盖的现象。 2.6列嵌套 在一个行中在从新div一个表。 例如代码如下: .rowfirst{height:50px} .nestedrow{background-color:#CFC7D8; border :1px solid #0000FF; height: 25px;} div class=containter div class=row div class=col-md-6 rowfirst div class=row div class=col-md-6 nestedrow内嵌一列/div div class=col-md-6 nestedrow内嵌二列/div /div /div div class=col-md-6 rowfirst第一行（2）.col-md-6/div /div /div 排版 标题 Bootstrap中标题使用h1-h6标签。但是除了使用这几种标签外，HIA另外提供了h1-h6的样式类，从而达到同样的效果。 我们可以在div span label p 等标签中加入class，class中包含的便是h1-h6之间的标签，从而达到同样的效果。 小标题 通过使用small标签来实现小标题。Small标签中的line-height：1，字体的大小h1-h3变为主标题的65%，剩下的变成75%。 段落 Font-size=14px，line-height=1bootstrsap的全局样式，应用于body元素以及body中的所有p标签的元素。 如果想突出显示某一个段落内容，则只需要在p标签中添加class=“lead”即可。 3.3mark标签 Mark标签可以突出标记文字的内容。使用方式：加在字段中mark段落/mark. 3.4del和s标签 使用这两个标签可以在文本中间显示横线，标记为删除和无用文本。 3.5 ins和u标签 可以实现文本下划线的效果。注意：mark标签可以加在ins和u标签中进行进一步的加强说明。 3.6 Strong和b标签 Strong和b标签可以让文本内容加粗。 3.7em和i标签 使用这两个标签可以实现文本内