Bootstrap4前台框架

.col-数字   针对所有设备

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

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

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

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

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

使用行(row)来创建水平的列组

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

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

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

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

Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列

超小设备 <576px

平板 ≥576px

桌面显示器 ≥768px

大桌面显示器 ≥992px

超大桌面显示器 ≥1200px

<div class="row">
    <div class="col-*-*">...</div>
    ... ... ...
</div>

<div class="row">
    <div class="col">...</div>
    ... .... ...
</div>

偏移列

font-size 为 16px, line-height 为 1.5，所有的 元素 margin-top: 0 、 margin-bottom: 1rem (16px)

h1~h6

供了四个 Display 类可以输出更大更粗的字体样式 display-1,display-2,display-3,display-4

创建字号更小的颜色更浅的文本(在标题内声明的副标题)

黄色背景及有一定的内边距

元素的样式为显示在文本底部的一条虚线边框

引用的内容可以在<blockquote>上添加 .blockquote 类

数据列表

代码片段

键盘标志

原码输出，大块代码

text-(left|center|right|justify)

让段落更突出

段落中超出屏幕部分不换行

text-(uppercase|lowercase)

text-capitalize

.text-(muted|primary|secondary|success|info|warning|danger|white|dark|light)

.bg-(primary|secondary|success|info|warning|danger|dark|light)

<table class="table">
    <thead>
        <tr><th>表头标题</th></tr>
        ... ... ...
    </thead>
    <tbody>
        <tr><td>单元格内容</td></tr>
        ... ... ...
    </tbody>
    <tfoot><td colspan="3">这是表格底部</td></tfoot>
</table>

.table-striped：条纹表格

.table-bordered：为表格添加边框,相反 table-borderless

.table-hover：为表格的每一行添加鼠标悬停效果（灰色背景）

.table-dark：为表格添加黑色背景，.table-(info|primary|secondary|danger|light|dark|success|warning)

.table-active：表格激活状态

.table-sm：减少内边距来设置较小的表格

.table-responsive：创建响应式表格

.table-(info|primary|secondary|danger|light|dark|success|warning)

.thead-dark 类用于给表头添加黑色背景

.thead-light 类用于给表头添加灰色背景

.thead-inverse 类用于给表头添加黑色背景

.thead-default 类用于给表头添加灰色背景

<div class="jumbotron">...</div>

<div class="alert">...</div>

.alert-(primary|secondary|success|info|warning|danger|light|dark)

.alert-link

.alert-dismissible

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

<div class="btn">...</div>

<button class="btn">...</div>

<span class="btn">...</div>

<a class="btn">...</div>

<input type="button" class="btn" value="...">

背景颜色：btn-(primary|secondary|success|info|warning|danger|light|dark|link)

边框颜色：btn-outline-(primary|secondary|success|info|warning|danger|light|dark|link)

尺寸：btn-(lg|sm)

块级按钮：btn-block

激活和禁用：active/disabled

按钮组:
<div class="btn-group">
    <div class="btn">...</div>
    <div class="btn">...</div>
    .... ....
</div>

<span class="badge badge-primary">...</span>

颜色：badge-(primary|secondary|success|info|warning|danger|light|dark)

药丸形状：badge-pill

<div class="progress">
    <div class="progress-bar" style="width: 50%">文字说明</div>
</div>

颜色：bg-(success|info|warning|danger)

尺寸：style="width: 百分比宽度; height: 30px;"

条纹：progress-bar-striped

动画：progress-bar-animated

混合色彩：
<div class="progress">
    <div class="progress-bar bg-success" style="width: 30%">Free Space</div>
    <div class="progress-bar bg-warning" style="width: 50%">Warning</div>
    <div class="progress-bar bg-danger" style="width: 20%">Danger</div>
</div>

<ul class="pagination">
    <li class="page-item">
        <a href="#" class="page-link">前一页</a>
    </li>
    <li class="page-item">
         <a href="#" class="page-link">后一页</a>
    </li>
    .... ..... .....
</ul>

激活： active

禁用： disabled

尺寸：pagination(-lg|sm)

<ul class="list-group">
    <li class="list-group-item">选项一</li>
    <li class="list-group-item">选项二</li>
    .... ....
</ul>

颜色：list-group-item-(primary|secondary|success|info|warning|danger|light|dark)

激活： active

禁用： disabled

链接列表项：list-group-item-action

<div class="card">
    <div class="card-header">头部</div>
    <div class="card-body">内容</div>
    <div class="card-footer">底部</div>
</div>

颜色：bg-(primary|success|info|warning|danger|secondary|dark|light)

内容结构：
<div class="card-body">
    <h3 class="card-title">内容标题</h3>
    <p class="card-text">... ...</p>
    <a href="#" class="card-link">更多</a>
</div>

图片卡片：
<div class="card" style="wdith: 400px;">
    <img src="..." class="card-img-top" />
    <div class="card-body">...</div>
    <img src="..." class="card-img-bottom" />
</div>

卡片背景图片：
<div class="card" style="width: 400px;">
    <img src="..." />
    <div class="card-img-overlay">
        <h4 class="card-title">...</h4>
        <p class="card-text">...</p>
        <a href="#" class="card-link">...</a>
</div>

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">文件</button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">打开...</a>
        <a class="dropdown-item" href="#">新建文件...</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">退出</a>
    </div>
</div>

下拉菜单中的标题：dropdown-header

激活： active

禁用： disabled

下拉菜单定位：dropdown-menu-right 右对齐打开， 默认为左侧打开

下拉菜单弹出方向：右边(dropright)  左边(dropleft) 上边(dropup) ,默认为下边弹出

按钮中设置下拉菜单： dropdown-toggle-split

<div data-toggle="collapse" data-target="#id">标题信息</div>
<div id="id" class="collapse">
    <p>内容</p>
</div>

默认显示：show
<div id="demo3" class="collapse show">Lorem ipsum dolor text....</div>

手风琴效果：data-parent="#父类ID号"

<ul class="nav">
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    .... .....
</ul>

对齐方式：居中(justify-content-center)  右对齐(justify-content-end),默认左对齐 

垂直导航：flex-column

激活： active

选项卡：nav-tabs

胶囊导航：nav-pills

导航等宽：nav-justified

动态导航选项卡：
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
    </li>
</ul>
<!-- 动态内容 -->
<div class="tab-content">
    <div class="tab-pane active container" id="home">Home主体内容</div>
    <div class="tab-pane container" id="menu1">menu 1 主体内容</div>
    <div class="tab-pane container" id="menu2">menu 2 主体内容</div>
</div>

<nav class="navbar navbar-expand-sm bg-light">
    <!-- Brand -->
    <a class="navbar-brand" href="#">Logo</a>
    <!-- Links -->
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">首页</a>
        </li>
         ... ... ....
    </ul>
</nav>

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

颜色：bg-(primary|secondary|success|info|warning|danger|light|dark)

激活：active

禁用：disabled

折叠导航栏：
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <!-- Brand -->
    <a class="navbar-brand" href="#"><img src="../images/jenny.jpg" alt="Logo" style="width: 40px;"></a>
    <!-- Toggler/collapsibe Button -->
    <button class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
         <!-- Navbar links -->
          <ul class="navbar-nav">
              <li class="nav-item">
                   <a class="nav-link" href="#">首页</a>
              </li>
               ... ... ...
            </ul>
    </div>
</nav>

导航栏的表单与按钮：form-inline

导航栏文本：navbar-text

固定导航栏：顶部(fixed-top)  底部(fixed-bottom)

<ol class="breadcrumb">
    <li class="breadcrumb-item active">Home</li>
    ..... .....
</ol>

<nav class="breadcrumb">
    <a class="breadcrumb-item" href="#">Home</a>
    <span class="breadcrumb-item active">Bootstrap</span>
</nav>

激活：active

<form class="card padded">
    <div class="form-group">
        <label for="email">用户名:</label>
        <input type="email" class="form-control" id="email" placeholder="输入用户名">
    </div>
    <div class="form-group">
        <label for="pwd">密码:</label>
        <input type="password" class="form-control" id="pwd" placeholder="输入密码">
    </div>
    <div class="form-check">
        <label class="form-check-label"><input class="form-check-input" type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

内联表单：form-inline

表单控件

<form>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text">@</span>
        </div>
        <input type="text" class="form-control" placeholder="Username">
    </div>

    <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Your Email">
        <div class="input-group-append">
             <span class="input-group-text">@runoob.com</span>
        </div>
    </div>
</form>

前缀：input-group-prepend

后缀：input-group-append

文本：input-group-text

尺寸：input-group-(sm|lg)

复选框

单选框

控件显示在同一行：custom-control-inline

选择菜单

滑块控件

文件上传

选择菜单大小：custom-select-(sm|lg)

<div id="demo" class="carousel slide" data-ride="carousel">
    <!-- 指示符 -->
    <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
         ...... ......
    </ul>
    <!-- 轮播图片 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
          <div class="carousel-caption">
              <h3>第一张图片描述标题</h3>
              <p>描述文字!</p>
          </div>
     </div>
     ...... ......
    </div>
    <!-- 左右切换按钮 -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

.carousel 创建一个轮播

.carousel-indicators 为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图

.carousel-inner 添加要切换的图片

.carousel-item 指定每个图片的内容

.carousel-control-prev 添加左侧的按钮，点击会返回上一张

.carousel-control-next 添加右侧按钮，点击会切换到下一张

.carousel-control-prev-icon 与 .carousel-control-prev 一起使用，设置左侧的按钮

.carousel-control-next-icon 与 .carousel-control-next 一起使用，设置右侧的按钮

.slide 切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类

<!-- 按钮：用于打开模态框 -->
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">打开模态框</button>

<!-- 模态框 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">模态框头部</h4>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <!-- 模态框主体 -->
            <div class="modal-body">模态框内容..</div>
           <!-- 模态框底部 -->
           <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
           </div>
        </div>
    </div>
</div>

<!-- 按钮：用于打开模态框 -->
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">打开模态框</button>

<!-- 模态框 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">模态框头部</h4>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <!-- 模态框主体 -->
            <div class="modal-body">模态框内容..</div>
           <!-- 模态框底部 -->
           <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
           </div>
        </div>
    </div>
</div>

模态框尺寸： modal-(sm|lg)

动画：fade

<a href="#" data-toggle="tooltip" title="我是提示内容!">鼠标移动到我这</a>

初始化：$('[data-toggle="tooltip"]').tooltip();

<a href="#" data-toggle="tooltip" title="我是提示内容!">鼠标移动到我这</a>

位置：data-placement

支持HTML： data-html="true"

禁用：disabled

<a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容">点我</a>

位置(data-placement)

在鼠标点击元素外部区域来关闭弹出框

在鼠标移动到元素上显示，移除后消失的效果

向您想要监听的元素（通常是 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" 才能起作用

向您想要监听的元素（通常是 body）添加 data-spy="scroll"

边框

浮动：float-(left|right)

居中对齐：mx-auto

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

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

d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素
<div class="d-flex p-3 bg-secondary text-white">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
</div>

水平方向(默认)：flex-row

垂直方向：flex-column，flex-column-reverse 用于翻转子元素

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

等宽：flex-fill 类强制设置各个弹性子元素的宽度是一样的

扩展：flex-grow-1 用于设置子元素使用剩下的空间，flex-shrink-1 用于设置子元素的收缩规则

排序：order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高( .order-1 排在 .order-2 之前)

外边距：
.mr-auto 类可以设置子元素右外边距为 auto，即 margin-right: auto!important;
.ml-auto 类可以设置子元素左外边距为 auto，即 margin-left: auto!important;

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

内容对齐：
.align-content-* 来控制在垂直方向上如何去堆叠子元素，包含的值有：
.align-content-start (默认),
.align-content-end,
.align-content-center,
.align-content-between,
.align-content-around 和 .align-content-stretch

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

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

响应式 flex 类

<div class="media border p-3 rounded shadow">
    <img src="..." alt="..." class="mr-4 mt-2 rounded-circle" style="width:60px;">
    <div class="media-body">
        <h4>菜鸟教程</h4>
        <p>学的不仅是技术，更是梦想</p>
    </div>
</div>

多媒体对象嵌套(把新的 .media 容器放到 .media-body 容器中)

多媒体对象图片显示在右边(在 media-body 容器后添加图片)

定位多媒体图片位置：align-self-start(垂直顶部) align-self-center(垂直居中) align-self-end(垂直底部)