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"

 

分页组件

 

 

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

 

相关文章

Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&...
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
要让两个按钮左右排列,你可以使用 Bootstrap 的网格系统将它...
是的,可以将status设置为布尔类型,这样可以在前端使用复选...
前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自...
起步导入:<linkrel="stylesheet"href="b...