[b]Bootstrap css--Bootstrap 网格系统[/b]
Bootstrap css就是别人做好的一些类,你只要把相关的类引用到你的HTML元素中即可达到想要的效果(别人做好的效果)
[b]Bootstrap 网格系统[/b]
就是将网页进行分块处理,如一行分多少个格(分3列),每个元素占用多少个格(如占用2列)这样的概念。
1.Bootstrap 3 是移动设备优先的
2.Bootstrap将网页分成12列,
3.超小设备(手机,小于 768px)(Class 前缀:col-xs-)
4.小型设备(平板电脑,768px 起)(Class 前缀:col-sm-)
5.中型设备(台式电脑,992px 起)(Class 前缀:col-md-)
6.大型设备(大台式电脑,1200px 起)(Class 前缀:col-lg-)
[b]响应式的列重置[/b](就是按检测到的屏幕大小选择占用不同的列数)
[b]偏移列[/b]
1.col-xs=* 类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果。
2.col-xs/sm/md/lg-offset-
[b]嵌套列[/b]
1.为了在内容中嵌套默认的网格,请添加一个新的 .row
2.里面的列也是按12份进行分列
[b]列排序[/b]
1.col-xs/sm/md/lg-push-(往右推,以最左边为参考点)
2.col-xs/sm/md/lg-pull-(往左拉,以最左边为参考点)
3. 范围是从 1 到 11
参考原文:[url]http://www.runoob.com/try/try2.php?filename=bootstrap3-gridsys-nestingcolumns[/url]
Bootstrap css就是别人做好的一些类,你只要把相关的类引用到你的HTML元素中即可达到想要的效果(别人做好的效果)
[b]Bootstrap 网格系统[/b]
就是将网页进行分块处理,如一行分多少个格(分3列),每个元素占用多少个格(如占用2列)这样的概念。
1.Bootstrap 3 是移动设备优先的
2.Bootstrap将网页分成12列,
3.超小设备(手机,小于 768px)(Class 前缀:col-xs-)
4.小型设备(平板电脑,768px 起)(Class 前缀:col-sm-)
5.中型设备(台式电脑,992px 起)(Class 前缀:col-md-)
6.大型设备(大台式电脑,1200px 起)(Class 前缀:col-lg-)
[b]响应式的列重置[/b](就是按检测到的屏幕大小选择占用不同的列数)
<div class="col-xs-6 col-sm-3"> //如果是超小设备占用6列,如果是小型设备占用3列
[b]偏移列[/b]
1.col-xs=* 类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果。
2.col-xs/sm/md/lg-offset-
<div class="col-xs-6 col-md-offset-3">
[b]嵌套列[/b]
1.为了在内容中嵌套默认的网格,请添加一个新的 .row
2.里面的列也是按12份进行分列
<div class="row">
<div class="col-md-3">
<h4>第一列</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<div class="col-md-9" ">
<div class="row">
<div class="col-md-6">
<p>
Consectetur art party Tonx culpa semiotics. Pinterest
</p>
</div>
<div class="col-md-6">
<p>
sed do eiusmod tempor incididunt ut labore et dolore magna
</p>
</div>
</div>
</div>
</div>
[b]列排序[/b]
1.col-xs/sm/md/lg-push-(往右推,以最左边为参考点)
2.col-xs/sm/md/lg-pull-(往左拉,以最左边为参考点)
3. 范围是从 1 到 11
<div class="col-md-push-8">
我在左边
</div>
<div class="col-md-pull-4">
我在右边
</div>
参考原文:[url]http://www.runoob.com/try/try2.php?filename=bootstrap3-gridsys-nestingcolumns[/url]