bootstrap框架栅格系统使用

1. 使用的前端框架  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>