zoukankan      html  css  js  c++  java
  • Bootstrap_标签

    一、标签 

     在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个“new”标签,来告诉用户。

      那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件,并且以“.label”样式来实现高亮显示。

    <h3>Example heading <span class="label label-default">New</span></h3>

      颜色样式设置:

      和按钮元素button类似,label样式也提供了多种颜色:

      ☑ label-deafult:默认标签,深灰色

      ☑ label-primary:主要标签,深蓝色

      ☑ label-success:成功标签,绿色

      ☑ label-info:信息标签,浅蓝色

      ☑ label-warning:警告标签,橙色

      ☑ label-danger:错误标签,红色

    <span class="label label-default">默认标签</span>
    <span class="label label-primary">主要标签</span>
    <span class="label label-success">成功标签</span>
    <span class="label label-info">信息标签</span>
    <span class="label label-warning">警告标签</span>
    <span class="label label-danger">错误标签</span> 

    二、徽章

      使用span标签来制作,然后加入“badge”类:

    <a href="#">Inbox <span class="badge">42</span></a>

  • 相关阅读:
    86. Partition List
    2. Add Two Numbers
    55. Jump Game
    70. Climbing Stairs
    53. Maximum Subarray
    64. Minimum Path Sum
    122. Best Time to Buy and Sell Stock II
    以场景为中心的产品设计方法
    那些产品经理犯过最大的错
    Axure教程:如何使用动态面板?动态面板功能详解
  • 原文地址:https://www.cnblogs.com/Ryan344453696/p/4996382.html
Copyright © 2011-2022 走看看