Bootstrap前端开发框架

一、基础知识

1、是基于HTML、css和JavaScript的，使得web开发更加快捷

2、框架：一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式、组件和插件，要按照所规定的某种规范进行开发

3、优点：

①标准化的html+css编码规范
②提供了一套简洁、直观、强悍的组件
③有直接的生态圈，不断更新迭代
④直接复制粘贴，让开发更简单

4、下载

网址：https://v3.bootcss.com 点击bootstrap3中文文档 点击下载即可

二、使用步骤

1、创建文件夹结构，再将下载好的bootstrap文件引入

2、创建html骨架结构

需添加的内容：

①要求当前网页使用IE浏览器最高版本发内核来渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge">
②解决ie9以下浏览器对html5新增标签的不识别，并导致css不起作用的问题
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
③解决ie9以下浏览器对css3 Media Query的不识别
 <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

3、引入相关样式文件

将bootstrap中的需要用到的css文件引入到html中

4、书写内容

①bootstrap是通过类来控制样式，可以通过给类名就可以使用相同样式

如：<button type="button" class="btn btn-success">（成功）Success</button>这是一个按钮的代码
      <div class="btn btn-success">登录</div>给了相同类名以后同样能使用样式

②想要在这个基础上增加我们自己想要的效果，就在类名后面增加我们自己的类名即可(注意权重问题)

如：修改这个样式<div class="btn btn-success">登录</div>
      只需在后面加类名即可-<div class="btn btn-success login">登录</div>
      然后修改 .login { }

三、布局容器

bootstrap需要为页面内容和栅格系统包裹一个 .containe 容器，因为Bootstrap预先定义好了这个类，所以必须是这个名称叫container 它提供了两个作此用处的类

1、container类 （就不需要媒体查询了）

响应式布局的容器，固定宽度
超小屏幕（手机，小于768px）：设置宽度为100%
小屏设备（平板，大于等于768px）：设置宽度为750px
中等屏幕（桌面显示器，大于等于992px）：设置宽度为970px
宽屏设备（大桌面显示器，大于等于1200px）：设置宽度为1170px

2、container-fluid 类

流式布局容器 百分百宽度
占据全部视口（viewport ）的容器
适合单独做移动端开发

四、栅格系统（grid systems）

1、基础知识

①将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局

②Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，统一划分为（最多）12列

③Bootstrap已经包含normalize.css（css初始化）所以就不必再引入normalize.css

2、栅格系统选项参数

①通过一系列的行（row）和列的组合来创建页面布局

②行（row）必须放到container布局容器里

③要实现列的平均划分 需要给列添加类前缀

xs-extra small：超小   sm-small：小  md-medium：中等  lg-large：大
col-xs：超小      col-sm：小      col-md：中等      col-lg：大

④前缀名加元素所占份数组成一个类名

如：    <div class="container">
        <div class="row">
            <div class="col-lg-3">1</div>
            <div class="col-lg-3">2</div>
            <div class="col-lg-3">3</div>
            <div class="col-lg-3">4</div>
        </div>
    </div>

共有4列，每一列占3份，刚好12份

⑤以上面例题为基础，如果：

列（column）等于12，则刚好占满整个 container 的宽度
列（column）小于12，则占不满整个 container 的宽度，会有空白
列（column）大于12，多余的”列“所在的元素将被作为一个整体另起一行排列

⑥每一列有默认15px的padding

⑦可以同时为一列指定多个设备的类名，以便划分不同份数
如：class=”col-md-4 col-sm-6“

3、列嵌套

①列嵌套最好加一个行 row 这样可以取消父元素的padding值（不然第一个内嵌元素前面会有留白） 而且高度自动和父级一样高

②嵌套元素类名命名和父级一样

4、列偏移

格式：.col-md-offset-份数

5、列排序

①简单理解：一列有左右两个盒子，将其交换位置（份数就相当于距离）
               将左盒子推过去，将右盒子拉过来，实现位置的交换

②.col-md-push-份数   push 推
   .col-md-pull-份数   pull 拉

6、响应式工具（在bootstrap网站中都能查到）

.hiden-xs 在超小屏下隐藏 
.hidden-sm 在小屏下隐藏
.hidden-md 在中屏下隐藏
.hidden-lg 在大屏下隐藏
同理 visibile显示

五、小技巧

1、在布局是常遇到两个元素之间需要间隔，但必须占满12份时，我们可以利用padding值挤压内部元素，制造间隔

2、多浏览、使用该网站的元素样式，手熟以后可以更加方便快捷的开发