Bootstrap入门（二）栅格

时间：2016-12-08 23:46:40 阅读：196 评论：0 收藏：0 [点我收藏+]

Bootstrap入门（二）栅格 Bootstrap入门（二）栅格全局CSS样式--栅格先引入本地的CSS文件（根据自己的文件夹，有不同的引入地址，我是放在一个新建的名为css的文件夹中） container 容器，栅格系统是依赖容器存在的

...

Bootstrap 提供的栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。参数：超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面显示器 (≥992px) 大屏幕大桌面显示器 (≥1200px) 栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列C 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C .container 最大宽度 None （自动） 750px 970px 1170px 类前缀 .col-xs- .col-sm- .col-md- .col-lg- 代码操作为方便查看栅格效果，为栅格添加一组样式复制代码复制代码先创建一个class为container的div

...

然后添加13个小栅格复制代码

.col-md-1

复制代码第13个自动换行，确实一行最多12份，效果：再添加两组div 复制代码

col-md-3

复制代码发现少了的，是不会有任何显示的，效果：添加其中一个栅格的内容量，发现自动换行，效果：添加两组带偏移效果的div（“col-md-offset-X”属性 X为将分成12份后，偏移多少的位置）复制代码　　　　　　　

col-md-4 col-md-offset-1

col-md-4 col-md-offset-4

复制代码效果：嵌套使用复制代码

col-sm-9

col-xs-8

col-xs-4

复制代码效果：列排序（“col-md-push- ”、“col-md-pull- ”属性改变列的排序，“col-md-push- X” 向后移动X个单位，“col-md-pull- X”向前移动X个单位）复制代码

col-md-9

col-md-3

col-md-9 col-md-push-3

col-md-3 col-md-pull-9

复制代码效果：此文章转载-转载自：http://www.cnblogs.com/hnnydxgjj/p/5847646.html

Bootstrap入门（二）栅格

标签：屏幕不同的排序平板开始页面布局 blog 参数全局

原文地址：http://www.cnblogs.com/nield-bky/p/6147181.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行