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>×</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>轮播图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>

15 练习作业

使用 Bootstrap 实现响应式网站。