本文摘自PHP中文网,作者青灯夜游,侵删。
Bootstrap提供了一组工具类,用于辅助项目的开发。本篇文章给大家详细介绍一下Bootstrap中的辅助类。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。相关推荐:《bootstrap教程》
文本色
通过颜色来展示意图,Bootstrap 提供了一组工具类。这些类可以应用于链接,并且在鼠标经过时颜色可以还可以加深,就像默认的链接一样
1 2 3 4 5 6 | .text-muted:提示,使用浅灰色(#777)
.text-primary:主要,使用蓝色(#337ab7)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442)
|
1 2 3 4 5 6 7 8 | <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>
|
背景色
和情境文本颜色类一样,使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深,就像上面所讲的情境文本颜色类一样
1 2 3 4 5 | .bg-primary:主要,使用蓝色(#337ab7)
.bg-success:成功,使用浅绿色(#dff0d8)
.bg-info:通知信息,使用浅蓝色(#d9edf7)
.bg-warning:警告,使用浅黄色(#fcf8e3)
.bg-danger:危险,使用浅紫色(#f2dede)
|
1 2 3 4 5 6 7 | <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>
|
文本对齐
通过文本对齐类,可以简单方便的将文字重新对齐
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .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;
}
|
1 2 3 4 5 | <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
属性让其中的内容居中
1 | <div class = "center-block" style= "width:100px;" >center</div>
|
大小写
通过这几个类可以改变文本的大小写
1 2 3 4 5 6 7 8 9 | .text-lowercase {
text-transform: lowercase;
}
.text-uppercase {
text-transform: uppercase;
}
.text-capitalize {
text-transform: capitalize;
}
|
1 2 3 | <p class = "text-lowercase" >Lowercased text.</p>
<p class = "text-uppercase" >Uppercased text.</p>
<p class = "text-capitalize" >Capitalized text.</p>
|
按钮和符号
【关闭按钮】
通过使用一个象征关闭的图标,可以让模态框和警告框消失
1 | <button type= "button" class = "close" aria-label= "Close" ><span aria-hidden= "true" >×</span>
|
【三角符号】
通过使用三角符号可以指示某个元素具有下拉菜单的功能
1 | <span class = "caret" ></span>
|
1 2 3 4 5 6 7 8 9 10 11 | .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
)
1 2 3 4 5 6 | .pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
|
1 2 3 4 5 6 7 8 9 10 | .clearfix() {
&:before,
&:after {
content: " " ;
display: table;
}
&:after {
clear: both;
}
}
|
1 2 3 4 5 | <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
属性不被改变,并且这个元素仍然能够影响文档流的排布
[注意]这些类只对块级元素起作用
1 2 3 4 5 6 7 8 9 | .show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
|
1 2 3 | <div class = "show" >show</div>
<div class = "hidden" >hidden</div>
<div class = "invisible" >invisible</div>
|
【屏幕阅读器】
.sr-only
类可以对屏幕阅读器以外的设备隐藏内容。.sr-only
和 .sr-only-focusable
联合使用的话可以在元素有焦点的时候再次显示出来(例如,使用键盘导航的用户)
1 | <a class = "sr-only sr-only-focusable" href= "#content" >Skip to main content</a>
|
【图片替换】
使用 .text-hide
类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。
1 2 3 4 5 6 7 | .text-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
|
1 | <h1 class = "text-hide" style= "height:30px;background:url('http://via.placeholder.com/30x30') no-repeat;" >Custom heading</h1>
|
更多编程相关知识,请访问:编程视频!!
以上就是详解Bootstrap中的辅助类的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
bootstrap有什么用处
bootstrap table实现定时刷新数据的方法
bootstrap文件怎么引入
bootstrap如何响应式布局
bootstrap cdn是什么
bootstrap ace是什么
bootstrap弹窗代码写在哪里
bootstrap的原理是什么
bootstrap是ui框架吗
bootstrap用什么开发工具
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 详解Bootstrap中的辅助类