bootstrap的其他
情境文本颜色
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
情境背景色
和情境文本颜色类一样,使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深,就像上面所讲的情境文本颜色类一样。
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
关闭按钮
通过使用一个象征关闭的图标,可以让模态框和警告框消失。
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<span class="caret"></span>
通过使用一个象征关闭的图标,可以让模态框和警告框消失。
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
三角符号
通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意,向上弹出式菜单中的三角符号是反方向的。
<span class="caret"></span>
快速浮动
通过添加一个类,可以将任意元素向左或向右浮动。!important
被用来明确 CSS 样式的优先级。这些类还可以作为 mixin(参见 less 文档) 使用。
<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}
不能用于导航条组件中
排列导航条中的组件时可以使用这些工具类:.navbar-left
或 .navbar-right
。 参见导航条文档以获取更多信息。
让内容块居中
为任意元素设置 display: block
属性并通过 margin
属性让其中的内容居中。下面列出的类还可以作为 mixin 使用。
<div class="center-block">...</div>
// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}
清除浮动
通过为父元素添加 .clearfix
类可以很容易地清除浮动(float
)。这里所使用的是 Nicolas Gallagher 创造的 micro clearfix 方式。此类还可以作为 mixin 使用。
<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}
显示或隐藏内容
.show
和 .hidden
类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important
来避免 CSS 样式优先级问题,就像 quick floats 一样的做法。注意,这些类只对块级元素起作用,另外,还可以作为 mixin 使用。
.hide
类仍然可用,但是它不能对屏幕阅读器起作用,并且从 v3.0.1 版本开始就不建议使用了。请使用 .hidden
或 .sr-only
。
另外,.invisible
类可以被用来仅仅影响元素的可见性,也就是说,元素的 display
属性不被改变,并且这个元素仍然能够影响文档流的排布。
<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}
屏幕阅读器和键盘导航
.sr-only
类可以对屏幕阅读器以外的设备隐藏内容。.sr-only
和 .sr-only-focusable
联合使用的话可以在元素有焦点的时候再次显示出来(例如,使用键盘导航的用户)。对于遵循 可访问性的最佳实践 很有必要。这个类也可以作为 mixin 使用。
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}
图片替换
使用 .text-hide
类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。
<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
.text-hide();
}
最新文章
- git命令大集合
- 关于js闭包的误区
- 远程登录linux不用输入密码的方法
- Swift使用注意
- [bzoj3289]Mato的文件管理
- [JAVA 多种方式读取文件]
- js点击按钮倒计时setTimeout和setInterval
- Microsoft Office Excel 不能访问文件 的解决办法
- Zabbix监控交换机设置
- HDU 1316 How Many Fibs?(java,简单题,大数)
- zedboard - 轻量级以太网控制器LWIP
- Android性能测试
- SQL PL基本概念
- pl/sql的工具导入和代码导入
- oracle创建用户四部曲
- hive高阶1--sql和hive语句执行顺序、explain查看执行计划、group by生成MR
- Map Reduce和流处理
- 快速掌握Nginx(二) —— Nginx的Location和Rewrite
- HDU 2594(求最长公共前后缀 kmp)
- 详解Python的装饰器
热门文章
- Linux的基本指令--目录和文件和文件属性和文件用户组
- ajax请求参数中含有特殊字符";#";的问题 (另附上js编码解码的几种方法)
- 深入剖析SolrCloud(二)
- EKF model&;realization
- Docker02 基本命令、开发环境搭建、docker安装nginx、Dockerfile、路径挂载
- mybatis 框架 的简单使用
- 用CSS3.0画圆
- IP命令的用法详解
- js原型链prototype与__proto__以及new表达式
- ASP.NET Web Pages (Razor) FAQ