文本

文本颜色

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

.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. js判断字符是否为空的方法

    js判断字符是否为空的方法: //判断字符是否为空的方法 function isEmpty(obj){ if(typeof obj == "undefined" || obj == ...

  2. 使用国内镜像composer安装laravel

    1.安装 Laravel,创建blog项目 首先先说一下直接安装的方法,要想使用这个方法,首先要FQ(这是我们的基本国情决定的).这样的安装方式有两种: ①.全局安装 使用命令Laravel Inst ...

  3. ASP.NET MVC 操作AD 获取域服务器当前用户姓名和OU信息

    #region 根据当前登录域账号 获取AD用户姓名和所在OU目录 /// <summary> /// 根据当前登录域账号 获取AD用户姓名和所在OU目录 /// </summary ...

  4. 【转】input file accept属性可以限制的文件类型

    来源:http://blog.sina.com.cn/s/blog_6c9d65a10101a8yh.html 在上传文件的时候,需要限制指定的文件类型. <input type="f ...

  5. 分享一个不错的squid 配置文件

    squid配置文件一例,只使用了web cache功能,用来给web加速. http_port 80 defaultsite=IPicp_port 0cache_peer ip parent 85 0 ...

  6. 如何在 Ubuntu 和 CentOS 上启用 Nginx 的 HTTP/2 协议支持

    HTTP/2 是 HTTP 网络协议的主要修订版本,其专注于 HTTP 协议的性能改进.HTTP/2 协议的目标是减少延迟,并且允许在 Web 浏览器和服务器之间的一个连接上并行发起多个请求,因此 W ...

  7. ssh-copy-id 安全地复制公钥到远程服务器上

    [root@NB .ssh]# ssh-copy-id -i id_rsa.pub " -p22 root@150.57.38.226" root@150.57.38.226's ...

  8. MySQL - 1093异常 - You can't specify target table 't' for update in FROM clause

    有一个表示地区的表,表结构与数据大概如下表. ID NAME PARENT_ID 1 中国 2 广东省 1 3 广州市 2 4 荔湾区 3 5 越秀区 3 6 番禺区 3 7 小谷围街道 6 现为了查 ...

  9. Ubuntu12.04下tomcat的安装与配置

    1.下载tomcat 我的tomcat是从 http://tomcat.apache.org/download-70.cgi 这里下载的tar.gz版本的. 2.解压tomcat $sudo tar ...

  10. 获取不到Repeater控件中的CheckBox选中状态

    写在前面的话:在做一个项目的时候,需要使用到Repeater控件,并且在Repeater控件内放置了CheckBox控件来标志需要删除的行,选中后,在后台取到的CheckBox的值总是为false.最 ...