BootStrap学习记录

网格系统

网格类

通过.col-*-*设置。 第一个星号 *表示响应的设备: sm, md, lg 或 xl, 第二个星号 * 表示一个数字, 同一行的数字相加为 12。宽度与数字成正比。
+ .col- 针对所有设备
+ .col-sm- 平板 -屏幕宽度等于或大于576px
+ .col-md- -桌面显示器 -屏幕宽度等于或大于768px
+ .col-lg- 大桌面显示器 -屏幕宽度等于或大于992px
+ .col-xl- 超大桌面显示器 -屏幕宽度等于或大于1200px

当一个标签包含多个网格类时，会根据窗口大小来选择性显示比如：

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>RUNOOB</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>菜鸟教程</p>
    </div>
  </div>
</div>

偏移列

偏移列通过 offset-- 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
例如：.offset-md-4 是把.col-md-4 往右移了四列格。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

文字排版

bootstrap默认设置

Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。
默认的 font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。
此外，所有的

元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

---

<h1>-<h6>

bootstrap提供了h1到h6的默认样式，同时还提供了四个 Display类：.display-1, .display-2, .display-3, .display-4来显示较大的标题

<small>

<small> 元素用于创建字号更小的颜色更浅的文本

<div class="container">
  <h1>更小文本标题</h1>
  <p>small 元素用于字号更小的颜色更浅的文本:</p>       
  <h1>h1 标题 <small>副标题</small></h1>
  <h2>h2 标题 <small>副标题</small></h2>
  <h3>h3 标题 <small>副标题</small></h3>
  <h4>h4 标题 <small>副标题</small></h4>
  <h5>h5 标题 <small>副标题</small></h5>
  <h6>h6 标题 <small>副标题</small></h6>
</div>

<mark>

<mark>为黄色背景及有一定的内边距:

<div class="container">
  <h1>高亮文本</h1>    
  <p>使用 mark 元素来 <mark>高亮</mark> 文本。</p>
</div>

<abbr>

<abbr>元素的样式为显示在文本底部的一条虚线边框，其中的title属性可以用于解释说明:

<div class="container">
  <h1>Abbreviations</h1>
  <p>The abbr element is used to mark up an abbreviation or acronym:</p>
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>

<blockquote>

对于引用的内容，可以使用<blockquote>标签

<div class="container">
  <h1>Blockquotes</h1>
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>
</div>

<dl> <dt> <dd>

这三个标签用于显示描述列表：

<div class="container">
  <h1>Blockquotes</h1>
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>
</div>

<code>

用于显示代码：

<div class="container">
  <h1>代码片段</h1>
  <p>可以将一些代码元素放到 code 元素里面:</p>
  <p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定义部分文档内容。</p>
</div>

<kbd>

keyboard inputs用于突出显示经过键盘输入的类型：

<div class="container">
  <h1>Keyboard Inputs</h1>
  <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
  <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>

<pre>

对于需要多行显示的代码，通常使用<pre>标签，此标签会保留所有换行和空格：

<div class="container">
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>
</div>

Bootstrap4 颜色

字体颜色

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

<div class="container">
  <h2>代表指定意义的文本颜色</h2>
  <p class="text-muted">柔和的文本。</p>
  <p class="text-primary">重要的文本。</p>
  <p class="text-success">执行成功的文本。</p>
  <p class="text-info">代表一些提示信息的文本。</p>
  <p class="text-warning">警告文本。</p>
  <p class="text-danger">危险操作文本。</p>
  <p class="text-secondary">副标题。</p>
  <p class="text-dark">深灰色文字。</p>
  <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
  <p class="text-white">白色文本（白色背景上看不清楚）。</p>
</div>

背景颜色

提供背景颜色的类有: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。
注意背景颜色不会设置文本的颜色，在一些实例中需要与 .text-* 类一起使用。
示例代码与字体颜色类似
基础样式表格

table 表格

基础样式表格

通过使用<table class="table">来设置基础样式表格

条纹样式表格

通过使用<table class="table table-striped">来设置条纹样式表格

带有边框表格

.table默认不含有外边框和列分割线，使用<table class="table table-bordered">可以显示所有边框

鼠标悬停效果表格

使用<table class="table table-hover">可以使得表格带有鼠标悬停效果

黑色背景表格

.table-dark 类可以为表格添加黑色背景，使用<table class="table table-dark">

表格颜色类的说明：

类名	描述
.table-primary	蓝色：指定这是一个重要操作
.table-success	绿色: 指定这是一个允许执行的操作
.table-danger	红色: 指定这是可以危险的操作
.table-info	浅蓝色: 表示内容已变更
.table-warning	橘色: 表示需要注意的操作
.table-active	灰色: 用于鼠标悬停效果
.table-secondary	灰色: 表示内容不怎么重要
.table-light	浅灰色，可以是表格行的背景
.table-dark	深灰色，可以是表格行的背景

表头颜色

.thead-dark 类用于给表头添加黑色背景， .thead-light 类用于给表头添加灰色背景使用方法<thead class="thead-dark">

较小的表格

.table-sm 类用于通过减少内边距来设置较小的表格:

响应式表格

.table-responsive-*类用于创建响应式表格，* （sm，md，lg，xl）表示设备分辨率：在屏幕宽度小于一定值时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）

图片形状

• 圆角图片
  .round
• 椭圆图片
  .rounded-circle
• 缩略图
  .img-thumbnail
• 图片对齐方式
  使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐
• 响应式图片
  根据屏幕的大小自动适应。我们可以通过在 标签中添加 .img-fluid 类来设置响应式图片。.img-fluid 类设置了 max-width: 100%; 、 height: auto;

Jumbotron

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

<div class="jumbotron">
  <h1>菜鸟教程</h1> 
  <p>学的不仅是技术，更是梦想！！！</p> 
</div>

在 .jumbotron-fluid 类里头的 div添加 .container 或 .container-fluid 可以创建全屏幕的没有圆角的大屏幕：

<div class="jumbotron jumbotron-fluid">
  <div class="container">
      <h1>菜鸟教程</h1> 
      <p>学的不仅是技术，更是梦想！！！</p>
  </div>
</div>

提示框

提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现（颜色意义与table背景相同）

提示框内的链接

.alert-link 类可以来设置匹配提示框颜色的链接

关闭提示框

在提示框中的 div 中添加 .alert-dismissable 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。

<div class="alert alert-success alert-dismissable">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>成功!</strong> 指定操作成功提示信息。
</div>

× (×) 是 HTML 实体字符，来表示关闭操作，而不是字母 “x”

提示框动画

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

<div class="alert alert-danger alert-dismissable fade show">

show和fade配合使用，只使用fade时提示框无法正常显示

按钮

bootstrap提供了不同类型的按钮样式，分别有其特殊含义：

<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-dark">黑色</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-link">链接</button>

按钮类可以也可以应用于<a>,<input>,<button>上
使用btn-outline-*类可以设置只含外边框类型的按钮，*代表的是按钮类型（primary，secondary……）
使用btn-*类可以设置按钮的大小，*表示大小（lg，sm……）
通过btn-block类可以设置块级按钮
通过.active类可以设置按钮是可用的， disabled 属性可以设置按钮是不可点击的。 注意 <a> 元素不支持 disabled 属性，可以通过添加 .disabled 类来禁止链接的点击。

按钮组

为了将按钮放在同一行上，我们可以在 <div> 元素上添加 .btn-group 类来创建按钮组（水平）:

<div class="btn-group btn-group-sm">
  <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>

添加btn-group-sm用于设置较小的按钮组，同理可以添加btn-group-lg来设置较大的按钮组

垂直按钮组

通过.btn-group-vertical类可以创建垂直按钮组

内嵌按钮组及下拉菜单

<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>

拆分按钮下拉菜单

<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>

徽章

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

<span class="badge badge-primary">主要</span>
<span class="badge badge-secondary">次要</span>
<span class="badge badge-success">成功</span>
<span class="badge badge-danger">危险</span>
<span class="badge badge-warning">警告</span>
<span class="badge badge-info">信息</span>
<span class="badge badge-light">浅色</span>
<span class="badge badge-dark">深色</span>

通过 .badge-pill 类来可以设置药丸形状徽章

进度条

通过改变进度条style中的width值（百分比）可以改变进度条的进度
通过改变progress div 中的height可以改变高度
可以在进度条标签中添加内容来显示进度
通过bg-*可以改变进度条的背景颜色
通过.progress-bar-striped类可以设置条纹进度条
在条纹进度条的基础上添加.progress-bar-animated类可以实现进度条的动画效果
通过在.progress内增加多个子标签可以实现不同颜色的进度条

<div class="progress" style="height:30px;">
  <div class="progress-bar bg-success .progress-bar-striped .progress-bar-animated" style="width:70%;">70%</div>
</div>

分页

在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类。
当前页面可以使用.active来高亮显示
.disabled类可以用来设置不可点击的页面
pagination-*类可以用来设置分页条目的大小（sm，lg）

<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 active"><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>

面包屑导航

通过breadcrumb breadcrumb-item类可以设置面包屑导航用法和分页类似

列表组

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

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

要创建一个链接的列表组，可以将<ul> 替换 <div> ，<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>

列表项目的颜色可以通过以下列来设置： .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

卡片card

通过.card 与 .card-body 类来可以创建一个简单的卡片
.card-header 类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式
卡片的背景颜色类： .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 类将图片要设置为背景

<div class="card" style="width:500px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

下拉菜单

.dropdown 类用来指定一个下拉菜单。
通过一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。
<div> 元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类。
.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线
.dropdown-header 类用于在下拉菜单中添加标题
.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)
如果要禁用下拉菜单的选项，可以使用.disabled 类
.dropdown-menu 类后添加 .dropdown-menu-right 类可以实现右对齐
如要实现上拉菜单，可以直接把<div class="dropdown" style="left: 200px;"></div> 改为<div class="dropup" style="left: 200px;"></div>（如果屏幕上方的高度不足以显示上拉菜单，则会在下方显示）

<div class="dropdown" style="left: 200px;">
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">下拉菜单!!!!!!!</button>
    <div class="dropdown-menu dropdown-menu-right">
        <div class="dropdown-header">head1</div>
        <a href="#" class="dropdown-item">item1</a>
        <a href="#" class="dropdown-item active">item2</a>
        <div class="dropdown-divider"></div>
        <div class="dropdown-header">head2</div>
        <a href="#" class="dropdown-item disabled">item3</a>
    </div>
</div>

折叠

当内容需要折叠展开的时候可以使用折叠的方法

<button data-toggle="collapse" data-target="#demo">折叠</button>

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

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

手风琴效果

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

<div id="accordion">
    <div class="card">
        <div class="card-title" data-toggle="collapse" data-target="#collapse1">first</div>
        <div class="card-text collapse" id="collapse1" data-parent="#accordion">firstfirstfirst</div>
    </div>
    <div class="card">
        <div class="card-title" data-toggle="collapse" data-target="#collapse2">second</div>
        <div class="card-text collapse" id="collapse2" data-parent="#accordion">secondsecondsecond</div>
    </div>
    <div class="card">
        <div class="card-title" data-toggle="collapse" data-target="#collapse3">third</div>
        <div class="card-text collapse" id="collapse3" data-parent="#accordion">thirdthirdthird</div>
    </div>
    <div class="card">
        <div class="card-title" data-toggle="collapse" data-target="#collapse4">fourth</div>
        <div class="card-text collapse" id="collapse4" data-parent="#accordion">fourthfourthfourth</div>
    </div>
    <div class="card">
        <div class="card-title" data-toggle="collapse" data-target="#collapse5">fivth</div>
        <div class="card-text collapse" id="collapse5" data-parent="#accordion">fivthfivthfivth</div>
    </div>
</div>

导航

在 <ul> 元素上添加 .nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类
.justify-content-center 类设置导航居中显示， .justify-content-end 类设置导航右对齐,默认左对齐。
.flex-column 类用于创建垂直导航
.nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记。
.nav-pills 类可以将导航项设置成胶囊形状。
.nav-justified 类可以设置导航项齐行等宽显示
.navbar-expand-xl|lg|md|sm 类可以创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。

<ul class="nav .justify-content-center navbar-expend-lg">
  <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>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

下拉菜单

<ul class="nav .justify-content-center nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Link</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Link</a>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">item1</a>
        <a href="#" class="dropdown-item">item2</a>
        <a href="#" class="dropdown-item">item3</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>

动态选项卡

选项卡是动态可切换的，可以在每个链接上添加 data-toggle="tab" 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类。
如果你希望有淡入效果可以在 .tab-pane 后添加 .fade 类:

<ul class="nav nav-tabs">
    <li class="nav-item"><a href="#home" class="nav-link" data-toggle="tab">home</a></li>
    <li class="nav-item"><a href="#tab1" class="nav-link" data-toggle="tab">tab1</a></li>
    <li class="nav-item"><a href="#tab2" class="nav-link" data-toggle="tab">tab2 </a></li>
</ul>
<div class="table-content">
    <div class="tab-pane active container">
        <h1>home</h1>
    </div>
    <div class="tab-pane container">
        <h1>tab1</h1>
    </div>
    <div class="tab-pane container">
        <h1>tab2</h1>
    </div>
</div>

导航栏

通过.navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。
导航栏上的选项可以使用 <ul> 元素并添加 class="navbar-nav" 类。 然后在 <li> 元素上添加 .nav-item 类， <a> 元素上使用 .nav-link 类
删除.navbar-expand-lg 可以实现垂直排布
可以使用以下类来创建不同颜色导航栏：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light

<navbar class="navbar navbar-expend-lg bg-light">
    <nav class="navbar-nav">
        <li class="nav-item"><a href="#" class="nav-link">item1</a></li>
        <li class="nav-item"><a href="#" class="nav-link">item2</a></li>
        <li class="nav-item"><a href="#" class="nav-link">item3</a></li>
    </nav>
</navbar>

折叠导航栏

通常，小屏幕上会折叠导航栏，通过点击来显示导航选项。
要创建折叠导航栏，可以在按钮上添加 class="navbar-toggler", data-toggle="collapse" 与 data-target="#thetarget" 类。然后在设置了 class="collapse navbar-collapse" 类的 div 上包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Navbar</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <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>

导航栏使用下拉菜单

导航栏可以固定在头部或者底部。
通过 .fixed-top 类来实现导航栏的固定
.fixed-bottom 类用于设置导航栏固定在底部
导航栏的表单 <form> 元素使用 class="form-inline" 类来排版输入框与按钮：
使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Logo</a>

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

    <!-- Dropdown -->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Dropdown link
      </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>
  </ul>
</nav>

表单

堆叠表单

<form>
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </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>

内联表单

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

<form class="form-inline">
  <label for="email">Email address:</label>
  <input type="email" class="form-control" id="email">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
  <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>

表单控件

Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color
- input
如果 input 的 type 属性未正确声明，输入框的样式将不会显示.Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color

    <div class="form-group">
      <label for="usr">用户名:</label>
      <input type="text" class="form-control" id="usr">
    </div>
    <div class="form-group">
      <label for="pwd">密码:</label>
      <input type="password" class="form-control" id="pwd">
    </div>

- textarea

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

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

  Option 1
  Option 2
  Option 3

• Radio 单选框
  使用 .radio-inline 类可以让选项显示在同一行上

    <div class="radio">
      <label><input type="radio" name="optradio">Option 1</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="optradio">Option 2</label>
    </div>
    <div class="radio disabled">
      <label><input type="radio" name="optradio" disabled>Option 3</label>
    </div>

• select 下拉菜单

    <div class="form-group">
      <label for="sel1">下拉菜单:</label>
      <select class="form-control" id="sel1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
    </div>

输入框组

使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。
使用 .input-group-prepend 类可以在输入框的的前面添加文本信息， .input-group-append 类添加在输入框的后面。
最后，我们还需要使用 .input-group-text 类（通常配合<span>使用）来设置文本的样式。

自定义表单

轮播图

<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>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="http://static.runoob.com/images/mix/img_fjords_wide.jpg">
      <div class="carousel-caption">
        <h3>第一张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="http://static.runoob.com/images/mix/img_nature_wide.jpg">
      <div class="carousel-caption">
        <h3>第二张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="http://static.runoob.com/images/mix/img_mountains_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 | 切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。

模态框

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

<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">open modal frame</button>
<div class="modal fade" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                my bootstrap modal
                <button class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">my bootstrap modalmy bootstrap modalmy bootstrap modal</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
            </div>
        </div>
    </div>
</div>

模态框尺寸

在<div> 的 .modal-dialog 后添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。

提示框

提示框是一个小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失
通过向元素添加 data-toggle="tooltip" 来来创建提示框。
title 属性的内容为提示框显示的内容：
提示框要写在jQuery的初始化代码里然后再指定的元素上调用tooltip（）方法
使用 data-placement 属性来设定提示框显示的方向: top, bottom, left 或 right:
HTML：

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

jQuery：

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});

弹出框

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

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

jQuery：

$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});

弹出框位置设置与提示框类似，均是由data-palcement属性来设定

关闭弹出框

默认情况下，弹出框在再次点击指定元素后就会关闭，通过 data-trigger="focus" 属性来设置在鼠标点击元素外部区域来关闭弹出框
若实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 data-trigger="hover"

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="一些内容">鼠标移动到我这</a>

滚动监听

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。
向想要监听的元素（通常是 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" data-target=".navbar" data-offset="50">

<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
  <ul class="navbar-nav">
    <li><a href="#section1">Section 1</a></li>
    ...
</nav>

<!-- 第一部分内容 -->
<div id="section1">
  <h1>Section 1</h1>
  <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...

</body>

Bootstrap 小工具

边框

使用 border 类可以添加或移除边框

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

边框颜色

Bootstrap4 提供了一些类来设置边框颜色:

<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>

边框圆角

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

<span class="rounded"></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>

浮动

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

<div class="clearfix">
  <span class="float-left">左浮动</span>
  <span class="float-right">右浮动</span>
</div>

响应式浮动

通过.float-*-left|right - * 为 sm, md, lg 或 xl 可以设置响应式浮动

<div class="float-sm-right">在大于小屏幕尺寸上右浮动</div><br>
<div class="float-md-right">在大于中等屏幕尺寸上右浮动</div><br>
<div class="float-lg-right">在大于大屏幕尺寸上右浮动</div><br>
<div class="float-xl-right">在大于超大屏幕尺寸上右浮动</div><br>
<div class="float-none">没有浮动</div>

居中对齐

通过mx-auto类可以设置居中对齐

<div class="mx-auto bg-warning" style="width:150px">居中显示</div>

宽度高度

通过使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 可以设置宽度:
通过使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 可以设置高度:

<div class="w-25 bg-warning">宽度 25%</div>
<div class="w-50 bg-warning">宽度 50%</div>
<div class="w-75 bg-warning">宽度 75%</div>
<div class="w-100 bg-warning">宽度 100%</div>
<div class="mw-100 bg-warning">最大宽度 100%</div>
<div style="height:200px;background-color:#ddd">
<div class="h-25 bg-warning">高度 25%</div>
<div class="h-50 bg-warning">高度 50%</div>
<div class="h-75 bg-warning">高度 75%</div>
<div class="h-100 bg-warning">高度 100%</div>
<div class="mh-100 bg-warning" style="height:500px">最大高度 100%</div>

Flex（弹性）布局

多媒体对象

要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果