1.情境文本颜色

通过颜色来展示意图,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>

2.情境背景色

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

<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>

3.关闭按钮

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

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

4.三角符号

通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意,向上弹出式菜单中的三角符号是反方向的。

<span class="caret"></span>

5.快速浮动

通过添加一个类,可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。这些类还可以作为 mixin(参见 less 文档) 使用。

<div class="pull-left">...</div>
<div class="pull-right">...</div>

不能用于导航条组件中
排列导航条中的组件时可以使用这些工具类:.navbar-left 或 .navbar-right 。 参见导航条文档以获取更多信息。

6.让内容块居中

为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。下面列出的类还可以作为 mixin 使用。

<div class="center-block">...</div>

7.清除浮动

通过为父元素添加 .clearfix 类可以很容易地清除浮动(float)。这里所使用的是 Nicolas Gallagher 创造的 micro clearfix 方式。此类还可以作为 mixin 使用。

<!-- Usage as a class -->
<div class="clearfix">...</div>

8.显示或隐藏内容

**.show 和 .hidden **类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important 来避免 CSS 样式优先级问题,就像 quick floats 一样的做法。注意,这些类只对块级元素起作用,另外,还可以作为 mixin 使用。
.hide 类仍然可用,但是它不能对屏幕阅读器起作用,并且从 v3.0.1 版本开始就不建议使用了。请使用 .hidden 或 .sr-only 。
另外,.invisible 类可以被用来仅仅影响元素的可见性,也就是所,元素的 display 属性不被改变,并且这个元素仍然能够影响文档流的排布。

<div class="show">...</div>
<div class="hidden">...</div>

9.屏幕阅读器和键盘导航

.sr-only 类可以对屏幕阅读器以外的设备隐藏内容。.sr-only 和 .sr-only-focusable 联合使用的话可以在元素有焦点的时候再次显示出来(例如,使用键盘导航的用户)。对于遵循 可访问性的最佳实践 很有必要。这个类也可以作为 mixin 使用。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

10.图片替换

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

<h1 class="text-hide">Custom heading</h1>

11.响应式工具

为了加快对移动设备友好的页面开发工作,利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。
有针对性的使用这类工具类,从而避免为同一个网站创建完全不同的版本。相反,通过使用这些工具类可以在不同设备上提供不同的展现形式。

可用的类
通过单独或联合使用以下列出的类,可以针对不同屏幕尺寸隐藏或显示页面内容。

从 v3.2.0 版本起,形如 .visible-- 的类针对每种屏幕大小都有了三种变体,每个针对 CSS 中不同的 display 属性,列表如下:

因此,以超小屏幕(xs)为例,可用的 .visible-- 类是:.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。
.visible-xs、.visible-sm、.visible-md 和 .visible-lg 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了

相关的元素的特殊情况外,它们与 .visible-*-block 大体相同。

打印类
和常规的响应式类一样,使用下面的类可以针对打印机隐藏或显示某些内容。

.visible-print 类也是存在的,但是从 v3.2.0 版本开始不建议使用。它与 .visible-print-block 类大致相同,除了

相关元素的特殊情况外。

测试用例
调整你的浏览器大小,或者用其他设备打开页面,都可以测试这些响应式工具类。

在...上可见
带有绿色标记的元素表示其在当前浏览器视口(viewport)中是可见的。

在...上隐藏
带有绿色标记的元素表示其在当前浏览器视口(viewport)中是隐藏的。

Bootstrap入门九:辅助类的更多相关文章

  1. Bootstrap<基础九>辅助类

    Bootstrap 中的一些可能会派上用场的辅助类. 文本 以下不同的类展示了不同的文本颜色.如果文本是个链接鼠标移动到文本上会变暗: 类 描述   .text-muted "text-mu ...

  2. Bootstrap入门(二十九)JS插件6:弹出框

    Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...

  3. Bootstrap入门(十九)组件13:页头与缩略图

    Bootstrap入门(十九)组件13:页头与缩略 1.页头 2.默认的缩略图 3.自定义缩略图 页头组件能够为 h1 标签增加适当的空间,并且与页面的其他部分形成一定的分隔.它支持 h1 标签内内嵌 ...

  4. Bootstrap入门(九)组件3:按钮组

    Bootstrap入门(九)组件3:按钮组   先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link h ...

  5. 01.Bootstrap入门

    Bootstrap介绍: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加 ...

  6. Bootstrap入门(二)栅格

    Bootstrap入门(二)栅格 Bootstrap入门(二)栅格 全局CSS样式--栅格 先引入本地的CSS文件(根据自己的文件夹,有不同的引入地址,我是放在一个新建的名为css的文件夹中) con ...

  7. BootStrap入门教程 (一)

    BootStrap入门教程 (一)   2011年,twitter的"一小撮"工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端 ...

  8. bootstrap 入门

    bootstrap 入门 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&q ...

  9. Bootstrap入门(三十)JS插件7:警告框

    Bootstrap入门(三十)JS插件7:警告框 通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...

随机推荐

  1. 编写可维护的js代码

    在工作中,制定一套统一的编码风格,可以提高开发效率,维护起来的也要容易很多,也能避免一些不必要的错误出现. 项目中常用的检查编码风格的工具JSLint.JSHint.JSCS.ESLint,,在这呢, ...

  2. Python入门系列教程(六)面向对象

    1.self 所谓的self,可以理解为自己,可以把它当做C++中类里面的this指针一样理解,就是对象自身的意思,在用某个对象调用该方法时,就将该对象作为第一个参数传递给self. 2.class ...

  3. 【AtCoder】ARC095 E - Symmetric Grid 模拟

    [题目]E - Symmetric Grid [题意]给定n*m的小写字母矩阵,求是否能通过若干行互换和列互换使得矩阵中心对称.n,m<=12. [算法]模拟 [题解]首先行列操作独立,如果已确 ...

  4. phpcms数据结构

    v9_admin 管理员表 v9_admin_panel 快捷面板 v9_admin_role 角色表 v9_admin_role_priv 管理员权限表 v9_announce 公告表 v9_att ...

  5. 个人集群部署hadoop 2.7 + hive 2.1

    环境:centos 6.6 x64 (学习用3节点) 软件:jdk 1.7 + hadoop 2.7.3 + hive 2.1.1 环境准备: 1.安装必要工具 yum -y install open ...

  6. 42、Java装饰者设计模式

    设计模式简介 什么是设计模式?设计模式是可以重复利用的解决方案.软件开发的先驱或者前辈们将之前在开发中遇到的问题进行总结并给出了解决方案,后辈在遇到这些问题之后直接使用这些方案即可解决问题.比如盖高楼 ...

  7. 21、List遍历时修改元素的问题

    List迭代时修改元素的问题 请编写代码完成以下需求:判断一个List里面是否包含monkey,如果包含的话,向集合中添加1024这个字符串.‘ package com.monkey1024.list ...

  8. 线段树(dfs序建树加区间更新和单点查询)

    题目链接:https://cn.vjudge.net/contest/66989#problem/J 记录一下这道折磨了我一天的题,.... 具体思路: 具体关系可通过dfs序建树,但是注意,在更新以 ...

  9. linux 配置免密码登陆

    在使用scp命令传输的时候需要密码 配置免密码登陆 ssh-keygen -t rsa (四个回车) 执行命令完成后,会生成两个文件id_rsa(私钥).id-rsa.pub(公钥) 将公钥拷贝到要免 ...

  10. 华硕笔记本U盘重装系统

    ESC启动把Secure Boot改为Disabled,Launch CSM改为Enabled,然后重新选择不带UEFI字样的U盘启动项.然后就可以找到U盘进入PE