zoukankan      html  css  js  c++  java
  • BootStrap 徽章和面包屑导航

    内容选自李炎恢的Bootstrap v4.x教程笔记

    一.徽章样式

    1. 使用.badge 设置徽章基础样式,并使用.badge-success 等设置徽章颜色;

    <h1>Bootstrap <span class="badge badge-secondary">4.x</span></h1>
    <h2>Bootstrap <span class="badge badge-success">4.x</span></h2>
    <h3>Bootstrap <span class="badge badge-info">4.x</span></h3>
    <h4>Bootstrap <span class="badge badge-danger">4.x</span></h4>
    <h5>Bootstrap <span class="badge badge-warning">4.x</span></h5>
    <h6>Bootstrap <span class="badge badge-light">4.x</span></h6>
    <h6>Bootstrap <span class="badge badge-primary">4.x</span></h6>
    <h6>Bootstrap <span class="badge badge-dark">4.x</span></h6>


    2. 使用.badge-pill 将徽章设置成椭圆胶囊式;

    <h3>Bootstrap
      <span class="badge badge-info badge-pill">4.x</span>
    </h3>


    3. 在超链接使用徽章,鼠标悬停时会有换色效果;

    <h3>Bootstrap
      <a href="#" class="badge badge-success badge-pill">4.x</a>
    </h3>

    二.面包屑导航

    1. 使用.breadcrumb 设置一个层次导航(一行分割显示那种);

    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Library</a></li>
            <li class="breadcrumb-item active">Bootstrap4.x</li>
        </ol>
    </nav
  • 相关阅读:
    视频4K技术的解读
    C语言野指针
    获取一个整数所有的质因数(C语言实现)
    乘法口诀表(C语言实现)
    完全平方数(C语言实现)
    Socket网络编程系列教程序
    求1-2/3+3/5-4/7+......49/97和(C语言实现)
    反射
    Cloneable接口和Object的clone()方法
    Comparable和Comparator的区别
  • 原文地址:https://www.cnblogs.com/seeding/p/15352169.html
Copyright © 2011-2022 走看看