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>
  • 相关阅读:
    lodash chunk
    lodash.slice
    ⚡ vue3 全家桶体验
    构建一个简约博皮的过程
    [译] 制作 Vue 3 的过程
    ⚠ | 不要再使用 markdown 主题了!
    win 常用命令
    2020年了,别再重复学习原型了
    删除 linux 导致原来的 win10 进不去
    手写一个文章目录插件
  • 原文地址:https://www.cnblogs.com/liujiangping/p/5317733.html
Copyright © 2011-2022 走看看