zoukankan      html  css  js  c++  java
  • 第 9 章 路径分页标签和徽章组件

    学习要点:

    1.路径组件
    2.分页组件
    3.标签组件
    4.徽章组件

    主讲教师:李炎恢

    本节课我们主要学习一下 Bootstrap 的四个组件功能:路径组件、分页组件、标签组件和徽章组件。

    一.路径组件
    路径组件也叫做面包屑导航。
    //面包屑导航

    <ol class="breadcrumb">
        <li>
            <a href="#">首页</a>
        </li>
        <li>
            <a href="#">产品列表</a>
        </li>
        <li class="active">
            韩版 2015 年羊绒毛衣
        </li>
    </ol>

    二.分页组件
    分页组件可以提供带有展示页面的功能。
    //默认分页

    <ul class="pagination">
        <li>
            <a href="#">&laquo;</a>
        </li>
        <li>
            <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>

    //首选项和禁用

    <li class="active"><a href="#">1</a></li>
    <li class="disabled"><a href="#">2</a></li>

    //设置尺寸,四种 lg、默认、sm 和 xs

    <ul class="pagination pagination-lg">

    //翻页效果

    <ul class="pager">
        <li>
            <a href="#">上一页</a>
        </li>
        <li>
            <a href="#">下一页</a>
        </li>
    </ul>

    //对齐翻页链接

    <ul class="pager">
        <li class="previous">
            <a href="#">上一页</a>
        </li>
        <li class="next">
            <a href="#">下一页</a>
        </li>
    </ul>

    //翻页项禁用

    <li class="previous disabled"><a href="#">上一页</a></li>

    三.标签
    //在文本后面带上标签

    <h3>标签 <span class="label label-default">new</span></h3>

    //不同色调的标签

    <h3>标签 <span class="label label-primary">new</span></h3>
    <h3>标签 <span class="label label-success">new</span></h3>
    <h3>标签 <span class="label label-info">new</span></h3>
    <h3>标签 <span class="label label-warning">new</span></h3>
    <h3>标签 <span class="label label-danger">new</span></h3>

    四.徽章
    //未读信息数量徽章

    <a href="#">信息 <span class="badge">10</span></a>

    //按钮中使用徽章

    <button class="btn btn-success">
        提交 <span class="badge">3</span>
    </button>

    //激活状态自动适配色调

    <ul class="nav nav-pills">
        <li class="active">
            <a href="#">首页 <span class="badge">2</span></a>
        </li>
        <li>
            <a href="#">资讯</a>
        </li>
    </ul>
  • 相关阅读:
    html5 canvas 渐变
    html5 canvas 画直线
    html5在canvas中插入图片
    Window文件夹右击菜单定制
    HTML中解决双击会选中文本的问题
    Linux 下修改mysql 字符集编码
    mysqlimport导入命令使用
    PAM 2500 荧光数据导出数据整合脚本
    Resources for Ecology and Evolution
    Plant Ecology Journal Club, 分享主题和文献列表 825, 2019年春
  • 原文地址:https://www.cnblogs.com/zfc2201/p/5426376.html
Copyright © 2011-2022 走看看