一、响应式开发原理

1.1 响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

设备	划分情况
手机	小于768的为超小屏幕
平板	768~992之间的为小屏设备
桌面显示器	992~1200的中等屏幕
大桌面显示器	大于1200的宽屏设备

1.2 响应式布局容器

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。

父容器	版心的尺寸划分
超小屏幕（手机，小于 768px）	宽度设置为100%
小屏幕（平板，大于等于 768px）	宽度设置为 750px
中等屏幕（桌面显示器，大于等于 992px）	宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）	宽度设置为 1170px

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

二、 bootstrap的介绍

在这里插入图片描述

2.1Bootstrap简介

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和
JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

2.2bootstrap优点

标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈，不断的更新迭代
让开发更简单，提高了开发的效率

2.3bootstrap布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 或者.container-fluid 容器，它提供了两个作此用处的类。

.container

     <div class="container">
      ...
     </div>

响应式布局的容器固定宽度
大屏 ( >=1200px) 宽度定为 1170px
中屏 ( >=992px) 宽度定为 970px
小屏 ( >=768px) 宽度定为 750px
超小屏 (100%)

例1：把 container 的左右外边距（margin-right、margin-left）交由浏览器决定。

.container {
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
}

例2：在不同的媒体查询阈值范围内都为 container 设置了max-width，用以匹配网格系统。

   @media (min-width: 768px) {
         .container {
            width: 750px;
          }

.container-fluid

流式布局容器百分百宽度
占据全部视口（viewport）的容器。

2.4bootstrap栅格系统

基本的网格结构

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

栅格系统的使用
注意：引入相关的样式

/*  Bootstrap 核心样式  */
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

例1：如果孩子的分数相加等于12，孩子占满整个 container 的宽度

 <div class="row">
            <div class="col-lg-6">6</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">2</div>
</div>

例2： 如果孩子的分数相加小于12，孩子不会占满整个 container 的宽度

<div class="row">
            <div class="col-lg-6">6</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-1">1</div>
        </div>

例3：如果孩子的分数相加大于12，多余的那个孩子会跑到另外一行显示

<div class="row">
            <div class="col-lg-6">6</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-3">3</div>
        </div>

效果展示：
在这里插入图片描述

栅格系统列嵌套
例：

<div class="container">
        <div class="row">
            <div class="col-md-4">
                <!-- 我们嵌套列表最好加一个行 row 可以取消父元素的padding值 而且高度自动和父级一样高-->
                <div class="row in">
                    <div class="col-md-4">内嵌列表1</div>
                    <div class="col-md-8">内嵌列表2</div>
                </div>
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>

效果展示：
在这里插入图片描述

Bootstrap 按钮

<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>