bootstrap

bootstrap

1.tab转换（bs js模块标签页）

 <ul class="nav nav-tabs">
        <li class="active"><a href="#a" data-toggle="tab">水浒传</a></li>
        <li><a href="#b" data-toggle="tab">红楼梦</a></li>
        <li><a href="#c" data-toggle="tab">三国演义</a></li>
        <li><a href="#d" data-toggle="tab">西游记</a></li>
    </ul>
    <div class="tab-content">
        <div id="a" class="tab-pane active">
            去时三十六，回来十八双
        </div>
        <div id="b" class="tab-pane">
            妻不如妾，妾不如偷
        </div>
        <div id="c" class="tab-pane">
            长坂桥头杀气生
        </div>
        <div id="d" class="tab-pane">
            悟空，快来
        </div>
    </div>


<script src="./dist/js/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="./dist/js/bootstrap.min.js" type="text/javascript"></script>

2.弹框

<div class="alert alert-success">恭喜你，成功了！</div>
    <div class="alert alert-info">恭喜你，成功了！</div>
    <!-- 可关闭的弹出框 -->
    <div class="alert alert-warning" role="alert">
        <span class="close" data-dismiss="alert" aria-label="Close">
            <em aria-hidden="true">&times;</em>
        </span> 犯强汉者，虽远必诛
    </div>

    <!-- 模态框 -->
    <span class="btn btn-info" data-toggle="modal" data-target="#aa">点击弹出</span>

    <div class="modal fade bs-example-modal-sm" id="aa">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <!-- 
                         data-dismiss="modal" 关闭模态框事件
                     -->
                    <span class="close" data-dismiss="modal"><em>&times;</em></span>
                    <h4>提示内容</h4>
                </div>
                <div class="modal-body">
                    <p>落霞与孤鹜齐飞，秋水共长天一色</p>
                </div>
                <div class="modal-footer">
                    <span class="btn btn-default" data-dismiss="modal">关闭</span>
                    <span class="btn btn-info">保存</span>
                </div>
            </div>
        </div>
    </div>

3.轮播

 #aa {
        height: 800px;
        /* padding-top: 20px; */
        width: 100%;
        background-color: black;
    }
    
    #aa img {
        margin: 0 auto;
        height: 800px;
    }

<div id="aa" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="./images/a.jpg" alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <div class="item">
                <img src="./images/aa.jpg" alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <!-- ... -->
            <div class="item">
                <img src="./images/b.jpg" alt="...">
                <div class="carousel-caption">

                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#aa" role="button" data-slide="prev">
            <!-- <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> -->
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#aa" role="button" data-slide="next">
            <!-- <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> -->
            <span class="sr-only">Next</span>
        </a>
    </div>


script src="./dist/js/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="./dist/js/bootstrap.min.js" type="text/javascript"></script>
<script>
    $('.carousel').carousel({
    （自动播放2s）
        interval: 2000
    })
</script>

4.下拉菜单

 <!-- 下拉菜单 -->
    <div class="dropdown">
        <!-- 
            class="caret" 倒三角图标
         -->
        <span class="btn btn-default" data-toggle="dropdown" id="dawa">下拉菜单<em class="caret"></em></span>

        <ul class="dropdown-menu" aria-labelledby="dawa">
            <li><a href="#" tabindex="1">东胜神洲</a> </li>
            <li><a href="#" tabindex="4">南瞻部洲</a> </li>
            <li><a href="#" tabindex="2">西牛贺洲</a> </li>
            <li><a href="#" tabindex="3">北俱芦洲</a> </li>
            <!-- 使用table 切换，调整顺序 -->
        </ul>
    </div>

<script src="./dist/js/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="./dist/js/bootstrap.min.js" type="text/javascript"></script>

5.字体图标

 <span class="glyphicon glyphicon-envelope txt"></span>

6.栅格系统

<!--  栅格系统  -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 col-sm-4 bg">6</div>
            <div class="col-lg-3 col-sm-4 bg">3</div>
            <div class="col-lg-3 col-sm-4 bg">3</div>
        </div>
    </div>

7.按钮

<!--  按钮  -->
    <span class="btn btn-default btn-lg">按钮</span>
    <span class="btn btn-primary mybtn">按钮</span>
    <span class="btn btn-success">按钮</span>
    <span class="btn btn-info">按钮</span>
    <span class="btn btn-danger active">按钮</span>
    <span class="btn btn-warning">按钮</span>
    <a href="###" class="btn btn-link">a按钮</a>
    <span class="close">&times;</span>

  <!-- 
        &nbsp; 空格
        &gt; >
        &lt; <
        &times; x
     -->