文本

文本颜色

如果文本是个链接，则鼠标移动到链接文本上的时候，文本会变暗

.text-muted：灰色

.text-primary：浅蓝色

.text-success：绿色

.text-info：深蓝色

.text-warning：橘黄色

.text-danger：红色

文本位置

.text-left：文本左对齐

.text-center:文本居中对齐

.text-right：文本右对齐

文本换行

.text-justify：文本对齐，超出屏幕部分文字自动换行

.text-nowrap：段落中超出屏幕部分不换行

文本大小写

.text-lowercase：文本小写

.text-uppercase：文本大写

.text-capitalize：单词首字母大写

背景

背景颜色，如果文本是链接，则当鼠标移动到文本上时，背景会变暗

其他

快速浮动

您可以分别使用 class pull-left 或 pull-right 来把元素向左或向右浮动。下面的实例演示了这点。

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 快速浮动</title>

   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">

   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>

<body>

<div class="pull-left">

   Quick Float to left

</div>

<div class="pull-right">
Quick Float to right
</div> </body> </html>

结果如下所示：

如需对齐导航栏中的组件，请使用 .navbar-left 或 .navbar-right 代替。请查看 Bootstrap 导航栏。

清除浮动

如需清除元素的浮动，请使用 .clearfix class。

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 清除浮动</title>

   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">

   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>

<body>

<div class="clearfix"  style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">

   <div class="pull-left" style="background:#58D3F7;">

      向左快速浮动

   </div>

   <div class="pull-right" style="background: #DA81F5;">

      向右快速浮动

   </div>

</div>

</body>

</html>

结果如下所示：

内容居中

使用 class center-block 来居中元素。

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 居中内容块</title>

   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">

   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>

<body>

<div class="row">

   <div class="center-block" style="width:200px;background-color:#ccc;">

      这是 center-block 实例

   </div>

</div>

</body>

</html>

结果如下所示：

 

显示和隐藏内容

您可以通过使用 class .show 和 .hidden 来强行设置元素显示或隐藏（包括屏幕阅读器）。

<div class="row" style="padding: 91px 100px 19px 50px;">

   <div class="show" style="left-margin:10px;width:300px;background-color:#ccc;">

      This is an example for show class

   </div>

   <div class="hidden" style="width:200px;background-color:#ccc;">

      This is an example for hide class

   </div>

</div>

结果如下所示：

 

屏幕阅读器

您可以通过使用 class .sr-only 来把元素对所有设备隐藏，除了屏幕阅读器。

<div class="row" style="padding: 91px 100px 19px 50px;">

   <form class="form-inline" role="form">

   <div class="form-group">

      <label class="sr-only" for="email">Email 地址</label>

      <input type="email" class="form-control" placeholder="Enter email">

   </div>

   <div class="form-group">

      <label class="sr-only" for="pass">密码</label>

      <input type="password" class="form-control" placeholder="Password">

   </div>

</div>

结果如下所示：

在这里，我们看到两个 input 类型的 label 标签都带有 class sr-only，因此标签将只对屏幕阅读器可见。

关闭图标

使用通用的关闭图标来关闭模态框和警告框。使用 class close 得到关闭图标。

<p>Close Icon Example

   <button type="button" class="close" aria-hidden="true"> //aria-hidden是给屏幕阅读器用的，&times为html实体，表示一个“乘号”

      &times;

   </button>

</p>

结果如下所示：

 

插入符

使用插入符表示下拉功能和方向。使用带有 class caret 的 <span> 元素得到该功能。

<p>插入符实例

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

</p>

结果如下所示：

 
 
 

bootstrap -- css -- 辅助类的更多相关文章

  1. 2.Bootstrap CSS

    Bootstrap CSS 一.Bootstrap CSS概览 移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动 ...

  2. Bootstrap.css 中请求googleapis.com/css?family 备忘录

    问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open ...

  3. Bootstrap CSS 栅格、代码和表格

    一.bootstrap栅格 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. Bootstrap 网格系统(G ...

  4. Bootstrap CSS概览代码文字标注篇

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. Bootflat – 基于 Bootstrap CSS 框架的扁平化界面

    Bootflat 是一个开源的扁平化的 UI 工具包,基于 Bootstrap 3.1.0 CSS 框架.它为 Web 开发人员提供了一个创建优雅的 Web 应用程序的更快,更容易和更少的重复任务的途 ...

  6. 4.1HTML和Bootstrap css精华

    1.HTML 2.理解Bootstrap HTML元素告诉浏览器,他要表现的是什么类型的内容,当他们不提供任何关于如何显示内容的信息.如何显示内容的信息,由CSS提供. 本书仅包含足够的信息,让你查看 ...

  7. Bootstrap CSS 描述

    <!DOCTYPE html><html lang="zh-CN"><head> <!--定于内容,和内容的编码格式--> < ...

  8. （二）Bootstrap CSS 概览

    在这一章中,我们将讲解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 H ...

  9. bootstrap.css.map这个文件有何用处？该怎能使用它？

    . ├── bootstrap.css ├── bootstrap.css.map ├── bootstrap.min.css ├── bootstrap-theme.css ├── bootstra ...

随机推荐

  1. 用ansible 完成一次性的工作(ad-Hoc)工作

    ansible 真正强大的功能是它的playbook,但是在日常的工作中通过会遇到一些工作,它们只是需要我们偶尔操作一下:比较说重启一下 操作系统:像这样的工作就用不着ansible-playbook ...

  2. FreeBSD搭建SVN服务器

    我最喜欢使用的OS就是FreeBSD,而且现在刚好有一台FreeBSD服务器,所以我想把我的SVN服务器迁移到FreeBSD上,再配合hudson和ant就可以自动编译了. 第一步:安装svn: 在安 ...

  3. Xilinx中的xapp1052理解

    xapp1052是xilinx官方给出的一个有关DMA数据传输的样例,用于PC端和FPGA端之间的DMA数据传输.首先需要说的是,xapp1052并不是一个完整的DMA数据传输的终端硬件设计,这在下面 ...

  4. Base64转码和解码的帮助类

    /** * 将字符串进行Base64编码 * * @param s 被编码的字符串 * @return 编码后的字符串 */ public static String encoderBASE64(St ...

  5. maven(4)------maven核心pom.xml文件常用元素分析

    在maven项目中,pom文件是核心文件 pom.xml: <?xml version="1.0" encoding="UTF-8"?> <p ...

  6. 【C语言】构造长度可变的二维数组

    #include <stdio.h> #include <malloc.h> #include <memory.h> int getArray(int ***p,i ...

  7. 用C++画光（一）——优化

    写在前面 在先前的画光系列中,实现实体几何.反射.折射等效果,但是最大的一个缺陷是复杂度太高.当采样是1024时,渲染时间直线上升(用4线程),以至好几个小时才能完成一副作品,实现太慢.然而,当我看到 ...

  8. 带limit的hivesql排序

    带limit的hivesql排序   select requestdomain,count(1) as cnt from ods_cndns_real_log where dt = 20160707 ...

  9. 利用eclipse中的各种功能帮助你理解代码

    @菜单栏下面,工具栏,有一对黄色的箭头按钮,一个指向左边,一个指向右边,快捷键是Alt+Left/Alt+Right 功能是跳转到你刚刚编辑过的地方 这里的Left/Right指的是左右方向键,可以方 ...

  10. java 多线程7： （suspend方法与resume方法） 挂起与恢复

    suspend方法与resume 是 实例方法,已废弃 缺点一:会造成独占,从而造成死锁 缺点二:会造成数据不同步,不能保证数据原子性