一、下拉菜单
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>下拉菜单</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<h1>基本用法</h1>
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-secondary btn-lg dropdown-toggle" data-toggle="dropdown">用button做下拉菜单（大尺寸）</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">3</a>
</div>
</div>
<div class="dropup">
<a class="btn btn-secondary btn-sm dropdown-toggle" href="#" data-toggle="dropdown">用a做下拉菜单（小尺寸）</a>
<div class="dropdown-menu">
<button class="dropdown-item" href="#">4</button>
<button class="dropdown-item" href="#">5</button>
<div class="dropdown-divider"></div>
<button class="dropdown-item" href="#">6</button>
</div>
</div>
</div>
<hr><h1>分裂式按钮</h1>
<div class="btn-group dropright">
<button class="btn btn-danger">文字和三角分开了</button>
<button class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
<div class="dropdown-menu">
<a class="dropdown-item active" href="#">加上.active 让下拉列表中的项样式为active</a>
<a class="dropdown-item disabled" href="#">加上.disabled 让下拉列表中的项 样式为不可用</a>
<a class="dropdown-item" href="#">3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">4</a>
</div>
</div>
<hr><h1>菜单对齐</h1>
<span>====================================================================></span>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">右对齐</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item">默认情况下，菜单和按钮左对齐</button>
<button class="dropdown-item">使用.dropdown-menu-right做到右对齐</button>
<button class="dropdown-item">支持响应式对齐，即.dropdown-menu-lg-right，但通过添加data-display="static"属性禁用动态定位</button>
</div>
</div>
<hr><h1>菜单内容</h1>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">内容</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">使用.dropdown-header做头部样式</h6>
<a class="dropdown-item" href="#">使用.dropdown-divider做分割线</a>
<div class="dropdown-divider"></div>
</div>
</div>
<hr><h1>菜单位置</h1>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-offset="10,20">data-offset="x,y"指定菜单偏移量</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">1</a>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
二、表单
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>表单</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<div class="form-group">
<h4>基本用法</h4>
<label for="exampleInputEmail1">邮箱地址框用.form-control</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="邮箱地址框">
<small class="form-text text-muted">文本用.form-text</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码框用.form-control</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码框">
</div>
<div class="form-check disabled">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">复选框用.form-check-input，复选框label用.form-check-label，label父标签用form-check</label>
</div>
<button type="submit" class="btn btn-primary">提交按钮</button>
<div class="form-group">
<label for="exampleFormControlSelect1">下拉菜单（单选）</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>select用.form-control</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">下拉菜单（多选）</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>select用.form-control</option>
<option>按住ctrl键可多选</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">文本域用.form-control</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleFormControlFile1">文件选择用.form-control-file</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
<div class="form-group">
<label for="formControlRange">输入范围用.form-control-range</label>
<input type="range" class="form-control-range" id="formControlRange">
</div>
</div>
<div class="col-6">
<h4>大小尺寸</h4>
<input class="form-control form-control-lg" type="text" placeholder="大尺寸用.form-control-lg">
<input class="form-control" type="text" placeholder="默认尺寸">
<input class="form-control form-control-sm" type="text" placeholder="小尺寸用.form-control-sm">
<hr><h4>只读属性</h4>
<small>在input控件上增加readonly属性，变成只读的input控件颜色较谈（就象禁用的输入框），但保留鼠标效果。</small>
<input class="form-control" type="text" placeholder="只读文本框" readonly>
<hr><h4>只读纯文本</h4>
<small>将input readonly进一步处理为纯文本（没有控件框），用 .form-control-plaintext。它可以移除预设的表单样式并保留适当的边距和填充间隙。</small>
<input class="form-control-plaintext" type="text" placeholder="只读纯文本" readonly>
<hr><h4>选框的堆叠</h4>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">默认情况下，同级任意数量的复选框与单选框按钮垂直堆叠，</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">并与.form-check有间隙隔离。</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">通过添加 .form-check-inline到任何一个组，</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">会使加到任何.form-check中的选取框平行排列。</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
<label class="form-check-label" for="inlineCheckbox3">3</label>
</div>
<div class="form-check form-check-inline ml-5">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">3</label>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
三、大块屏
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>大块屏</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1 class="display-3">大块广告屏</h1>
<p class="lead">简介</p>
<hr class="my-4">
<p>正文</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">跳转按钮</a>
</p>
</div>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">想要让广告大屏幕占满当前显示浏览器全屏、不带有圆角，只要添加.jumbotron-fluid CSS修饰符，并在里面添加一个.container 或 .container-fluid 内容空间即可。</p>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
四、列表组
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>列表组</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<h4>两种用法</h4>
<ul class="list-group">
<li class="list-group-item active">使用.active表示当前有效的列表项</li>
<li class="list-group-item disabled">使用.disabled表示当前禁用的列表项</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">使用.active表示当前有效的列表项</a>
<a href="#" class="list-group-item list-group-item-action">这种用法里不要用.btn系列的样式。</a>
<a href="#" class="list-group-item list-group-item-action">还可以使用a标签</a>
<a href="#" class="list-group-item list-group-item-action disabled">使用.disabled表示当前禁用的列表项</a>
</div>
</div>
<div class="col-6">
<h4>Flush紧致贴齐</h4>
<ul class="list-group list-group-flush">
<li class="list-group-item">加入.list-group-flush选择器，可以实现移除部分边框以及圆角，</li>
<li class="list-group-item disabled">从而产生边缘贴齐的列表组，这在诸如Card卡片等容器中很实用。</li>
</ul><br><br>
<br><h4>水平列表</h4>
<ul class="list-group list-group-horizontal">
<li class="list-group-item">使用.list-group-horizontal将列表项改为水平排列</li>
<li class="list-group-item">响应式用法：.list-group-horizontal-{sm|md|lg|xl}</li>
</ul>
</div>
</div>
<hr><h4>Javascript行为</h4>
<div class="row">
<div class="col-6">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home">惊雷</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile">紫电</a>
</div>
</div>
<div class="col-6">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home">这通天修为天塌地陷紫金锤</div>
<div class="tab-pane fade" id="list-profile">说玄真火焰九天玄剑惊天变</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
五、媒体对象
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>弹出模态框</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container">
<ul>
<li class="media">
<img class="mr-3" src="Penguins.jpg" width="20%" alt="图片加载失败">
<div class="media-body align-self-start">
<h5 class="mt-0">左图右文，顶端对齐</h5>正文--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
</div>
</li>
<li class="media">
<div class="media-body align-self-center">
<h5 class="mt-0">左文右图，垂直居中</h5>正文--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
</div>
<img class="mr-3" src="Penguins.jpg" width="20%" alt="图片加载失败">
</li>
<li class="media">
<img class="mr-3" src="Penguins.jpg" width="20%" alt="图片加载失败">
<div class="media-body align-self-end">
<h5 class="mt-0">左图右文，顶端对齐</h5>正文--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
</div>
</li>
</ul>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
六、弹出模态框
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>弹出模态框</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container">
<ul>
<li>弹出模态框是用HTML、CSS和Javascript构建的，它们位于文档中其它表现元素之上，并从body中删除滚动事件，以便模态框自身的内容能得到滚动。</li>
<li>点击模态框的“backdrop”（灰背景区域），将自动关闭动态模块框。</li>
<li>Bootstrap一次只支持一个模态窗口，不支持嵌套模式，以免造成用户体验不佳。</li>
<li>模态框使用position: fixed，在呈现上与其它元素相比有很大不同。请尽可能将弹出模态框的HTML放在顶级位置，以避免其它元素干扰，尤其是当另一个固定元素中也定义了 .modal 事件时，你可能会遇到问题。</li>
<li>根据HTML5的语义定义， autofocus HTML属性对Bootstrap模态框没有影响，要达到同样的效果，需要使用一些JavaScript</li>
<li>在.modal上添加.bd-example-modal-{sm|lg|xl}和在.modal-dialog上添加.modal-{sm|lg|xl}实现小尺寸、大尺寸和超大尺寸，对应modal的max-width分别为300px、500px、1140px，默认为800px</li>
</ul>
<button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">点击弹出模态框</button>
<div class="modal fade" id="exampleModal" tabindex="5">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">标题</h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">使用.fade模态框将从页面顶部向下浮动并淡入展现</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">滚动长内容</button>
<div class="modal fade" id="exampleModalLong" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">标题</h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body"><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p><p>20</p><p>21</p><p>22</p><p>23</p><p>24</p><p>25</p><p>26</p><p>27</p><p>28</p><p>29</p><p>30</p></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">垂直居中</button>
<div class="modal fade" id="exampleModalCenter" tabindex="5">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">标题</h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">将.modal-dialog-centered添加到.modal-dialog使模态框垂直居中。</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModals" data-whatever="收信人A">发给收信人A</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModals" data-whatever="收信人B">发给收信人B</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModals" data-whatever="收信人C">发给收信人C</button>
<div class="modal fade" id="exampleModals" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">发短信</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">收信人：</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">消息：</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">发送</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
$('#exampleModals').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('发短信给 ' + recipient)
modal.find('.modal-body input').val(recipient)
})
</script>
</body>
</html>
七、导航栏
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>导航栏</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<ul>
<li>.navbar-expand-lg表示大屏幕及以上元素横排，大屏幕以下成收缩竖排</li>
<li>.navbar-brand 为您的公司，产品或项目名称。</li>
<li>.navbar-nav 提供完整的高和轻便的导航（包括对下拉菜单的支持）。</li>
<li>.navbar-toggler 用于我们的折疊插件和其他navigation toggling行为。</li>
<li>.form-inline 用于任何表单控件和操作。</li>
<li>.navbar-text 用于添加垂直居中的文本字符串。</li>
<li>.collapse.navbar-collapse用于通过父断点进行分组和隐藏导航列内容。</li>
<li>使用.fixed-top可以将导航栏固定在顶部，.fixed-bottom固定在底部，.sticky-top粘性固定（默认）</li>
</ul>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">项目名称</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarSupportedContent" >
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<span class="navbar-text">????????</span>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
扩展导航区
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarToggleExternalContent">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
八、分页
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>分页</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<nav>
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#">
<span>«</span>
</a>
</li>
<li class="page-item active"><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="#">
<span>»</span>
</a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-lg">
<li class="page-item disabled">
<a class="page-link" href="#">
<span>Previous</span>
</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="#">
<span>Next</span>
</a>
</li>
</ul>
</nav>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
九、POP提示
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>POP提示</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<ul>
<li>由于性能原因，popover提示框组件是可选的，所以你必须自己将它们初始化才能启动生效。</li>
<li>零长度的title和content不会显示为一个弹出提示框。</li>
<li>指定container:'body'定义，以避免在更复杂的组件（如输入框组、按钮组等）中产生呈现问题。</li>
<li>在隐藏元素上触发弹出提示框是无效（不起作用）的。</li>
<li>.disabled 或 disabled 元素的弹出提示框触发点击按钮，必须在在外层父元素上。</li>
<li>如果从一个跨多行的a上触发提示框，提示框将居中。使用white-space: nowrap;可以避免这种情况。</li>
<li>必须先隐藏弹出提示框，然后才能从DOM中删除相应的元素（以完成弹出关闭完整行为）。</li>
</ul>
<button class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">右边弹出</button>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
$(function () {
$('[data-toggle="popover"]').popover() // 启用弹出
})
</script>
</body>
</html>
十、进度条
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>进度条</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container">
<div class="progress mb-2">
<div class="progress-bar"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar" style="width: 25%">25%</div>
</div>
<div class="progress mb-2">
<div class="progress-bar" style="width: 50%">50%</div>
</div>
<div class="progress mb-2">
<div class="progress-bar" style="width: 75%">75%</div>
</div>
<div class="progress mb-2">
<div class="progress-bar" style="width: 100%">100%</div>
</div>
<div class="progress mb-2">
<div class="progress-bar bg-danger" style="width: 25%">25%</div>
<div class="progress-bar bg-warning progress-bar-striped" style="width: 30%">30%</div>
<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 20%">20%</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
十一、滚动监听
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>滚动监听</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container" style="max-width: 90%">
<ul>
<li>如果从源代码构建JS，请 包括 util.js。</li>
<li>它必须在Bootstrap nav 导航组年 或 list group列表组上使用。</li>
<li>Scrollspy 需要在你监控的元素上使用 position: relative; ，通常是 <body>。</li>
<li>当需要对 <body>以外的元素进行监控时，请确保具有 height 高度值和 overflow-y: scroll; 属性。</li>
<li>锚点 (<a>)是必须的，并且必须指向一个id上。</li>
</ul>
<div class="row">
<div class="col-4">
<hr><h4>监听导航栏</h4>
<nav id="navbar-example2" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</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="#one">one</a>
<a class="dropdown-item" href="#two">two</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#three">three</a>
</div>
</li>
</ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0" style="height: 100px;overflow-y: auto;">
<h4 id="fat">@fat</h4>
<p>...</p>
<h4 id="mdo">@mdo</h4>
<p>...</p>
<h4 id="one">one</h4>
<p>...</p>
<h4 id="two">two</h4>
<p>...</p>
<h4 id="three">three</h4>
<p>...</p>
</div>
</div>
<div class="col-4">
<hr><h4>监听嵌套的导航栏</h4>
<div class="row">
<div class="col-3">
<nav id="navbar-example3" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Item2</a>
<a class="nav-link" href="#item-3">Item3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav>
</nav>
</div>
<div class="col-9">
<div data-spy="scroll" data-target="#navbar-example3" data-offset="0" style="height: 300px;overflow-y: auto;">
<h4 id="item-1">Item 1</h4>
<p>...</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Item 2-2</h5>
<p>...</p>
<h4 id="item-2">Item 2</h4>
<p>...</p>
<h4 id="item-3">Item 3</h4>
<p>...</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>...</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>...</p>
</div>
</div>
</div>
</div>
<div class="col-4">
<hr><h4>监听列表组</h4>
<div class="row">
<div id="list-example" class="list-group col-3">
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example col-9" style="height: 100px;overflow-y: auto;">
<h4 id="list-item-1">Item 1</h4>
<p>...</p>
<h4 id="list-item-2">Item 2</h4>
<p>...</p>
<h4 id="list-item-3">Item 3</h4>
<p>...</p>
<h4 id="list-item-4">Item 4</h4>
<p>...</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
十二、旋转特效
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>旋转特效</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-2">
<h4>圆形旋转</h4>
</div>
<div class="col-2">
<h4>渐变缩放</h4>
</div>
<div class="col-2">
<h4>按钮类型</h4>
</div>
<div class="col-6">
<h4>位置</h4>
</div>
</div>
<div class="row">
<div class="col-2">
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-border spinner-border text-primary"></div>
<div class="spinner-border text-secondary" style="width: 3rem;height: 3rem;"></div>
</div>
<div class="col-2">
<div class="spinner-grow spinner-grow-sm text-success"></div>
<div class="spinner-grow spinner-grow text-danger"></div>
<div class="spinner-grow text-warning" style="width: 3rem;height: 3rem;"></div>
</div>
<div class="col-2">
<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>
</div>
<div class="col-1">
<div class="bg-primary" style="height: 60px;">
<div class="spinner-border">1</div>
</div>
</div>
<div class="col-1">
<div class="bg-secondary" style="height: 60px;">
<div class="spinner-border m-4">2</div>
</div>
</div>
<div class="col-1">
<div class="bg-success d-flex justify-content-center align-items-center" style="height: 60px;">
<div class="spinner-border">3</div>
</div>
</div>
<div class="col-1">
<div class="bg-danger d-flex align-items-center" style="height: 60px;">
<div class="spinner-border">4</div>
</div>
</div>
<div class="col-1">
<div class="bg-warning clearfix" style="height: 60px;">
<div class="spinner-border float-right">5</div>
</div>
</div>
<div class="col-1">
<div class="bg-info text-center" style="height: 60px;">
<div class="spinner-border">6</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
十三、弹出提示框
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>弹出提示框</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<button class="btn btn-primary" onclick="$('#toast').toast('show')">点击弹出提示框</button>
<button class="btn btn-primary" onclick="$('#toast').toast('hide')">点击隐藏提示框</button>
<button class="btn btn-primary" onclick="$('#toast').toast('dispose')">点击隐藏提示框</button>
<div class="toast" id="toast" data-autohide="false">
<div class="toast-header">
<img src="Penguins.jpg" class="rounded mr-2" style="width: 10%" alt="图片加载失败">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button class="ml-2 mb-1 close" data-dismiss="toast">
<span>×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
十四、提示冒泡
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>弹出提示框</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container"><br><br><br><br><br><br>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" data-html="true" title="<li>Tooltip on top</li>">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" data-html="true" title="<h1>Tooltip on right</h1>">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" data-html="true" title="<i>Tooltip on bottom</i>">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" data-html="true" title="<b>Tooltip on left</b>">
Tooltip on left
</button>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
</body>
</html>
扫一扫
5821
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
