Bootstrap

1.Bootstrap 4 页面

1.移动设备优先
在网页的 head 之中添加 viewport meta 标签，

H2.容器类

.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

Bootstrap4 网格系统.
Bootstrap 4 网格系统有以下 5 个类:
1、.col- 针对所有设备
2、.col-sm- 平板 - 屏幕宽度等于或大于 576px
3、.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px
4、.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px
5、.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px

3.偏移列

偏移列通过 offset-- 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。
为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

4.Display 标题类

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

<small>

在 Bootstrap 4 中 HTML 元素用于创建字号更小的颜色更浅的文本:

<mark>

Bootstrap 4 定义 为黄色背景及有一定的内边距:

<abbr>

Bootstrap 4 定义 HTML 元素的样式为显示在文本底部的一条虚线边框.

<blockquote>

对于引用的内容可以在

上添加 .blockquote 类 .

<dl>

自定义列表<code>
可以将一些代码元素放到 code 元素里面

<kbd>
<pre>

5.Bootstrap4 颜色

Bootstrap 4 提供了一些有代表意义的颜色类：
.text-muted,
.text-primary,
.text-success,
.text-info,
.text-warning,
.text-danger,
.text-secondary,
.text-white,
.text-dark and
.text-light

背景颜色

提供背景颜色的类有:
.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。
注意背景颜色不会设置文本的颜色，在一些实例中你需要与 .text-* 类一起使用。

6.Bootstrap4 表格

Bootstrap4 通过 .table 类来设置基础表格的样式
通过添加 .table-striped 类，您将在<tbody> 内的行上看到条纹.
.table-bordered 类可以为表格添加边框
.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）

7.Bootstrap4 图像形状

.rounded 类可以让图片显示圆角效果：
.rounded-circle 类可以设置椭圆形图片
.img-thumbnail 类用于设置图片缩略图(图片有边框):
使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐

响应式图片

图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。
我们可以通过在 标签中添加 .img-fluid 类来设置响应式图片。
.img-fluid 类设置了 max-width: 100%; 、 height: auto; :

8.Bootstrap4 信息提示框

提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现

提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接

关闭提示框
我们可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class=“close” 和 data-dismiss=“alert” 类来设置提示框的关闭操作。

提示框动画

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

9.Bootstrap4 按钮

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

激活和禁用的按钮

按钮可设置为激活或者禁止点击的状态。
.active 类可以设置按钮是可用的， disabled 属性可以设置按钮是不可点击的。 注意 <a>元素不支持 disabled 属性，你可以通过添加 .disabled 类来禁止链接的点击。

10.Bootstrap4 按钮组

Bootstrap 4 中允许我们将按钮放在同一行上。
可以在 <div>元素上添加 .btn-group 类来创建按钮组。
可以使用 .btn-group-vertical 类来创建垂直的按钮组：

11.Bootstrap4 徽章（Badges）

徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 <span> 元素上即可。 徽章可以根据父元素的大小的变化而变化

使用 .badge-pill 类来设置药丸形状徽章:

Bootstrap4 进度条

进度条可以显示用户任务的完成过程。
创建一个基本的进度条的步骤如下：
1.添加一个带有 .progress 类的 <div>。
2.接着，在上面的 <div>内，添加一个带有 class .progress-bar 的空的<div>。
3.添加一个带有百分比表示的宽度的 style 属性，例如 style=“width:70%” 表示进度条在 70% 的位置。

进度条高度

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

进度条标签
可以在进度条内添加文本，如进度的百分比
不同颜色的进度条
默认情况下进度条为蓝色，Bootstrap4 还提供了以下颜色的进度条

可以使用 .progress-bar-striped 类来设置条纹进度条
使用 .progress-bar-animated 类可以为进度条添加动画

Bootstrap4 分页

Bootstrap 4 可以很简单的实现分页效果。
要创建一个基本的分页可以在 <ul>元素上添加 .pagination 类。然后在<li> 元素上添加 .page-item 类

当前页可以使用 .active 类来高亮显示

.disabled 类可以设置分页链接不可点击

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

Bootstrap4 列表组

要创建列表组，可以在 <ul>元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类:
通过添加 .active 类来设置激活状态的列表项
.disabled 类用于设置禁用的列表项

要创建一个链接的列表项，可以将<ul> 替换为 <div> ，<a> 替换 <li>。如果你想鼠标悬停显示灰色背景就添加.list-group-item-action 类

列表项目的颜色可以通过以下列来设置：
.list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark 和 list-group-item-light

Bootstrap4 卡片

头部和底部
.card-header类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式

多种颜色卡片
Bootstrap 4 提供了多种卡片的背景颜色类：
.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。

标题、文本和链接

我们可以在头部元素上使用 .card-title 类来设置卡片的标题 。 .card-text 类用于设置卡片正文的内容。 .card-link 类用于给链接设置颜色。

图片卡片
我们可以给 <img> 添加 .card-img-top（图片在文字上方） 或 .card-img-bottom（图片在文字下方 来设置图片卡片）

如果图片要设置为背景，可以使用 .card-img-overlay 类

Bootstrap4 下拉菜单

Bootstrap4 下拉菜单依赖于 popper.min.js。
下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。

.dropdown 类用来指定一个下拉菜单。
我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle=“dropdown” 属性。

<div>元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类。
我们也可以在<a> 标签中使用

下拉菜单中的分割线
.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线

下拉菜单中的标题
.dropdown-header 类用于在下拉菜单中添加标题：

下拉菜单中的可用项与禁用项
.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。
如果要禁用下拉菜单的选项，可以使用.disabled 类。

下拉菜单的定位
如果我们想让下拉菜单右对齐，可以在元素上的 .dropdown-menu 类后添加 .dropdown-menu-right 类。

下拉菜单弹出方向设置
下拉菜单弹出方向默认为向下，当然我们也可以设置不同的方向。
如果你希望下拉菜单向右弹出，可以在 div 元素上添加 “dropright” 类
如果你希望下拉菜单向左弹出，可以在 div 元素上添加 “dropleft” 类
如果你希望上拉菜单向上弹出，可以在 div 元素上添加 “dropup” 类

Bootstrap4 折叠

.collapse 类用于指定一个折叠元素 (实例中的 <div>); 点击按钮后会在隐藏与显示之间切换。
控制内容的隐藏与显示，需要在 <a> 或 <button>元素上添加 data-toggle=“collapse” 属性。 data-target="#id" 属性是对应折叠的内容 (<div id="demo">)。
注意:<a>元素上你可以使用 href 属性来代替 data-target 属性

默认情况下折叠的内容是隐藏的，你可以添加 .show 类让内容默认显示

使用 data-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。

Bootstrap4 导航

如果你想创建一个简单的水平导航栏，可以在<ul> 元素上添加 .nav类，在每个<li>选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类

.justify-content-center 类设置导航居中显示， .justify-content-end 类设置导航右对齐。

.flex-column 类用于创建垂直导航

选项卡
使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记。

.nav-pills 类可以将导航项设置成胶囊形状。

.nav-justified 类可以设置导航项齐行等宽显示。

动态选项卡
如果你要设置选项卡是动态可切换的，可以在每个链接上添加 data-toggle=“tab” 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类。

如果你希望有淡入效果可以在 .tab-pane 后添加 .fade类:

胶囊状动态选项卡
胶囊状动态选项卡只需要将以上实例的代码中 data-toggle 属性设置为 data-toggle=“pill”

Bootstrap4 导航栏

我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。
导航栏上的选项可以使用 <ul> 元素并添加 class=“navbar-nav” 类。 然后在<li> 元素上添加 .nav-item 类， <a> 元素上使用 .nav-link 类:

垂直导航栏
通过删除 .navbar-expand-xl|lg|md|sm 类来创建垂直导航栏:

不同颜色导航栏
可以使用以下类来创建不同颜色导航栏：
.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light)。

品牌/Logo
.navbar-brand 类用于高亮显示品牌/Logo:

如果使用图片，可以使用 .navbar-brand 类来设置图片自适应导航栏。

导航栏的表单与按钮
导航栏的表单 元素使用 class=“form-inline” 类来排版输入框与按钮

导航栏文本
使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。

固定导航栏
导航栏可以固定在头部或者底部。
我们使用 .fixed-top 类来实现导航栏的固定
.fixed-bottom 类用于设置导航栏固定在底部

Bootstrap4 面包屑导航（Breadcrumb）

Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中的 :before 和 content 来添加

Bootstrap4 表单

Bootstrap4 表单布局
1.堆叠表单 (全屏宽度)：垂直方向
2.内联表单：水平方向

内联表单
所有内联表单中的元素都是左对齐的。
注意：在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。
内联表单需要在 <form>元素上添加 .form-inline类。

Bootstrap4 表单控件

Bootstrap4 支持以下表单控件：input / textarea / checkbox / radio / select
Bootstrap Input
Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。
注意：: 如果 input 的 type 属性未正确声明，输入框的样式将不会显示。

Bootstrap 复选框(checkbox)
复选框用于让用户从一系列预设置的选项中进行选择，可以选一个或多个。
使用 .form-check-inline 类可以让选项显示在同一行上

Bootstrap 单选框(Radio)
单选框用于让用户从一系列预设置的选项中进行选择，只能选一个。
使用 .radio-inline 类可以让选项显示在同一行上

Bootstrap select 下拉菜单
当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。

Bootstrap4 输入框组

我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。
使用 .input-group-prepend 类可以在输入框的的前面添加文本信息， .input-group-append 类添加在输入框的后面。

输入框大小
使用 .input-group-sm 类来设置小的输入框， .input-group-lg 类设置大的输入框

输入框组标签
在输入框组通过在输入框组外围的 label 来设置标签，标签的 for 属性需要与输入框组的 id 对应，点击标签后可以聚焦输入框

Bootstrap4 轮播

轮播图片上添加描述
在每个 <div class="carousel-item"> 内添加 <div class="carousel-caption"> 来设置轮播图片的描述文本

Bootstrap4 模态框

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。

模态框尺寸
我们可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。
尺寸类放在 <div>元素的 .modal-dialog 类后

Bootstrap4 提示框

创建提示框
通过向元素添加 data-toggle=“tooltip” 来来创建提示框。
title 属性的内容为提示框显示的内容
注意: 提示框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。

指定提示框的位置
默认情况下提示框显示在元素上方。
可以使用 data-placement 属性来设定提示框显示的方向: top, bottom, left 或 right

提示内容添加 HTML 标签，设置 data-html=“true”，内容放在 title 标签里头

Bootstrap4 弹出框

创建弹出框
通过向元素添加 data-toggle=“popover” 来来创建弹出框。
title 属性的内容为弹出框的标题，data-content 属性显示了弹出框的文本内容
注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 popover() 方法

指定弹出框的位置
默认情况下弹出框显示在元素右侧。
可以使用 data-placement 属性来设定弹出框显示的方向: top, bottom, left 或 right:

关闭弹出框
默认情况下，弹出框在再次点击指定元素后就会关闭，你可以使用 data-trigger=“focus” 属性来设置在鼠标点击元素外部区域来关闭弹出框

Bootstrap 滚动监听(Scrollspy)

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。
创建滚动监听

<body data-spy="scroll" data-target=".navbar" data-offset="50">

向您想要监听的元素（通常是 body）添加 data-spy=“scroll” 。
然后添加 data-target 属性，它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。
注意可滚动项元素上的 id （<div id="section1">） 必须匹配导航栏上的链接选项 （<a href="#section1">)。
可选项data-offset 属性用于计算滚动位置时，距离顶部的偏移像素。 默认为 10 px。
设置相对定位: 使用 data-spy=“scroll” 的元素需要将其 CSS position 属性设置为 “relative” 才能起作用。

Bootstrap4 小工具

边框圆角设置
使用rounded 类可以添加圆角边框:

浮动
.float-right 类用于设置元素右浮动， .float-left 设置元素左浮动, .clearfix 类用于清除浮动

响应式浮动
我们看可以设置浮动 (.float-*-left|right - * 为 sm, md, lg 或 xl)的方向依赖于屏幕的大小

加粗样式居中对齐
使用 .mx-auto 类来设置居中对齐

宽度
元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度

高度
元素上使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度

标签：Bootstrap,设置,元素,添加,类来,Bootstrap4,下拉菜单
来源： https://blog.csdn.net/JINGMaNong/article/details/119044603