BootStrap的布局学习
布局组件无数可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
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 属相。
- <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
实例
可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。
- <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>
完整的代码:
<!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的布局学习的更多相关文章
- bootstrap栅格布局学习历程
了解一个东西.他叫什么?他由什么组成,能做什么? 现在响应式的网站(在不同分辨率下有不同的布局)很瘦欢迎.优点:1.解决设备之间的差异化展示缺点:a.兼容性代码多,工作量大,加载速度受到影响;b.用户 ...
- CSS3与页面布局学习总结(四)——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
- 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- ...
- CSS Grid 布局学习笔记
CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...
- bootStrap简要和学习笔记
bootStrap简要和学习笔记前端在学些了html.css.JavaScript三件套后,我们感觉前端变数太多了,需要创造力来设计一些可能经常使用的界面啊.按钮样式啊等,也就有了一些前端的框架,那何 ...
- CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 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++ ...
- sencha touch routes(路由) 传递中文参数
使用路由的时候可以传递参数 如下: index.html#eaterylist/335/61/61/61/B/商户名称 其中6个参数依次是:商户编号/公众账号/微信号/校验号/服务类型/商户名称 因为 ...
- 部署OpenStack问题汇总(二)--openstack dashboard 问题解决方案
在打开dashboard的时候报错: LocationParseError at /admin/ (LocationParseError(...), 'Failed to parse: Failed ...
- dirname的用法:获取文件的父级目录路径
命令:dirname 获取文件的路径(到父级目录)用法:dirname file_name [root@bogon opt]# a=$(dirname /mnt/a/b/c/d/a.sh) [root ...
- 删除个别主机的Know_hosts文件信息
方法一: rm -rf ~/.ssh/known_hosts 缺点:把其他正确的公钥信息也删除,下次链接要全部重新经过认证 方法二: vi ~/.ssh/known_hosts 删除对应ip的相关rs ...
- 一辈子只有1次成为BAT的机会,你如何把握?
本文转自:http://www.fmi.com.cn/index.php?m=content&c=index&a=show&catid=9&id=614308 感谢作者 ...
- 8.22js前端!
2018-8-22 19:15:19 前端还有一部分就学完了预计这一星期赶一下就可以结束 然后愉快地进行Django框架!!!! 今天中午和呆呆一块吃的大盘鸡,下午和老表我们三个去了日月湖狼了一下午! ...
- PAT甲1004 Counting Leaves【dfs】
1004 Counting Leaves (30 分) A family hierarchy is usually presented by a pedigree tree. Your job is ...
- POJ 1149 - PIGS - [最大流构图]
Time Limit: 1000MS Memory Limit: 10000K Description Mirko works on a pig farm that consists of M loc ...
- SQL Fundamentals || Single-Row Functions || 转换函数 Conversion function
SQL Fundamentals || Oracle SQL语言 SQL Fundamentals: Using Single-Row Functions to Customize Output使 ...