1、引入的文件
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件(一般不用引入) --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
2、栅格系统布局
bootstrap把页面设置为12列,通过改变列的数字来进行布局。
<div class="container"><!--或者container-fluid-->
<div class="row"> -- col-xs-4 : 指小于768px的小设备
<div class="col-xs-4">11</div> -- col-sm-4 :指>=768px的设备
<div class="col-xs-4">22</div> -- col-md-4 :指>=992px设备
<div class="col-xs-4">33</div> -- col-lg-4 :值1200px设备
</div>
</div>
这几个写法应用于不同的分辨率,按像素分,像素不够就下一行,而流式布局是按百分比的。
container有一个maigin,自己把这个margin去了或者把container去了也可以。
3、平移列
offset
<div class="row"> <div class="col-xs-4">11</div> <div class="col-xs-4">22</div> <div class="col-xs-offset-2 col-xs-4">33</div>---指33向右平移了两列 </div>
效果如图:会挤到下一列
4、嵌套列
<div class="container"><!--或者container-fluid-->
<div class="row">
<div class="col-xs-8">
<div class="col-xs-2">11</div>
<div class="col-xs-4">22</div>
<div class="col-xs-2">33</div>
</div>
</div>
<div class="row">
<div class="col-xs-8">11</div>
</div>
<div class="row">
<div class="col-xs-4">11</div>
<div class="col-xs-4">22</div>
<div class="col-xs-4">33</div>
</div>
</div>
效果如下:
第一行为什么没有按比例分?
5、列排序
主要是使用col-xs-push-* col-xs-pull-*(*表示0-11的数字)
<div class="row"> <div class="col-xs-4">21</div> <div class="col-xs-8">24</div> </div> <div class="row"> <div class="col-xs-4 col-xs-push-8">21</div> <div class="col-xs-4 col-xs-pull-4">24</div> </div>
6、流式布局
1:列宽使用百分比,而不是像素
2:将row类换成row-fluid
3:其它基本功能与上面的固定布局一样,支持响应式。
4:平分某一个列时,由于流式布局采用的是百分比,所以应该按照6来计算。
<div class="col-xs-8">
<div class="col-xs-6">2</div>
<div class="col-xs-6">2</div>
</div>
<!-- 流式布局--> <div class="container"> <div class="col-xs-6">333</div> <div class="col-xs-6">444</div> </div> <div class="container-fluid"> ---声明container-fluid类,表明内容是流式布局,作用:作为一个包含块,来包含流式内容 <div class="row-fluid"> <div class="col-xs-6 col-md-12">333</div> <div class="col-xs-6 col-md-12">444</div> </div> </div> <div class="row-fluid"> ----没用声明container和container-fluid类,此时为屏幕的宽度 <div class="col-xs-6">333</div> <div class="col-xs-6">444</div> </div>
当屏幕小于768px时,效果如下:
当屏幕大于992px时,效果如下:此时独占一行
row-fluid类(非常重要),决定是否是流布局。然后里面的内容块代码编写与网格系统一致,依然是从col-md-1到col-md-12,分别对应于不同的百分比.
四:响应式设计 简单来说就是支持不同设备(手机,PC)的分辨率(960PX,1366PX,978PX等等)进行自适应响应。
<div class="row"> <div class="col-xs-6 col-md-12">21</div> <div class="col-xs-6 col-md-12">24</div> </div>
当设备>=992px时。效果如下:
上面两种类,分别表示的分辨率不一样。col-md-12此时表示每列独占一行即12列。
http://www.cnblogs.com/jtjds/p/5547261.html