java小白也能快速学会Bootstrap（简单易理解）

Bootstrap框架:

备注：该技术博客的内容是我根据技术视频整理与总结的（并非复制粘贴）。取自黑马JavaWeb课程。

1.概述：

Bootstrap是基于HTML,CSS,JavaScrpt，提供了优雅的HTML和CSS规范。说白了，Bootstrap就是一个前端框架。那么什么是框架呢？框架则是一个半成品软件，开发人员可以借助框架简化编码，使得web开发更加快捷灵活。(简而言之就是通过给标签添加属性类class来改变标签的样式)。

我们之前学了许多javase基础性知识，我们学的javaweb也是在学web开发的基础性知识。将来我们通过javaweb知识和javase知识就可以做出来非常丰富的网站的BS架构程序。但是我们通过这些基础性知识制作过程中，代码的编码量非常庞大，效率特别低！非常麻烦。

正因如此，出现了一些大神程序员将基础性知识封装起来，让开发变得更简单，更高效！封装起来之后提供了一些jar包，我们就可以借助这些jar包快速开发出项目。而Bootstrap就是我们所说的框架。

2.好处：

第一个好处是，该框架定义了许多CSS样式和JS的插件，我们开发人员可以使用这些样式和插件，以至于得到丰富的页面效果。

第二个好处是，响应式布局：同一套页面可以兼容不同分辨率的设备。 让每一种设备可以得到良好的体验，该布局方式可以根据分辨率不同自动调整布局和大小。比如说苹果手机的官网首页就是响应式布局方式。

当我们使用PC端（电脑） 访问苹果官网如下图：

在这里插入图片描述

当我们使用手机端访问苹果官网如下图：

在这里插入图片描述
我们可以明显看到，它只需要一套页面却可以兼容不同分辨率的设备，非常方便。这就是我们说的
响应式布局。

3.学习Bootstrap前的准备

第一步， 我们需要先去下载Bootstrap。 Bootstrap下载地址
点击链接进去之后点击中间的蓝色按钮。
在这里插入图片描述
然后继续点击按钮 下载Bootstrap

在这里插入图片描述
最后点击 用于生产环境的Bootstrap， 安装即可完成下载。

在这里插入图片描述
第二步，下载完成之后我们需要将下载好文件中的三个文件夹复制到idea的项目中。

在这里插入图片描述

第三步， 创建html页面，引入必要的资源文件。
但是到底哪些资源是必要的呢？该引入哪些资源呢？我们可以看Bootstrap官网文档。
路线是 进入官网–>点击导航栏的 “起步”–>在页面中找到 “基本模块”。

在这里插入图片描述
然后将代码全部复制到idea中的HTML页面上。

在这里插入图片描述
然后将上图中 link标签改成下图所示：

在这里插入图片描述
继续将 body标签中的最后一个script标签改成下图所示：

在这里插入图片描述
最后一步，向项目js目录下面中导入下如文件：

并且将body标签中第一个script标签改成如下图所示：

在这里插入图片描述
总结： 一共引入三个文件。一个css文件，两个js文件。最后运行一下就能打印出
" 你好，世界！"。这样，bootstrap最基本的入门案例就写完了！写完的这个页面我们要好好保存，将来任何页面都要在这个页面上改造。所以说这个页面就是基本的模板，代码如下，可以直接复制！

<!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="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>

4.栅格系统

我们之前说过，响应式布局可以让同一套页面可以兼容不同分辨率的设备。那么它是怎么实现的呢？在bootstrap中实现响应式布局依赖于 栅格系统，何为栅格系统？该系统相当于：将一行平均12个格子，可以去指定元素占几个格子。

步骤：
1.定义容器：分为两类（container：两边留白， container-fluid：每一种设备都是100%宽度）
2.定义行：样式是row
3.定义元素。指定该元素在不同的设备上，所占格子的数目。样式：col-设备代号-格子数目。

设备代号如下图所示：

在这里插入图片描述
栅格系统注意事项：

一行总如果格子数目超过12，那么超出的部分自动换行。下面代码可以看出格子数目是13，所以两头小猪将会换行展示。

<body>
    <!--定义容器-->
    <div class="container-fluid">
        <!--定义行-->
        <div class="row">
            <!--定义元素
            <div class="col-md-12 inner">小猪</div>
            <div class="col-md-1 inner">小猪</div>
        </div>
    </div>
</body>

运行结果：

在这里插入图片描述
2.栅格类属性可以向上兼容。栅格类适用于比屏幕宽度大于或等于分界点大小的设备。

3.栅格类属性不可以向下兼容。如果真实的设备的宽度小于设置栅格类属性的设备代码的最小值，默认会一个元素占满一整行。
代码如下：

<!--定义容器-->
    <div class="container">
        <!--定义行-->
        <div class="row"
            <div class="col-md-4 inner">小猪</div>
            <div class="col-md-4 inner">小猪</div>
            <div class="col-md-4 inner">小猪</div>
        </div>
    </div>

运行结果：

在这里插入图片描述

5.插入CSS样式

注意：这部分的知识，我们作为JAVA程序员，只需要能查看文档（Bootstrap官网可以查看），使用CV大法达到我们想要的效果就可以了，不需要刨根问底，因为我们并不需要专门去写CSS样式。

一、全局CSS样式：

1. 按钮： class=“btn btn-default” (default可以通过修改展现出不同的样式)
我们创建几个按钮标签，举个例子。

<body>
    <button type="submit">Button</button>
    <input type="button" value="Input">
    <input type="submit" value="Submit">
</body>

效果如下：

在这里插入图片描述

当我们向按钮标签添加类：

<button class="btn btn-success" type="submit">Button</button>
<input class="btn btn-info" type="button" value="Input">
<input class="btn btn-warning" type="submit" value="Submit">

运行结果如下：

在这里插入图片描述

我们会发现通过添加了几个类就可以把变得花里胡哨。使用上面的类可以快速创建一个带有预定义样式的按钮。

2.图片：
当我们再页面中写入一张图片，我们会发现图片的宽度和高度都是固定的，并不会随着网页窗口的变化而发生变化。并不是我们所说的响应式布局。 通过为图片添加 .img-responsive 类可以让图片支持响应式布局。 其实质是为图片设置了（max-width: 100%;、 height: auto; 和 display: block;）属性，从而让图片在其父元素中更好的缩放。

<img src="..." class="img-responsive"> //加入这个属性后，图片会永远会适应页面大小。

我们话可以通过为标签添加以下相应的类，可以让图片呈现不同的形状。

<img src="..."  class="img-rounded">
<img src="..."  class="img-circle">
<img src="..."  class="img-thumbnail">

代码效果如下：

在这里插入图片描述

3.表格
根据上面所学的，我们可以知道向标签中添加类就可以改变样式，同样表格也可以通过添加类让表格呈现不同的样式。先来一套最基本的表格代码：

<body>
    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>001</td>
            <td>小猪</td>
            <td>20</td>
        </tr>
        <tr>
            <td>002</td>
            <td>小猪</td>
            <td>20</td>
        </tr>
        <tr>
            <td>003</td>
            <td>小猪</td>
            <td>20</td>
        </tr>
    </table>
</body>

显示效果如下：
在这里插入图片描述
当我们向table标签中插入类，它就会发生天翻地覆的变化，这就是框架的魅力：真的是太方便了！

    <table class="table table-bordered">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>001</td>
            <td>小猪</td>
            <td>20</td>
        </tr>
        <tr>
            <td>002</td>
            <td>小猪</td>
            <td>20</td>
        </tr>
        <tr>
            <td>003</td>
            <td>小猪</td>
            <td>20</td>
        </tr>
    </table>

表格就变成下面这个样子：

在这里插入图片描述

5.总结：

Bootstrap框架不仅定义了许多类属性去改变标签的样式，还有许多插件或组件，例如：轮播图，导航条等… 在官方网站列举的非常清楚，我们可以通过查看官网资料查询使用，官网自然比我写的要好得多，例如还有轮播图，导航条，分页条等许多组件插件我们就不再意义列举了，想要什么样式官网都写的明明白白。作为java程序员我们要懂得取舍，毕竟我们对前端的知识不会过多的使用，所以未必一定要过于深究内部原理，会用就行。