Bootstrap学习记录<一>之常用全局CSS样式

文章里所记录的样式不是按使用频率来记录，而是按当时学习时感觉有疑惑的早晚记录的

1、.sr-only

全称是 screen reader only，意为：（仅供）屏幕阅读器,意思就是在普通网页上面如果给标签添加这个样式，默认是不显示的，只有在屏幕阅读器里才可以被设备识别并且以语音的方式读出来。在使用Bootstrap写网页布局的时候经常为了实现某个效果需要添加一个标签元素但又不需要显示这个元素，这时候添加这个样式即可。如在把多个输入框设置为内联样式时，即使不需要前面的label标签，但也有加上，这时候为label添加.sr-only使其隐藏即可。

2、.input-group-addon

用于向基于文本的输入框添加作为前缀和后缀的文本或按钮。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。

<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control" placeholder="twitterhandle">
  <span class="input-group-addon">.00</span>
 </div>

3、.active 和 disabled="disabled"

.active使元素处于激活状态。
disabled="disabled"使元素处于不可点击(禁用)状态。

4、.text-hide 应该不常用。

官方解释为使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。我的理解是如果当前元素的位置需要使用图片而写页面的时候又恰好图没切好，这时可以先用这个类来占位，先把布局写好，回头再来替换为图片即可。

<h1 class="text-hide" >Custom heading</h1>

5、.center-block

让内容块居中,为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。

<div class="center-block">内容块居中</div>

6、.pull-left 和 .pull-right。

通过添加一个类，可以将任意元素向左或向右浮动。

<div class="pull-left">float left</div>
<div class="pull-right">float right</div>

7、.clearfix清除浮动。

通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）。

<div class="clearfix">给父类添加来清除浮动</div>

8、响应式工具。.visible-*-*和.hidden-*。作用是通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

就是可以控制在不同尺寸的屏幕上显示不同的内容。

以超小屏幕（xs）为例，可用的 .visible-*-*类是：.visible-xs-block、.visible-xs-inline 和.visible-xs-inline-block。

9、最后补充一下Bootstrap里面的less文件是怎样编译成bootstrap.css文件的。

Bootstrap框架里面默认写了好多less文件，以variables.less为基类写了项目里常用的样式变量，然后其他less文件里引用variables.less文件声明的变量值，最后在bootstrap.less文件里面引入全部的less文件，最后把bootstrap.less文件编译成bootstrap.css也就是我们在项目里最终导入的样式文件。

这个入口文件 bootstrap.less 是这样引用其他 less 文件的：

/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Reset and dependencies
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";

// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";

// Components
@import "component-animations.less";
@import "dropdowns.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
@import "labels.less";
@import "badges.less";
@import "jumbotron.less";
@import "thumbnails.less";
@import "alerts.less";
@import "progress-bars.less";
@import "media.less";
@import "list-group.less";
@import "panels.less";
@import "responsive-embed.less";
@import "wells.less";
@import "close.less";

// Components w/ JavaScript
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
@import "carousel.less";

// Utility classes
@import "utilities.less";
@import "responsive-utilities.less";