05_Bootstrap插件02

7 小标签

通过 .label 实现小标签，用于提示类。

<h1>h1标题 <span class="label label-default">标签</span></h1>
<h2>h2标题<span class="label label-default">标签</span></h2>
<h3>h3标题<span class="label label-default">标签</span></h3>
<h4>h4标题<span class="label label-default">标签</span></h4>
<h5>h5标题<span class="label label-default">标签</span></h5>
<h6>h6标题<span class="label label-default">标签</span></h6><span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

8 标记

给链接、导航等元素嵌套 .badge 元素，可以很醒目的展示新的或未读的信息条目。

<button class="btn btn-primary" type="button">信息 <span class="badge">4</span>
</button>

9 图片组件

元素添加 .thumbnail 生成一个图片组件。

<div class="container"><div class="row"><div class="col-sm-6 col-md-4"><div class="thumbnail"><img src="http://www.ayunhe.com/content/uploads/2019/11/157449990088174318.jpg" alt=""><div class="caption"><h3>标题内容</h3><p>简单介绍</p><p><a href="#" class="btn btn-primary" role="button">Button</a><a href="#" class="btn btn-default" role="button">Button</a></p></div></div></div><div class="col-sm-6 col-md-4"><div class="thumbnail"><img src="http://www.ayunhe.com/content/uploads/2019/11/157449990088174318.jpg" alt=""><div class="caption"><h3>标题内容</h3><p>简单介绍</p><p><a href="#" class="btn btn-primary" role="button">Button</a><a href="#" class="btn btn-default" role="button">Button</a></p></div></div></div><div class="col-sm-6 col-md-4"><div class="thumbnail"><img src="http://www.ayunhe.com/content/uploads/2019/11/157449990088174318.jpg" alt=""><div class="caption"><h3>标题内容</h3><p>简单介绍</p><p><a href="#" class="btn btn-primary" role="button">Button</a><a href="#" class="btn btn-default" role="button">Button</a></p></div></div></div></div>
</div>

10 警告框

通过 .alert 类可以实现一个警告框，常用于信息的提示。

<div class="alert alert-success">表单提交成功！</div>
<div class="alert alert-info">你有一条新信息！</div>
<div class="alert alert-warning">用户已存在！</div>
<div class="alert alert-danger">表单提交失败！</div>

10.1 可关闭的警告框

为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮，实现警告框的手动关闭功能。

注意：

当使用 .close 按钮时，它必须是 .alert-dismissible 的第一个子元素，并且在它之前不能有任何文本内容。

<div class="alert alert-warning alert-dismissible fade in"><button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>用户已存在！
</div>

10.2 警告框中的链接

.alert-link 类，可以为链接设置与当前警告框相符的颜色。

<div class="alert alert-warning alert-dismissible">用户已存在，<a href="#" class="alert-link">请重新提交！</a><button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
</div>

11 模态框

模态框是指以弹出对话框的形式出现的弹框。

注意：

不支持同时打开多个模态框，千万不要在一个模态框上重叠另一个模态框。
模态框的 HTML 代码尽量做为 body 标签的直接子元素放入页面。

<div class="modal fade in" tabindex="-1" style="display: block;"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span>&times;</span></button><h4 class="modal-title">我是标题</h4></div><div class="modal-body"><p>我是内容</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">保存</button></div></div></div>
</div>

11.1 显示隐藏

通过一个添加按钮，按钮必须有 data-toggle="modal" 属性，以及 data-target 属性，其中 data-target 的值要与模态框的 ID 或 class 保持一致。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击显示模态框
</button><div class="modal fade" id="myModal" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span>&times;</span></button><h4 class="modal-title">我是标题</h4></div><div class="modal-body"><p>我是内容</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">保存</button></div></div></div>
</div>

11.2 尺寸大小

模态框提供了两个可选尺寸，通过为 .modal-dialog 增加样式 .modal-lg 和 .modal-sm 修改模态框大小。

<!-- 大模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".large-modal">大模态框
</button><div class="modal fade large-modal" tabindex="-1"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span>&times;</span></button><h4 class="modal-title">我是标题</h4></div><div class="modal-body"><p>我是内容</p></div></div></div>
</div><!-- 小模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".small-modal">小模态框
</button><div class="modal fade small-modal" tabindex="-1"><div class="modal-dialog modal-sm"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span>&times;</span></button><h4 class="modal-title">我是标题</h4></div><div class="modal-body"><p>我是内容</p></div></div></div>
</div>

11.3 禁止动画效果

如果你不需要模态框弹出时的动画效果（淡入淡出效果），删掉 .fade 类即可。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击显示模态框
</button><div class="modal" id="myModal" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span>&times;</span></button><h4 class="modal-title">我是标题</h4></div><div class="modal-body"><p>我是内容</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">保存</button></div></div></div>
</div>

12 切换标签

通过标签导航配合 .tab-content 与子元素 .tab-pane 实现内容切换的标签页。

<div class="container"><ul class="nav nav-tabs"><li class="active"><a href="#news" data-toggle="tab">新闻</a></li><li><a href="#junshi" data-toggle="tab">军事</a></li><li><a href="#meishi" data-toggle="tab">美食</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">其他 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#lvyou" data-toggle="tab">旅游</a></li><li><a href="#guoji" data-toggle="tab">国际</a></li></ul></li></ul><div class="tab-content"><div class="tab-pane active" id="news"><p>新闻新闻新闻新闻新闻新闻新闻新闻</p></div><div class="tab-pane" id="junshi"><p>军事军事军事军事军事军事军事军事军事</p></div><div class="tab-pane" id="meishi"><p>美食美食美食美食美食美食美食美食美食</p></div><div class="tab-pane" id="lvyou"><p>旅游旅游旅游旅游旅游旅游旅游旅游旅游</p></div><div class="tab-pane" id="guoji"><p>国际国际国际国际国际国际国际国际国际</p></div></div>
</div><!-- 胶囊式标签页 -->
<div class="container"><ul class="nav nav-pills"><li class="active"><a href="#news" data-toggle="pill">新闻</a></li><li><a href="#junshi" data-toggle="pill">军事</a></li><li><a href="#meishi" data-toggle="pill">美食</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">其他 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#lvyou" data-toggle="tab">旅游</a></li><li><a href="#guoji" data-toggle="tab">国际</a></li></ul></li></ul><div class="tab-content"><div class="tab-pane active fade in" id="news"><p>新闻新闻新闻新闻新闻新闻新闻新闻</p></div><div class="tab-pane fade" id="junshi"><p>军事军事军事军事军事军事军事军事军事</p></div><div class="tab-pane fade" id="meishi"><p>美食美食美食美食美食美食美食美食美食</p></div><div class="tab-pane fade" id="lvyou"><p>旅游旅游旅游旅游旅游旅游旅游旅游旅游</p></div><div class="tab-pane" id="guoji"><p>国际国际国际国际国际国际国际国际国际</p></div></div>
</div>

13 折叠式下拉

通过 data-toggle="collapse" 这一属性实现内容的自动折叠。使用时，如果用链接当做按钮，需要设置 href 的属性值，如果用 button，需要设置 data-target。

<a class="btn btn-primary" data-toggle="collapse" href=".collapseShow">超链接</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".collapseShow">按钮</button>
<div class="collapse collapseShow"><div class="well">我是内容</div>
</div>

把 Well 用在元素上，就能有嵌入（inset）的简单效果。

<div class="well">...</div>
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>

14 轮播图

<div id="carousel" class="carousel slide" data-ride="carousel"><!-- 轮播图片 --><div class="carousel-inner"><div class="item active"><img src="http://www.ayunhe.com/content/uploads/2019/11/157447462086310494.jpg" alt=""><div class="carousel-caption"><h4>轮播图1</h4></div></div><div class="item"><img src="http://www.ayunhe.com/content/uploads/2019/11/157447462086310494.jpg" alt=""><div class="carousel-caption"><h4>轮播图2</h4></div></div><div class="item"><img src="http://www.ayunhe.com/content/uploads/2019/11/157447462086310494.jpg" alt=""><div class="carousel-caption"><h4>轮播图3</h4></div></div></div><!-- 指示点 --><ul class="carousel-indicators"><li data-target="#carousel" data-slide-to="0" class="active"></li><li data-target="#carousel" data-slide-to="1"></li><li data-target="#carousel" data-slide-to="2"></li></ul><!-- 切换按钮 --><a class="left carousel-control" href="#carousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>