文本

文本颜色

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

.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. ubuntu中将某一程序设置为开机启动项的方法

    一.简要说明 Linux操作系统的引导加载程序(对个人电脑而言通常是LILO)开始,介绍Linux开机引导的步骤. 加载内核LILO启动之后,如果你选择了Linux作为准备引导的操作系统,第一个被加载 ...

  2. Leaf——美团点评分布式ID生成系统

    背景 在复杂分布式系统中,往往需要对大量的数据和消息进行唯一标识.如在美团点评的金融.支付.餐饮.酒店.猫眼电影等产品的系统中,数据日渐增长,对数据分库分表后需要有一个唯一ID来标识一条数据或消息,数 ...

  3. ORM是什么？

    对象关系映射(Object Relational Mapping,简称ORM)是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 简单的说,ORM是通过使用描述对象和数据库之间映射的元数据 ...

  4. 微服务架构的进程间通信（IPC）

    先抛出几个问题: 微服务架构的交互模式有哪些? 微服务常用的进程间通信技术有哪些? 如何处理部分请求失败? API的定义需要注意的事项有哪些 微服务的通信机制与SOA的通信机制之间的关系与区别 微服务 ...

  5. Android Hawk数据库 github开源项目

    Android Hawk数据库 github开源项目 Hawk 是一个很便捷的数据库  . 操作数据库仅仅需一行代码 , 能存不论什么数据类型 . github 地址: https://github. ...

  6. C#数据库帮助类SqlHelper

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Da ...

  7. hdoj1069 Monkey and Banana

    Monkey and Banana Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  8. 使用TortoiseGit操作分支的创建与合并功能集合

    使用TortoiseGit操作分支的创建与合并 本文在介绍了软件安装和设置后, 写了TortoiseGit 常用的一些功能, 包括: 创建新库 添加文件及文件夹 创建分支 看分支情况及修改log 比较 ...

  9. RTX——第8章 任务优先级修改

    以下内容转载自安富莱电子: http://forum.armfly.com/forum.php 任务优先级设置注意事项RTX 操作系统任务优先级的设置要注意以下几个问题: 设置任务的优先级时,数值越 ...

  10. Log4php 使用心得

    使用log4php 记录系统日志: 1.自动拦截php报出的错误,写日志 2.手动打印错误 set_error_handler('captureNormal',E_ERROR | E_PARSE); ...