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.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
随机推荐
- 电子邮件 -- 图解TCP_IP_第5版
图解TCP_IP_第5版 作者: [日]竹下隆史 / [日]村山公保 / [日]荒井透 / [日]苅田幸雄 出版社: 人民邮电出版社原作名: マスタリングTCP/IP 入門編 第5版译者: 乌尼日其其 ...
- 成员函数指针与高效C++委托 (delegate)
下载实例源代码 - 18.5 Kb 下载开发包库文件 - 18.6 Kb 概要 很遗憾, C++ 标准中没能提供面向对象的函数指针. 面向对象的函数指针也被称为闭包(closures) 或委托(del ...
- 如何玩facebook app上的H5游戏
一.下载facebook app facebook链接 二.下载vpn 国内是访问不了的,必须vpn 因为vpn被封了厉害 我随便百度了个狸猫加速器,没付费,时断时续... 没有推荐的vpn,哪位大佬 ...
- 【JSP】JSP的介绍和基本原理
JSP简介 JSP的核心实质是Servlet技术.JSP是后来添加的基于Servlet的一种扩展技术.但二者在使用上有不同的方向. 由于Servlet实质是一个Java类,因此非常适合用来处理业务逻辑 ...
- 【CF932G】Palindrome Partition 回文自动机
[CF932G]Palindrome Partition 题意:给你一个字符串s,问你有多少种方式,可以将s分割成k个子串,设k个子串是$x_1x_2...x_k$,满足$x_1=x_k,x_2=x_ ...
- windows 环境下node开发环境搭配问题
当我们使用ccap 生成验证码时,需要node-gyp构建build,但是c的编译环境是在python,vc. node-gyp包 https://github.com/TooTallNate/nod ...
- http模拟登陆及发请求
首先声明下,如果服务端写入的cookie属性是HttpOnly的,程序是不能自动获取cookie的,需要人工登陆网站获取cookie再把cookie写死,如下图所示: http测试工具:http:// ...
- squid白名单
http_access deny all #取消注释 http_access allow all --> http_access allow xxx_custom_ip #添加系统服务器IP白名 ...
- OC开发_Storyboard——MapKit
一.Core Location 1.基本对象 @propertys: coordinate, altitude, horizontal/verticalAccuracy, timestamp, sp ...
- 关于python的【if __name__ == "__main__":】
学习东西真的需要自己动手,然后遇到问题,自己学着去解决.当然如果能得到高人指点,那真是走了八辈子运了.可以节省很多时间.但是大多数情况下,不能总是有高人来指点我们.这时就需要靠我们自己了. 在学习py ...