Bootstrap入门之全局CSS样式

栏目: CSS · CSS3 · 发布时间: 7年前

内容简介：Bootstrap入门之全局CSS样式

Bootstrap入门之全局CSS样式

本文是 《玩转Bootstrap》 和 Bootstrap中文网 的学习笔记

Bootstrap简介

Bootstrap是简单、灵活的用于开发响应式布局、移动设备优先的 WEB 项目的HTML，CSS，JavaScript框架。

起步

基本模板

Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入。在 bower.json 文件中 列出了 Bootstrap 所支持的 jQuery 版本 

<!DOCTYPE html>
<htmllang="zh-CN">
<head>
    <metacharset="utf-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge"><!--在IE运行最新的渲染模式-->
    <metaname="viewport"content="width=device-width, initial-scale=1"><!--初始化移动浏览显示，width=device-width让视口宽度等于设备的真实分辨率，initial-scale=1是初始化第一次载入时缩放比例-->
    
  	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    
  	<title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <linkhref="css/bootstrap.min.css"rel="stylesheet">

    <!-- 下面是针对IE版本低于IE9设置，第一个script是让IE8支持HTML5标签，第二个script是让IE8支持媒体查询 -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<h1>你好，世界！</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<scriptsrc="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<scriptsrc="js/bootstrap.min.js"></script>
</body>
</html>

全局CSS样式

移动设备优先

Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。

为了确保适当的绘制和触屏缩放，需要在 `` 之中 添加 viewport 元数据标签 。 

<metaname="viewport"content="width=device-width, initial-scale=1">

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！ 

<metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。 

<divclass="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 

<divclass="container-fluid">
  ...
</div>

Bootstrap入门之全局CSS样式

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

Bootstrap入门之全局CSS样式

  • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

  • 通过“行（row）”在水平方向创建一组“列（column）”。

  • 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

  • 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

  • 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding ，也就间接为“行（row）”所包含的“列（column）”抵消掉了 padding 。

  • 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

  • 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

    Bootstrap入门之全局CSS样式

  • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。

Bootstrap入门之全局CSS样式

媒体查询

在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内 

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

栅格参数

超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度 None （自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列（column）数 12 12 12 12
最大列（column）宽 自动 ~62px ~81px ~97px
槽（gutter）宽 30px （每列左右均有 15px） 30px （每列左右均有 15px） 30px （每列左右均有 15px） 30px （每列左右均有 15px）
可嵌套 是 是 是 是
偏移（Offsets） 是 是 是 是
列排序 是 是 是 是

响应式列重置

在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和 响应式 工具 类 。 

<divclass="row">
  <divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <divclass="clearfix visible-xs-block"></div>

  <divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

Bootstrap入门之全局CSS样式

除了列在分界点清除响应， 还可以 重置偏移, 后推或前拉某个列 。 

<divclass="row">
  <divclass="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <divclass="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<divclass="row">
  <divclass="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <divclass="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Bootstrap入门之全局CSS样式

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如， .col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。 

<divclass="row">
  <divclass="col-md-4">.col-md-4</div>
  <divclass="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<divclass="row">
  <divclass="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <divclass="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<divclass="row">
  <divclass="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Bootstrap入门之全局CSS样式

还可以使用 .col - * - offset-0 覆盖较低网格层的偏移量。 

<divclass="row">
    <divclass="col-xs-6 col-sm-4">col-xs-6 col-sm-4
    </div>
    <divclass="col-xs-6 col-sm-4">col-xs-6 col-sm-4
    </div>
    <divclass="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0
    </div>
</div>

Bootstrap入门之全局CSS样式

嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12。 

<divclass="row">
  <divclass="col-sm-9">
    Level 1: .col-sm-9
    <divclass="row">
      <divclass="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <divclass="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

不 排序 的话， col-md-9 居左， col-md-3 居右，如果要互换位置，需要将 col-md-9 向右移动3个列的距离，也就是3个offset ,也就是在 <div class=“col-md-9”> 添加类名 col-md-push-3 ，调用其样式。 

<divclass="row">
  <divclass="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <divclass="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Bootstrap入门之全局CSS样式

Less mixin 和变量

变量

通过变量来定义列数、槽（gutter）宽、媒体查询阈值（用于确定合适让列浮动）。我们使用这些变量生成预定义的栅格类。如： @grid-columns 、 @grid-gutter-width 、 @grid-float-breakpoint 、 @grid-gutter-width 、 @font-family-base 、 @font-size-base 、 @line-height-base 等。

mixin

mixin 用来和栅格变量一同使用，为每个列（column）生成语义化的 CSS 代码。

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

排版

Bootstrap 排版、链接样式设置了基本的全局样式。分别是：

  • 为 body 元素设置 background-color: #fff;
  • 使用 @font-family-base 、 @font-size-base 和 @line-height-base 变量作为排版的基本参数
  • 为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线

这些样式都能在 scaffolding.less 文件中找到对应的源码。

标题

HTML 中的所有标题标签， <h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。 

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<spanclass="h1">.h1</span>
<spanclass="h2">.h2</span>
<spanclass="h3">.h3</span>
<spanclass="h4">.h4</span>
<spanclass="h5">.h5</span>
<spanclass="h6">.h6</span>

<h1>h1. Bootstrap heading <small>small</small></h1>
<h2>h2. Bootstrap heading <small>small</small></h2>
<h3>h3. Bootstrap heading <small>small</small></h3>
<h4>h4. Bootstrap heading <small>small</small></h4>
<h5>h5. Bootstrap heading <small>small</small></h5>
<h6>h6. Bootstrap heading <small>small</small></h6>

Bootstrap入门之全局CSS样式

页面主体

Bootstrap 将全局 font-size 设置为 14px ， line-height 设置为 1.428 。这些属性直接赋予 <body> 元素和所有段落元素。另外， <p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

通过添加 .lead 类可以让段落突出显示。 

<pclass="lead">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>

Bootstrap入门之全局CSS样式

使用Less工具构件

variables.less文件中定义的两个 Less 变量决定了排版尺寸： @font-size-base 和 @line-height-base 。第一个变量定义了全局 font-size 基准，第二个变量是 line-height 基准。我们使用这些变量和一些简单的公式计算出其它所有页面元素的 margin、 padding 和 line-height。自定义这些变量即可改变 Bootstrap 的默认样式。

内联文本元素

  • 高亮文本： <mark></mark>
  • 被删除文本： <del><del>
  • 无用文本： <s></s>
  • 插入文本： <ins></ins>
  • 带下划线的文本： <u></u>
  • 小号文本： <small></small>
  • 着重： <strong></strong>
  • 斜体： <em></em> （在 HTML5 中可以使用 <b> 和 <i> 标签。 <b> 用于高亮单词或短语，不带有任何着重的意味；而 <i> 标签主要用于发言、技术词汇等。） 
<mark>高亮文本</mark><br>
   <del>被删除文本</del><br>
   <s>无用文本</s><br>
   <ins>插入文本</ins><br>
   <u>带下划线的文本</u><br>
   <small>小号文本</small><br>
   <strong>着重</strong><br>
   <em>斜体</em><br>

Bootstrap入门之全局CSS样式

对齐

文本对齐： <p class="text-left">文本左对齐</p> 、 <p class="text-center">文本居中</p> 、 <p class="text-right">文本右对齐</p> 、 <p class="text-justify">文本两端对齐</p> 、 <p class="text-nowrap">禁止文字自动换行</p> （在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等） 

<pclass="text-left">文本左对齐</p>
  <pclass="text-center">文本居中</p>
  <pclass="text-right">文本右对齐</p>
  <pclass="text-justify">文本两端对齐</p>
  <pclass="text-nowrap">禁止文字自动换行</p>

Bootstrap入门之全局CSS样式

改变大小写

改变大小写： <p class="text-lowercase">小写</p> 、 <p class="text-uppercase">大写</p> 、 <p class="text-capitalize">首字母大写</p> 

<pclass="text-lowercase">Lowercased小写</p>
<pclass="text-uppercase">Uppercased大写</p>
<pclass="text-capitalize">capitalize首字母大写</p>

Bootstrap入门之全局CSS样式

缩略语

缩略语：当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 元素的增强样式。缩略语元素带有 title` 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性。

  • 基本缩略语： <abbr title="attribute">attr</abbr>
  • 首字母缩略语： <abbr title="HyperText Markup Language" class="initialism">HTML</abbr> （为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。） 
<abbrtitle="缩略语">缩略语</abbr>
 <abbrtitle="缩略语"class="initialism">缩略语</abbr>

Bootstrap入门之全局CSS样式

地址

地址： <address></address> 

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbrtitle="Phone">P:</abbr> (123) 456-7890
</address>

Bootstrap入门之全局CSS样式

引用

  • 默认样式的引用： <blockquote></blockquote> （文本建议放在 <p> 标签内，外层包一层 <blockquote> 标签）
  • 引用样式的命名来源： <footer></footer> （来源的名称可以包裹进 <cite> 标签中）
  • 引用内容右对齐： <blockquote class="blockquote-reverse"></blockquote> 
<blockquote>
       <p>默认引用样式</p>
   </blockquote>
   <blockquote>
       <p>默认引用样式</p>
       <footer>命名来源<citetitle="Source Title">命名来源</cite></footer>
   </blockquote>
   <blockquoteclass="blockquote-reverse">
       引用右对齐
   </blockquote>

Bootstrap入门之全局CSS样式

列表

  • 无序列表： <ul></ul>
  • 有序列表： <ol></ol>
  • 无样式列表： <ul class="list-unstyled"></ul> （移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。 这是针对直接子元素的 ，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。）
  • 内联列表： <ul class="list-inline"></ul>
  • 描述： <dl> <dt></dt> <dd></dd> </dl>
  • 水平排列描述： <dl class="dl-horizontal"> <dt></dt> <dd></dd> </dl> （通过 text-overflow 属性，水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。） 
<ul>
       <li>无序列表</li>
       <li>无序列表</li>
       <li>无序列表</li>
   </ul>
   <ol>
       <li>有序列表</li>
       <li>有序列表</li>
       <li>有序列表</li>
   </ol>
   <ulclass="list-unstyled">
       <li>无样式列表</li>
       <li>无样式列表</li>
       <li>无样式列表</li>
   </ul>
   <ulclass="list-inline">
       <li>内联列表</li>
       <li>内联列表</li>
       <li>内联列表</li>
   </ul>
   <dl>
       <dt>描述</dt>
       <dd>描述</dd>
   </dl>
   <dlclass="dl-horizontal">
       <dt>水平排列的描述</dt>
       <dd>水平排列的描述</dd>
   </dl>

Bootstrap入门之全局CSS样式

代码

  • 内联代码： <code></code>
  • 用户输入： <kbd></kbd>
  • 代码块： <pre></pre>
  • 变量： <var></var>
  • 程序输出： <samp></samp> 
内联代码: <code><section></code> 
用户输入: <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
代码块: <pre><p>Sample text here...</p></pre>
变量: <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
程序输出: <samp>This text is meant to be treated as sample output from a computer program.</samp>

Bootstrap入门之全局CSS样式

表格

基本表格

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。 

<tableclass="table">
    <thead>
    <tr>
        <th>#</th>
        <th>first name</th>
        <th>last name</th>
        <th>username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>cheng</td>
        <td>tang</td>
        <td>tc9011</td>
    </tr>
    <tr>
        <td>2</td>
        <td>jie</td>
        <td>zhou</td>
        <td>jay</td>
    </tr>
    <tr>
        <td>3</td>
        <td>mark</td>
        <td>down</td>
        <td>md</td>
    </tr>
    </tbody>
</table>

Bootstrap入门之全局CSS样式

条纹表格

通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式。不支持IE8。 

<tableclass="table table-striped">
    <thead>
    <tr>
        <th>#</th>
        <th>first name</th>
        <th>last name</th>
        <th>username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>cheng</td>
        <td>tang</td>
        <td>tc9011</td>
    </tr>
    <tr>
        <td>2</td>
        <td>jie</td>
        <td>zhou</td>
        <td>jay</td>
    </tr>
    <tr>
        <td>3</td>
        <td>mark</td>
        <td>down</td>
        <td>md</td>
    </tr>
    </tbody>
</table>

Bootstrap入门之全局CSS样式

带边框表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。 

<tableclass="table table-bordered">
    <thead>
    <tr>
        <th>#</th>
        <th>first name</th>
        <th>last name</th>
        <th>username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>cheng</td>
        <td>tang</td>
        <td>tc9011</td>
    </tr>
    <tr>
        <td>2</td>
        <td>jie</td>
        <td>zhou</td>
        <td>jay</td>
    </tr>
    <tr>
        <td>3</td>
        <td>mark</td>
        <td>down</td>
        <td>md</td>
    </tr>
    </tbody>
</table>

Bootstrap入门之全局CSS样式

鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。 

<tableclass="table table-hover">
    <thead>
    <tr>
        <th>#</th>
        <th>first name</th>
        <th>last name</th>
        <th>username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>cheng</td>
        <td>tang</td>
        <td>tc9011</td>
    </tr>
    <tr>
        <td>2</td>
        <td>jie</td>
        <td>zhou</td>
        <td>jay</td>
    </tr>
    <tr>
        <td>3</td>
        <td>mark</td>
        <td>down</td>
        <td>md</td>
    </tr>
    </tbody>
</table>

Bootstrap入门之全局CSS样式

紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。 

<tableclass="table table-condensed">
   ...
</table>

状态类

  • 鼠标悬停在行或单元格上时所设置的颜色： class="active"
  • 标识成功或积极的动作： class="success"
  • 标识普通的提示信息或动作： class="info"
  • 标识警告或需要用户注意： class="warning"
  • 标识危险或潜在的带来负面影响的动作： class="danger" 
<tableclass="table">
    <tbody>
    <tr>
        <tdclass="active">...</td>
        <tdclass="success">...</td>
        <tdclass="warning">...</td>
        <tdclass="danger">...</td>
        <tdclass="info">...</td>
    </tr>
    </tbody>
</table>

Bootstrap入门之全局CSS样式

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

响应式表格使用了 overflow-y: hidden 属性，这样就能将超出表格底部和顶部的内容截断。同时这样也会截断下拉菜单和其他第三方组件。

Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式，导致响应式表格出现问题。可以使用下面提供的针对 Firefox 的 hack 代码解决，但是以下代码并未集成在 Bootstrap 中： @-moz-document url-prefix() { fieldset { display: table-cell; }} 

<divclass="table-responsive"style="margin: 20px">
    <tableclass="table">
        <thead>
        <tr>
            <th>#</th>
            <th>first name</th>
            <th>last name</th>
            <th>username</th>
            <th>username</th>
            <th>username</th>
            <th>username</th>
            <th>username</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>cheng</td>
            <td>tang</td>
            <td>tc9011</td>
            <td>tang</td>
            <td>tc9011</td>
            <td>tang</td>
            <td>tc9011</td>
        </tr>
        <tr>
            <td>2</td>
            <td>jie</td>
            <td>zhou</td>
            <td>jay</td>
            <td>zhou</td>
            <td>jay</td>
            <td>zhou</td>
            <td>jay</td>
        </tr>
        <tr>
            <td>3</td>
            <td>mark</td>
            <td>down</td>
            <td>md</td>
            <td>down</td>
            <td>md</td>
            <td>down</td>
            <td>md</td>
        </tr>
        </tbody>
    </table>
</div>

Bootstrap入门之全局CSS样式

表单

基本表单

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input> 、 <textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%; 。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。 

<form>
  <divclass="form-group">
    <labelfor="exampleInputEmail1">Email address</label>
    <inputtype="email"class="form-control"id="exampleInputEmail1"placeholder="Email">
  </div>
  <divclass="form-group">
    <labelfor="exampleInputPassword1">Password</label>
    <inputtype="password"class="form-control"id="exampleInputPassword1"placeholder="Password">
  </div>
  <divclass="form-group">
    <labelfor="exampleInputFile">File input</label>
    <inputtype="file"id="exampleInputFile">
    <pclass="help-block">Example block-level help text here.</p>
  </div>
  <divclass="checkbox">
    <label>
      <inputtype="checkbox"> Check me out
    </label>
  </div>
  <buttontype="submit"class="btn btn-default">Submit</button>
</form>

Bootstrap入门之全局CSS样式

内联表单

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。 只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，这些元素的宽度设置为 width: auto; ，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。

如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，可以通过为 label 设置 .sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如 aria-label 、 aria-labelledby 或 title 属性。如果这些都不存在，屏幕阅读器可能会采取使用 placeholder 属性来替代其他的标记，但要注意，这种方法是不妥当的。 

<formclass="form-inline">
  <divclass="form-group">
    <labelclass="sr-only"for="exampleInputEmail3">Email address</label>
    <inputtype="email"class="form-control"id="exampleInputEmail3"placeholder="Email">
  </div>
  <divclass="form-group">
    <labelclass="sr-only"for="exampleInputPassword3">Password</label>
    <inputtype="password"class="form-control"id="exampleInputPassword3"placeholder="Password">
  </div>
  <divclass="checkbox">
    <label>
      <inputtype="checkbox"> Remember me
    </label>
  </div>
  <buttontype="submit"class="btn btn-default">Sign in</button>
</form>

Bootstrap入门之全局CSS样式

水平排列的表单

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。 

<formclass="form-horizontal">
  <divclass="form-group">
    <labelfor="inputEmail3"class="col-sm-2 control-label">Email</label>
    <divclass="col-sm-10">
      <inputtype="email"class="form-control"id="inputEmail3"placeholder="Email">
    </div>
  </div>
  <divclass="form-group">
    <labelfor="inputPassword3"class="col-sm-2 control-label">Password</label>
    <divclass="col-sm-10">
      <inputtype="password"class="form-control"id="inputPassword3"placeholder="Password">
    </div>
  </div>
  <divclass="form-group">
    <divclass="col-sm-offset-2 col-sm-10">
      <divclass="checkbox">
        <label>
          <inputtype="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <divclass="form-group">
    <divclass="col-sm-offset-2 col-sm-10">
      <buttontype="submit"class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Bootstrap入门之全局CSS样式

被支持的控件

输入框

包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text 、 password 、 datetime 、 datetime-local 、 date 、 month 、 time 、 week 、 number 、 email 、 url 、 search 、 tel 和 color 。只有正确设置了 type 属性的输入控件才能被赋予正确的样式。

文本域

支持多行文本的表单控件。可根据需要改变 rows 属性。 

<textareaclass="form-control"rows="3"placeholder="111"></textarea>
<textareaclass="form-control"rows="5"placeholder="111"></textarea>

Bootstrap入门之全局CSS样式

多选和单选框

支持禁用复选框（checkbox）和单选框（radio），但是要在父标签 <label> 上提供禁用的鼠标手势，则需要将 .disabled 类添加到父级 .radio ， .radio-inline ， .checkbox ， 或 .checkbox-inline 。 

<divclass="checkbox">
  <label>
    <inputtype="checkbox"value="">
    Option one is this and that—be sure to include why it's great
  </label>
</div>
<divclass="checkbox disabled">
  <label>
    <inputtype="checkbox"value=""disabled>
    Option two is disabled
  </label>
</div>

<divclass="radio">
  <label>
    <inputtype="radio"name="optionsRadios"id="optionsRadios1"value="option1"checked>
    Option one is this and that—be sure to include why it's great
  </label>
</div>
<divclass="radio">
  <label>
    <inputtype="radio"name="optionsRadios"id="optionsRadios2"value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<divclass="radio disabled">
  <label>
    <inputtype="radio"name="optionsRadios"id="optionsRadios3"value="option3"disabled>
    Option three is disabled
  </label>
</div>

Bootstrap入门之全局CSS样式

通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

如果需要 <label> 内没有文字，自有输入框（input），仍然需要为使用辅助技术的用户提供某种形式的 label（例如，使用 aria-label ）。 目前只适用于非内联的 checkbox 和 radio。 

<divclass="checkbox">
  <label>
    <inputtype="checkbox"id="blankCheckbox"value="option1"aria-label="...">
  </label>
</div>
<divclass="radio">
  <label>
    <inputtype="radio"name="blankRadio"id="blankRadio1"value="option1"aria-label="...">
  </label>
</div>

Bootstrap入门之全局CSS样式

下拉列表

很多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的。

对于标记了 multiple 属性的 <select> 控件来说，默认显示多选项。 

<selectclass="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
<selectmultipleclass="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Bootstrap入门之全局CSS样式

静态控件

如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。

焦点状态

将某些表单控件的默认 outline 样式移除，然后对 :focus 状态赋予 box-shadow 属性。

禁用状态

为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed 鼠标状态。 

<inputclass="form-control"id="disabledInput"type="text"placeholder="Disabled input here..."disabled>

被禁用的 fieldset

为 <fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件，但是 <a> 标签的链接功能不受影响，这些元素将只被赋予 pointer-events: none 属性。不支持IE11及其以下的浏览器。 

<form>
  <fieldsetdisabled>
    <divclass="form-group">
      <labelfor="disabledTextInput">Disabled input</label>
      <inputtype="text"id="disabledTextInput"class="form-control"placeholder="Disabled input">
    </div>
    <divclass="form-group">
      <labelfor="disabledSelect">Disabled select menu</label>
      <selectid="disabledSelect"class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <divclass="checkbox">
      <label>
        <inputtype="checkbox"> Can't check this
      </label>
    </div>
    <buttontype="submit"class="btn btn-primary">Submit</button>
  </fieldset>
</form>

只读状态

为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。 

<inputclass="form-control"type="text"placeholder="Readonly input here…"readonly>

帮助文本

帮助文本应该与使用 aria-describeby 属性相关的表单控件明确关联。 这将确保辅助技术（例如屏幕阅读器）在用户聚焦或进入控制时正确识别此帮助文本。 

<labelclass="sr-only"for="inputHelpBlock">Input with help text</label>
<inputtype="text"id="inputHelpBlock"class="form-control"aria-describedby="helpBlock">
<spanid="helpBlock"class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Bootstrap入门之全局CSS样式

校验状态

Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning 、 .has-error 或 .has-success 类到这些控件的 父元素 即可。任何包含在此元素之内的 .control-label 、 .form-control 和 .help-block 元素都将接受这些校验状态的样式。 

<divclass="form-group has-success">
  <labelclass="control-label"for="inputSuccess1">Input with success</label>
  <inputtype="text"class="form-control"id="inputSuccess1"aria-describedby="helpBlock2">
  <spanid="helpBlock2"class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<divclass="form-group has-warning">
  <labelclass="control-label"for="inputWarning1">Input with warning</label>
  <inputtype="text"class="form-control"id="inputWarning1">
</div>
<divclass="form-group has-error">
  <labelclass="control-label"for="inputError1">Input with error</label>
  <inputtype="text"class="form-control"id="inputError1">
</div>
<divclass="has-success">
  <divclass="checkbox">
    <label>
      <inputtype="checkbox"id="checkboxSuccess"value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<divclass="has-warning">
  <divclass="checkbox">
    <label>
      <inputtype="checkbox"id="checkboxWarning"value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<divclass="has-error">
  <divclass="checkbox">
    <label>
      <inputtype="checkbox"id="checkboxError"value="option1">
      Checkbox with error
    </label>
  </div>
</div>

Bootstrap入门之全局CSS样式

还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。

反馈图标（feedback icon）只能使用在文本输入框 <input class="form-control"> 元素上。

对于不带有 label 标签的输入框以及右侧带有附加组件的 输入框组 ，需要手动为其图标定位。为了让所有用户都能访问你的网站，强烈建议为所有输入框添加 label 标签。如果你不希望将 label 标签展示出来，可以通过添加 .sr-only 类来实现。如果的确不能添加 label 标签，请调整图标的 top 值。对于输入框组，请根据你的实际情况调整 right 值。 

<divclass="form-group has-success has-feedback">
  <labelclass="control-label"for="inputSuccess2">Input with success</label>
  <inputtype="text"class="form-control"id="inputSuccess2"aria-describedby="inputSuccess2Status">
  <spanclass="glyphicon glyphicon-ok form-control-feedback"aria-hidden="true"></span>
  <spanid="inputSuccess2Status"class="sr-only">(success)</span>
</div>
<divclass="form-group has-warning has-feedback">
  <labelclass="control-label"for="inputWarning2">Input with warning</label>
  <inputtype="text"class="form-control"id="inputWarning2"aria-describedby="inputWarning2Status">
  <spanclass="glyphicon glyphicon-warning-sign form-control-feedback"aria-hidden="true"></span>
  <spanid="inputWarning2Status"class="sr-only">(warning)</span>
</div>
<divclass="form-group has-error has-feedback">
  <labelclass="control-label"for="inputError2">Input with error</label>
  <inputtype="text"class="form-control"id="inputError2"aria-describedby="inputError2Status">
  <spanclass="glyphicon glyphicon-remove form-control-feedback"aria-hidden="true"></span>
  <spanid="inputError2Status"class="sr-only">(error)</span>
</div>
<divclass="form-group has-success has-feedback">
  <labelclass="control-label"for="inputGroupSuccess1">Input group with success</label>
  <divclass="input-group">
    <spanclass="input-group-addon">@</span>
    <inputtype="text"class="form-control"id="inputGroupSuccess1"aria-describedby="inputGroupSuccess1Status">
  </div>
  <spanclass="glyphicon glyphicon-ok form-control-feedback"aria-hidden="true"></span>
  <spanid="inputGroupSuccess1Status"class="sr-only">(success)</span>
</div>

Bootstrap入门之全局CSS样式

如果你使用 .sr-only 类来隐藏表单控件的 <label> （而不是使用其它标签选项，如 aria-label 属性）， 一旦它被添加，Bootstrap 会自动调整图标的位置。

控件尺寸

通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。

通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。

用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。

<inputclass="form-control input-lg"type="text"placeholder=".input-lg">
<inputclass="form-control"type="text"placeholder="Default input">
<inputclass="form-control input-sm"type="text"placeholder=".input-sm">
<divclass="row">
  <divclass="col-xs-2">
    <inputtype="text"class="form-control"placeholder=".col-xs-2">
  </div>
  <divclass="col-xs-3">
    <inputtype="text"class="form-control"placeholder=".col-xs-3">
  </div>
  <divclass="col-xs-4">
    <inputtype="text"class="form-control"placeholder=".col-xs-4">
  </div>
</div>
<formclass="form-horizontal">
  <divclass="form-group form-group-lg">
    <labelclass="col-sm-2 control-label"for="formGroupInputLarge">Large label</label>
    <divclass="col-sm-10">
      <inputclass="form-control"type="text"id="formGroupInputLarge"placeholder="Large input">
    </div>
  </div>
  <divclass="form-group form-group-sm">
    <labelclass="col-sm-2 control-label"for="formGroupInputSmall">Small label</label>
    <divclass="col-sm-10">
      <inputclass="form-control"type="text"id="formGroupInputSmall"placeholder="Small input">
    </div>
  </div>
</form>

Bootstrap入门之全局CSS样式

按钮

为 <a> 、 <button> 、或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。

虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持 <button> 元素。

如果 <a> 元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。

最佳实践是： 强烈建议尽可能使用 <button> 元素 来获得在各个浏览器上获得相匹配的绘制效果。

另外， Firefox <30 版本的浏览器上出现的一个 bug ，其表现是：阻止我们为基于 <input> 元素所创建的按钮设置 line-height 属性，这就导致在 Firefox 浏览器上不能完全和其他按钮保持一致的高度。

通过 .btn-default 、 .btn-primary 、 .btn-success 、 btn-info 、 btn-warning 、 btn-danger 、 btn-link 类来快速创建一个有预定义样式的按钮。

使用 .btn-lg 、 .btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于 <button> 元素，是通过 :active 状态实现的。对于 <a> 元素，是通过 .active 类实现的。然而，你还可以将 .active 应用到 <button> 上（包含 aria-pressed="true" 属性)），并通过编程的方式使其处于激活状态。

为 <button> 元素添加 disabled 属性，使其表现出禁用状态。（原理是通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。）

对 <a> 标签设置 disabled 属性后，使用键盘操作仍然可以工作，为了安全起见，建议通过 JavaScript 代码来禁止链接的原始功能。 

<buttontype="button"class="btn btn-default">（默认样式）Default</button>
<buttontype="button"class="btn btn-primary">（首选项）Primary</button>
<buttontype="button"class="btn btn-success">（成功）Success</button>
<buttontype="button"class="btn btn-info">（一般信息）Info</button>
<buttontype="button"class="btn btn-warning">（警告）Warning</button>
<buttontype="button"class="btn btn-danger">（危险）Danger</button>
<buttontype="button"class="btn btn-link">（链接）Link</button>

<p>
    <buttontype="button"class="btn btn-primary btn-lg">（大按钮）Large button</button>
    <buttontype="button"class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
    <buttontype="button"class="btn btn-primary">（默认尺寸）Default button</button>
    <buttontype="button"class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
    <buttontype="button"class="btn btn-primary btn-sm">（小按钮）Small button</button>
    <buttontype="button"class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
    <buttontype="button"class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
    <buttontype="button"class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

<buttontype="button"class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
<buttontype="button"class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>

<buttontype="button"class="btn btn-primary btn-lg active">Primary button</button>
<buttontype="button"class="btn btn-default btn-lg active">Button</button>

<ahref="#"class="btn btn-primary btn-lg active"role="button">Primary link</a>
<ahref="#"class="btn btn-default btn-lg active"role="button">Link</a>

<buttontype="button"class="btn btn-lg btn-primary"disabled="disabled">Primary button</button>
<buttontype="button"class="btn btn-default btn-lg"disabled="disabled">Button</button>

<ahref="#"class="btn btn-primary btn-lg disabled"role="button">Primary link</a>
<ahref="#"class="btn btn-default btn-lg disabled"role="button">Link</a>

Bootstrap入门之全局CSS样式

图片

响应式图片

在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%; 、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。

如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center 。

在 Internet Explorer 8-10 中，设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称。为了解决这个问题，在出问题的地方添加 width: 100% \9; 即可 

<imgsrc="img_8488.jpg"class="img-responsive"alt="Responsive image">

Bootstrap入门之全局CSS样式

图片形状

通过为 <img> 元素添加 .img-rounded 、 .img-circle 、 .img-thumbnail ，可以让图片呈现不同的形状。 

<imgsrc="img.jpg"alt="..."class="img-rounded">
<imgsrc="img.jpg"alt="..."class="img-circle">
<imgsrc="img.jpg"alt="..."class="img-thumbnail">

Bootstrap入门之全局CSS样式

辅助类

情景文本颜色

通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。

<pclass="text-muted">text-muted</p>
<pclass="text-primary">text-primary</p>
<pclass="text-success">text-success</p>
<pclass="text-info">text-info</p>
<pclass="text-warning">text-warning</p>
<pclass="text-danger">text-danger</p>

Bootstrap入门之全局CSS样式

情景背景色 

<pclass="bg-primary">bg-primary</p>
<pclass="bg-success">bg-success</p>
<pclass="bg-info">bg-info</p>
<pclass="bg-warning">bg-warning</p>
<pclass="bg-danger">bg-danger</p>

Bootstrap入门之全局CSS样式

关闭按钮

通过使用一个象征关闭的图标，可以让模态框和警告框消失。

<buttontype="button"class="close"aria-label="Close"><spanaria-hidden="true">×</span></button>

Bootstrap入门之全局CSS样式

三角符号

通过使用三角符号可以指示某个元素具有下拉菜单的功能。

<spanclass="caret"></span>

Bootstrap入门之全局CSS样式

快速浮动

通过添加 .pull-left 和 .pull-right 类，可以将任意元素向左或向右浮动。但是不能用在导航组件中。

排列导航条中的组件时可以使用这些工具类： .navbar-left 或 .navbar-right 。 

<divclass="pull-left">pull-left</div>
<divclass="pull-right">pull-right</div>

让内容块居中

通过添加 .center-block 类，原理是为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。 

<divclass="center-block">center-block</div>

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

清除浮动

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

<divclass="clearfix">...</div>

显示或隐藏内容

.show 和 .hidden 类可以强制任意元素显示或隐藏( 对于屏幕阅读器也能起效 )。这些类通过 !important 来避免 CSS 样式优先级问题。注意，这些类只对块级元素起作用，另外，还可以作为 mixin 使用。

.hide 类仍然可用，但是它不能对屏幕阅读器起作用，并且从 v3.0.1 版本开始就 不建议使用 了。请使用 .hidden 或 .sr-only 。

另外， .invisible 类可以被用来仅仅影响元素的可见性，也就是说，元素的 display 属性不被改变，并且这个元素仍然能够影响文档流的排布。 

<divclass="show">...</div>
<divclass="hidden">...</div>

屏幕阅读器和键盘导航

.sr-only 类可以对 屏幕阅读器以外 的设备隐藏内容。 .sr-only 和 .sr-only-focusable 联合使用的话可以在元素有焦点的时候再次显示出来（例如，使用键盘导航的用户）。对于遵循 可访问性的最佳实践 很有必要。这个类也可以作为 mixin 使用。 

<aclass="sr-only sr-only-focusable"href="#content">Skip to main content</a>

图片替换

使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。 

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

响应式工具

可用的类

通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px)
.visible-xs-* 可见 隐藏 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏 隐藏
.visible-md-* 隐藏 隐藏 可见 隐藏
.visible-lg-* 隐藏 隐藏 隐藏 可见
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏

从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表如下：

类组 CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

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

.visible-xs 、 .visible-sm 、 .visible-md 和 .visible-lg 类也同时存在。但是 从 v3.2.0 版本开始不再建议使用 。除了 <table> 相关的元素的特殊情况外，它们与 .visible-*-block 大体相同。

打印类

和常规的响应式类一样，使用下面的类可以针对打印机隐藏或显示某些内容。

class 浏览器 打印机
.visible-print-block``.visible-print-inline``.visible-print-inline-block 隐藏 可见
.hidden-print 可见 隐藏

.visible-print 类也是存在的，但是从 v3.2.0 版本开始 不建议使用 。它与 .visible-print-block 类大致相同，除了 <table> 相关元素的特殊情况外。


以上所述就是小编给大家介绍的《Bootstrap入门之全局CSS样式》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
C语言编程：一本全面的C语言入门教程（第三版）

C语言编程：一本全面的C语言入门教程（第三版）

（美）Stephen Kochan / 张小潘 / 电子社博文视点资讯有限公司 / 2006年 / 59.00元

本书是极负盛名的C语言入门经典教材，其第一版发行至今已有20年的历史。本书内容详实全面，由浅入深，示例丰富，并在每个章节后面附有部分习题，非常适合读者自学使用。除此之外，《C语言编程》一书对于C语言标准的最新进展、C语言常见开发工具以及管理C语言大型项目等重要方面，也进行了深入浅出的说明。一起来看看 《C语言编程：一本全面的C语言入门教程（第三版）》 这本书的介绍吧!

码农工具
CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2025 码农网 粤ICP备17054400号-3