16-响应式布局（bootstrap框架）

响应式布局（bootstrap框架）

前言

• 响应式开发原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

设备划分	设计尺寸	尺寸
超小屏幕（手机）	100%	<768px
小屏幕设备（平板）	750px	768px<width<992px
中屏幕（卓面显示器）	970px	992px<width<1200px
宽屏设备（大桌面显示）	1120px	>1200px

• 响应式布局容器：响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。（布局容器的宽度是固定的）

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

bootstrap框架

1、快速开发工具

• bootstrap前端开发框架：bootstrap来自Twitter(推特)，是目前最受欢迎的前端框架。bootstrap是基于html、css、javascript的，它简洁灵活。使得web开发更加快速

• 中文网址：http://bootstrapt.css&&.com/

• 框架：顾名思义就是一套架构，它有一套比较完整的网页功能来解决方案，而且控制权再框架本身，有预制样式，组件，插件。使用者需要按照框架所规定的某种规范进行开发。

优点

• 标准化的HTML和css编码规范

• 提供了一套简洁、直观的组件，样式，插件等

• 有自己的生态圈，不断的更新迭代

• 让开发更简单，提高了开发的效率

2、基本使用

• 去官网下载相关文件（js,css，font),在页面中引入相关的文件

• 因为bootstrap框架是基于Jquery开发的，所以引入bootstrap.js之前，先引入jquery.js

3、布局容器

• Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。我们提供了两个作此用处的类。

• 注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

• .container 类用于固定宽度并支持响应式布局的容器。

• .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。适用于单独制作移动端开发。

4、bootstrap栅格系统

• 栅格系统：栅格系统是通过一系列的行（row）与列（column）的组合来创建页面的布局，设置的内容就可以放在这些创建好的布局中

• 实现原理：通过定义容器的大小，平分为12份。调整内外边距。结合媒体查询

使用步骤

• 一行数据（row）必须包含在 .container或.container-fluid中，以便为其赋予合适的对齐方式和内边距

• 使用行在水平方向创建一组列

• 具体内容放在列内，列可以作为行的直接子元素内置的一大堆样式，可以使用col-xs-4（占4列宽度）的样式来快速创建栅格

• 通过设置padding从而创建列之间的间隙，让后面第一列和最后一列设置负值margin来抵消掉 padding的影响

• 栅格系统中指定1到12的值来表示其跨越的范围

（1）列组合

• 列组合就是通过更改数字来合并列，类似表格里的colspan（列合并）。不过使用起来非常简单。

  <div class="container">
      //第一行
      <div class="row">
          <div class="col-md-1">colmd-1</div>
          <div class="col-md-1">colmd-1</div>
          <div class="col-md-1">colmd-1</div>
          <div class="col-md-1">colmd-1</div>
          <div class="col-md-1">colmd-1</div>
          <div class="col-md-1">colmd-1</div>
          <div class="col-md-1">colmd-1</div>
          <div class="col-md-1">colmd-1</div>
          <div class="col-md-1">colmd-1</div>
          <div class="col-md-1">colmd-1</div>
          <div class="col-md-1">colmd-1</div>
          <div class="col-md-1">colmd-1</div>
      </div>
      
      //第二行
      <div class="row">
          <div class="col-md-3">colmd-3</div>
          <div class="col-md-3">colmd-3</div>
          <div class="col-md-3">colmd-3</div>
          <div class="col-md-3">colmd-3</div>
      </div>
      
      //第三行
      <div class="row">
          <div class="col-md-8">colmd-8</div>
          <div class="col-md-4">colmd-4</div>
      </div>
      
      //第四行
      <div class="row">
             <div class="col-md-6">colmd-6</div>
             <div class="col-md-6">colmd-6</div>
      </div>
  </div>

（2）列偏移

• 有时候并不想让两个相邻的列挨在一起，这时候可利用栅格系统的列偏移（offset）功能实现，而不必再定义margin值。对于中等屏幕，使用.col-md-offset-*形式的样式就可以将列偏移到右侧比如：.col-md-offset-2，的意思是将元素向右移动2个列的宽度

<div class="container">
    //第一行
    <div class="row">
        <div class="col-md-4">col-md4</div>
        //第二列，偏移4个
        <div class="col-md-4 col-md-offset-4">col-md-4</div>
    </div>
    //第二行
    <div class="row">
        <div class="col-md-4">col-md4</div>
        <div class="col-md-4 col-md-offset-2">col-md-4</div>
    </div>
</div>
​

（3） 列嵌套

• 列嵌套：删格系统内置的栅格系统内容将再次嵌套。简单理解就是对一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列的.col-sm-2等等元素存到以及有了的-col-sm-7里

• 列嵌套最好加一个行（row)这样可以取消父元素的padding值，而且高度和父级一样高

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-7"></div>
                <div class="col-md-5"></div>
            </div>
        </div>
        <div class="col-md-4"></div>
    </div>
</div>

（4）列排序

• 列排序就是改变列的方向，也就是改变左右浮动，并设置浮动的距离。在栅格系统里，可以通过.col-mdpush-和.col-md-pull-来实现这一目的

• push:推动/pull:拉

  <div class="container">
      //第一行
      <div class="row">
          <div class="col-md-3">col-md3</div>
          <div class="col-md-9">col-md9</div>
      </div>
      //第二行
      <div class="row">
          <div class="col-md-3 col-mdpush-9">col-md-3</div>
          <div class="col-md-9 col-mdpull-3">col-md-9</div>
      </div>
  </div>
  ​

  • 默认情况下，col-md-9在左边，col-md-3在右边。如果要互换位置，需要将col-md-9列向右移动3个列的距离，也就是推3个列的offset，样式用col-md-push-3；而col-md-3则需要向左移动，也就是拉9个offset，样式用col-md-pull-9

• 注意：bootstrap4.0以上版本你已经废弃以上办法，改为order-（权重），默认值是0

5、响应式布局

 

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"> </div>
        <div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"></div>
        <div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"></div>
        <div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"></div>
        <div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"></div>
        <div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"></div>
    </div>
</div>

• 为了加快移动设备友好的开发，利用媒体查询功能，并使用这些工具类可以针对不同的移动设备展示或隐藏页面内容

  • .hidden-xs: 超小屏幕隐藏

  • .hidden-sm：小屏幕隐藏

  • .hidden-md：中等屏幕隐藏

  • .hidden-lg：大屏幕隐藏

样式、组件、插件

• 都是通过类名来引用

小图标的注意事项

• 图标类不能和其他组件直接联合使用

• 不能在同一个元素上与其他类同存在

• 创建一个嵌套的span元素，并将图标应用到这个 span上

• 只对内容为空的元素起作用

• 对引入的图标位置有规定

• 图标字体全部位于../fonts/目录内，相对于预编译版CSS文件的应该是同级目录

js插件的引入方式

• 在前面章节曾介绍过，在HTML中引入bootstrap.js文件或bootstrap.min.js文件即可使用Bootstrap的JavaScript插件。Bootstrap提供了12种JavaScript插件，引入bootstrap.js文件就意味着这12种插件都引入到页面中了，随便哪个都可以使用。还有一种引入方式，就是单个引入JavaScript插件。在官网下载Bootstrap的时候如果选择源码下载，里面会有一个js文件夹，里面有单个的JavaScript插件文件，针对实际情况可以用到哪个引入哪个。