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

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. LeetCode 19 Remove Nth Node From End of List (移除距离尾节点为n的节点)

    题目链接 https://leetcode.com/problems/remove-nth-node-from-end-of-list/?tab=Description   Problem: 移除距离 ...

  2. nginx 启动重启脚本

    #! /bin/sh # Default-Start:     2 3 4 5 # Default-Stop:      0 1 6 # Short-Description: starts the n ...

  3. docker 参数

    -a, --attach=[] Attach to STDIN, STDOUT or STDERR 指定标准输入输出内容类型,可选 STDIN/STDOUT/STDERR 三项 --add-host= ...

  4. 无线路由器无线AP模式的配置

    环境介绍>>>>>>>>>>>>>>>>>>>交换机类型:三层交换机无线路由器品牌:T ...

  5. 兵器簿之github的配置和使用

    1.注册一个github 账号,这个大家都懂得了啊 2.配置 (1 检查:进入终端,在用户目录下输入: ls -al ~/.ssh 得到下图代表本地没有配置过github 过. (2 创建一个目录,输 ...

  6. Python面向对象之字段

    类成员: 字段,方法,属性 属性是在一个函数方法前面加一个装饰器,伪造成为一个字段,调用的时候不需要加括号() 目的是把一个方法伪造成为一个字段,属性也是方法的一种,对这个方法进行改造就可以以 字段的 ...

  7. ASP.NET MVC中ViewBag和ViewData的区别

    在MVC3.0以上我们会用到ViewBag或者ViewData进行页面传值,对比一下二者的差距: ViewData ViewBag 基于key/value的字典集合 dynamic类型对象 从ASP. ...

  8. ubuntu16.04下安装Sophus

    git clone https://github.com/strasdat/Sophus.git 下载完成后 cd Sophus git checkout a621ffmkdir buildcd bu ...

  9. 一般图的着色 - [Welch Powell法][贪心]

    原本这是离散数学的期末作业,因为对图论比较熟悉,就先看了一下图论题: 引用<离散数学(左孝凌版)>(其实就是我们的离散数学课本……): 用韦尔奇·鲍威尔法对图G进行着色,其方法是: a)将 ...

  10. javascript 字符串去空格

    1.正则去空格 a.去掉字符串中所有空格 " hello world ".replace(/\s+/g,"");//helloworld b.去掉字符串左边空格 ...