文本

文本颜色

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

.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标准库介绍——3 stat 模块详解

    == stat 模块 == [Example 1-50 #eg-1-50] 展示了 ``stat`` 模块的基本用法, 这个模块包含了一些 ``os.stat`` 函数中可用的常量和测试函数. === ...

  2. tomcat多域名配置(转)

    TOMCAT的域名配置 现在很多的公司的网站都是用tomcat作为应用服务区的,可是对于初学者,8080端口号是如何去掉的,这些网站是如何和域名绑定到一起的呢?一个 tomcat是如何绑定多域名?并且 ...

  3. python 例程的一个好例子

    用例程来写一个求平均值的算法 #!/usr/local/python/bin/python3 def FunCore(): total=0 counter=0 average=None tmp=yie ...

  4. 基于EM的多直线拟合实现及思考

    作者:桂. 时间:2017-03-22  06:13:50 链接:http://www.cnblogs.com/xingshansi/p/6597796.html 声明:欢迎被转载,不过记得注明出处哦 ...

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

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

  6. CCEaseElasticOut调整速度和振幅

    pSprite->setAnchorPoint(CCPoint(,)); pSprite->setPosition(CCPoint(,)); CCFiniteTimeAction* pAc ...

  7. 什么是GC Roots

    GC Root 2012年11月28日  ⁄ 综合 ⁄ 共 625字 ⁄ 字号  小 中 大  ⁄ 评论关闭   常说的GC(Garbage Collector) roots,特指的是垃圾收集器(Ga ...

  8. angular学习笔记(二十一)-$http.get

    基本语法: $http.get('url',{}).success(function(data,status,headers,config){}).error(function(data,status ...

  9. centos7 nginx安装 及MySQL-python

    1.pip install MySQL-python 出错问题 pip install -r requirement.txt 发现安装MySQL-python 出错,更新setuptools也没用 解 ...

  10. JQuery中eq()和get()的区别

    众所周知,eq()方法返回的是一个JQuery对象,也就是[object Object]; get()方法返回的是DOM对象组成的数组,也就是[object HTMLLIElement]; 我们用一个 ...