Bootstrap 字体图标,下拉列表组件的使用

Bootstrap 字体图标,下拉列表组件的使用

Glyphicons 字体图标

  1. 通过代码可以看到图标类的使用方法,图标类不能和其它组件直接联合使用,图标类只能应用在不包含任何文本内容或子元素的元素上。所以一般在Button的text前面搞一个span标签,用来渲染图标
  2. aria-label:有的图标可以没有文本,此时可以在代码中通过aria-label这个属性来表明图标的含义,比如这里的“左对齐”。
  3. aria-hidden:设置其为true,表示图标只是为了装饰之用,避免读取设备的抓取,“aria”是“咏叹调,独唱曲”的意思,所以可以意会一下。
  4. 如果需要图标表达某种含义,可以通过.sr-only类进行表达,同时在视觉上隐藏,我的理解是:相当于制定各种约定,从而与外界环境交互。
    示例:
<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" aria-label="Go to cloud">
      <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
    </button>

    <button type="button" class="btn btn-default" aria-label="Email Me">
      <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
    </button>

    <button type="button" class="btn btn-default" aria-label="Glass, be care">
      <span class="glyphicon glyphicon-glass" 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>

    <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>

Bootstrap 下拉列表(Dropdowns)

  1. 通过为.dropdown-menu 添加 .dropdown-menu-right 类设置下拉菜单右对齐是有问题的(如何解决?),如下图:
  2. .dropdown-header可以为一组菜单添加标题;
    可用直线为下拉菜单分组
  3. 添加 .disabled 类,可以禁用相应的菜单项。

示例:

<div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="false" aria-expanded="true">
      Dropdown
      <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li class="dropdown-header">Dropdown header 1</li>
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">苹果</a></li>
        <li><a href="#">苹果</a></li>
        <li class="disabled"><a href="#">尼玛</a></li>
        <li class="dropdown-header">Dropdown header 2</li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

参考:
Glyphicons 字体图标
Dropdowns

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值