bootstrap基础布局解读.docxVIP

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标签使用这两个标签可以实现文本内容变成斜体。3.8文本对齐方式Bootstrap中提供了四种文本对齐的方式，分别如下：Text-left：左对齐Text-center：居中对齐Text-right：右对齐Text-justify：两端对齐这四