Bootstrap4

Bootstrap4是什么？

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

 

Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML 、 CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大

量 mixin 、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构

建整个 app 。

 

Bootstrap4 安装使用

 

我们可以通过以下两种方式来安装 Bootstrap4 ：

 

使用 Bootstrap 4 CDN 。

 

从官网 https://v4.bootcss.com/ 下载 Bootstrap 4 。

 

网格系统（栅格系统） 

 

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（ viewport ）尺寸的增加，

系统会自动分为最多 12 列。

 

我们也可以根据自己的需要，定义列数：

 

网格类

Bootstrap 4 网格系统有以下 5 个类 :

 

.col- 针对所有设备

 

.col-sm- 平板 - 屏幕宽度等于或大于 576px

 

.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px

 

.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px

 

.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px

 

网格系统规则

网格每一行需要放在设置了 .container ( 固定宽度 ) 或 .container-fluid ( 全屏宽度 ) 类的容器中，这样就可以自动设置一些外边距与内边距。

 

使用行来创建水平的列组。

 

内容需要放置在列中，并且只有列可以是行的直接子节点。

 

预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。

 

列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。

 

网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用三个 .col-sm-4 来设置。

 

Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox （弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的

网格列将自动设置为 等宽与等高列

 

网格的基本结构

 

第一个例子：创建一行 ( <div class="row"> ) 。然后， 添加需要的列 ( .col-*-* 类中设置 ) 。 第一个星号 (*) 表示响应的设备 :

sm, md, lg 或 xl, 第二个星号 (*) 表示一个数字 , 同一行的数字相加为 12 。

 

第二个例子 : 不在每个 col 上添加数字，让 bootstrap 自动处理布局

 

同一行的每个列宽度相等： 两个 "col" ，每个就为 50% 的宽度。三个 "col" 每个就为 33.33% 的宽度，四个 "col" 每个就为

25% 的宽度，以此类推。同样，你可以使用 .col-sm|md|lg|xl 来设置列的响应规则。

 

等宽列，自动布局

创建相等宽度的列，Bootstrap 自动布局

等宽响应式列

在平板及更大屏幕上创建等宽度的响应式列。

 

在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版：

 

 

不等宽响应式列

在平板及更大屏幕上创建不等宽度的响应式列。

 

在移动设备上，即屏幕宽度小于 576px 时，两个列将会上下堆叠排版 :

 

平板和桌面端

 

在桌面设备的显示器上两个列的宽度各占 50% ，如果在平板端则左边的宽度为 25% ，右边的宽度为 75%, 在移动手机等小型

设备上会堆叠显示。

 

 

平板、桌面、大桌面显示器、超大桌面显示器

在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为： 25%/75% 、 50%/50% 、 33.33%/66.67% 、

16.67/83.33%, 在移动手机等小型设备上会堆叠显示。

偏移列

偏移列通过 offset-*-* 类来设置。第一个星号 ( * ) 可以是 sm 、 md 、 lg 、 xl ，表示屏幕设备类型，第二个星号 ( * ) 可以是 1 到 11

的数字。

 

为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（ margin ）增加 * 列，其中 * 范围

是从 1 到 11 。

 

例如： .offset-md-4 是把 .col-md-4 往右移了四列格

 

文字排版

Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5 。

 

默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif 。

 

此外，所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px) 。

 

<h1> - <h6>

Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式

Display 标题类

Bootstrap 还提供了四个 Display 类来控制标题的样式 : .display-1, .display-2, .display-3, .display-4

 

<small>

<pre>

 

更多排版类

文本颜色

背景颜色

 

表格

 

图像形状 

Jumbotron

Jumbotron （超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。

 

提示 : Jumbotron 里头可以放一些 HTML 标签，也可以是 Bootstrap 的元素。

 

在 <div> 元素 中添加 .jumbotron 类来创建 jumbotron

全屏幕的 Jumbotron

 

信息提示框

 

可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class ="close" 和 data-dismiss="alert" 类来

设置提示框的关闭操作

 

 

 

关闭提示框

 

可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class ="close" 和 data

dismiss="alert" 类来设置提示框的关闭操作。

 

提示 : × ( × ) 是 HTML 实体字符，来表示关闭操作，而不是字母 "x" 。

提示框动画

.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果：

Bootstrap4 按钮

Bootstrap 4 提供了不同样式的按钮。

按钮类可用于 <a>, <button>, 或 <input> 元素上:

按钮设置边框

不同大小的按钮

块级按钮

  通过添加 .btn-block 类可以设置块级按钮

 

激活和禁用的按钮

 

按钮可设置为激活或者禁止点击的状态

 

.active 类可以设置按钮是可用的， disabled 属性可以设置按钮是不可点击的。 注意 <a> 元素不支持 disabled 属性，你

可以通过添加 .disabled 类来禁止链接的点击。

Bootstrap4 按钮组

Bootstrap 4 中允许我们将按钮放在同一行上。

 

可以在 <div> 元素上添加 .btn-group 类来创建按钮组。

 

提示 : 我们可以使用 .btn-group-lg|sm 类来设置按钮组的大小。

可以使用 .btn-group-vertical 类来创建垂直的按钮组

拆分按钮下拉菜单

内嵌按钮组及下拉菜单

垂直按钮组及下拉菜单

Bootstrap4 徽章（Badges）

徽章（ Badges ）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类

( 如 .badge-secondary ) 添加到 <span> 元素上即可。 徽章可以根据父元素的大小的变化而变化 :

各种颜色类型的徽章

药丸形状徽章

 

徽章插入到元素内

 

 

Bootstrap4 进度条

进度条可以显示用户任务的完成过程。

 

创建一个基本的进度条的步骤如下：

 

添加一个带有 .progress 类的 <div> 。

 

接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div> 。

 

添加一个带有百分比表示的宽度的 style 属性，例如 style="width:70%" 表示进度条在 70% 的位置。

 

 

进度条高度

 

进度条高度默认为 16px 。我们可以使用 CSS 的 height 属性来修改他

 

进度条高度

 

进度条高度默认为 16px 。我们可以使用 CSS 的 height 属性来修改他

进度条标签

 

可以在进度条内添加文本，如进度的百分比：

不同颜色的进度条

 

默认情况下进度条为蓝色， Bootstrap4 还提供了以下颜色的进度条:

条纹的进度条

 

使用 .progress-bar-striped 类来设置条纹进度条

 

动画进度条

 

使用 .progress-bar-animated 类可以为进度条添加动画

混合色彩进度条

 

进度条可以设置多种颜色

 

Bootstrap4 分页

网页开发过程，如果碰到内容过多，一般都会做分页处理。

 

Bootstrap 4 可以很简单的实现分页效果。

 

要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类

 

当前页页码状态 .active 类来高亮显示

 

不可点击的分页链接 .disabled

 

分页显示大小

 

     .pagination-lg 类设置大字体的分页条目， .

 

      .pagination-sm 类设置小字体的分页条目

面包屑导航

.breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航