外文网站设计,知名的crm管理系统,如何获取热搜关键词,线上培训机构有哪些本文纯属自己研究所写笔记#xff0c;如果有错误还请多多指教提出 版心(container) 版心#xff1a;class名为.container的容器#xff0c;其版心的宽度在各个屏幕设备下是不一样的值#xff0c;版心两边就是留白。 各尺寸下版心宽度如下表#xff1a; 屏幕设备版心宽度ma… 本文纯属自己研究所写笔记如果有错误还请多多指教提出 版心(container) 版心class名为.container的容器其版心的宽度在各个屏幕设备下是不一样的值版心两边就是留白。 各尺寸下版心宽度如下表 屏幕设备版心宽度max-width:768pxxs 继承父元素宽度即width:100%min-width:768pxsm 750pxmin-width:992pxmd 970pxmin-width:1200pxlg 1170px .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;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
} 不管什么宽度的屏幕版心容器.container总会有左右15px的padding是为了让内容不直接紧贴浏览器边缘的。在一个container中永远不要再嵌套一个container. .container-fluid的版心容器跟小于768px屏幕的版心一样自己没有设置固定宽度值继承其父元素的宽度。 .container容器是用来在响应式宽度上提供宽度约束。响应尺寸的改变其实改变的是container,行row和列column都是基于百分比的所以它们不需要做任何改变。 行row 行class名为.row的容器它为列col一共了空间总共分为12列。row两端会有两个负的15px的margin值为了抵消掉container两侧的padding值。.row在container外使用时无效的。 .row {
margin-right: -15px;
margin-left: -15px;
} 列column 每一列都有两侧15px的padding值。永远不要在.row容器外使用col,否则col是无效的。每列col的padding值给其内容提供了空白使内容不会紧贴在浏览器边缘列之间也不会紧贴在一起。列都是按照百分比分配的(相对于版心宽度的百分比所以版心越宽的每列宽度就越大)。 //五列的宽度
.col-xs-5 {
width: 41.66666667%;
}
// 四列的宽度
.col-xs-4 {
width: 33.33333333%;
}
// 三列的宽度
.col-xs-3 {
width: 25%;
}
// 占两列的宽度
.col-xs-2 {
width: 16.66666667%;
}
// 每列的宽度是版心宽度的8.33333333%
.col-xs-1 {
width: 8.33333333%;
}
...
// 如果是中等屏幕 类名为.col-md-1
// 小屏幕 类名为.col-sm-1
// 大屏幕 类名为.col-lg-1
media (min-width:768px) {
.col-sm-1 {
width: 8.33333333%;
}
.col-sm-2 {
width: 16.66666667%;
}
...
}
media (min-width: 992px) {
.col-md-1 {
width: 8.33333333%;
}
.col-md-2 {
width: 16.66666667%;
}
...
}
media (min-width:1200px) {
.col-lg-1 {
width: 8.33333333%;
}
.col-lg-2 {
width: 16.66666667%;
}
...
} 栅格嵌套 当设置了 container/row/column之后,可以在column内再创建新的栅格系统在column里面直接再添加row就可以了不需要再套container了因为列的两侧padding值 正好可以抵消row的两侧负的margin值列相当于container了。 偏移offsets 偏移offset主要是靠列的margin-left值决定。偏移一列的话就是margin-left:8.3333333%(1/12),偏移两列就是margin-left:16.66666667%(即2/12); .col-xs-offset-0 {
margin-left: 0;
}
.col-xs-offset-1 {
margin-left: 8.33333333%;
}
...
median (min-width:768px) {
.col-sm-offset-0 {
margin-left: 0;
}
.col-sm-offset-1 {
margin-left: 8.33333333%;
}
...
}
... 列的排序Push 和 Pull 在实际应用中更多表现的是呼唤位置和进行排序允许你打破html中div从上到下 从左到右的固定布局。pull 和 push 是通过position的 right 和 left值实现的pull是通过right值pull-1值 right:8.33333333% (1/12); push-1值 left:8.33333333%(1/12); // push 距离左边的距离向右推的列数以最小屏为例
.col-xs-push-2 {
left: 16.66666667%;
}
.col-xs-push-1 {
left: 8.33333333%;
}
.col-xs-push-0 {
left: auto;
}
...
// pull 距离右边的距离向左拉的列数以最小屏为例
.col-xs-pull-2 {
right: 16.66666667%;
}
.col-xs-pull-1 {
right: 8.33333333%;
}
.col-xs-pull-0 {
right: auto;
}
