Bootstrap的用法

一、介绍

Bootstrap，来自 Twitter，是目前比较受欢迎的前端框框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。集合CSS和HTML，使用了最新的浏览器技术，为快速WEB开发提供了一套前端工具包，包括布局、网格、表格、按钮、表单、导航、提示等等。使用Bootstrap可以构建出非常优雅的前端界面.

二、特点

• 移动设备优先:自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式。
• 浏览器支持：所有的主浏览器都支持Bootstrap。
• 容易上手：具备HTML和CSS的基础知识，就可以学习。
• 响应式设计：Bootstrap的响应式CSS能够自适应于台式机，平板电脑和手机。
• 开源。

三、bootstrap的使用

1、bootstrap适配手机端做得很好，所以一般会加入<meta name="viewport" content="width=device-width, initial-scale=1"> 以配置适应移动设备。
2、要用bootstrap的样式就必须引入bootstrap.css：<link rel="stylesheet" href="css/bootstrap.css" />
3、要特别注意的是使用bootstrap要先引入jQuery.js再引入bootstrap.js，因为bootstrap.js是基于jQuery.js的：

<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap.js"></script>

四、bootstrap栅格系统

Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当的扩展到12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
bootstrap的栅格系统根据不同屏幕大小设置了一些对应的class属性：
lg：>=1200>=
md：>=992>=
sm：>=768>=
xs：<=768

五、偏移与排序

1、偏移：距离左边偏移多少格子，最大是12格，并且只能从左往右走。
eg：col-**-offset-4 向右列偏移4 最多12
2、列排序：
col-**- push-10 往后推10个格子
col-**- pull-2 往前推2个格子

偏移与排序区别

1、偏移只能是向右偏移，排序可以是往左也可以是往右。
2、有多个元素，用偏移去做，如果一行排不下了会跳到下一行，而排序不会。

<div class="container">
            <div class="row">
                <div class="col-lg-4 col-lg-offset-4 col-md-offset-6 col-md-2">col-lg-4</div>
            </div>
            <div class="row">
                <div class="col-lg-2 col-lg-push-10">col-lg-2</div>
                <div class="col-lg-10 col-lg-pull-2">col-lg-10</div>
            </div>
            <div class="row">
                <div class="col-lg-2 col-lg-offset-10">col-lg-2</div>
                <div class="col-lg-2 col-lg-push-10">col-lg-2</div>
            </div>
            <div class="row">
                <div class="col-lg-4">col-lg-4</div>
                <div class="col-lg-4 col-lg-offset-5">col-lg-4</div>
            </div>
            <div class="row">
                <div class="col-lg-4">col-lg-4</div>
                <div class="col-lg-4 col-lg-push-5">col-lg-4</div>
            </div>
        </div>

六、容器

bootstrap的容器分为两个：container和container-fluid。
1、container-fluid 流体布局：宽度自动设置为其父容器宽度的100%。并且相对于其父容器居中。
2、container 固定布局：bootstrap内容根据屏幕的宽度的变化通过媒体查询帮我们设置了响应式的宽度变化。
各屏幕对应的容器宽度如下：
—–1170 当分辨率1200以上
——970 当分辨率992以上 》992 《1170
——750 当分辨率是768以上 >768 <992
——-auto 当分辨率小于768 <768
注意:建议不要有容器的嵌套.