Bootstrap辅助类
前面的话
Bootstrap提供了一组工具类,用于辅助项目的开发。本文将详细介绍Bootstrap辅助类
文本色
通过颜色来展示意图,Bootstrap 提供了一组工具类。这些类可以应用于链接,并且在鼠标经过时颜色可以还可以加深,就像默认的链接一样
.text-muted:提示,使用浅灰色(#777)
.text-primary:主要,使用蓝色(#337ab7)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442)
<div>
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
背景色
和情境文本颜色类一样,使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深,就像上面所讲的情境文本颜色类一样
.bg-primary:主要,使用蓝色(#337ab7)
.bg-success:成功,使用浅绿色(#dff0d8)
.bg-info:通知信息,使用浅蓝色(#d9edf7)
.bg-warning:警告,使用浅黄色(#fcf8e3)
.bg-danger:危险,使用浅紫色(#f2dede)
<div>
<p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
文本对齐
通过文本对齐类,可以简单方便的将文字重新对齐
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-justify {
text-align: justify;
}
.text-nowrap {
white-space: nowrap;
}
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
【居中】
为任意元素设置 display: block
属性并通过 margin
属性让其中的内容居中
<div class="center-block" style="width:100px;">center</div>
大小写
通过这几个类可以改变文本的大小写
.text-lowercase {
text-transform: lowercase;
}
.text-uppercase {
text-transform: uppercase;
}
.text-capitalize {
text-transform: capitalize;
}
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
按钮和符号
【关闭按钮】
通过使用一个象征关闭的图标,可以让模态框和警告框消失
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span>
【三角符号】
通过使用三角符号可以指示某个元素具有下拉菜单的功能
<span class="caret"></span>
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid \9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
浮动
通过添加一个类,可以将任意元素向左或向右浮动。!important
被用来明确 CSS 样式的优先级
[注意]排列导航条中的组件时可以使用.navbar-left
或 .navbar-right
【清除浮动】
通过为父元素添加 .clearfix
类可以很容易地清除浮动(float
)
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
<div class="clearfix">
<div class="pull-left">left</div>
<div class="pull-right">right</div>
</div>
<div>aaa</div>
隐藏
【显示隐藏内容】
.show
和 .hidden
类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important
来避免 CSS 样式优先级问题
另外,.invisible
类可以被用来仅仅影响元素的可见性,也就是说,元素的 display
属性不被改变,并且这个元素仍然能够影响文档流的排布
[注意]这些类只对块级元素起作用
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
<div class="show">show</div>
<div class="hidden">hidden</div>
<div class="invisible">invisible</div>
【屏幕阅读器】
.sr-only
类可以对屏幕阅读器以外的设备隐藏内容。.sr-only
和 .sr-only-focusable
联合使用的话可以在元素有焦点的时候再次显示出来(例如,使用键盘导航的用户)
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
按tab键时,下面的控件会出现内容
【图片替换】
使用 .text-hide
类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。
.text-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border:;
}
<h1 class="text-hide" style="height:30px;background:url('http://via.placeholder.com/30x30') no-repeat;">Custom heading</h1>
Bootstrap辅助类的更多相关文章
- Bootstrap 辅助类
[Bootstrap 辅助类] 1.背景色 2. <p>插入符实例 <span class="caret"></span> </p> ...
- bootstrap——辅助类和响应式工具类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:显示下拉式功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:显示关闭按钮
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:将页面元素所包含的文本内容替换为背景图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:在元素获取焦点时显示(如:键盘操作的用户)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:除了屏幕阅读器外,其他设备上隐藏元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:强制元素隐藏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:清除浮动
<!DOCTYPE html> <html> <head> <title>Bootstrap .clearfix 实例</title> &l ...
随机推荐
- Echo团队Alpha冲刺随笔 - 第二天
项目冲刺情况 进展 项目各端都已经开始正式动工,完成了框架的搭建及小部分代码的编写 问题 对于框架使用不够熟练 心得 撸起袖子加油干! 今日会议内容 黄少勇 今日进展 实现账号绑定和首页公告信息及使用 ...
- 异步方法(promise版)出错自调用
/** * [*promisePlus promise封装的异步,既然是异步,必然会成功或者失败,理论上失败了就失败了,但是 * 失败后能否让他过多长时间自动再调用自己呢,如果调用指定的次数还是失败, ...
- easyui的datagrid的列checkbox自定义增加disabled选项
需求根据权限判断datagrid的每一列的checkBox是否可选,看了下文档,发现editor的checkbox应该能实现这个功能,但我们项目自己将easyui外面包了一层,把原生的editor改成 ...
- C. Report
题意:给出n个无序的数以及m个操作,每个操作由两个数组成,第一个数是操作的方式,第二个数 i 是操作的范围,若第一个数是1,则给 1-i 个数按升序排序,若第二个数是2,则给 1-i 个数按降序排列. ...
- SkylineGlobe API 如何以图层的方式导入MPT地形
测试环境:TerraExplorer Pro 6.6; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- [julia]本地离线安装package
1.引言 julia最近十分受关注,其结合了python的通用性,Ruby的动态性,C的代码运行速度,R的包管理和数据分析功能,perl的字符串处理能力,lisp的宏能力,matlab的矩阵计算规则, ...
- 前后端交互json字符串
//将需要的参数转成json字符串,然后用utf-8编码 var obj = encodeURIComponent(JSON.stringify(this.categories),"utf- ...
- 控制反转IOC与依赖注入DI - 理论篇
学无止境,精益求精 十年河东十年河西,莫欺少年穷 昨天是五一小长假归来上班的第一天,身体疲劳,毫无工作热情.于是就看看新闻,喝喝茶,荒废了一天 也就在昨天,康美同事张晶童鞋让我学习下IOC的理论及实现 ...
- PHP实现验证码制作
captcha.php(PHP产生验证码并储存Session): <?php //开启Session session_start(); //绘制底图 $image = imagecreatetr ...
- Http指南(1)
网关:是一种特殊的服务器,作为其他服务器的中间实体使用; Agent代理:所有发布web请求的应用程序都是HTTP Agent代理.Web浏览器其实就是一种代理; HTTP报文是在HTTP应用程序之间 ...