bootstrap框架栅格系统使用

[align=justify]使用的前端框架 bootstrap框架[/align]

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