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>
1
2
3
4
5
6
7
8
9
10
11
12
13

8 标记

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

<button class="btn btn-primary" type="button">
    信息 <span class="badge">4span>
button>
1
2
3

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

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>
1
2
3
4

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>
1
2
3
4
5
6

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>
1
2
3
4
5
6

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

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>
1
2
3
4
5
6
7

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

<div class="well">...div>
<div class="well well-lg">...div>
<div class="well well-sm">...div>
1
2
3

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

15 练习作业

使用 Bootstrap 实现响应式网站。