布局组件无数可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

Bootstrap的使用非常灵活,可以对各种组件进行合并使用(如:为标签页项 添加带下拉菜单),下面的知识点中将逐个介绍这些组件。

包括250多个来自 Glyphicon Halflings 的字体图标。Halflings 一般是收费的,但是他们的作者允许 Bootstrap 免费使用。为了表示感谢,希望你在使用时尽量为Halflings 添加一个友情链接。

如何使用


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

不要和其他组件混合使用

图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 标签,并将图标类应用到这个 标签上。

只对内容为空的元素起作用

图标类只能应用在不包含任何文本内容或子元素的元素上。

改变图标字体文件的位置

Bootstrap 假定所有的图标字体文件全部位于 ../fonts/ 目录内,相对于预编译版 CSS 文件的目录。如果你修改了图标字体文件的位置,那么,你需要通过下面列出的任何一种方式来更新 CSS 文件:

  • 在 Less 源码文件中修改 @icon-font-path 和/或 @icon-font-name 变量。
  • 利用 Less 编译器提供的 相对 URL 地址选项。
  • 修改预编译 CSS 文件中的 url() 地址。 根据你自身的情况选择一种方式即可

图标的可访问性

现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免 屏幕识读设备抓取非故意的和可能产生混淆的输出内容(尤其是当图标纯粹作为装饰用途时),我们为这些图标设置了 aria-hidden="true" 属性。

如果你使用图标是为了表达某些含义(不仅仅是为了装饰用),请确保你所要表达的意思能够通过被辅助设备识别,例如,包含额外的内容并通过 .sr-only 类让其在视觉上表现出隐藏的效果。

如果你所创建的组件不包含任何文本内容(例如, <button> 内只包含了一个图标),你应当提供其他的内容来表示这个控件的意图,这样就能让使用辅助设备的用户知道其作用了。这种情况下,你可以为控件添加 aria-label 属相。

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

实例


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

  1. <button type="button" class="btn btn-default" aria-label="Left Align">
  2. <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
  3. </button>
  4. <button type="button" class="btn btn-default btn-lg">
  5. <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
  6. </button>

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

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

完整的代码:

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<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="Center Align"><span class="glyphicon glyphicon-align-center" aria-hidden="true"></span></button>
<button type="button" class="btn btn-default" aria-label="Right Align"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span></button>
<button type="button" class="btn btn-default" aria-label="Justify"><span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span></button>
</div>
</div>
<div class="btn-toolbar" role="toolbar">
<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
<button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
<button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
</div>
</div>
</body>
</html>

BootStrap的布局学习的更多相关文章

  1. bootstrap栅格布局学习历程

    了解一个东西.他叫什么?他由什么组成,能做什么? 现在响应式的网站(在不同分辨率下有不同的布局)很瘦欢迎.优点:1.解决设备之间的差异化展示缺点:a.兼容性代码多,工作量大,加载速度受到影响;b.用户 ...

  2. CSS3与页面布局学习总结(四)——页面布局大全

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  3. CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  4. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

  5. CSS3与页面布局学习总结(四)——页面布局大全BFC、定位、浮动、7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

  6. CSS Grid 布局学习笔记

    CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...

  7. bootStrap简要和学习笔记

    bootStrap简要和学习笔记前端在学些了html.css.JavaScript三件套后,我们感觉前端变数太多了,需要创造力来设计一些可能经常使用的界面啊.按钮样式啊等,也就有了一些前端的框架,那何 ...

  8. CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  9. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

随机推荐

  1. how-to-build-c-static-libraries-boost

    http://tungchingkai.blogspot.jp/2016/11/how-to-build-c-static-libraries-boost.html How to build C++ ...

  2. sencha touch routes(路由) 传递中文参数

    使用路由的时候可以传递参数 如下: index.html#eaterylist/335/61/61/61/B/商户名称 其中6个参数依次是:商户编号/公众账号/微信号/校验号/服务类型/商户名称 因为 ...

  3. 部署OpenStack问题汇总(二)--openstack dashboard 问题解决方案

    在打开dashboard的时候报错: LocationParseError at /admin/ (LocationParseError(...), 'Failed to parse: Failed ...

  4. dirname的用法:获取文件的父级目录路径

    命令:dirname 获取文件的路径(到父级目录)用法:dirname file_name [root@bogon opt]# a=$(dirname /mnt/a/b/c/d/a.sh) [root ...

  5. 删除个别主机的Know_hosts文件信息

    方法一: rm -rf ~/.ssh/known_hosts 缺点:把其他正确的公钥信息也删除,下次链接要全部重新经过认证 方法二: vi ~/.ssh/known_hosts 删除对应ip的相关rs ...

  6. 一辈子只有1次成为BAT的机会,你如何把握?

    本文转自:http://www.fmi.com.cn/index.php?m=content&c=index&a=show&catid=9&id=614308 感谢作者 ...

  7. 8.22js前端!

    2018-8-22 19:15:19 前端还有一部分就学完了预计这一星期赶一下就可以结束 然后愉快地进行Django框架!!!! 今天中午和呆呆一块吃的大盘鸡,下午和老表我们三个去了日月湖狼了一下午! ...

  8. PAT甲1004 Counting Leaves【dfs】

    1004 Counting Leaves (30 分) A family hierarchy is usually presented by a pedigree tree. Your job is ...

  9. POJ 1149 - PIGS - [最大流构图]

    Time Limit: 1000MS Memory Limit: 10000K Description Mirko works on a pig farm that consists of M loc ...

  10. SQL Fundamentals || Single-Row Functions || 转换函数 Conversion function

    SQL Fundamentals || Oracle SQL语言   SQL Fundamentals: Using Single-Row Functions to Customize Output使 ...