Bootstrap： 下拉菜单组件 & 分页组件

1 下拉菜单组件

 

 

<div class="dropdown">
    <button class="btn btn-primary" data-toggle="dropdown">拉勾教育 <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">前沿技术</a></li>
            <li><a href="#">名师制作</a></li>
            <li><a href="#">24小时导师</a></li>
        </ul>
</div>

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>        

用法的关键核心

　　1. 外围容器使用 class="dropdown"包裹

　　2. 内部点击按钮事件绑定 data-toggle="dropdown"

　　3. 菜单元素使用 class="dropdown-menu"

 

2 分页组件

 

 

<ul class="pagination">
    <li class="previous"> <a href="#"> &laquo; </a> </li>
    <li class="active"> <a href="#">1</a> </li>
    <li> <a href="#">2</a> </li>
    <li> <a href="#">3</a> </li>
    <li class="next"> <a href="#">&raquo;</a> </li>
</ul>

 

 

<ul class="pager">