zoukankan      html  css  js  c++  java
  • Bootstrap进阶一:Glyphicons 字体图标

    基本组件是Bootstrap的精华之一,其中都是开发者平时需要用到的交互组件。例如:网站导航、标签页、工具条、面包屑、分页栏、提示标签、产品展示、提示信息块和进度条等。这些组件都配有jQuery插件,运用它们可以大幅度提高用户的交互体验!

    1.如何使用

    出于性能的考虑,所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意,为了设置正确的内补(padding),务必在图标和文本之间添加一个空格。图标类只能应用在不包含任何文本内容或子元素的元素上。

    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>

    2.所有可用的图标

    包括250多个来自 Glyphicon Halflings 的字体图标。






    3.实例

    可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。

    <button type="button" class="btn btn-default" aria-label="Left Align">
      <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
    </button>
    
    <button type="button" class="btn btn-default btn-lg">
      <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
    </button>

    alert 组件中所包含的图标是用来表示这是一条错误消息的,通过添加额外的 .sr-only 文本就可以让辅助设备知道这条提示所要表达的意思了。

    <div class="alert alert-danger" role="alert">
      <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
      <span class="sr-only">Error:</span>
      Enter a valid email address
    </div>

  • 相关阅读:
    华东交通大学2017年ACM双基程序设计大赛题解
    hdu2010(dfs+剪枝)
    欧拉函数phic以及超大数的快速幂
    想了一天的题目QAQ 毛线数列的最值
    记一下STL的一个题
    hdu1877进制转换
    hdu1002大数相加
    hdu1576逆元的一道水题
    Courses
    CodeForce-813B The Golden Age(数学+枚举)
  • 原文地址:https://www.cnblogs.com/quickcodes/p/Bootstrap-jin-jie-yiGlyphicons-zi-ti-tu-biao.html
Copyright © 2011-2022 走看看