文本

文本颜色

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

.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. python标准库介绍——26 getopt 模块详解

    ==getopt 模块== ``getopt`` 模块包含用于抽出命令行选项和参数的函数, 它可以处理多种格式的选项. 如 [Example 2-23 #eg-2-23] 所示. 其中第 2 个参数指 ...

  2. jenkins 执行ssh 远程linux执行命令

    1.远程机器编写脚本: 脚本名称为: /app/jboss/jboss-as/logs/ALL_SERVICE_STOP.sh 功能为:停止某个服务器某个目录下面的所有应用 #!/bin/bash p ...

  3. php里面的注解(通过反射获取注解)

    /** * Created by PhpStorm. * User: Administrator * Date: 2018\10\12 0012 * Time: 14:30 */ /** * clas ...

  4. 配置新服务器 的一些 依赖库 php mysql nginx

    利用CentOS Linux系统自带的yum命令安装.升级所需的程序库 LANG=C yum -y install gcc gcc-c++ autoconf libjpeg libjpeg-devel ...

  5. UVA 10972 - RevolC FaeLoN（边-双连通分量）

    UVA 10972 - RevolC FaeLoN option=com_onlinejudge&Itemid=8&page=show_problem&category=547 ...

  6. Lua脚本语言快速入门手册

    学了两天Lua语言,感叹其短小精悍,上手极快,语法还很舒服,不错!整理下学习过程中经常用到的基础知识,共勉! Lua用法简述 Lua语言是在1993年由巴西一个大学研究小组发明,其设计目标是作为嵌入式 ...

  7. OpenGl学习 glenable()函数理解

    glEnable用于启用各种功能.功能由参数决定.与glDisable相对应.glDisable是用来关闭的.两个函数参数取值是一至的. 参数说明:void glEnable(GLenum cap)G ...

  8. [sql]大型网站MySQL深度优化揭秘

    大型网站MySQL深度优化揭秘 第1章优化的思路和线路 1.1 网站优化的思路    2 1.2 MySQL优化,nginx这样的东西怎么优化? 第2章硬件层面优化 2.1 数据库物理机 2.1.1 ...

  9. 使用OleDB组件连接和访问Oracle数据库

    访问 Oracle 数据库的步骤 .在 Oracle 中,创建一个名为 TestTable 的表,如下所示: Create Table TestTable (c1 )); .将数据插入到 TestTa ...

  10. MySql 触发器同步备份数据表记录

    添加记录到新记录表 DELIMITER $$ USE `DB_Test`$$ CREATE /*!50017 DEFINER = 'root'@'%' */ TRIGGER `InsertOPM_Al ...