前面的话

  Bootstrap提供了一组工具类,用于辅助项目的开发。本文将详细介绍Bootstrap辅助类

文本色

  通过颜色来展示意图,Bootstrap 提供了一组工具类。这些类可以应用于链接,并且在鼠标经过时颜色可以还可以加深,就像默认的链接一样

  1. .text-muted:提示,使用浅灰色(#777
  2. .text-primary:主要,使用蓝色(#337ab7
  3. .text-success:成功,使用浅绿色(#3c763d)
  4. .text-info:通知信息,使用浅蓝色(#31708f
  5. .text-warning:警告,使用黄色(#8a6d3b
  6. .text-danger:危险,使用褐色(#a94442
  1. <div>
  2. <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
  3. <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  4. <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
  5. <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
  6. <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
  7. <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
  8. </div>

背景色

  和情境文本颜色类一样,使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深,就像上面所讲的情境文本颜色类一样

  1. .bg-primary:主要,使用蓝色(#337ab7
  2. .bg-success:成功,使用浅绿色(#dff0d8)
  3. .bg-info:通知信息,使用浅蓝色(#d9edf7
  4. .bg-warning:警告,使用浅黄色(#fcf8e3
  5. .bg-danger:危险,使用浅紫色(#f2dede
  1. <div>
  2. <p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  3. <p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
  4. <p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
  5. <p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
  6. <p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
  7. </div>

文本对齐

  通过文本对齐类,可以简单方便的将文字重新对齐

  1. .text-left {
  2. text-align: left;
  3. }
  4. .text-center {
  5. text-align: center;
  6. }
  7. .text-right {
  8. text-align: right;
  9. }
  10. .text-justify {
  11. text-align: justify;
  12. }
  13. .text-nowrap {
  14. white-space: nowrap;
  15. }
  1. <p class="text-left">Left aligned text.</p>
  2. <p class="text-center">Center aligned text.</p>
  3. <p class="text-right">Right aligned text.</p>
  4. <p class="text-justify">Justified text.</p>
  5. <p class="text-nowrap">No wrap text.</p>

【居中】

  为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中

  1. <div class="center-block" style="width:100px;">center</div>

大小写

  通过这几个类可以改变文本的大小写

  1. .text-lowercase {
  2. text-transform: lowercase;
  3. }
  4. .text-uppercase {
  5. text-transform: uppercase;
  6. }
  7. .text-capitalize {
  8. text-transform: capitalize;
  9. }
  1. <p class="text-lowercase">Lowercased text.</p>
  2. <p class="text-uppercase">Uppercased text.</p>
  3. <p class="text-capitalize">Capitalized text.</p>

按钮和符号

【关闭按钮】

  通过使用一个象征关闭的图标,可以让模态框和警告框消失

  1. <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span>

【三角符号】

  通过使用三角符号可以指示某个元素具有下拉菜单的功能

  1. <span class="caret"></span>
  1. .caret {
  2. display: inline-block;
  3. width: 0;
  4. height: 0;
  5. margin-left: 2px;
  6. vertical-align: middle;
  7. border-top: 4px dashed;
  8. border-top: 4px solid \9;
  9. border-right: 4px solid transparent;
  10. border-left: 4px solid transparent;
  11. }

浮动

  通过添加一个类,可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级

  [注意]排列导航条中的组件时可以使用.navbar-left 或 .navbar-right

【清除浮动】

  通过为父元素添加 .clearfix 类可以很容易地清除浮动(float

  1. .pull-left {
  2. float: left !important;
  3. }
  4. .pull-right {
  5. float: right !important;
  6. }
  1. .clearfix() {
  2. &:before,
  3. &:after {
  4. content: " ";
  5. display: table;
  6. }
  7. &:after {
  8. clear: both;
  9. }
  10. }
  1. <div class="clearfix">
  2. <div class="pull-left">left</div>
  3. <div class="pull-right">right</div>
  4. </div>
  5. <div>aaa</div>

隐藏

【显示隐藏内容】

  .show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important 来避免 CSS 样式优先级问题

  另外,.invisible 类可以被用来仅仅影响元素的可见性,也就是说,元素的 display 属性不被改变,并且这个元素仍然能够影响文档流的排布

  [注意]这些类只对块级元素起作用

  1. .show {
  2. display: block !important;
  3. }
  4. .hidden {
  5. display: none !important;
  6. }
  7. .invisible {
  8. visibility: hidden;
  9. }
  1. <div class="show">show</div>
  2. <div class="hidden">hidden</div>
  3. <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>

  按tab键时,下面的控件会出现内容

【图片替换】

  使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。

  1. .text-hide {
  2. font: 0/0 a;
  3. color: transparent;
  4. text-shadow: none;
  5. background-color: transparent;
  6. border:;
  7. }
  1. <h1 class="text-hide" style="height:30px;background:url('http://via.placeholder.com/30x30') no-repeat;">Custom heading</h1>

Bootstrap辅助类的更多相关文章

  1. Bootstrap 辅助类

    [Bootstrap 辅助类] 1.背景色 2. <p>插入符实例 <span class="caret"></span> </p> ...

  2. bootstrap——辅助类和响应式工具类

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:显示下拉式功能

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:显示关闭按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:将页面元素所包含的文本内容替换为背景图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:在元素获取焦点时显示(如:键盘操作的用户)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:除了屏幕阅读器外,其他设备上隐藏元素

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:强制元素隐藏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:清除浮动

    <!DOCTYPE html> <html> <head> <title>Bootstrap .clearfix 实例</title> &l ...

随机推荐

  1. B-Tree外存数据结构 _(B 树)第二部分

    2. B 树 B 树是为了磁盘或其它存储设备而设计的一种多叉(相对于二叉,B树每个内结点有多个分支,即多叉)平衡查找树 一棵B树,一棵关键字为英语中辅音字母的B树,现在要从树中查找字母R(包含n[x] ...

  2. Runloop深入理解

    一.什么是Runloop?为什么需要Runloop? Runloop,顾名思义,即运行循环. 没有Runloop的情况下,一个线程执行完一个任务,就会退出并销毁.等到需要处理下一个任务时,再重新创建一 ...

  3. stm32cubemx学习要点记录

    如果有些外设的HAL库函数找不到的话,你可以到IAR工程的文件夹显示栏中找如下图所示:

  4. 【Topcoder 10107】TeamManagement

    Topcoder 10107 题意:给定一棵树,其中有些点是忠诚的,现在要选k个点,每个选择的联通块都必须包含一个忠诚的点,求包含某个点的概率. 思路:考虑树型\(dp\),\(dp(i,j,0/1, ...

  5. C#中用HttpWebRequest中发送GET/HTTP/HTTPS请求 (转载)

    这个需求来自于我最近练手的一个项目,在项目中我需要将一些自己发表的和收藏整理的网文集中到一个地方存放,如果全部采用手工操作工作量大而且繁琐,因此周公决定利用C#来实现.在很多地方都需要验证用户身份才可 ...

  6. POJ3301 Texas Trip 计算几何、随机化贪心

    传送门--Vjudge 三分写法似乎有问题,可以去Udebug上看Morass的\(666\)个测试点的数据,我的乱搞有很多比正解答案小,但还是能在SPOJ和POJ过,可见数据之水. 可以对正方形的角 ...

  7. Luogu3191 HNOI2007 紧急疏散 二分答案、最大流

    传送门 题意:自己去看 考虑二分答案.$BFS$预处理出每一个人到每一扇门的最短时间,设二分的值为$mid$,那么把门拆成$mid$个点,每一个点代表第$1,2,...,mid$秒时的状态.$i-1$ ...

  8. LOJ #559. 「LibreOJ Round #9」ZQC 的迷宫

    一道ZZ结论题,主要是来写一写交互题的. 我们要先知道一句话: 扶着墙是肯定可以走出简单迷宫的. 然后我们冷静分析问题.若这个迷宫是\(n\times m\)的,那么最多有\(2mn+n+m\)个墙壁 ...

  9. 一文详解如何用 TensorFlow 实现基于 LSTM 的文本分类(附源码)

    雷锋网按:本文作者陆池,原文载于作者个人博客,雷锋网已获授权. 引言 学习一段时间的tensor flow之后,想找个项目试试手,然后想起了之前在看Theano教程中的一个文本分类的实例,这个星期就用 ...

  10. flask-admin 快速打造博客 系列一

    前言: 我想分享flask+flask-admin快速打造博客的详细教程,可是发现网易课堂已经有相应的免费课堂了,所以就不打算一点一滴的在这里做笔记,分享这些东西了.所以我主要集中在flask-adm ...