Bootstrap_栅栏格
在此框架布局中,将容器整个分为了12格,也就是说,一个容器具有12格格子,具有自适应屏幕的特点,
栅栏格的工作方式:
文章图片
栅栏格针对不同的设备设置了不同的样式,在比如,在同一个元素上使用了两个不同的class,那么bootstrap会根据设备屏幕的大小来选择合适的样式使用,如果设备的屏幕大小不在类的范围内,那么它会忽略这两个类;
通常栅栏格的每个样式类依附在.row类的基础之上,而row通常都会在.container类中进行;
通过控制浏览器的宽度可以发现堆叠和水平排列的效果变化,在浏览器的宽度比较小的话,栅栏格就会呈现水平排列效果,而宽度足够的情况下将恢复到堆叠效果;
可以通过使用不同组合的类来达到在不同设备上显示期望的效果;
列的内容不同,可能会影响同列的高度之间出现偏差,可以通过赠加一个容器并为容器添加:clearfix类和visible-xs类;
使用这样一个容器,来达到让与不同高度列旁边的列从视觉上出现与不同高度列占用了相等的高度;
如果不需要在一列中使用所有的栅栏格,可以使用列偏移来达到这个效果:col-md-offset-*,用数字来替代'*'号,可以让列等份的偏移到右侧;
也可以在栅栏格中嵌套栅栏格,在行内的列中在放入行,这样做将列分成了12份,可使用最外围的栅栏格使用方式使用这个嵌套的列;
page-header:加下划线,占一整行,通常作为区域的提示区域;
container:这个类设置了宽度,并且可以让内容居中显示,是为了容器的存在的,自适应高度;
col-xs-*:最小屏幕设备适用;
col-sm-*:平板电脑设备适用;
col-md-*:中等屏幕pc适用;
col-lg-8:大屏幕设备适用,大屏pc;
clearfix+visible-xs:设置一个列用以占位,从案例上来看没有任何样式生效;
col-md-offset-4:将列从当前列向后移动4个列;
col-md-push-4:将列开始的顺序调整到第4列之后;
col-md-pull-4:将列开始的顺序调整到第4列上;
此文为手抄笔记;
原文博客来自:http://www.cnblogs.com/aehyok/p/3404725.html;
【Bootstrap_栅栏格】原文博主:梦想天空
推荐阅读
- 尽力
- 基于|基于 antd 风格的 element-table + pagination 的二次封装
- 《格列佛游记》第二卷第五章概括
- 布格日记——天赋
- 一个健康的APP和健全的人格大体类似
- 视频转换器哪种好用（）
- 【2019.2.10】人品是底牌，人格是底线！
- 【亲测好用】高逼格配色网站推荐
- 学员+3组杨子涓+202002RIA训练营W3D2+苏格拉底提问法
- 七夕情浓（高逼格的单身生活，还得拿钱买单）