zoukankan      html  css  js  c++  java
  • bootstrap学习9-路径分页和徽章组件

    <!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>
  • 相关阅读:
    Python之实现一个优先级队列
    java可变参数列表的实现
    static 关键字详解 static方法调用非static属性和方法
    this关键字详解
    vue自定义事件 子组件把数据传出去
    vue组件 Prop传递数据
    Vue 什么是组件
    vue v-model 表单控件绑定
    vue v-on监听事件
    vue v-if with v-for
  • 原文地址:https://www.cnblogs.com/daniel-lij/p/6391179.html
Copyright © 2011-2022 走看看