Bootstrap 字体图标,下拉列表组件的使用
来源:互联网 发布:设置铃声的软件 编辑:程序博客网 时间:2024/06/05 03:43
Bootstrap 字体图标,下拉列表组件的使用
Glyphicons 字体图标
- 通过代码可以看到图标类的使用方法,图标类不能和其它组件直接联合使用,图标类只能应用在不包含任何文本内容或子元素的元素上。所以一般在Button的text前面搞一个span标签,用来渲染图标。
- aria-label:有的图标可以没有文本,此时可以在代码中通过aria-label这个属性来表明图标的含义,比如这里的“左对齐”。
- aria-hidden:设置其为true,表示图标只是为了装饰之用,避免读取设备的抓取,“aria”是“咏叹调,独唱曲”的意思,所以可以意会一下。
- 如果需要图标表达某种含义,可以通过.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)
- 通过为.dropdown-menu 添加 .dropdown-menu-right 类设置下拉菜单右对齐是有问题的(如何解决?),如下图:
- .dropdown-header可以为一组菜单添加标题;
可用直线为下拉菜单分组 - 添加 .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
0 0
- Bootstrap 字体图标,下拉列表组件的使用
- bootstrap --字体图标的设置 按钮组件
- Bootstrap 字体图标和下拉菜单、按钮
- Bootstrap组件学习笔记(一)——大纲、Glyphicons字体图标和下拉菜单
- BootStrap--CSS组件--字体图标(glyphicon)
- Bootstrap布局组件—1.字体图标
- bootstrap下拉列表多选组件
- 关于bootstrap的字体图标问题
- 字体图标的使用
- 字体图标的使用
- 图标字体的使用
- 字体图标的使用
- Bootstrap字体图标(glyphicons)
- Bootstrap字体图标
- Bootstrap 字体图标(Glyphicons)
- Bootstrap 字体图标(Glyphicons)
- bootstrap 字体图标出不来
- Bootstrap可多选、搜索的下拉列表
- 装饰器模式 java 414
- 【Linux系统编程】文件IO操作
- 【LeetCode】(66)Plus One (Easy)
- GDOI2016模拟8.21总结
- poj2253
- Bootstrap 字体图标,下拉列表组件的使用
- 2015多校联合第十场hdu5410CRB and His Birthday 01背包+完全背包
- 有关eigen库在qt中的使用
- JAVA泛型
- 网页源码保存为文件
- CodeForces 题目191C. Fools and Roads(Link Cut Tree,边权加求边权值)
- 【Android开发经验】超好用的json解析工具——Gson项目使用详解
- AX 2009 删除已经发出领料单的订单行
- 华为OJ(MP3光标移动)