bootstrap框架栅格系统使用
-
使用的前端框架 bootstrap框架
Bootstrap是一个响应式的框架
我们在使用的时候主要使用的是它的网格系统,
1.bootstrap布局
布局容器:.container(用于固定宽度并支持响应式布局的容器)
.container-fluid(用于100%宽度,占据全部视口的容器)
@media (min-width: 1200px) {
/*pc大屏幕*/
}
@media (min-width: 992px) and (max-width: 1199px) {
/*pc中屏幕*/
}
@media (min-width: 768px) and (max-width: 991px) {
/*平板端*/
}
@media (max-width: 767px) {
/*手机端*/
}
2.偏移
.col-md-offset-3 (实际上是给当前元素增加左边距margin-left,使元素向右偏移n个column)
3.排序
push 是推过去 pull是拉回来 如果以左右为列的话 从左到右用push 从右往左用pull
通过使用.col-md-push-*(推) 和 .col-md-pull-*(拉)类可以改变列(column)顺序
4.文本对应类
文本对齐类
<p class=”text-left”></p>
<p class=”text-center”></p>
<p class=”text-right”></p>
<p class=”text-justify”></p>
<p class=”text-nowrap”></p>
文本大小写
<p class=”text-lowercase”></p>
<p class=”text-uppercase”></p>
<p class=”text-capitalize”></p>