Bootstrap常用组件

更多组件详情可见

 1.什么是role?
    role属性用于增强语义性, 当现有的HTML标签不能充分表达语义性的时候，就可
    以借助role来说明
    比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这
    实际上是个button

2.什么是aria-xxx?
    aria全称: Accessible Rich Internet Applications
    这一套协定是w3和apple为了"残疾人士"无障碍使用网站的
    可以不用

3.什么是aria-hidden?
    为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标
    纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden=“true” 属性
    可以不用

1.警告提示框

<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <img src="images/ad.jpg" alt="">
    <!--
    data-dismiss="alert" 告诉bt需要关闭谁
    -->
    <button type="button" class="close" data-dismiss="alert">
        <span>&times;</span>
    </button>
</div>

2.按钮

<button type="button" class="btn btn-primary">Primary</button>
<input type="button" value="我是按钮" class="btn btn-success">
<a href="#" class="btn btn-danger">我是按钮</a>


<div class="btn-group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
</div>

3.卡片

<div class="card" style="width: 18rem;">
    <img class="card-img-top" src="images/img1.jpg">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

4.下拉菜单

<!--
1.data-toggle="collapse" 告诉bootstrap需要切换的是折叠面板
2.href="#collapseExample" 告诉bootstrap需要切换的是哪一个折叠面板
-->
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button">
    我是按钮
</a>
<!--
1.class="collapse" 创建一个折叠面板
注意点: 折叠面板默认情况下是不会显示的
-->
<div class="collapse bg-danger" id="collapseExample">
    <p>我是段落1</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
    <p>我是段落4</p>
    <p>我是段落5</p>
</div>

5.弹出菜单

<!--
1.class="dropdown" 创建一个下拉菜单的容器
-->
<div class="dropdown">
    <!--
    1.dropdown-toggle: 指定菜单按钮的小箭头
    2.data-toggle="dropdown": 告诉bootstrap需要切换的是下拉菜单
    -->
    <button class="btn btn-secondary dropdown-toggle"  data-toggle="dropdown">
        我是按钮
    </button>
    <!--
    1.class="dropdown-menu": 创建一个弹出的下拉菜单
    2.class="dropdown-item": 指定菜单项
    -->
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

6.模拟弹窗

<!--
1.data-toggle="modal": 告诉bootstrap需要切换的是模态弹窗
2.data-target="#exampleModal": 告诉bootstrap需要切换的是哪一个模态弹窗
-->
<button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    我是按钮
</button>

<!--
class="modal fade": 创建模态弹窗的容器
-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
    <!--
    1.class="modal-dialog": 创建真正弹出的内容
    -->
    <div class="modal-dialog" role="document">
        <div class="bg-danger">
            <p>我是段落1</p>
            <p>我是段落2</p>
            <p>我是段落3</p>
            <p>我是段落4</p>
            <p>我是段落5</p>
        </div>
    </div>
</div>

7.提示汽包

    <!--
    1.data-toggle="tooltip": 告诉bootstrap需要切换的是提示气泡
    2.data-placement="top": 告诉bootstrap提示气泡出现的位置
    3.title="Tooltip on top": 告诉bootstrap提示气泡中提示的内容是什么
    -->
    <button class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="内容是什么">
        我是按钮
    </button>

8.导航栏

<nav class="navbar navbar-expand-xl navbar-light bg-light">
    <!--
    1.class="navbar-brand": 指定导航栏中公司的品牌信息(公司名称/LOGO)
    -->
    <a class="navbar-brand" href="#">公司logo</a>
    <!--
    1.class="navbar-toggler": 创建一个移动端的菜单按钮
    2.data-toggle="collapse": 告诉bootstrap需要切换的是折叠面板
    3.data-target="#navbarSupportedContent": 告诉bootstrap需要切换的是哪一个折叠面板
    4.class="navbar-toggler-icon": 设置按钮的字体图标
    -->
    <button class="navbar-toggler"  data-toggle="collapse" data-target="#navbarSupportedContent">
        <span class="navbar-toggler-icon"></span>
    </button>
    <!--
    1.class="collapse": 创建一个折叠面板
    注意点: 折叠面板默认情况下是不会显示的
    2.class="navbar-collapse":用于通过父断点进行分组和隐藏导航列内容
    -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <!--
        1. class="navbar-nav": 创建导航栏的菜单
        2. class="nav-item": 创建导航来的菜单项
        -->
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
    </div>
</nav>