时间:2021-05-28
源码解读Bootstrap网格系统
工作原理
数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。如:
.container的实现源码:
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}@media (min-width: 768px) { .container { width: 750px; }}@media (min-width: 992px) { .container { width: 970px; }}@media (min-width: 1200px) { .container { width: 1170px; }}在行中可以添加列,但列数之和不能超过平分的总列数,比如12。如:
列的实现源码如下:
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;}1、具体内容应当放置在列容器之内,而且只有列才可以作为行容器的直接子元素。
2、通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响。
.row的实现源码:
列组合
列组合就是更改数字来合并,不过列总和数不能超12,有点类似于表格的colspan属性。实现列组合方式非常简单,只涉及两个CSS两个特性:浮动与宽度百分比。以xs为例,源码如下:
.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 { float: left;}.col-xs-12 { width: 100%;}.col-xs-11 { width: 91.66666667%;}.col-xs-10 { width: 83.33333333%;}.col-xs-9 { width: 75%;}.col-xs-8 { width: 66.66666667%;}.col-xs-7 { width: 58.33333333%;}.col-xs-6 { width: 50%;}.col-xs-5 { width: 41.66666667%;}.col-xs-4 { width: 33.33333333%;}.col-xs-3 { width: 25%;}.col-xs-2 { width: 16.66666667%;}.col-xs-1 { width: 8.33333333%;}列偏移
例如,在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。
实现原理非常简单,就是利用十二分之一的margin-left,有多少个offset,就有多少个margin-left。以xs为例,实现源码如下:
列排序
可以使用类名“col-xs-pull-数字”,“col-xs-push-数字”来实现这个效果。
Bootstrap仅通过设置left和right来实现定位效果。以xs为例,实现源码如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
bootstrap框架中的网格系统就是将容器平分成12份,在使用的时候可以根据实际情况重新编译LESS/SASS源码来修改12这个数值。bootstrap框架的
源码解读Bootstrap下拉菜单基本用法在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件。因为Boo
在上篇文章给大家介绍了BootStrap3学习笔记(一)之网格系统对于标题,Bootstrap已经修改了h1--h6的样式,如果需要副标题,还可以在其中使用sm
Bootstrap提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。网格系统类似一个表格,有
源码解读Bootstrap按钮按钮组按钮组和下拉菜单组件一样,需要依赖于bootstrap.js。使用“btn-group”的容器,把多个按钮放到这个容器中。例