Bootstrap栅格系统&媒体查询
2024-08-31 05:32:28
bootstrap中几乎所有元素的盒子模型为IE下的盒模型,通俗点说就是box-sizing设置成了:border-box.
栅格系统
媒体查询
媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。
断点 768px 992px 1200px container:两边padding：15px row：两边负margin 15px col列：两边padding：15px
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.container-fluid { //将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row:before,
.row:after{display: table;content: " ";} //清除浮动 包住里面的 col
@media (min-width: 768px) { .container { width: 750px; } }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }
@media (min-width: 768px) {
.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 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
...
...
...
}
最新文章
- OpenVPN使用用户名/密码验证方式
- node不懂的方法的使用
- Oracle11g 32位安装步骤
- 比较setImmediate(func),setTimeout(func),process.nextTick(func)
- 检查Oracle 中死事务的语句
- python安装和环境变量的配置
- 拦截器(Interceptor)中的invocation.invoke()
- mysql的事务和数据库锁的关系
- C# 实现Bezier曲线（vs2008）
- DFP算法（转载）
- [Laravel] 12 - WEB API : cache implement
- 【c++基础】从json文件提取数据
- [leetcode]128. Longest Consecutive Sequence最长连续序列
- 一句话木马：ASP篇
- booststrap select2的应用总结
- 【BZOJ】4558: [JLoi2016]方
- 关于ionic中几个问题
- codeforce GYM 100741 A Queries
- DLL的静态调用和动态调用
- 线程的sleep方法