文章目录

BootStrap概述（一）
- 1、什么是BootStrap
- 2、BootStrap的好处是什么
- 3、搭建BootStrap的开发环境
- 4、BootStrap布局容器
- 5、栅格系统
- - 5.1、BootStrap的栅格系统
  - 5.2、BootStrap的栅格系统入门案例
  - 5.3、BootStrap的栅格系统的特点及深入分析
  - 5.4、BootStrap的栅格系统屏幕尺寸的设置及多个屏幕共同设置尺寸
  - 5.5、栅格系统的列偏移

BootStrap概述（一）

1、什么是BootStrap

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

图解：

2、BootStrap的好处是什么

传统的使用HTML+CSS+JavaScript开发的网站兼容性差，当使用移动设备打开对应的网页的时候，会因为分辨率的不同，导致出现显示效果极其的差。比如下图：

当把它进行缩放的时候：

可以发现，一些部件都叠在一起了。导致了显示的效果极差。而BootStrap的出现就解决了这样的问题，因为它实现了响应式的布局效果：

大大改善了开发的效率和降低了维护成本。上面使用的BootStrap改写上面的黑马商城，使用电脑打开：

下面缩放到ipad的大小和手机的大小来看：

1、ipad的大小：

2、手机的大小：

所以其中的好处我们是可以看得见的。

总结好处就是：

让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
响应式布局，使得开发成本和维护成本都降低

3、搭建BootStrap的开发环境

下载BootStrap（https://v3.bootcss.com/）

导入相关文件(bootstrap.js、bootstrap.css、jquery.js即可)

导入完成以后，我们以后使用BootStrap都是使用基本模板了。

基本模板

<!DOCTYPE html>
<html lang="zh-CN">
<head><!--以下三个原标记不要动其位置，因为这三个标记直接影响到bootstrap的使用--><meta charset="utf-8"><!--设置html的显示字符集--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--表示使用ie的最新渲染模式--><meta name="viewport" content="width=device-width, initial-scale=4,user-scalable=no"><!-- <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />--><!--这段代码的意思是，让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。一都主流的web app都是这么设置的，它的作用其实是故意舍弃viewport，不缩放页面--><!--这个标记很重要，分开讲：viewport：指的是浏览器网页的视口，width=device-width：表示移动设备生效initial-scale：页面的缩放比例，通常默认为1，数值从1~5，即100%到500%的比例。分正负数除了这上面的标记属性，还有三个属性：1、minimum-scale：最小允许的缩放比例2、maximum-scale：最大的允许缩放比例3、user-scalable:no ,不允许缩放，一旦设置，则上面的1，2，属性失效。--><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>使用BootStrap的基本模板</title><!-- Bootstrap --><link href="../css/bootstrap.css" rel="stylesheet"><script src="../js/jquery-1.12.0.js"></script><script src="../js/bootstrap.min.js"></script><!-- 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>--><!--这个script在开发的时候一般
放在head里面，但是发布的时候一般放在body的最后面，因为这样子，可以先加载body的内容而后才加载脚本文件。-->
</body>
</html>

4、BootStrap布局容器

BootStrap的使用必须需要至少一个布局容器，才能为页面进行封装和方便的样式控制。它相当于一个画板。

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

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

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

容器类样式	描述
contianer	类用于固定宽度并支持响应式布局的容器。【特点：居中，两端留白】实际例子`<div class="container">....</div>`
container-fluid	类用于100%的宽度，占据全部的视口（viewport）。`<div class="container-fluid">..</div>`

实战例子

打开idea，新建一个文档，代码如下：

<!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=4,user-scalable=no"><title>container</title><!-- Bootstrap --><link href="../css/bootstrap.min.css" rel="stylesheet"><script src="../js/jquery-1.12.0.min.js"></script><script src="../js/bootstrap.min.js"></script></head><body>  <div class="container" style="border: 1px double red">11111</div>     </body></html>

实际效果，1111居中且两端留白：

下面使用container-fluid：

<div class="container-fluid" style="border:1px double red">11111</div>

实际效果，100% 宽度，占据全部视口（viewport）的容器：

更加详细的用法我们可以查询帮助手册：官网——全局CSS样式——布局容器

5、栅格系统

5.1、BootStrap的栅格系统

打开全局CSS样式——栅格系统，介绍如下：

一个效果图：

5.2、BootStrap的栅格系统入门案例

代码

<div class="container-fluid" style="border: 1px double red"><div class="row"><!--第一个行，自动分割为12列--><div class="col-lg-4">第一个元素占据4列</div><div class="col-lg-4">第二个元素占据4列</div><div class="col-lg-4">第三个元素占据4列</div></div>
</div>

可以看见，一行12列，放了三个div，每个div占据了4列。

下面，我们对上面的视口缩放：

可以发现，一旦缩放，由于对应的屏幕尺寸的显示方式没有设置，导致我们的每个元素独自显示一行。

5.3、BootStrap的栅格系统的特点及深入分析

栅格特点

行（row）必须包含在container（固定宽度）或container-fluid中。
行使用的样式是：.row，列使用的样式是：.col，元素应当放在列（column）内。
基本的书写方式同表格form，先定义容器-行-列-元素

栅格的参数

col-屏幕尺寸-占用列数

例子

<div class="container-fluid" style="border: 1px double red"><div class="row"><!--第一个行，自动分割为12列--><div class="col-lg-4" style="border: 1px solid red">111111</div><div class="col-lg-4" style="border: 1px solid red">222222</div><div class="col-lg-4" style="border: 1px solid red">333333</div></div></div>

下面我们来探究当列的和大于小于等于12时，会发生点什么？

1、当元素占据的列小于12

  <div class="row"><!--第一个行，自动分割为12列--><div class="col-lg-4" style="border: 1px solid red">111111</div><div class="col-lg-4" style="border: 1px solid red">222222</div><div class="col-lg-1" style="border: 1px solid red">333333</div></div>

2、当元素占据的列的总和等于12

 <div class="row"><!--第一个行，自动分割为12列--><div class="col-lg-4" style="border: 1px solid red">111111</div><div class="col-lg-4" style="border: 1px solid red">222222</div><div class="col-lg-1" style="border: 1px solid red">333333</div></div>

所以我们可以看到如果列元素的占据列的总和小于等于12，仍然排在一行上。

3、当元素占据的列的总和大于12

<div class="row"><!--第一个行，自动分割为12列--><div class="col-lg-4" style="border: 1px solid red">111111</div><div class="col-lg-4" style="border: 1px solid red">222222</div><div class="col-lg-8" style="border: 1px solid red">333333</div></div>

效果：大于12的列元素会单独占据新的一行。

5.4、BootStrap的栅格系统屏幕尺寸的设置及多个屏幕共同设置尺寸

栅格的参数

屏幕尺寸的大小

large ，lg 大屏幕，大桌面显示器
medium ，md，中等屏幕，桌面显示器
small，sm，小屏幕，平板
x small xs，超小屏幕，手机

关于xs：col-xs-* have been dropped in Bootstrap 4 in favor of col-*。BootStrap4里面，使用xs的正确姿势：如col-4；
关于xl：超大屏幕 x large；
关于xxl：更加大的屏幕

当设置的屏幕尺寸大的时候，这个时候通过缩放，导致每个元素单独成一行：

 <div class="row"><!--第一个行，自动分割为12列--><div class="col-lg-4" style="border: 1px solid red">111111</div><div class="col-lg-4" style="border: 1px solid red">222222</div><div class="col-lg-4" style="border: 1px solid red">333333</div></div>

原来的尺寸：

现在缩放：

当设置的屏幕尺寸为sm的时候，这个时候，会有一个继承属性，使得当屏幕尺寸大于sm的时候，能够正常显示一行：

<div class="row"><!--第一个行，自动分割为12列--><div class="col-sm-4" style="border: 1px solid red">111111</div><div class="col-sm-4" style="border: 1px solid red">222222</div><div class="col-sm-4" style="border: 1px solid red">333333</div></div>

放大：

放大到lg的：

但是缩小到xm还是会变：

这种情况我们可以使用：（我这里使用了两个行来对比）

<div class="row"><!--第一个行，自动分割为12列--><div class="col-xs-4 col-sm-4 " style="border: 1px solid red">111111</div><div class="col-xs-4 col-sm-4 " style="border: 1px solid red">222222</div><div class="col-xs-4 col-sm-4 " style="border: 1px solid red">333333</div></div><div class="row"><div class="col-xs-6 col-md-4" style="border: 1px solid red">.col-xs-6 .col-md-4</div><div class="col-xs-6 col-md-4" style="border: 1px solid red">.col-xs-6 .col-md-4</div><div class="col-xs-6 col-md-4" style="border: 1px solid red">.col-xs-6 .col-md-4</div></div>

可以看出，设置了ms的，缩放到ms可以显示一行。而下面的只设置了sm的无法显示一行。这就是向上可以继承。下则需要设置。

5.5、栅格系统的列偏移

上面的设置偏移是通过设置一个空的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=4,user-scalable=no"><title>列偏移</title><!-- Bootstrap --><link href="../css/bootstrap.min.css" rel="stylesheet"><script src="../js/jquery-1.12.0.min.js"></script><script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="row" style="border: 1px solid red"><div class="col-md-4" style="border: 1px solid red">.col-md-4</div><div class="col-md-4 col-md-offset-4" style="border: 1px solid red">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row"><div class="col-md-3 col-md-offset-3" style="border: 1px solid red">.col-md-3 .col-md-offset-3</div><div class="col-md-3 col-md-offset-3" style="border: 1px solid red">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row"><div class="col-md-6 col-md-offset-3" style="border: 1px solid red">.col-md-6 .col-md-offset-3</div>
</div>
</body>
</html>