BootStrap详解

1. bootstrap的安装和使用

官网： https://getbootstrap.com/

中文网： https://www.bootcss.com/

菜鸟驿站教程网： https://www.runoob.com/bootstrap/bootstrap-intro.html

1.1 bootstrap的介绍

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

它特别适合没有设计师团队，甚至说没有前端团队，可以快速的开发出一个网页。

bootstrap的js代码是依赖于jQuery的，也就意味着你在使用Bootstrap动态效果的时候，一定要导入jQuery

1.2 下载与使用

1.下载： https://v3.bootcss.com/getting-started/#download （下载用于生产环境的Bootstrap就行）

2.下载完成后

拷贝css文件夹中的bootstrap.min.css到项目文件的css文件中

拷贝js文件夹中的bootstrap.min.js到项目文件的js文件中

拷贝bootstrap-3.4.1-dist文件夹中的fonts文件夹到css文件中

（其余文件可以不用）

3.下载jquery.js

https://jquery.com/download/

Download the compressed, production jQuery 3.6.0 将该文件的内容打开，然后ctrl+s保存到本地

4.在html中将bootstrap和jquery导入使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!-- 使用X-UA-Compatible兼容IE浏览器 -->

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

    <!-- 有关视口的设置 -->

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

    <title>首页</title>

    <!-- 载入bootstrap的css -->

    <link rel="stylesheet" href="./css/bootstrap.min.css">

</head>

<body>

</body>

<!-- 载入jquery -->

<script src="js/jquery.js"></script>

<!-- 载入bootstrap的js插件之前先引jquery -->

<script src="js/bootstrap.min.js"></script>

</html>

2.布局容器和栅格网格系统

2.1 布局容器

1、.container 类

用于固定宽度并支持响应式布局的容器。（即页面两边留白，支持不同分辨率的响应布局）

<div class="container">

  ...

</div>

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

<div class="container-fluid">

  ...

</div>

2.2 栅格网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

下面就介绍一下 Bootstrap 栅格系统的工作原理：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

总结：先确定布局容器的格式是.container类,还是.container-fluid类---》然后在添加行（.row类）————》行类容器里只能包含列容器（.col-md（屏幕的种类）-列的数值，占几列）列的数值总和不能超过12.

屏幕种类有xs(超小屏幕手机 (<768px))、sm（ (<768px) 小屏幕平板 (≥768px)）、md（中等屏幕桌面显示器 (≥992px)）、lg（大屏幕大桌面显示器 (≥1200px)）

    <div class="container">

        <div class="row">

            <div class="col-md-4 col-sm-4" style="background-color: gray;">4</div>

            <div class="col-md-8 col-sm-8" style="background-color: blanchedalmond;">8</div>

        </div>

    </div>

2.1 列组合

即：一行的列不能超过12，最多分成12份！超出部分会自动换到下一行。

2.2 列偏移

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

2.3 列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。使列容器左右浮动，*代表列移动的列组合数，往前pull，往后push。

2.4 列嵌套

列里面还可以添加.row来进行嵌套，该行还可以分成12列！！这样就形成了嵌套。

2.5 设置适应各种分辨率的屏幕

3.常见样式

3.1 排版

3.1.1 标题

bootstrap对h1-h6的标题标签效果进行了调整

并且提供了对应的类名.h1-.h6，为非标题元素设置样式

也提供了副标题small标签和.small类

3.1.2 段落

通过.lead 来突出强调内容，其作用就是增大字体字号，加粗文本，而且对行高和margin也做出了相应的处理

3.1.3 强调

bootstrap定义了一套强调类名，这些强调类是通过颜色来表示强调，具体说明如下：

.textmuted :提示，使用浅灰色

.text-primary:主要，使用蓝色

.text-success:成功，使用浅绿色

.text-info:通知信息，使用浅蓝色

.text-warming：警告，使用黄色

.text-danger:危险，使用褐色

3.1.4 对齐效果

bootstrap定义了四个类名来控制文本的对齐风格：

.text-left:左对齐

.text-right：右对齐

.text-center：居中对齐

.text-justify：两端对齐

3.1.5 列表

去点列表---》class='list-unstyled'

内联列表（水平列表）---》class='list-inline'

3.1.6 表格

3.1.6.1 表格样式

Bootstrap为表格提供了一种基础样式和4种附加样式以及一个响应式的表格。在使用bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格。

基础样式

1）.table：基础表格

附加样式

1）.table-striped:斑马线表格

2）.table-bordered:带边框的表格

3）.table-hover:鼠标悬停高亮的表格

4）.table-condensed:紧凑型表格，单元格没有内距或内距较其他表格较小

3.1.6.2 tr、th、td样式

提供了五种不同的类名，每种类名控制了行的不同背景颜色

.active:将悬停的颜色应用在行或者单元格上

.success：表示成功的操作

.info：表示信息变化的操作

.warning：表示警告的操作

.danger:表示危险的操作

3.2 表单

表单的主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页和用户更好的沟通。表单中的常见的元素主要包括：文本输入框、下拉选择框、单选择框、复选按钮框、文本域和按钮等。

3.2.1 表单控件

.form-control .input-lg(框较大) .input-sm（框较小）

3.2.2 复选框

垂直显示，在每个div上加checkbox类，如下

<div class="row">

  <div class="col-md-3">

       <div class="checkbox">

           <label for=""><input type="checkbox" name="hobby" id="">跳舞</label>

   </div>

  <div class="checkbox">

     <label for=""><input type="checkbox" name="hobby" id="">唱歌</label>

   </div>

  </div>

</div>

水平显示 .checkbox-inline类

          <div class="row">

            <div class="col-md-3">

                <label for="" class="checkbox-inline"><input type="checkbox">跳舞</label>

                <label for="" class="checkbox-inline"><input type="checkbox">唱歌</label>

            </div>

          </div>

3.2.3 单选框

和复选框一样，只不过是.radio和.radio-inline 类

3.2.4 按钮

使用button实现

1）基础样式 btn类

附加样式：btn-primary、btn-info、btn-danger、btn-warning、btn-success、btn-link、btn-default

2）多标签支持：使用a、span、div等标签制作按钮

          <a href="#" class="btn btn-info">a标签按钮</a>

          <span class="btn btn-info">span标签按钮</span>

3)按钮大小

使用.btn-lg、.btn-sm、.btn-xs 就可以获得不同尺寸的按钮大小

4）按钮禁用

在标签中添加disabled=‘disabled’属性---把按钮完全禁用掉

在元素标签中添加.disabled的类，表示按钮样式禁用

3.2.5 表单布局

在父标签form里添加role=‘form’和class=‘form-horizontal’（用于水平表单，用的比较多）
把标签和控件放在一个带有class=‘form-group’的div标签中，这是获取最佳间距所必须的
向所有文本元素input、textarea、select等中添加claa=‘form-control’

3.3 缩略图

需要借助栅格网格系统，格式如下：

<div class="row">

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

    <div class="thumbnail">

      <img src="..." alt="...">

      <div class="caption">

        <h3>Thumbnail label</h3>

        <p>...</p>

        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

      </div>

    </div>

  </div>

</div>

效果如下：

3.4 面板

面板不需要放在栅格表格系统内，具体格式如下：

    <div class="panel panel-warning"> 添加一个panel类和panel的颜色样式

        <div class="panel-heading text-center"> 面板的头部heading

            明星合集

        </div>

        <div class="panel-body"> 面板的身体body，body里面可以嵌套很多其他东西，比如缩略图、表格等

            。。。。

        </div>

      </div>

4. bootstrap插件

导航栏、模态框、下拉菜单

详见：https://www.runoob.com/bootstrap/bootstrap-intro.html