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">Defaultspan>
<span class="label label-primary">Primaryspan>
<span class="label label-success">Successspan>
<span class="label label-info">Infospan>
<span class="label label-warning">Warningspan>
<span class="label label-danger">Dangerspan>
8 标记
给链接、导航等元素嵌套 .badge 元素，可以很醒目的展示新的或未读的信息条目。
<button class="btn btn-primary" type="button">
信息 <span class="badge">4span>
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">Buttona>
<a href="#" class="btn btn-default" role="button">Buttona>
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">Buttona>
<a href="#" class="btn btn-default" role="button">Buttona>
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">Buttona>
<a href="#" class="btn btn-default" role="button">Buttona>
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>×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" 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>轮播图1h4>
div>
div>
<div class="item">
<img src="http://www.ayunhe.com/content/uploads/2019/11/157447462086310494.jpg" alt="">
<div class="carousel-caption">
<h4>轮播图2h4>
div>
div>
<div class="item">
<img src="http://www.ayunhe.com/content/uploads/2019/11/157447462086310494.jpg" alt="">
<div class="carousel-caption">
<h4>轮播图3h4>
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>
15 练习作业
使用 Bootstrap 实现响应式网站。
