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 "> <button type="button" class="close" data-dismiss="alert"> <span>×</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>×</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>×</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>×</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>×</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>×</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>×</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-container" 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-container" data-slide-to="0" class="active"></li> <li data-target="#carousel-container" data-slide-to="1"></li> <li data-target="#carousel-container" data-slide-to="2"></li> </ul> <!-- 切换按钮 --> <a class="left carousel-control" href="#carousel-container" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-container" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>