简介

栅格系统用于通过一系列的行（row）与列（col）组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面介绍一下栅格bootstrap栅格系统的工作原理：

行（row）必须放在.container（固定宽度）或.container-fluid（100%宽度）内，以便为其赋予合适的排列（aligment）和内补（padding）;
通过“行（row）”在水平方向创建一组“列（col）”;
你的内容应当放置在“列（col）”内，并且，只有“列（col）”可以作为行的直接子元素。
类似.row和.col-xs-4这种预定义的类，可以用来快速创建栅格系统布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
通过为“列（col）”设置padding属性，从而创建列与列之间的间隔。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding,也就间接为“行（row）”所包含的“列（col）”抵消掉了padding
负值的margin就是下面的示例为什么是向外突出的原因。在栅格列中内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4。
如果一“行（row）”中包含了的“列（col）”大于12，多余的“列（col）”所在的元素被作为一个整体另外一行排列。

移动端需要的html页面上页头里增加如下代码标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

移动设备上的viewport是设备屏幕上用来显示网页的那部分区域

1.width=device-width //应用程序的宽度和屏幕的宽度是一样的

2.initial-scale=1.0 //应用程序启动时候的缩放尺度（1.0表示不缩放）

媒体查询

*{margin: 0;padding: 0;
}
ul,li{list-style: none;
}
.clearfix{}
.clearfix::after{content: '.';display: block;clear: both;height: 0;overflow: hidden;
}/*超小设备（手机：小于768px）*/
@media(max-width:768px){.col-xs-1{ width: 8.33333333%;}.col-xs-2{ width: 16.66666667%;}.col-xs-3{ width: 25%;}.col-xs-4{ width: 33.33333333%;}.col-xs-5{ width: 41.66666667%;}.col-xs-6{ width: 50%;}.col-xs-7{ width: 58.33333333%;}.col-xs-8{ width: 66.66666667%;}.col-xs-9{ width: 75%;}.col-xs-10{ width: 83.33333333%;}.col-xs-11{ width: 91.66666667%;}.col-xs-12{ width: 100%;}
}/*小型设备 （平板电脑：768px起）0*/
@media(min-width:768px){.col-sm-1{ width: 8.33333333%;}...
}/*中型设备（台式电脑：992px起）*/
@media(min-width:992px){.col-md-1{ width: 8.33333333%;}...
}/*大型设备（台式电脑：1200px起）*/
@media(min-width:1200px){.col-lg-1{ width: 8.33333333%;}...
}
/* 被定义的元素内边距和边框不再会增加它的宽度，不加入的话排版会有问题 */
.container *,.container{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
.row{margin-right: -10px;margin-left: -10px;
}.row>div>p{background: #ccc;
}
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,
.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-13,
.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12
{ float: left; padding: 1px 10px;}

bootstrap栅格系统布局原理相关推荐

Bootstrap栅格系统扩展五格
Bootstrap栅格系统布局的魅力是毋容置疑的,但是再好的东西也会有不完美的地方,比如当布局上需要水平排列5列平分宽度时,bootstrap就显得比较尴尬了,这时候就需要老司机按照它的命名风格自定义 ...
Bootstrap栅格系统（布局）
栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...
Bootstrap、栅格系统布局
一.Bootstrap Bootstrap是一个基于HTML.CSS和JavaScript语言编写的框架,具有简单.灵活的特性,拥有样式库.组件和插件. · Bootstrap常用来开发响应式布局和移 ...
如何使用BOOTSTRAP 栅格系统？
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [如何使用BOO ...
bootstrap栅格系统
bootstrap栅格系统原理: 1.栅格系统的"行(row)"包含在布局容器内 .container类或.container-fluid类中,以便于为其赋予合适的排列(al ...
关于栅格系统布局的介绍
文章目录定义等宽多行设置一列的宽度设宽时注意事项可变宽度内容对准合并两行(`前提是两个适应屏幕宽度的宽度之和为12`) 排序偏移套料定义栅格系统英文为"grid sys ...
Bootstrap 栅格系统
Bootstrap 栅格系统目录 1.简介 2.栅格选项 3.列偏移 4.嵌套列 5.列排序 1.简介 Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewp ...
bootstrap栅格系统自定义列
bootstrap栅格系统默认是12列,有时候需自定义列数,比如显示5列简单做法:原理就是找到控制列的样式覆盖它,这里以中等屏幕示例: <span style="font-size: ...
Bootstrap 栅格系统理解与总结
Bootstrap 栅格系统学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快 ...

bootstrap栅格系统布局原理

简介

媒体查询

bootstrap栅格系统布局原理相关推荐

最新文章

热门文章