BootStrap4的用法

最新推荐文章于 2024-06-24 09:39:16 发布

鲲鹏飞九万里

最新推荐文章于 2024-06-24 09:39:16 发布

阅读量3.2k

点赞数 4

分类专栏： css Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/hefrankeleyn/article/details/90339473

版权

css 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Bootstrap

1 篇文章 0 订阅

订阅专栏

一、Container

BootStrap4 同样需要一个containing 元素包裹正文内容。

.container 提供了一个固定的宽；.container-fluid提供了一个易变的宽。

二、网格系统

BootStrap的网格系统是基于flexbox，允许至多12个纵列。如果不想单独使用12个纵列，可以将多个纵列组合在一起成为更宽的列。

网格系统是反映敏感的，列将自动的安排，根据屏幕大小。确保列的总数至多12个或更少，不需要使用12个所有可用的列。

BootStrap4网格系统提供了五个类：

.col- 非常小的设备，小于576px；

.col-sm- 小设备，等于或大于576px；

.col-md- 中等的设备，等于或大于768px；

.col-lg- 大设备，等于或大于992px；

.col-xg- 超大设备，屏幕宽等于或大于1200px；

.col 让bootstrap处理布局

三、文本和排版

BootStrap 默认 font-size 16px，line-height： 1.5，font-familty： "Helvetica Neue"。

并且，<p> 元素，margin-top： 0px，margin-bottom： 1rem （16px default）

3.1 heading

3.2 display heading

比正常的heading更突显（更大的字体，更粗的亮度）

.display-1, .display-2, display-3, display-4

3.3 <small>

small用于在任何heading中创建较轻、次一级的文本。

3.4 <mark>

将为文本添加黄色背景和一些padding。

3.5 <abbr>

将在边框border底边加点。<abbr title="javaScript">JS</abbr>

3.6 blockquote

添加 .blockquote 到<blockquote>中，添加 .blockquote-foot 到<blockquote>中的<footer> 里面。

3.7 dl

<dl>

</dl>

3.8 <code>

3.9 快捷键的样式 <kbd>

3.10 <pre>

3.11 多种排版类型：

1）字体：加粗、更粗、正常、变细、更细、斜体。

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text.</p>
<p class="font-italic">Italic text.</p>

2）突显一行：.lead

3）更小的字体： .small

4）行对齐：左对齐、右对齐、居中对齐

.text-left

.text-right

.text-center

5) list 没有样式 .list-unstyled

6) 行内元素 .list-inline

四、颜色

4.1 文本颜色

.text-muted 柔和的； .text-primary 首要的；.text-success 成功；.text-info 消息；.text-warning 警告；

.text-danger 危险；.text-secondary 次要的；.text-white 灰色；.text-dark 暗色；.text-body 默认颜色（黑色）；

.text-light 亮色

4.2 背景颜色

.bg-primary 主要的； .bg-success 成功； .bg-info 信息； .bg-warning 警告； .bg-danger 危险； .bg-secondary 次要的；

.bg-dark 暗色的； .bg-light 亮色的；

五、表格

5.1 基础的样式有一个轻填充和水平分割

.table <table class="table">

5.2 给行添加条纹

.table-striped <table class="table table-striped">

5.3 为表格添加边框

.table-bordered <table class="table table-bordered">

5.4 光标移动到表格上会变色： hover

.table-hover <table class="table table-hover">

5.5 黑色背景的表格

.table-dark <table class="table table-dark">

5.6 黑灰相间的条纹表 .table-dark .table-striped

5.7 .table-dark 和 .table-hover 结合

5.8 移除表格边框

5.9 contextual 与上下文相关颜色

能够使用在整个<table> 或者<tr> 或者<td>上

.table-primary 主要的; .table-success 成功; .table-danger 危险； .table-info 信息； .table-warning 警告； .table-active 活跃；

.table-secondary 次要的； .table-light 亮色； table-dark 暗色；

5.10 表格头颜色

.thead-dark 为表头添加一个黑色的背景颜色； .thead-light 为表头添加一个灰色

5.11 小表

.table-sm 小表，让padding变为一半

5.12 反映敏感的表 .table-responsive

将会为小于992px的屏幕添加一个滚动条，大于992px，不会有什么特殊效果

也可以使用：

.table-responsive-sm < 576px

.table-responsive-md < 768px

.table-responsive-lg < 992px

.table-responsive-xl < 1200px

六、图片

6.1 为图片添加圆角

.rounded

6.2 将图片塑造成一个圆形

.rounded-circle

6.3 为图片添加边框

.img-thumbnail

6.4 浮动图片到左边或浮到到右边

.float-right 浮动到右边

.float-left 浮动到左边

6.5 让图片居中

添加公用的两个类： .mx-auto 和 .d-block

6.6 敏感的图片 .responsive image

.img-fluid 将自动调节适应屏幕

七、大的灰色框，为了唤起某些东西的格外关注

.jumbotron 大的灰框，有圆角

.jumbotron-fluid 大的灰框，没有圆角，同时添加一个 .container 或 .container-fluid 在内部。

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS...</p>
  </div>
</div>

八、警报信息 alert

8.1 alert

.alert-success；.alert-info；.alert-warning；.alert-danger；.alert-primary；.alert-secondary；.alert-light；.alert-dark

8.2 alert-link

alert-link

8.3 关闭警报信息

添加 .alert-dismissible 到 alert 内容上，并且添加class="close" 和 data-dismiss="alert" 到一个连接或按钮上

<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>

8.4 动画alert

添加 .fade 和 .show ，将会有一个渐变色，在关闭的时候

<div class="alert alert-dark alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Dark!</strong> Dark grey alert.
</div>

九、按钮的样式

9.1 BootStrap 提供了多种样式：

.btn 无色； .btn-primary；.btn-secondary；.btn-secondary；.btn-success ；.btn-info；.btn-warning；.btn-danger；.btn-dark；.btn-light；.btn-link

<button type="button" class="btn btn-primary">Primary</button>

这些类也可以用到 <a> 、<button>、<input>标签上

9.2 按钮的轮廓

.btn .btn-outline-primary

.btn .btn-outline-secondary

.btn .btn-outline-success

.btn .btn-outline-info

.btn .btn-outline-warning

.btn .btn-outline-danger

.btn .btn-outline-dark

.btn .btn-outline-light .text-dark

9.3 按钮的大小

.btn-lg、默认、.tn-sm

<button type="button" class="btn btn-primary btn-sm">Small</button>

9.4 块级按钮

btn-block

<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>

9.5 活跃按钮和不可用按钮

.active

.disabled 让按钮不能点击

<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>

让<a>在视觉上显示为不可用

<a href="#" class="btn btn-primary disabled">Disabled Link</a>

9.6 动画 Spinner

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
Loading..
</button>

<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
Loading..
</button>

<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>

十、按钮组

10.1 BootStrap允许将一组按钮组织到一起：

使用<div> 里面放 .btn-group

10.2 可以在按钮组中设置大小代替在每个按钮中设定大小

.btn-group-lg 大按钮组；默认； .btn-group-sm 小按钮组；

10.3 垂直的按钮组

.btn-group-vertical

10.4 嵌套按钮-下滑菜单

嵌套按钮组可以创建下滑列表（关于下滑列表，后面提到）

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

10.5 分开的下滑列表

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Tablet</a>
    <a class="dropdown-item" href="#">Smartphone</a>
  </div>
</div>

10.6 垂直下拉框

.btn-group-vertical

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

10.7 一个接着一个的按钮组

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-primary">BMW</button>
  <button type="button" class="btn btn-primary">Mercedes</button>
  <button type="button" class="btn btn-primary">Volvo</button>
</div>

十一、宪章

badges是用于添加附件信息

将 .badge 类和上下文语义类（如： .badge-secondary）结合在一起放在<span> 属性里，创造方形的宪章，其大小和父类元素大小一致。

11.1 上下文语义的 badge

.badge-primary ； .badge-secondary ； .badge-success ； .badge-danger ； .badge-warning ； .badge-info ； .badge-light ； .badge-dark

<span class="badge badge-danger">Danger</span>

11.2 球粒宪章，让四个角变圆

.badge-pill

<span class="badge badge-pill badge-primary">Primary</span>

11.3 将一个宪章放到一个元素的内部

<button type="button" class="btn btn-primary">
Messages <span class="badge badge-light">4</span>
</button>

十二、进程条

12.1 基础进程条

添加 .progress 类到一个内容元素中，然后添加 .progress-bar 到其孩子元素中，并在孩子元素中设置 width属性，指定进程条的宽。

12.2 进程条的高

进程条的高默认为 16px，使用height属性可以改变，必须同时为进程条容器和进程条设置该属性

12.3 进程条的标签

在进度条上添加文本内容，让百分比可见

12.4 为进程条添加颜色

默认进程条为蓝色，可以使用任何的上下文背景颜色来改变进程条的颜色

<div class="progress">
<div class="progress-bar bg-success" style="width:20%"></div>
</div>

12.5 有条纹的进度条

.progress-bar-striped

添加一个这个类

12.6 动态进度条

.progress-bar-animated

12.7 一个进度条分割成多部分

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar bg-warning" style="width:10%">
    Warning
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    Danger
  </div>
</div>

十三、旋转球

使用 .spinner-border 创建一个旋转球

13.1 为旋转球添加颜色

添加颜色的文本属性： .text-muted 、.text-primary、text-success、text-info

13.2 让增长的圆圈代替旋转

.spinner-grow

13.3 旋转球的大小

使用 .spinner-border-sm 或 .spinner-grow-sm 让“变大的圆点”和“旋转的球”变小

13.4 在按钮中添加旋转球，使用或不使用文本颜色

<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>

十四、页码标注

14.1 一个web页面有很多页，希望为每个页面添加页码标注

添加一个 .pagination 到 <ul> 元素中，然后添加 .page-item 到每一个 <li>元素中，将.page-link添加到每一个 <li>内部的链接中。

  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>

14.2 高亮当前页码

.active 用于高亮当前页码

14.3 不可用状态

.disabled 能够让链接显示为不可用状态

14.4 页码的大小

可以将页码设置为更大或更小： .pagination-lg 设置为更大；.pagination-sm 设置为更小；

14.5 页码的排列

页码默认是靠左。通过设置 .justify-content-center 能够让页码居中；通过设置 .justify-content-end 能够让页码靠右

14.6 导航层次中当前页面的位置

.breadcrumb 和 .breadcrumb-item

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Photos</a></li>
  <li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
  <li class="breadcrumb-item"><a href="#">Italy</a></li>
  <li class="breadcrumb-item active">Rome</li>
</ul>

十五、列表组

15.1 无序列表

一个基础的列表：<ul>标签里面使用 .list-group ; <li>标签里面使用 .list-group-item

15.2 活跃的状态

.active 在列表中添加

15.6 列组和链接项

为了使用连接项，使用<div> 代替 <ul>, 使用<a> 标签代替 <li>,如果想让当鼠标悬停在上面的时候，出现灰色的背景，添加 .list-group-item-action

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">First item</a>
  <a href="#" class="list-group-item list-group-item-action">Second item</a>
  <a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>

15.7 让列表项不可用

.disabled 在不可用的项上，如果使用链接，鼠标悬停的效果将失效。

15.8 刷新或移除边框

使用 .list-group-flush 类移除一些边框或圆角

15.9 水平的列表组

如果想要水平代替垂直，添加 .list-group-horizontal 到 .list-group 所在的属性中

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
  <li class="list-group-item">Fourth item</li>
</ul>

15.10 与语义相关的类

在列表项上添加：.list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, .list-group-item-primary, list-group-item-dark and list-group-item-light；

也可以在链接项上添加这些属性

15.11 带有印章的列表

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Inbox
    <span class="badge badge-primary badge-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Ads
    <span class="badge badge-primary badge-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Junk
    <span class="badge badge-primary badge-pill">99</span>
  </li>
</ul>

十六、卡片

在BootStrap4中，卡片是一个加边的盒子，在其内容周围有一些padding，其包含的选项有： headers、footers、content、color等。

16.1 基础的卡片

一个基础的卡片是被带有“.card”类，里面还有一个 .card-body 的盒子

    <div class="card">
        <div class="card-body">Basic card</div>
    </div>

16.2 卡片的header和footer

.card-header 为卡片添加一个头，card-footer 为卡片添加一个尾

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">Content</div> 
  <div class="card-footer">Footer</div>
</div>

16.3 为卡片添加背景颜色

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light

        <div class="card bg-primary text-white">
            <div class="card-body">Primary card</div>
        </div>

16.4 卡片的标题、文本和连接

.card-title .card-text card-link

        <div class="card">
            <div class="card-body">
                    <h4 class="card-title">Card title</h4>
                    <p class="card-text">Some Card Context</p>
                    <a href="#" class="card-link">Card link!</a>
            </div>
        </div>

16.5 卡片的图片

可以将添加了 .card-img-top 类的 <img>元素放到 .card-body 上面或者把添加了 .card-img-bottom 类的<img>元素放到 .card-body的下面。

        <div class="card">
            <img class="card-img-top" src="san.png" alt="san" />
            <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some Card Context</p>
                <a href="#" class="card-link">Card link!</a>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some Card Context</p>
                <a href="#" class="card-link">Card link!</a>
            </div>
            <img class="card-img-bottom" src="san.png" alt="san" />
        </div>

16.6 让整个卡片成为一个连接

为 <a> 标签添加 .stretched-link 类，这将让整个卡片可以点击，并且会有鼠标悬停效果。

        <div class="card">
            <img class="card-img-top" src="san.png" alt="san" />
            <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some Card Context</p>
                <a href="#" class="btn btn-primary stretched-link">Card link!</a>
            </div>
        </div>

16.7 让图片称为卡片的背景

使用 .card-img-overlay 替换 .card-body

        <div class="card" style="width:500px">
            <div class="card-img-overlay">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some Card Context</p>
                <a href="#" class="card-link">Card link!</a>
            </div>
            <img class="card-img-bottom" src="san.png" alt="san" />
        </div>

16.8 卡片栏目

使用.card-columns 包裹多个 .card ，效果就像大理石块，一个挨着一个，排列随着卡片数量会有调整。

        <div class="card-columns">
            <div class="card bg-primary">
                <div class="card-body text-center">
                    <p class="card-text">
                        Primary Card<br>
                        Welcome to China
                    </p>
                </div>
            </div>
            <div class="card bg-danger">
                <div class="card-body text-center">
                    <p class="card-text">Primary Card</p>
                </div>
            </div>
        </div>

16.9 卡片板子

使用 .card-deck 包裹多个 .card ,将创建等高等宽的卡片，排布自动调整，随着放入的卡片越来越多。

        <div class="card-deck">
            <div class="card bg-primary">
                <div class="card-body text-center">
                    <p class="card-text">
                        Primary Card<br>
                        I have a dream
                    </p>
                </div>
            </div>
            <div class="card bg-danger">
                <div class="card-body text-center">
                    <p class="card-text">Primary Card</p>
                </div>
            </div>
        </div>

16.10 卡片组

.card-group和 .card-deck 类似，唯一不同的是 .card-group 去除了卡片间的空白间距

    <div class="card-group">
            <div class="card bg-primary">
                <div class="card-body text-center">
                    <p class="card-text">
                        Primary Card<br>
                        I have a dream
                    </p>
                </div>
            </div>
            <div class="card bg-danger">
                <div class="card-body text-center">
                    <p class="card-text">Primary Card</p>
                </div>
            </div>
        </div>
    </div>

十七、下拉菜单

.dropdown 表明是一个下拉菜单；

为了打开下拉菜单，需要使用一个带有.dropdown-toggle的<input>或<a>元素，并且添加 data-toggle="dropdown" 属性；

添加 .dropdown-menu 类到一个<div> 元素中，去构建下拉菜单，然后在这个元素内部添加带有 .dropdown-item 类的按钮或a标签。

    <div class="dropdown">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            Dropdown button
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 2</a>
            <a class="dropdown-item" href="#">Link 3</a>
        </div>
    </div>

17.1 分割下拉菜单项

        <div class="dropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                Dropdown button
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Others</a>
            </div>
        </div>

17.2 为下拉菜单添加头

.dropdown-header

        <div class="dropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                Dropdown button
            </button>
            <div class="dropdown-menu">
                <div class="dropdown-header">header01</div>
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <div class="dropdown-header">header02</div>
                <a class="dropdown-item" href="#">Others</a>
            </div>
        </div>

17.3 让下拉菜单不可用或高亮下拉菜单

.active 高亮一个下拉菜单； .disabled 让下拉菜单不可用

17.4 下拉菜单的方位

通过在 .dropdown中添加 .dropright (右边的下拉菜单) .dropleft (左边的下拉菜单)，注意，箭头是自动添加的。

        <div class="dropdown dropleft">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                Dropdown button
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Others</a>
            </div>
        </div>

17.5 下拉菜单居右

为了让下拉菜单居右，将 .dropdown-menu-right 添加到 .dropdown-menu中

        <div class="dropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                This is a wider button, you can use dropdown-mean-right
            </button>
            <div class="dropdown-menu dropdown-menu-right">
                <div class="dropdown-header">header01</div>
                <a class="dropdown-item disabled" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item active" href="#">Link 3</a>
                <div class="dropdown-header">header02</div>
                <a class="dropdown-item" href="#">Others</a>
            </div>
        </div>

17.6 上拉菜单

      <div class="dropup">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                This is a wider button, you can use dropdown-mean-right
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
            </div>
        </div>

17.7 不加修饰的下拉项

.dropdown-item-text 用于创造不加修饰的下拉项

17.8 下拉框和按钮放在一个组里面

.btn-group

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

17.9 将按钮和下拉按钮分开

<div class="btn-group">
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
  </div>
</div>

17.10 垂直的按钮组

.btn-group-vertical

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

十八、折叠

当想要显示或隐藏大量内容的时候使用。

一个带有 .collapse 的<div> 表明这是一个可折叠的元素，它的内容将显示和隐藏当点击按钮的时候。

为了控制可折叠内容，添加data-toggle="collapse" 属性到 <a> 或 <button>元素中，然后添加 data-target="#id" 去连接带有可折叠内容（<div id="demo">）

对于<a> 标签，可以使用 href 代替 data-target 属性。

18.1 默认情况下可折叠内容是隐藏的，可以添加 .show 改变默认行为

<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>

18.2 手拉琴

通过拓展卡片组件，可以制作一个“手拉琴”风格的内容

使用 .data-parent 属性去确保所有的手拉琴元素位于一个指定的父元素中，这样当点击打开其他手拉琴元素的时候，当前手拉琴元素会关闭。

十九、导航菜单

19.1 水平的按钮

如果想要创建水平的按钮，添加.nav 到 <ul>上，里面的每一个<li>项使用 .nav-item ，<li>元素中的<a>中使用.nav-link。

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

19.2 校准导航菜单

让导航菜单居中，在<ul>上添加 .justify-content-center；让导航栏菜单居右，在<ul>上添加 .justify-content-end。

19.3 让导航菜单垂直

添加 .flex-column 到 <ul> 上。

19.4 导航表格

添加 .nav-tabs 到 <ul>上。添加 .active 到 <a> 上，让项处于活跃状态

19.5 球状(pills)按钮

.nav-pills 使用在<ul> 上，让导航按钮变为球状按钮

19.6 调整导航菜单在一行上等宽

添加 .nav-justified 到 <ul> 上

19.7 带有下拉菜单的 pills 或 tabs

        <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Link 1</a>
                    <a class="dropdown-item" href="#">Link 2</a>
                    <a class="dropdown-item" href="#">Link 3</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>

19.8 选项卡

为了制作选项卡，添加 data-toggle="tab" 到每一个 <a> 中，然后添加 .tab-pane 到一个div中，这个div的ID和每一个选项卡ID相同，将这些带有 .tab-pane 的div包裹在一个带有 .tab-content 的div中。

如果想让选项卡淡入淡出，添加 fade 到带有.tab-pane 的div上。

相同的操作对于 pill，只需要将 nav-tabs换成 nav-pills，将tab换成pill。

        <!-- Nav tabs -->
        <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>

        <!-- Tab panes -->
        <div class="tab-content">
            <div class="tab-pane container active" id="home">good</div>
            <div class="tab-pane container fade" id="menu1">hello</div>
            <div class="tab-pane container fade" id="menu2">world</div>
        </div>

二十、导航栏

导航栏位于页面的顶部

一个基础的导航栏的导航栏：有一个带有.navbar 的 <nav>，后面跟着 navbar-expand-xl|lg|md|sm （使用屏幕：极大、大、中等、小）；

在里面添加带有 class="navbar-nav" 的<ul>，里面有带有.nav-item 的<li>,里面有.nav-link 的<a>。

        <nav class="navbar navbar-expand-sm bg-info navbar-light justify-content-center">
            <!-- Links -->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 3</a>
                </li>
            </ul>
        </nav>

20.1 垂直的导航栏

将 navbar-expand-xl|lg|md|sm 去掉

20.2 将导航栏居中

添加 .justify-content-center 到 <nav> 标签的类中。

20.3 改变导航栏的背景颜色

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light

让导航栏里面的字体变成白色： .navbar-dark ；将导航栏里面的字体变成黑色： .navbar-light

20.4 商标或logo

.navbar-brand 用于高亮页面中商标、logo、项目的名字

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Logo</a>
  ...
</nav>

当使用 .navbar-brand 在<img>标签上的时候，bootstrap将自动调整图片的样式适应导航栏。

<img class="navbar-brand" src="san.png" style="width:40px;"/>

20.5 导航栏的折叠

前提条件：特别小的屏幕。

为了创建一个折叠的导航栏，使用一个带有 class="navbar-toggler" data-toggle="collapse"和 data-target="#thetarget" 的 <button> ，将导航栏的内容包裹在带有class="collapse navbar-collapse" 后面跟上匹配目标的id data-target，这里是按钮 thetarget。

        <nav class="navbar navbar-expand-md bg-dark navbar-dark">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                </ul>
            </div>
        </nav>

20.6 导航栏表格和按钮

使用 .form-inline将input和按钮组织在一起

        <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
            <form class="form-inline" action="/action_page.php">
                <input class="form-control mr-sm-2" type="text" placeholder="Search">
                <button class="btn btn-success" type="submit">Search</button>
            </form>
        </nav>

还可以为输入框添加一个修饰：
使用 .input-group-prepend 或 .input-group-append 固定一个图标或者帮助文本到输入框中。

        <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
            <form class="form-inline" action="/action_page.php">
                <div class="input-group">
                    <div class="input-group-append">
                        <span class="input-group-text">@</span>
                    </div>
                    <input type="text" class="form-control" placeholder="Username">
                </div>
                <!-- <input class="form-control mr-sm-2" type="text" placeholder="Search"> -->
                <button class="btn btn-success" type="submit">Search</button>
            </form>

20.7 导航文本

导航文本不能被点击。

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

<!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
  </ul>

  <!-- Navbar text-->
  <span class="navbar-text">
    Navbar text
  </span>

</nav>

20.8 固定导航条

无论滑动条如何变动，固定的导航条是不变的。

使用 .fixed-top 将导航条固定在页面顶部；使用 .fixed-bottom 将页面固定在底部。

使用 .sticky-top 将随着滚动条滚到顶部后，导航条固定到顶部（IE11 要用position:relative）。

二十一、表单

BootStrap4 对表单的默认设置为：所有带有 .form-control的文本元素<input>, <textarea>, 和 <select>都是100%的宽。

21.1 表单布局

bootStrap4 提供了两种表单布局：

stacked form 宽度和屏幕宽度一直的表单；

行内表单；

21.2 stacked form

.form-group

21.3 行内表单

在行内表单中，所有的元素都是行内元素，并且居左。

注意：这种样式的应用需要屏幕的宽至少为 576px，如果小于576px，将按照 stacked form的样式。

21.4对行内元素进行公共设置

为行内元素添加一个右margin（空白），使用 .mr-sm-2。并且使用 mb-2 为输入框设置样式，以防当由于一行容纳不下的时候，上下表单项挨得太近。

21.5 表单的验证

可以使用不同种类的类，给用户提供可用的反馈意见。添加 .was-validated 或.needs-validation 给 <form>元素。取决你项提供给用户提示消息在表单提交之前或之后。表单的字段将会有一个绿色的或红色的边框，表明表单中哪些东西缺少了。也可以添加.valid-feedback 或 .invalid-feedback 准确的告诉用户哪些内容缺少或需要做，在提交之前。

二十二、表单输入框

Bootstrap 4 支持下面的表单控制：

input、textarea、checkbox、radio、select

22.1 BootStrap Input

bootStrap支持所有的input 类型： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel、和 color。

注意：如果类型没有合适的声明，Input将不会被样式化。

使用.form-control去样式化带有完整的宽和合适的padding。

        <form action="/action">
            <div class="form-group">
                <label for="usr">Name:</label>
                <input type="text" id="usr" name="username" class="form-control" />
            </div>
            <div class="form-group">
                <label for="pwd">Password:</label>
                <input type="password" id="pwd" name="password" class="form-control" />
            </div>
        </form>

22.2 BootStrap textarea

            <div class="form-group">
                <label for="comment">Comment:</label>
                <textarea id="comment" class="form-control" name="comment" rows="5"></textarea>
            </div>

22.3 BootStrap Checkbox

使用 class="form-check" 来确保标签和选择框之间有合适的空白；

给标签添加 .form-check-label ， .form-check-input 给位于 .form-check 下选择框合适的样式；

            <div class="form-check">
                <label class="form-check-label" for="check1">
                    <input type="checkbox" class="form-check-input" id="check1" name="audio" value="">Option1
                </label>
            </div>
            <div class="form-check">
                <label class="form-check-label" for="check2">
                    <input type="checkbox" class="form-check-input" id="check2" name="audio" value="">Option2
                </label>
            </div>
            <div class="form-check">
                <label class="form-check-label" for="check3">
                    <input type="checkbox" class="form-check-input" id="check3" name="audio" value="" disabled>Option3
                </label>
            </div>

22.4 行内选择框

使用 .form-check-inline 替换.form-check

22.5 radio

样式和 checkbox一样，只需将checkbox换成radio。

22.6 可选列表

选择多个，或选择一个。

         <div class="form-group">
                <label for="sell">Select List（Select One）:</label>
                <select id="sell" name="sell" class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
                <label for="sel2">Multiple select list (hold shift to select more than one):</label>
                <select multiple id="sel2" name="selName" class="form-control">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                </select>
            </div>

22.7 form control的大小

在 .form-control 中添加 form-control-sm或 form-control 或 form-control-lg

22.8 把输入框设置为纯文本

使用 .form-control-plaintext 让输入框变为纯文本样式

22.9 form control range和 file

            <div class="form-group">
                <input type="range" class="form-control-range" name="range">
            </div>
            <div class="form-group">
                <input type="file" class="form-control-file border" name="file">
            </div>

二十三、输入组

input-group 类是一个容器，为了增强一个输入，通过输入框之前添加图标、文本或按钮，或者在输入框后面添加帮助文本。

使用 .input-group-prepend 在输入框之前添加帮助文本；.input-group-append 在输入框之后。使用 .input-group-text 格式化指定的文本。

使用公共的 .mb-3 为输入组之间设置合适的空间。

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

23.1 输入组的大小

使用 .input-group-sm 设定小输入框；使用 .input-group-lg 设定大输入框；

23.3 多个输入框和帮助

            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">People</span>
                </div>
                <input type="text" placeholder="Username" class="form-control">
                <input type="text" placeholder="Password" class="form-control">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">One</span>
                    <span class="input-group-text">Two</span>
                    <span class="input-group-text">Three</span>
                </div>
                <input type="text" placeholder="form-control" class="form-control">
            </div>

23.4 带有checkbox或radio的输入组

            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <div class="input-group-text">
                        <input type="checkbox">
                    </div>
                </div>
                <input type="text" placeholder="form-control" class="form-control">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <div class="input-group-text">
                        <input type="radio">
                    </div>
                </div>
                <input type="text" placeholder="input" class="form-control">
            </div>

23.5 输入组按钮

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <button class="btn btn-outline-primary" type="button">Basic button</button>
    </div>
    <input type="text" placeholder="input" class="form-control">
</div>
<div class="input-group mb-3">
    <input type="text" placeholder="input" class="form-control">
    <div class="input-group-append">
        <button class="btn btn-success" type="button">Basic button</button>
    </div>
</div>
<div class="input-group mb-3">
    <input type="text" placeholder="input" class="form-control">
    <div class="input-group-append">
        <button class="btn btn-primary" type="button">Submit</button>
        <button class="btn btn-danger" type="button">Console</button>
    </div>
</div>

23.6 下拉菜单的input组

            <div class="input-group mb-3">
                <div class="input-group-append">
                    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
                        DropDown
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Link 1</a>
                        <a class="dropdown-item" href="#">Link 2</a>
                        <a class="dropdown-item" href="#">Link 3</a>
                    </div>
                </div>
                <input type="text" placeholder="input" class="form-control">
            </div>

23.7 输入组和外部的标签关联

将输入组外部<label> 中的 for 和输入组id一直，当点击外部label的时候，光标会聚集在输入组中。

           <label for="demo">Please entry:</label>
            <div class="input-group mb-3">
                <input type="text" placeholder="input" class="form-control" id="demo">
                <div class="input-group-append">
                    <span class="input-group-text">@example.com</span>
                </div>
            </div>

二十四、定制表单

BootStrap使用定制的元素，意味着能够代替浏览器默认的。

24.1 定制checkbox

为了创造一个自定义的盒子，先创建一个带有.custom-control和.custom-checkbox的容器元素（像<div>），用这个容器元素包裹着checkbox。然后添加 .custom-control-input 到input元素中，input的类型为：type="checkbox"。

如果使用标签作为伴随文本，添加 .custom-control-label 到伴随文中上，注意属性值应该和checkbox的id值匹配。

            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="check1" name="example">
                <label class="custom-control-label" for="check1">Check this custom checkbox</label>
            </div>

24.2 自定义的开关

为了定制切换开关，包裹一个带有 .custom-control 和 .custom-checkbox 的容器在 checkbox周围，然后，添加 .custom-control-input 到checkbox上。

            <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="switch1" name="switch1">
                <label class="custom-control-label" for="switch1">Toggle me</label>
            </div>

24.3 自定义一个radio按钮

为了制定radio按钮，包裹一个带有 .custom-control 和 .custom-radio 的来在radio按钮上。添加 .custom-control-input 到 radio类型的input元素上。

如果伴随有标签文本，添加 .custom-control-label 类到这个标签上，注意这个标签的属性值应该和radio的id相匹配。

            <div class="custom-control custom-radio">
                <input type="radio" class="custom-control-input" id="radio1" name="radio1">
                <label class="custom-control-label" for="radio1">Radio</label>
            </div>

24.4 行内自定义控制

添加 .custom-control-inline 到包裹的元素中。

24.5 自定义的选择菜单

为了添加自定义的选择菜单，添加.custom-select 到<select>上。

            <select name="cars" class="custom-select">
                <option selected>Custom Select Menu</option>
                <option value="vo">Vo</option>
                <option value="fir">Fir</option>
                <option value="audi">Audi</option>
            </select>

24.6 自定义的菜单大小

在 .custom-select上添加 .custom-select-sm 或 .custom-select-lg 。

24.7 自定义的滑动条

使用 .custom-range

            <label for="customRange">Custom Range</label>
            <input type="range" class="custom-range" id="customRange" name="point1">

24.8 自定义的文件长传

为了自定义一个文件上传按钮，使用一个带有.custom-file 的类包裹在input周围，类型为 type="file" 。然后添加 .custom-control-input 到input上。

为了关联相关的文本，添加.custom-control-label 到这个文本上，注意它的属性值应该和input的id一致。

二十五、旋转式幻灯片

为了循环播放几张图片。

使用转向灯和控制器来创建循环播放的图片。

        <div class="carousel slide" id="demo" data-ride="carousel">
            <!-- Indicators -->
            <ul class="carousel-indicators">
                <li data-target="#demo" data-slide-to="0" class="active"></li>
                <li data-target="#demo" data-slide-to="1"></li>
                <li data-target="#demo" data-slide-to="2"></li>
            </ul>
            <!-- The slideshow -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="nature01.jpg" alt="Los Angeles" style="width:100%">
                </div>
                <div class="carousel-item">
                    <img src="pink01.jpg" alt="Chicago" style="width:100%">
                </div>
                <div class="carousel-item">
                    <img src="seagull01.jpg" alt="New York" style="width:100%">
                </div>
            </div>
            <!-- Left and right controls -->
            <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 添加滑动效果；

25.1 在滑动块上添加文字

在 <div class="carousel-item">里面添加 <div class="carousel-caption">。

                <div class="carousel-item">
                    <img src="pink01.jpg" alt="Chicago" style="width:100%">
                    <div class="carousel-caption">
                        <h3>Los Angeles</h3>
                        <p>We had such a great time in LA!</p>
                    </div>
                </div>

二十六、模态框 modal

modal是一个对话弹框，出现在页面的顶端。

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
            Open Model
        </button>
        <!-- The Model -->
        <div class="modal" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h4 class="modal-title">Modal Heading</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- Modal Body -->
                    <div class="modal-body">
                        Modal body...
                    </div>

                    <!-- MOdal Footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

26.1 添加动画

在 .modal上添加 .fade 类。

26.2 模态框的大小

在带有 .modal-dialog 元素上添加 .modal-sm 或 .modal-lg 或.modal-xl。

26.3 让模态框在水平和垂直的方向上居中

在带有 .modal-dialog 元素上添加 .modal-dialog-centered 。

26.4 滚动的模态框

当有很多内容在模态框上的时候，添加一个滚动条。

在带有 .modal-dialog 元素上添加 .modal-dialog-scrollable

二十七、提示框

Tooltip组件是一个小的自动弹出的盒子，当用户移动鼠标到一个元素上面的时候会出现。

添加 data-toggle="tooltip" 到一个元素上，使用 title 属性指定提示框的内容。

注意：使用提示框，必要使用javaScript加载提示框。

    <script>
        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>
</head>
<body>
    <div class="container">
        <br><br><br>
        <a href="#" data-toggle="tooltip" title="Hooray!" data-placement="top">Hover over me</a>
    </div>
</body>

27.1 设定提示框的位置

使用 data-placement 可以设定提示框位于元素的：top, bottom, left 或 right

二十八、弹出框 Popover

popover组件和tooltips相似。当用户点击的时候，一个弹出框会出现。不同的是，Popover可以包含更多的内容。

为了创建一个Popover，添加 data-toggle="popover" 属性到一个元素中。

使用 title 属性指定popover的头内容；使用data-content 属性指定 popover的正文内容。

注意： Popover必须被JQuery初始化。选择那个指定的元素，然后调用popover() 方法。

28.1 popover 的位置

默认情况下，弹出框会出现在元素的右边，使用 data-placement 属性可以设置 popover处于元素的顶部、左边、右边。

28.2 关闭popover

默认情况下，popover 是被关闭，当再次点击popover的时候。能够使用 data-trigger="focus" ，当点击元素外面的时候popover被关闭。

如果想改变为，光标移到元素上面的时候popver显示，光标移出元素外面的时候popover不显示，使用 data-trigger="hover"。

二十九、Toast

toast非常像 alert，当一些事情发生之后（比如：当用于点击一个按钮，提交一个表单等等），它仅仅显示两秒钟之后消失。

为了创建toast，使用 .toast 类，并添加 .toast-header 和 .toast-body 在里面。

提示： toast必须使用 jQery进行初始化，选中那个元素，并调用 toast() 方法。

29.1 toast的显示和隐藏

默认情况下，Toasts是隐藏的，使用 data-autohide="false" 将其默认行为改为显示。为了关闭它，使用一个添加了 data-dismiss="toast" 的button元素。

三十、Scrollspy 卷轴

Scrollspy是用于基于卷轴的位置自动更新导航列表。

添加 data-spy="scroll" 到一个元素中，这个元素应该包含卷轴的区域（通常这个元素是 <body>）。

然后添加带有id值或带有<nav>类“.navbar” 的data-target，这用于确保导航条和卷轴区域相连。

注意：导航条项目中的连接的<a href="section1"> 必须和卷轴元素的id相匹配<div id="section1">

data-offset 元素用于指定卷轴偏移顶部的位置。这是有用的，当你感觉到导航栏的变化太快或太早。

data-spy="scroll" 需要css位置属性，使用 “relative” 让其工作正常。

三十一、公共设施

BootStrap 中有很多公共设施，能够快速实现样式，不需要使用css代码。

31.1 边框

    <div class="container">
        <span class="border"></span>
        <span class="border border-0"></span>
        <span class="border border-top-0"></span>
        <span class="border border-left-0"></span>
        <span class="border border-right-0"></span>
        <span class="border border-bottom-0"></span>
    </div>

31.2 边框的颜色

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

31.3 边框的拐角

<span class="rounded-sm"></span>
<span class="rounded"></span>
<span class="rounded-lg"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>

31.4 浮动

向左浮动使用： .float-left，右浮动使用： .float-right。清除浮动使用： .clearfix。

<div class="clearfix">
  <span class="float-left">Float left</span>
  <span class="float-right">Float right</span>
</div>

31.5 敏感的浮动

浮动一个元素到左边或右边，使用敏感的浮动类： .float-*-left|right 。在这里“*” 代表 sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px))。

<div class="float-sm-right">Float right on small screens or wider</div><br>
<div class="float-md-right">Float right on medium screens or wider</div><br>
<div class="float-lg-right">Float right on large screens or wider</div><br>
<div class="float-xl-right">Float right on extra large screens or wider</div><br>
<div class="float-none">Float none</div>

31.6 让元素水平居中

.mx-auto

31.7 设置元素的宽

w-* （.w-25, .w-50, .w-75, .w-100, .mw-100）

        <div class="w-25 bg-warning">Width 25%</div>
        <div class="w-50 bg-warning">Width 50%</div>
        <div class="w-75 bg-warning">Width 75%</div>
        <div class="w-100 bg-warning">Width 100%</div>

31.8 设置元素的高

h-* （.h-25, .h-50, .h-75, .h-100, .mh-100）

        <div style="height:200px;" class="bg-dark">
            <div class="h-25 bg-warning w-10 float-left">Height 25%</div>
            <div class="h-50 bg-info w-10 float-left">Height 50%</div>
            <div class="h-75 bg-success w-10 float-left">Height 75%</div>
            <div class="h-100 bg-info w-10 float-left">Height 100%</div>
        </div>

31.9 margin 和 padding

BootStrap为margin和padding设置了灵敏的属性：xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px) 或 xl (>=1200px))

格式为： {property}{sides}-{size} 对于屏幕大小为xs。格式： {property}{sides}-{breakpoint}-{size} 用于屏幕大小为： sm、md、lg、xl。

property为两者中的一个：

m : 设置 margin；

p：设置 padding；

sides有如下几种选择：
t ：顶部

b : 底部

l：左

r：右

x：左右

y：上下

空格： margin和padding的四边

size可选的值有：

0 值为0px；

1 0.25rem 当font-size为16px时，size值为4px；

2 0.5rem 当font-zie为16px时，size值为8px；

3 1rem 当font-zie为16px时，size值为16px；

4 1.5rem 当font-zie为16px时，size值为24px；

5 3rem 当font-zie为16px时，size值为48px；

auto 设置margin的值为auto；

注意： margin的值也可以是负值：

n1 设置margin的值为-0.25rem 当font-size为16px时，size值为-4px；

n2 设置margin的值为-0.5rem 当font-size为16px时，size值为-8px；

n3 设置margin的值为-1rem 当font-size为16px时，size值为-16px；

n4 设置margin的值为-1.5rem 当font-size为16px时，size值为-24px；

n5 设置margin的值为-3rem 当font-size为16px时，size值为-48px；

31.10 为元素添加影子

.shadow-none、.shadow-sm、 shadow、 shadow-lg

31.11 align-

使用 align- 改变元素的排列。

.align-baseline .align-top .align-middle .align-bottom .align-text-top .align-text-bottom

31.12 创造基于父类宽的嵌入元素

使用 .embed-responsive 和 .embed-responsive-item-*bt* 放在父元素的类里面，包裹带有.embed-responsive-item 的子元素（像 <iframe> 或 <video>）

31.13 可见度

.visible 或 .invisible

31.14 位置

使用 .fixed-top 让元素固定在页面的顶部。

使用 .fixed-bottom 让元素固定在页面的底部。

使用 .sticky-top 让任何元素滚动到顶部的元素固定在顶部。

31.15 关闭图标

使用 .close 样式化一个关闭的图标；“×” 象征着 “X”

31.16 屏读

使用 .sr-only 在所有设备上隐藏元素，除了屏读。

31.17 文本颜色

.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (默认颜色为 black) and .text-light

还可以为黑色和白色添加透明度

.text-black-50 或 .text-white-50

31.18背景颜色

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light

31.19 块级元素

.d-block

d-*-block ： d-sm-block d-md-block d-lg-block d-xl-block

三十二、活动的盒子

与BootStrap3 巨大的不同是，BootStrap4 使用 flexbox来代替浮动。

32.1 flexbox

创建带有 .d-flex 的容器，将容器里面的子元素都浮动。

使用 .d-inline-flex 创建行内元素的浮动元素。

        <div class="d-flex">
            <div class="bg-success">Success</div>
            <div class="bg-info">INFO</div>
        </div>
        <div class="d-inline-flex">
            <div class="bg-success">Success</div>
            <div class="bg-info">INFO</div>
        </div>

使用 .flex-row 将元素在水平方向上一个接着一个，默认使用。

使用 .flex-row-reverse 将元素一个挨着一个靠右。

        <div class="d-flex flex-row-reverse">
            <div class="bg-success">Success</div>
            <div class="bg-info">INFO</div>
        </div>

32.2 垂直方向上

使用 .flex-column 将元素在垂直方向上排布，使用 .flex-column-reverse 让元素在垂直方向上倒序排布。

        <div class="d-flex flex-column">
            <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>
        <div class="d-flex flex-column-reverse">
            <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>

32.3 调整元素项在水平方向上的位置

使用 .justify-content-* ，可用的值有： start (默认), end, center, between 或者 around

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

32.3 让元素项等宽

        <div class="d-flex">
            <div class="p-2 bg-info flex-fill">Flex item 1</div>
            <div class="p-2 bg-warning flex-fill">Flex item 2</div>
            <div class="p-2 bg-dark flex-fill">Flex item 3</div>
            <div class="p-2 bg-secondary flex-fill">Flex item 3</div>
            <div class="p-2 bg-success flex-fill">Flex item 3</div>
        </div>

32.4 元素占用水平行剩余所有的空间

.flex-grow-1 让元素占用剩余行的空间

.flex-shrink-1 让元素缩小

32.5 元素的顺序

使用 .order-* （0-12）类，值越小，等级越高。

        <div class="d-flex">
            <div class="p-2 bg-info order-5">Flex item 5</div>
            <div class="p-2 bg-warning order-3">Flex item 3</div>
            <div class="p-2 bg-dark order-4">Flex item 4</div>
            <div class="p-2 bg-secondary order-1">Flex item 1</div>
            <div class="p-2 bg-success flex-grow-1 order-2">Flex item 2</div>
        </div>

32.6 添加自动的页面空白

.mr-auto 将元素放在空白的右边；

.ml-auto 将元素放在空白的左边；

        <div class="d-flex">
            <div class="p-2 bg-info mr-auto">Flex item 5</div>
            <div class="p-2 bg-warning">Flex item 3</div>
            <div class="p-2 bg-dark ">Flex item 4</div>
            <div class="p-2 bg-secondary">Flex item 1</div>
            <div class="p-2 bg-success">Flex item 2</div>
        </div>

32.7 包裹

容器包裹元素有三种方式： .flex-nowrap （默认，将所有元素排在一行）、flex-wrap （正序，换行）、.flex-wrap-reverse （倒序，换行）。

32.8 校准垂直方向上内容（多行）

使用 .align-content-* （.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around and .align-content-stretch）

32.9 校准单行

.align-items-* （.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, and .align-items-stretch(默认).）

32.10 校准单个元素

.align-self-* （.align-self-start, .align-self-end, .align-self-center, .align-self-baseline, and .align-self-stretch (默认)）

32.11 敏感的类型

三十三、图标

Bootstrap没有自己的图标，可以利用 Awesome 的icons

三十四、媒体对象

BootStrap提供了很方便的方式校准媒体对象。

媒体对象通常用于展示博客评论等

34.1 基础的媒体对象

为了创建媒体对象，添加 .media 到容器上。在里面使用 .media-body 包裹子元素。

34.2 内嵌的媒体对象

为了内嵌一个媒体对象，在 .media-body里面放置一个 .media

34.3 将图片放置在右边

为了将媒体对象放置在右边，在 .media-body 之后添加图片。

        <div class="media body p-2">
            <div class="media-body p-3">
                <h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    et dolore magna aliqua.</p>
            </div>
            <img src="san.png" style="width: 60px;" class="rounded-circle ml-3 mt-3">
        </div>

34.4 将图片放置在顶部、中部、底部

在图片上添加 align-self-start 或 align-self-center 或 align-self-end。

三十五、过滤（ bootStrap的高级特性）

bootStrap 不提供这种功能，可以使用jquery实现：

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

鲲鹏飞九万里

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
BootStrap4的用法

一、ContainerBootStrap4 同样需要一个containing 元素包裹正文内容。.container 提供了一个固定的宽；.container-fluid提供了一个易变的宽。二、网格系统BootStrap的网格系统是基于flexbox，允许至多12个纵列。如果不想单独使用12个纵列，可以将多个纵列组合在一起成为更宽的列。网格系统是反映敏感的，列将自动的安排，根据...
复制链接

扫一扫

专栏目录