Bootstrap入门之全局CSS样式

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

内容简介: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 设置为 14pxline-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-labelaria-labelledbytitle 属性。如果这些都不存在,屏幕阅读器可能会采取使用 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 类型的输入控件: textpassworddatetimedatetime-localdatemonthtimeweeknumberemailurlsearchtelcolor 。只有正确设置了 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-successbtn-infobtn-warningbtn-dangerbtn-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样式》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

Head First WordPress

Head First WordPress

Siarto Jeff / O'Reilly Media / 2010-02-15 / USD 34.99

Whether you're promoting your business or writing about your travel adventures, "Head First WordPress" will teach you not only how to make your blog look unique and attention-grabbing, but also how to......一起来看看 《Head First WordPress》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

SHA 加密
SHA 加密

SHA 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具