bootstrap5

1、简介

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

它是利用css3弹性盒子 + @media 查询实现的响应式布局

关于@media语法
/*直接在css中的用法*/
@media mediatype and|not|only (条件) {
 CSS-Code;
}

/*或者也可以针对不同的媒体使用不同 stylesheets*/
媒体类型可选的值

值描述

all 用于所有设备

print 用于打印机和打印预览

screen 用于电脑屏幕，平板电脑，智能手机等。

speech 应用于屏幕阅读器等发声设备

条件可选的值

值描述

aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率

color 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0

color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0

device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。

device-height 定义输出设备的屏幕可见高度。

device-width 定义输出设备的屏幕可见宽度。

grid 用来查询输出设备是否使用栅格或点阵。

height 定义输出设备中的页面可见区域高度。

max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。

max-color 定义输出设备每一组彩色原件的最大个数。

max-color-index 定义在输出设备的彩色查询表中的最大条目数。

max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。

max-device-height 定义输出设备的屏幕可见的最大高度。

max-device-width 定义输出设备的屏幕最大可见宽度。

max-height 定义输出设备中的页面最大可见区域高度。

max-monochrome 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。

max-resolution 定义设备的最大分辨率。

max-width 定义输出设备中的页面最大可见区域宽度。

min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率。

min-color 定义输出设备每一组彩色原件的最小个数。

min-color-index 定义在输出设备的彩色查询表中的最小条目数。

min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。

min-device-width 定义输出设备的屏幕最小可见宽度。

min-device-height 定义输出设备的屏幕的最小可见高度。

min-height 定义输出设备中的页面最小可见区域高度。

min-monochrome 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数

min-resolution 定义设备的最小分辨率。

min-width 定义输出设备中的页面最小可见区域宽度。

monochrome 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0

orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。

resolution 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm

scan 定义电视类设备的扫描工序。

width 定义输出设备中的页面可见区域宽度。

示例1：设备屏幕宽度小于等于960px时应用css样式
@media screen and (max-device-width:960px){    
    body{
        background:red;
    }
}
示例2：浏览器宽度大于等于960px且小于等于1200px时使用样式
@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }
}

值	描述
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备

值	描述
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率。
device-height	定义输出设备的屏幕可见高度。
device-width	定义输出设备的屏幕可见宽度。
grid	用来查询输出设备是否使用栅格或点阵。
height	定义输出设备中的页面可见区域高度。
max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-color	定义输出设备每一组彩色原件的最大个数。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height	定义输出设备的屏幕可见的最大高度。
max-device-width	定义输出设备的屏幕最大可见宽度。
max-height	定义输出设备中的页面最大可见区域高度。
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution	定义设备的最大分辨率。
max-width	定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color	定义输出设备每一组彩色原件的最小个数。
min-color-index	定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width	定义输出设备的屏幕最小可见宽度。
min-device-height	定义输出设备的屏幕的最小可见高度。
min-height	定义输出设备中的页面最小可见区域高度。
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution	定义设备的最小分辨率。
min-width	定义输出设备中的页面最小可见区域宽度。
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定义电视类设备的扫描工序。
width	定义输出设备中的页面可见区域宽度。

2、下载和安装

官网：https://getbootstrap.com/

官网可以下载编译版本的js、css 或源码版本的js、css，根据个人喜好来吧。

编译版本的：

源码版本的：

我这里以下载的编译后的版本为例，将其解压，我这里下载的bootstrap最新版本为5.x，解压后将bootstrap-5.1.1-dist 放到你的工程里，如我这里用的是vscode工具开发前端

然后建立一个html文件。内容如下：




    Bootstrap 模板
    
    
    
    
    


    
    Hello, world!

bootstrap安装完毕。

3、Bootstrap CSS概览

3.1、移动设备优先

从Bootstrap 3开始之后，设计目标是移动设备优先，然后才是桌面设备。这实际上是一个非常及时的转变，因为现在越来越多的用户使用移动设备。

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

3.2、容器

Bootstrap 5 需要一个容器元素来包裹网站的内容。

我们可以使用以下两个容器类：

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

3.2.1、.container 类

用于创建固定宽度的响应式页面。

注意：宽度 (max-width) 会根据屏幕宽度同比例放大或缩小。

	超级小屏幕 <576px	小屏幕 ≥576px	中等屏幕 ≥768px	大屏幕 ≥992px	特大屏幕 ≥1200px	超级大屏幕 ≥1400px
max-width	100%	540px	720px	960px	1140px	1320px

以下实例中，我们可以尝试调整浏览器窗口的大小来查看容器宽度在不同屏幕中等变化：



    我的第一个 Bootstrap 页面
    这是一些文本。

3.2.2、.container-fluid 类

用于创建一个全屏幕尺寸的容器，容器始终跨越整个屏幕宽度（width 始终为 100%）



    我的第一个 Bootstrap 页面
    使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。

3.2.3、flex 弹性布局

弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计，如果你还不了解 flex赶紧回去补习css3

3.2.3.1、d-flex 、d-inline-flex

d-flex 弹性盒子
d-inline-flex 行内弹性盒子

3.2.3.2、水平方向

.flex-row 可以设置弹性子元素水平显示，这是默认的
使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反

3.2.3.3、垂直方向

.flex-column 类用于设置弹性子元素垂直方向显示, .flex-column-reverse 用于翻转子元素

3.2.3.4、沿x轴内容对齐

justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：start (默认), end, center, between 或 around

3.2.3.5、沿y轴的内容对齐

如果要设置单行的子元素对齐可以使用 .align-items-* 类来控制，包含的值有：**.align-items-start(默认), .align-items-end, .align-items-center, .align-items-baseline, 和 .align-items-stretch **

3.2.3.6、在换行情况下的对齐方式

我们可以使用 .align-content-* 来控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。
注意：这些类在只有一行的弹性子元素中是无效的（默认flex-nowrap 不换行）。可以给其加上 .flex-wrap让其允许换行

3.2.3.7、是否换行

弹性容器中包裹子元素可以使用以下三个类： .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse。设置 flex 容器是单行或者多行。

3.2.3.8、弹性子相关样式类

3.2.3.8.1、平均宽度

.flex-fill 类强制平均按比例分配各个弹性子元素的宽度

3.2.3.8.2、扩展

.flex-grow-1 用于设置子元素使用剩下的空间。

3.2.3.8.3、指定子元素对齐

如果要设置指定子元素对齐对齐可以使用 .align-self-* 类来控制，包含的值有：.align-self-start (默认), .align-self-end, .align-self-center, .align-self-baseline, 和 .align-self-stretch。

示例1：


    使用 d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素：
    
    
        Flex item 1
        Flex item 2
        Flex item 3
    

    
    创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类,注意：这个盒子没撑满整行
    
        Flex item 1
        Flex item 2
        Flex item 3
    

    
    
        默认.flex-row 可以设置弹性子元素水平显示。

        使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反
    
    默认水平 左对齐
    
        Flex item 1
        Flex item 2
        Flex item 3
    
    反转 右对齐
    
        Flex item 1
        Flex item 2
        Flex item 3
    

    
    .flex-column 类用于设置弹性子元素垂直方向显示, .flex-column-reverse 用于翻转子元素
    垂直摆列
    
        Flex item 1
        Flex item 2
        Flex item 3
    
    垂直反转摆列
    
        Flex item 1
        Flex item 2
        Flex item 3
    

    
    
        内容排列方式

        .justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：
        start (默认), end, center, between 或 around:
    
    
        Flex item 1
        Flex item 2
        Flex item 3
    
    
        Flex item 1
        Flex item 2
        Flex item 3
    
    
        Flex item 1
        Flex item 2
        Flex item 3
    
    
        Flex item 1
        Flex item 2
        Flex item 3
    
    
        Flex item 1
        Flex item 2
        Flex item 3
    

    
    .flex-fill 类强制设置各个弹性子元素的宽度是一样的
    没有使用 .flex-fill 
    
        Flex item 1
        Flex item 2
        Flex item 3
    
    使用了 .flex-fill
    
        Flex item 1
        Flex item 2
        Flex item 3
    

    
    .flex-grow-1 用于设置子元素使用剩下的空间
    
        Flex item 1
        Flex item 2
        Flex item 3
    

    
    包裹
    .flex-nowrap 不换行(默认)
    
        Flex item 1
        Flex item 2
        Flex item 3
        Flex item 4
        Flex item 5
        Flex item 6
        Flex item 7
        Flex item 8
        Flex item 9
        Flex item 10
        Flex item 11
        Flex item 12
        Flex item 13
        Flex item 14
        Flex item 15
        Flex item 16
        Flex item 17
    
    .flex-wrap 自动换行
    
        Flex item 1
        Flex item 2
        Flex item 3
        Flex item 4
        Flex item 5
        Flex item 6
        Flex item 7
        Flex item 8
        Flex item 9
        Flex item 10
        Flex item 11
        Flex item 12
        Flex item 13
        Flex item 14
        Flex item 15
        Flex item 16
        Flex item 17
    
    .flex-wrap-reverse 反转
    
        Flex item 1
        Flex item 2
        Flex item 3
        Flex item 4
        Flex item 5
        Flex item 6
        Flex item 7
        Flex item 8
        Flex item 9
        Flex item 10
        Flex item 11
        Flex item 12
        Flex item 13
        Flex item 14
        Flex item 15
        Flex item 16
        Flex item 17
    


    
    内容对齐,注意：这些类在只有一行的弹性子元素中是无效的,可以通过 flex-wrap让其自动换行
    .align-content-start
    
        Flex item 1
        Flex item 2
        Flex item 3
        Flex item 4
        Flex item 5
        Flex item 6
        Flex item 7
        Flex item 8
        Flex item 9
        Flex item 10
        Flex item 11
        Flex item 12
        Flex item 13
        Flex item 14
        Flex item 15
        Flex item 16
        Flex item 17
    
    .align-content-end
    
        Flex item 1
        Flex item 2
        Flex item 3
        Flex item 4
        Flex item 5
        Flex item 6
        Flex item 7
        Flex item 8
        Flex item 9
        Flex item 10
        Flex item 11
        Flex item 12
        Flex item 13
        Flex item 14
        Flex item 15
        Flex item 16
        Flex item 17
    
    .align-content-center
    
        Flex item 1
        Flex item 2
        Flex item 3
        Flex item 4
        Flex item 5
        Flex item 6
        Flex item 7
        Flex item 8
        Flex item 9
        Flex item 10
        Flex item 11
        Flex item 12
        Flex item 13
        Flex item 14
        Flex item 15
        Flex item 16
        Flex item 17
    
    .align-content-between
    
        Flex item 1
        Flex item 2
        Flex item 3
        Flex item 4
        Flex item 5
        Flex item 6
        Flex item 7
        Flex item 8
        Flex item 9
        Flex item 10
        Flex item 11
        Flex item 12
        Flex item 13
        Flex item 14
        Flex item 15
        Flex item 16
        Flex item 17
    
    .align-content-around
    
        Flex item 1
        Flex item 2
        Flex item 3
        Flex item 4
        Flex item 5
        Flex item 6
        Flex item 7
        Flex item 8
        Flex item 9
        Flex item 10
        Flex item 11
        Flex item 12
        Flex item 13
        Flex item 14
        Flex item 15
        Flex item 16
        Flex item 17
    
    .align-content-stretch
    
        Flex item 1
        Flex item 2
        Flex item 3
        Flex item 4
        Flex item 5
        Flex item 6
        Flex item 7
        Flex item 8
        Flex item 9
        Flex item 10
        Flex item 11
        Flex item 12
        Flex item 13
        Flex item 14
        Flex item 15
        Flex item 16
        Flex item 17
    

    
    子元素对齐
    如果要设置单行的子元素对齐可以使用 .align-items-* 类来控制，包含的值有：
        .align-items-start (默认) , .align-items-end, .align-items-center,
        .align-items-baseline, 和 .align-items-stretch
    .align-items-start
    
        Flex item 1
        Flex item 2
        Flex item 3
    
    .align-items-end
    
        Flex item 1
        Flex item 2
        Flex item 3
    
    .align-items-center
    
        Flex item 1
        Flex item 2
        Flex item 3
    
    .align-items-baseline
    
        Flex item 1
        Flex item 2
        Flex item 3
    
    .align-items-stretch
    
        Flex item 1
        Flex item 2
        Flex item 3
    

    
    指定子元素对齐
    如果要设置指定子元素对齐对齐可以使用 .align-self-* 类来控制，包含的值有：
        .align-self-start , .align-self-end, .align-self-center,
        .align-self-baseline, 和 .align-self-stretch(默认)
    
        align-self-start
        align-self-end
        align-self-center
        align-self-baseline
        align-self-stretch(默认)

3.3、网格系统

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

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

Bootstrap 5 的网格系统是响应式的，列会根据屏幕大小自动重新排列。

请确保每一行中列的总和等于或小于 12。

3.3.1、网格类

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

.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 特大桌面显示器 - 屏幕宽度等于或大于 1200px)
.col-xxl- 超大桌面显示器 - 屏幕宽度等于或大于。1400px)

3.3.2、网格系统规则

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

	超小设备（.col也可适用所有设备） <576px	平板 ≥576px	桌面显示器 ≥768px	大桌面显示器 ≥992px	特大桌面显示器 ≥1200px超大桌面显示器 ≥1400px	超大桌面显示器 ≥1400px
容器最大宽度	None (auto)	540px	720px	960px	1140px	1320px
类前缀	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
列数量和	12
间隙宽度	1.5rem （一个列的每边分别 .75rem）
可嵌套	Yes
列排序	Yes

3.3.3、示例：




    每个col的宽度平均分配并撑满,哪怕你超过12个
    
        col
        col
        col
        col
        col
        col
        col
        col
        col
        col
        col
        col
        col
        col
        col
        col
    

    col-[1,12]的宽度平均分配并撑满,但是总计不能超过12,超过12就会 换行
    
        col-1
        col-1
        col-1
        col-1
        col-1
        col-1
        col-1
        col-1
        col-1
        col-1
        col-1
        col-1
    
    
        col-2
        col-2
        col-4
        col-4
    
    
        col-6
        col-6
    
    
        col-12
    
    
    col-sm- 平板 - 屏幕宽度等于或大于 576px,
        如果屏幕小于576px，那么将会堆叠排版
    
        col-sm-4
        col-sm-4
        col-sm-4
    

    .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px,
        如果屏幕小于768px，那么将会堆叠排版
    
        col-md-4
        col-md-4
        col-md-4
    

    
        组合使用,当屏幕 小于768px，将使用 col-6样式，跨6列。
        当屏幕大于768px时，将使用 col-md-4样式，跨4列。
    
    
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
        1
    
    
        1
        1
        1

3.4、文字排版

3.4.1、 -

Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。请看下面的实例：


    字体大小会随着屏幕的变化而变化，可以重置浏览器大小查看效果。
    h1 Bootstrap 标题
    h2 Bootstrap 标题
    h3 Bootstrap 标题
    h4 Bootstrap 标题
    h5 Bootstrap 标题
    h6 Bootstrap 标题

3.4.2、Display 标题类

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


    Display 标题
    Display 标题可以输出更大更粗的字体样式。
    Display 1
    Display 2
    Display 3
    Display 4

3.4.3、

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


    更小文本标题
    small 元素用于字号更小的颜色更浅的文本:
    h1 标题 副标题
    h2 标题 副标题
    h3 标题 副标题
    h4 标题 副标题
    h5 标题 副标题
    h6 标题 副标题

3.4.4、

Bootstrap 5 定义标签及 .marked 类为黄色背景及有一定的内边距:


    高亮文本
    使用 mark 元素来 高亮 文本。

3.4.5、

Bootstrap 5 定义 HTML )。

3.23、侧边栏

Bootstrap5 侧边栏侧边栏类似于模态框，在移动端设备中比较常用。

示例：



    使用链接的 href 属性





    
    
        
        侧边栏
        
        
    
    
    
        侧边栏内容

3.24、小工具

Bootstrap 5 提供了很多有用的类来帮组我们快速实现效果，不需要重复写一些 CSS 代码。

3.24.1、背景颜色

设置不同元素的背景颜色时，需要通过 .text-* 类来设置匹配的文本颜色：

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-body
.bg-white
.bg-transparent

3.24.2、边框

我们可以使用 border 相关类根据需要显示边框：

.border-1 到 .border-5 类用于设置边框线条的宽度

以下设置了边框的不同颜色

3.24.3、圆角

rounded 相关类用于设置圆角：

rounded-0 到 rounded-3 类用于设置圆角的大小：

3.24.4、浮动于清除浮动

元素向右浮动使用 .float-end 类，向左浮动使用 .float-start 类， .clearfix 类用于清除浮动:


  Float left
  Float right

3.24.5、居中对齐

使用 .mx-auto 类来设置元素居中对齐 (添加 margin-left 和 margin-right 为 auto):

居中对齐

3.24.6、宽度与高度

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

宽度为 25%
宽度为 50%
宽度为 75%
宽度为 100%
自动设置宽度
最大宽度为 100%

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


    高度为 25%
    高度为 50%
    高度为 75%
    高度为 100%
    自动设置高度
    最大高度为 100%

4、关于Bootstrap插件

网上很多大佬基于bootstrap开发了很多插件

不过那是在bootstrap 5之前

个人认为，bootstrap 4 到bootstrap 5是一个大的跨度。从bootstrap5自身提供的轮播、分页插件来看，自带的插件粒度更细，扩展性、移植性理论上来讲应该是更强。从这个角度来看它未来的趋势来看官方应该也不打算搞那些花里胡哨的插件了

所以我这里也不打算讲额外的bootstrap插件了，毕竟以前的表格插件都是bootstrap 3、bootstrap 4版本所支持的，bootstrap 5我还没试过，也不打算试了,没意义。因为根据bootstrap5 自身所携带的表格、分页插件足以应付制作各类表格需求。

js jQuery

bootstrap5

bootstrap5

1、简介

2、下载和安装

Hello, world!

3、Bootstrap CSS概览

3.1、移动设备优先

3.2、容器

3.2.1、.container 类

我的第一个 Bootstrap 页面

3.2.2、.container-fluid 类

我的第一个 Bootstrap 页面

3.2.3、flex 弹性布局

3.2.3.1、d-flex 、d-inline-flex

3.2.3.2、水平方向

3.2.3.3、垂直方向

3.2.3.4、沿x轴内容对齐

3.2.3.5、沿y轴的内容对齐

3.2.3.6、在换行情况下的对齐方式

3.2.3.7、是否换行

3.2.3.8、弹性子相关样式类

3.2.3.8.1、平均宽度

3.2.3.8.2、扩展

3.2.3.8.3、指定子元素对齐

3.3、网格系统

3.3.1、网格类

3.3.2、网格系统规则

3.3.3、示例：

3.4、文字排版

-

h1 Bootstrap 标题

h2 Bootstrap 标题

h3 Bootstrap 标题

h4 Bootstrap 标题

h5 Bootstrap 标题

h6 Bootstrap 标题

3.4.2、Display 标题类

Display 标题

Display 1

Display 2

Display 3

Display 4

3.4.3、

更小文本标题

h1 标题 副标题

h2 标题 副标题

h3 标题 副标题

h4 标题 副标题

h5 标题 副标题

h6 标题 副标题

3.4.4、

高亮文本

3.4.5、

第一部分

第二部分

第三部分

3.23、侧边栏

侧边栏

3.24、小工具

3.24.1、背景颜色

3.24.2、边框

3.24.3、圆角

3.24.4、浮动于清除浮动

3.24.5、居中对齐

3.24.6、宽度与高度

4、关于Bootstrap插件

相关

h1 标题副标题

h2 标题副标题

h3 标题副标题

h4 标题副标题

h5 标题副标题

h6 标题副标题