boostrape 栅栏总结
来源:互联网 发布:crm数据分析师招聘 编辑:程序博客网 时间:2024/05/17 07:10
栅栏格针对不同的设备设置了不同的样式,在比如,在同一个元素上使用了两个不同的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列上;
- boostrape 栅栏总结
- 2017.9.4 栅栏 失败总结
- 栅栏
- 同步工具类--闭锁、信号量、栅栏的总结
- 同步工具类--闭锁、信号量、栅栏的总结
- 栅栏效应
- 栅栏CyclicBarrier
- 栅栏实例
- 栅栏密码
- 栅栏加密
- 栅栏解密
- 栅栏布局
- 栅栏染色
- 穿越栅栏
- [SCOI2005]栅栏
- [SCOI2005]栅栏
- [SCOI2005]栅栏
- 栅栏密码
- @Controller's and AOP Proxying
- Count the string
- 基于arm和ds18b20的系统
- HDU 3172 Virtual Friends
- Bootstrap 准备工作
- boostrape 栅栏总结
- xcode7-beta版本真机调试
- ZOJ 3813 Pretty Poem (暴力)
- Reverse Integer
- 音频播放
- 两分钟读懂《成大事者不纠结》——读书笔记
- 小鱼收纳app V1.0.6 安卓版
- “TCP:三次握手”分析——以一个简单的“服务器”和“客户端”为例
- minecraft花生壳怎样开服