首页 > 代码库 > bootstrap学习9-路径分页和徽章组件

bootstrap学习9-路径分页和徽章组件

2024-09-04 01:01:43   217人阅读

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <title>路径分页和徽章组件</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
<body style="margin:50px;">
    <!--
        breadcrumb ：路径组件 面包屑导航
    -->
    <ul class="breadcrumb">
        <li><a href="#">首页</a></li>
        <li><a href="#">产品列表</a></li>
        <li class="active"><a href="#">衣服</a></li>
    </ul>
    
    <!--
        agination 分页组件
        pagination-lg 大图标
        pagination-xs 小图标
        pagination-sm 超小图标
        pager 翻页效果
        previous  上一页对齐翻页效果
        next  下一页
        disabled 禁用
    -->
    <ul class="pagination pagination-sm">
        <li><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><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>
    
    <!--翻页效果-->
   <ul class="pager">
       <li href="previous disabled"><a href="previous">上一页</a></li>
       <li href="next"><a href="next">下一页</a></li>
   </ul>
   
   <!--标签
       label-primary
       label-success
       label-info
       label-warning
       label-danger
   -->
   <h3>标签<span class="label label-default">new</span></h3>
   
   <!--徽章
       
       
   -->
       <a href="#">信息<span class="badge">10</span></a>
       <button class="btn btn-warning">信息<span class="badge">10</span></button>
       <ul class="nav nav-pills">
           <li class="active"> 
               <a href="#">首页<span class="badge">10</span></a>
           </li>
           <li><a href="#">咨询</a></li>
       </ul>
       
    <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
  </body>
</html>

 

bootstrap学习9-路径分页和徽章组件


联系
我们