其他分享
首页 > 其他分享> > Bootstrap: 下拉菜单组件 & 分页组件

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">

 

标签:分页,dropdown,Bootstrap,下拉菜单,组件,class,拉勾
来源: https://www.cnblogs.com/JasperZhao/p/15249813.html