第十一章前端开发-bootstrap

11.5.0 bootstrap

11.5.1 bootstrap的介绍和响应式

http://book.luffycity.com/python-book/95-bootstrap/951-bootstrapde-jie-shao.html

CSS3 的 @media 查询

定义和使用

使用 @media 查询，你可以针对不同的屏幕大小定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试来说是一个极大的便利。

CSS 语法：

@media mediaType and|not|only (media feature) {

     /*CSS-Code;*/

}

媒体类型（mediaType ）类型有很多，在这里不一一列出来了，只列出了常用的几个。

all 用于所有设备 print 用于打印机和打印预览 screen 用于电脑屏幕，平板电脑，智能手机等。（最常用） speech 应用于屏幕阅读器等发声设备媒体功能（media feature）媒体功能也有很多，以下列出常用的几个

值描述

max-width:定义输出设备中的页面最大可见区域宽度 min-width:定义输出设备中的页面最小可见区域宽度

准备工作1：设置Meta标签

首先我们在使用 @media 的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

这段代码的几个参数解释：

width = device-width：宽度等于当前设备的宽度 initial-scale：初始的缩放比例（默认设置为1.0，即代表不缩放）

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）其他还有很多参数呢，想要了解的童鞋可以直接去百度

准备工作2：加载兼容文件JS

因为IE8既不支持HTML5也不支持CSS3 @media ，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

<!--[if lt IE 9]>

　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

　　<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]-->

准备工作3：设置IE渲染方式默认为最高(可选) 现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8 为了防止这种情况，我们需要下面这段代码来让IE的文档渲染模式永远都是最新的

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

这段代码后面加了一个chrome=1，如果用户的电脑里安装了 chrome，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，如果没有安装，就显示IE最新的渲染模式。

代码实例

1、如果文档宽度小于等于 300px 则应用花括号内的样式——修改body的背景颜色(background-color):

@media screen and (max-width: 300px) {

    body {

        background-color:lightblue;

    }

}

从上面的代码可以看出，媒体类型是屏幕（screen），使用一个 and 连接后面的媒体功能，这里写的是 max-width:300px ，也就是说，当屏幕的最大宽度小于等于 300px 的时候，就应用花括号里面的样式。

2、当文档宽度大于等于300px 的时候显示的样式

@media screen and (min-width: 300px){

    body {

        background-color:lightblue;

    }

}

注意，这里的媒体功能使用的是 min-width 而不是 max-width，我已经标红高亮显示出来了。

3、当文档宽度大于等于 300px 并且小于等于500px （ width >=300 && width <=500）的时候显示的样式

@media screen and (min-width:300px) and (max-width:500px) {

    /* CSS 代码 */

}

注意，这里使用了两个 and ，用来连接两个媒体功能，一个用于限制最小，一个用于限制最大。

※ 需要注意的地方（划重点）

1、通过灵活应用以上技巧，开发出一个响应式页面，还不是近在咫尺的感觉。

2、不要被 min-width 和 max-width 所迷惑，初学者很容易误以为 min-width 的意思是小于xxx的时候才应用，然而这就陷入误区了，其实它的意思是：当设置了 min-width 的时候，文档的宽度如果小于设置的值，就不会应用这个区块里的CSS样式，所以 min-width 它才能实现大于等于设置的值得时候，才会应用区块里的CSS样式，max-width 也是如此。

3、或者这样想想，先看代码，这句代码的意思是宽度大于等于 300px ，小于等于 500px （ width >=300 && width <=500）的时候应用样式

@media screen and (min-width:300px) and (max-width:500px) {

    /* CSS 代码 */

}

min-width:300px 的作用是当文档宽度不小于 300px 的时候就应用 {} 里的CSS代码块，即大于等于 300px，max-width:500px 的作用是当文档宽度不大于 500px 的时候就应用{} 里的CSS代码块，即小于等于 500px

11.5.2 bootstrap的下载和基本使用

一. 使用Bootstrap第一步，先将生成环境的Bootstrap下载下来。然后将下载，然后引入到自己建好的当前目录中 https://www.bootcss.com/

二、点到起步中的基本模板

将看到的整段代码复制粘贴到建好的index.html文件中

官网明确表示：

使用此给出的这份超级简单的HTML模板，或者修改这些实例。我们强烈建议你对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->

    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

    <!--[if lt IE 9]>

      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

  </body>

</html>

本来是想在这里写Book，但发现官网上的语言组织的更牛逼！接下来就跟着我一起进入Bootstrap的css样式、组件、插件。

11.5.2 bootstrap的全局css样式

https://v3.bootcss.com/css/

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。

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

<div class="container">

  ...

</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">

  ...

</div>

实例：官方网址：https://v3.bootcss.com/css/#type

1.容器

.container 固定宽度容器

.container-fluid 100%宽度的容器

2.栅格系统

.row

.col-lg- .col-md- .col-sm- .col-xs

3.文本颜色

text-muted

text-primary

text-success

text-danger

text-waring

text-info

4.背景颜色

bg-primary

bg-success

...

5.按钮

btn btn-default

btn btn-link

btn btn-success

btn btn-primary

...

6.对齐

.text-left

.text-right

.text-center

.text-justify 两端对齐 适应于英文

7.图片设置

.img-rounded

.img-circle

.img-thumbnail

8.三角符号

.caret

9.关闭按钮

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

10.显示和隐藏内容

show/hidden

11.快速浮动

.pull-left 左浮动

.pull-right 右浮动

   清除浮动

.clearfix

12.内容块居中

.center-block

13.表格

给table添加.table的类。默认给表格赋予少量的内补和边框

.table-striped 条纹状的

.table-bordered 带边框

.table-hover 状态类

14.表单form

每组表单控件都会添加一个.form-group类中，表单控件通常都由.form-control

11.5.3 bootstrap的栅格系统

原理:使用了@media 查询

https://v3.bootcss.com/css/#overview-container

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列**

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

<div class="row">

  <div class="col-md-4">.col-md-4</div>

  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>

</div>

<div class="row">

  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>

  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>

</div>

<div class="row">

  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>

</div>

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> -->

    <link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->

    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

    <!--[if lt IE 9]>

      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <div class="container">

        <div class="col-sm-6 col-md-4 col-lg-3 ">

          <div class="thumbnail" style="height: 366px"></div>

        </div>

         <div class="col-sm-6 col-md-4 col-lg-3 ">

            <div class="thumbnail" style="height: 366px"></div>

        </div>

        <div class="col-sm-6 col-md-4 col-lg-3 ">

          <div class="thumbnail" style="height: 366px"></div>

        </div>

        <div class="col-sm-6 col-md-4 col-lg-3 ">

          <div class="thumbnail" style="height: 366px"></div>

        </div>

    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

    <!-- <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> -->

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> -->

  </body>

</html>

11.5.4 bookbootstraptrap的组件

网址
```
https://v3.bootcss.com/components/
```
分类在bootstrap中凡是看到data-xxx的属性，表示与js有很大关联
注意：
- 不要随意修改bootstrap固有的类名，如果想修改样式，自己添加对应的类名，小心选择器的优先级，实在不行： !important; 行内样式
- 字体图标注意：不要和其它的组件混合使用，嵌套一个span标签，加上对应字体图标的类名

11.5.5 JavaScript 插件

网址
```
https://v3.bootcss.com/javascript/
```
分类