确保你的网页是建立在最新的设计和开发标准之上的
box-sizing的值改成了,border-box(原本值是content-box)。这就保证了padding不会影响一个元素的最后计算宽度
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
...
</body>
</html>
支持所有的主流浏览器和平台的最新的、稳定的版本。 在 Windows 中, 支持 Internet Explorer 9以上版本
Internet Explorer 9也是支持的。然而,你需要知道,有一些CSS3属性和HTML5元素不被完全支持。
| 功能 | 状态 |
|---|---|
border-radius圆角边框 |
支持 |
box-shadow盒阴影 |
支持 |
transform变形 |
支持, 带-ms前缀 |
transition过渡 |
不支持 |
placeholder占位符 |
不支持 |
display:flex弹性盒子 |
不支持 |
.aid .aid-*修饰图标,使用icon-gradient-*表示渐变,
<div class="row">
<div class="col">
<i class="text-42 aid aid-owl"></i>
</div>
<div class="col">
<i class="text-42 aid aid-music-circle"></i>
</div>
<div class="col">
<i class="text-42 aid aid-snowman"></i>
</div>
<div class="col">
<i class="text-42 aid aid-airplane"></i>
</div>
<div class="col">
<i class="text-42 aid aid-camera"></i>
</div>
</div>
<div class="row">
<div class="col">
<i class="text-42 aid aid-kickstarter icon-gradient-primary"></i>
</div>
<div class="col">
<i class="text-42 aid aid-qqchat icon-gradient-success"></i>
</div>
<div class="col">
<i class="text-42 aid aid-puzzle icon-gradient-info"></i>
</div>
<div class="col">
<i class="text-42 aid aid-qrcode icon-gradient-warning"></i>
</div>
<div class="col">
<i class="text-42 aid aid-evernote icon-gradient-danger"></i>
</div>
</div>
| 变量 | 值 | Description |
|---|---|---|
$spacer |
1rem (默认), 或者任何大于0的值 |
为间隔工具指定默认的间隔值 |
$enable-flex |
true 或 false (默认) |
给display: flex交换float和display: table样式。 |
$enable-rounded |
true (默认) or false |
为各种组件启用预定义的border-radius样式。 |
$enable-shadows |
true 或 false (默认) |
为各种组件启用预定义的box-shadow样式。 |
$enable-gradients |
true 或 false (默认) |
通过background-image为各种组件启用预定义的渐变 |
$enable-transitions |
true (默认) 或 false |
为各种组件启用预定义的transition(过渡) |
$enable-hover-media-query |
true 或 false (默认) |
… |
主色是用于主题的颜色,以及主操作元素的颜色,如primary按钮的颜色,如果不支持渐变的浏览器则表现为下面一行的颜色
.bg-gradient-cyan
.bg-gradient-green-dark
.bg-gradient-pink
.bg-gradient-plum
.bg-gradient-green-light
.bg-gradient-orange
辅助色是具有代表性的颜色,常用于信息提示,比如成功、警告和失败。
.bg-primary
.bg-warning
.bg-success
.bg-danger
.bg-info
中性色常用于文本、背景、边框、阴影等,可以体现出页面的层次结构
背景色
背景色
背景色,分割线
边框颜色
disabled颜色,输入框图标颜色
文字颜色
文字颜色,正文颜色
文字颜色
背景色深色
窗口是最基本的布局元素。在使用网格系统中它是必不可少的。选择一个响应式的、固定宽度的容器(意味着它的max-width在每个节点都会改变),或者选择一个流式宽度的窗口(意味着任何时候它的宽度总是100%)
虽然容器可以被嵌套,但是大多数布局并不需要一个嵌套的容器。
<div class="container">
<!-- Content here -->
</div>
为一个全宽度容器使用.container-fluid类,在视口中扩展到整个宽度。
<div class="container-fluid">
...
</div>
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
// Example usage:
@include media-breakpoint-up(sm) {
.some-class {
display: block;
}
}
.container实现固定的宽度,.container-fluid实现全宽度,会将你的页面的内容居中,帮助你对齐网格系统。.col-sm-4。width是用百分比设置的。所以它们总是是流式的,而且尺寸与父元素相关。padding,以创建列与列之间的间隙。.col-sm-4应用到小、中、大、特大设备)|
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|
|---|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | |||
| Max container width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| # of columns | 12 | ||||
| Gutter width | 30px (15px on each side of a column) | ||||
| Nestable | Yes | ||||
| Offsets | Yes | ||||
| Column ordering | Yes | ||||
For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes. Specify a
numbered class when you need a particularly sized column; otherwise, feel free to stick to .col.
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
Using a single set of .col-sm-* classes, you can create a basic grid
system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices.
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
只要使用一个.col-md-*网格类集合,你就可以创建一个基本的网格系统,在移动设备以及特小屏或者小屏的平板设备上纵向排布,而在桌面(中屏)设备上横向排布。请把网格列放在任何.row中。
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
1 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Use col-{breakpoint}-auto classes to size columns based on the natural
width of their content.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks
responsive by mixing the .w-100 with some responsive display utilities.
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
.no-gutters清除.row中的margin值和列中的水平padding
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
如果一行中放置了超过12列格,每一组超出的列,将成为一个单元,包裹入一个新行。
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>
有了那四个可用的网格层级,你可能会遇到那种问题,就是在一个特定的分界点上,多列会显示得不太正确,因为列与列不等高。为了解决这个问题,可以组合使用一个.clearfix以及响应式工具类。
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix hidden-sm-up"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
为了能让列在响应式分界点上显示正确,你可能还必须添加重置位移、推、拉等。在网格示例中可以看到实例。
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col.col-sm-6.col-md-5.col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
使用.offset-md-*类可以把列往右移。这个类根据*数增加了一个列的左边距。比如说,.offset-md-4把.col-md-4往右移了四列格。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
使用.push-md-*以及.pull-md-*修正类,可以轻松改变内建网格列的顺序。
<div class="row">
<div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
<div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
</div>
只要在一个已经存在的.col-sm-*列中添加一个新的.row以及一系列.col-sm-*,就可以使用默认的网格嵌套你的内容。嵌套的列可以包含若干个列,最多不超过12个列格(不需要把12个列格全占用完)
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>rem代替em用于指定可缩放的组件的间隙。margin-top。使用它,垂直外边距可以崩溃,导致意想不到的结果。更重要的是,一个单一方向的margin是一个简单的构思模型。rem作为margin的单位。font相关属性最小的声明,尽可能地使用inherit。更新了<html>和<body>元素,提供更好的页宽默认值。具体来说,是:
box-sizing属性——包括*:before和*:after——都设置为border-box。这样确保了声明的宽度不会因为border或padding而超过。
<html>上面声明了一个基本的font-size: 16px,而且
<body>上面声明了一个font-size:1rem。
<body>还设置了一个全局性的font-family以及line-height,之后一些表单元素继承了它,以防止字体大小矛盾。
<body>有一个网页背景色background-color声明,默认为#fff。background-color: #fff;把网页背景色设置为白色。$font-family-base、$font-size-base以及$line-height-base属性作为排布基础。
$link-color设置全局链接样式,并让链接只在鼠标悬停:hover状态下才出现下划线。所有的HTML标题,从<h1>到<h6>都是可用的,.h1到.h6也是可用的,用于需要匹配标题的样式,但是依然希望文本在行内显示的场合。
h1. Bootstrap heading |
Semibold 36px |
h2. Bootstrap heading |
Semibold 30px |
h3. Bootstrap heading |
Semibold 24px |
h4. Bootstrap heading |
Semibold 18px |
h5. Bootstrap heading |
Semibold 14px |
h6. Bootstrap heading |
Semibold 12px |
如果你想要一个标题醒目,考虑使用显示标题——一种更大型、鲜明的标题样式。
Display 4 |
Display 3 |
Display 2 |
Display 1 |
为了适应更多场景,扩展了文本的尺寸
| font-size:12px;line-height:18px | |
| font-size:14px;line-height:21px | |
| font-size:16px;line-height:24px | |
| font-size:18px;line-height:26px | |
| font-size:20px;line-height:28px | |
| font-size:24px;line-height:30px | |
| font-size:30px;line-height:38px | |
| font-size:36px;line-height:42px | |
| font-size:42px;line-height:50px | |
| font-size:50px;line-height:58px | |
| font-size:58px;line-height:68px | |
| font-size:80px;line-height:94px | |
| font-size:100px;line-height:118px |
通过添加 .lead 类可以让段落突出显示。
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>
常见的内联HTML5元素的样式。
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
虽然上面没有演示,你可以在HTML5中随便使用<b>和<i>。<b>意思是高亮词或者词组,而不传达附加的重要性;而
<i>常用于语音、技术术语等等。
在你的文档中引用其他来源的内容。
将任何 HTML 元素包裹在 <blockquote>
中即可表现为引用样式。对于直接引用,我们建议用 <p> 标签。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
对于标准样式的 <blockquote>,可以通过几个简单的变体就能改变风格和内容。
添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。
<blockquote class="blockquote blockquote-reverse">
...
</blockquote>
所有的列表——<ul>、<ol>以及
<dl>——移除了它们的外边距margin-top,并设置了margin-bottom: 1rem。嵌套的列表没有margin-bottom。
<ul>
<li>...</li>
</ul>
<ol>
<li>...</li>
</ol>
<ul class="list-unstyled">
<li>...</li>
</ul>
<ul class="list-inline">
<li class="list-inline-item">
...</li>
</ul>
为了得到更简单的样式、清晰的等级以及更好的间距,描述列表<dl>有了一个更新的margin值。
<dd>的margin-left被重置为0,添加了margin-bottom: .5rem。<dt>的字体是粗体。
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
使用我们的网格系统的预定义类(或者说语义化mixins),可以水平对齐条目和描述。对于较长的条目,你可以视情况添加一个.text-truncate类,从而用省略号截断文本。
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd class="col-sm-9 offset-sm-3">Donec id elit non mi porta gravida at eget metus.</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
<code> should be wrapped as inline.
For example, <code><section></code> should be wrapped as inline.
或者说,代码块,使用<pre>的多行代码文本。再一次提醒,请勿忘转义代码中的所有尖括号,以实现正确的渲染。你可以视情况添加.pre-scrollable类,它将设置最大高度为350像素,并提供一个纵向滚动条。
<p>Sample text here...</p>
<pre><p>Sample text here...</p></pre>
在Bootstrap中,给图片应用.img-fluid类以及max-width: 100%、height:auto;样式,使其具有响应性,并根据父元素的大小缩放。
<img src="..." class="img-fluid" alt="Responsive image">
在IE9和IE10浏览器中,带着.img-fluid类的SVG图片是尺寸不均称的。为了修正它,在必要的地方添加width: 100% \9属性。
向一个<img>元素添加类,轻松地在项目中样式化图片。
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="img-thumbnail">
使用浮动助手类或者文本对齐类可以实现图片对齐。一个简单的居中类也可以用在block块级图片上。
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
<img src="..." class="rounded mx-auto d-block" style="display: block;" alt="...">
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>
如果你需要显示的内容包括了一个图片和一个可选的标题,请考虑使用<figure>。
.figure , .figure-img , .figure-caption 类,
为HTML5 的<figure> and <figcaption> 元素提供了一个基准样式. figures中的图片没有明确的尺寸, 添加 .img-fluid 类在<img>
标签上来保证响应式.
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
使用边框工具类快速设置 border 和radius
<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-0">
在父元素使用.clearfix 清除浮动.
<div class="clearfix">...</div>
// Mixin itself
@mixin clearfix() {
&::after {
display: block;
content: "";
clear: both;
}
}
// Usage as a mixin
.element {
@include clearfix;
}
<div class="bg-info clearfix">
<button class="btn btn-secondary float-left">Example Button floated left</button>
<button class="btn btn-secondary float-right">Example Button floated right</button>
</div>
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
<div class="bg-primary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
<div class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
<div class="bg-info text-white">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
<div class="bg-warning text-white">Etiam porta sem malesuada magna mollis euismod.</div>
<div class="bg-danger text-white">Donec ullamcorper nulla non metus auctor fringilla.</div>
<div class="bg-inverse text-white">Cras mattis consectetur purus sit amet fermentum.</div>
<div class="bg-faded">Cras mattis consectetur purus sit amet fermentum.</div>
.d-none.d-inline.d-inline-block.d-block.d-table.d-table-cell.d-flex.d-inline-flex运用于响应式.
.d-none.d-inline.d-inline-block.d-block.d-table.d-table-cell.d-flex.d-inline-flex.d-sm-none.d-sm-inline.d-sm-inline-block.d-sm-block.d-sm-table.d-sm-table-cell.d-sm-flex.d-sm-inline-flex.d-md-none.d-md-inline.d-md-inline-block.d-md-block.d-md-table.d-md-table-cell.d-md-flex.d-md-inline-flex.d-lg-none.d-lg-inline.d-lg-inline-block.d-lg-block.d-lg-table.d-lg-table-cell.d-lg-flex.d-lg-inline-flex.d-xl-none.d-xl-inline.d-xl-inline-block.d-xl-block.d-xl-table.d-xl-table-cell.d-xl-flex.d-xl-inline-flex快速实现布局, 对齐, 网格列的尺寸, 导航, 组件, 以及更多的需要响应式flexbox工具类的套件。
在直接子元素 外包裹一个使用.d-flex 的容器.
<div class="d-flex p-2">I'm a flexbox container!</div>
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>
.d-flex , .d-inline-flex运用于响应式.
.d-flex.d-inline-flex.d-sm-flex.d-sm-inline-flex.d-md-flex.d-md-inline-flex.d-lg-flex.d-lg-inline-flex.d-xl-flex.d-xl-inline-flex使用 .flex-row 设置水平排序方向, 使用 .flex-row-reverse
反序排列.
<div class="d-flex flex-row">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
使用 .flex-column 设置垂直排列, 使用 .flex-column-reverse
反序垂直排列.
<div class="d-flex flex-column">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
在flexbox里使用 justify-content 工具类设置水平对齐。 值有 start (browser default), end, center, between, or around.
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
在flexbox里使用 align-items 工具类设置垂直对齐。 值有 start, end, center, baseline, or stretch (browser default).
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
在flexbox里使用 align-self 工具类设置单个子元素的垂直对齐。 值有 align-items: start, end, center, baseline, or stretch (browser
default).
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>
混合使用justify-content with margin-right:
auto or margin-left: auto.
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex justify-content-start">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ml-auto p-2">Flex item</div>
</div>
混合使用于 align-items,margin-top:
auto or margin-bottom: auto.
<div class="d-flex align-items-start flex-column" style="height: 200px;">
<div class="mb-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column" style="height: 200px;">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="mt-auto p-2">Flex item</div>
</div>
flex容器中子元素的换行方式..flex-nowrap,.flex-wrap,
.flex-wrap-reverse.
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<div class="d-flex flex-wrap-reverse">
...
</div>
<div class="d-flex flex-nowrap">
<div class="order-last p-2">First flex item</div>
<div class="p-2">Second flex item</div>
<div class="order-first p-2">Third flex item</div>
</div>
.order-first.order-last.order-0.order-sm-first.order-sm-last.order-sm-0.order-md-first.order-md-last.order-md-0.order-lg-first.order-lg-last.order-lg-0.order-xl-first.order-xl-last.order-xl-0Use align-content utilities on flexbox containers to align flex
items together on the cross axis. Choose from start (browser
default), end, center, between, around, or stretch. To demonstrate these utilities, we’ve enforced flex-wrap: wrap and increased the number of flex items.
<div class="d-flex align-content-start flex-wrap">
...
</div>
<div class="d-flex align-content-end flex-wrap">...</div>
<div class="d-flex align-content-center flex-wrap">...</div>
<div class="d-flex align-content-between flex-wrap">...</div>
<div class="d-flex align-content-around flex-wrap">...</div>
<div class="d-flex align-content-stretch flex-wrap">...</div>
利用.text-hide类或者mixin可以帮助用一个背景图片替换一个元素的文本内容。
<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
@include text-hide;
}
<div class="fixed-top">...</div>
<div class="fixed-bottom">...</div>
固定在视窗顶部. The .sticky-top utility uses CSS’s position: sticky, 不是所有浏览器都支持.
<div class="sticky-top">...</div>
创建一个可以适应任何设备的尺寸的内在的比率,允许浏览器基于容器块的宽度确定视频或幻灯片的大小。
规则可以直接应用在<iframe>、<embed>、<video>和<object>元素上。如果你想要为别的属性匹配样式,视情况添加一个明确的后代类.embed-responsive-item。
编辑建议!你不需要在<iframe>中包含frameborder="0",因为我们已经为你覆盖掉它了。
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
Aspect ratios can be customized with modifier classes.
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
These utility classes float an element to the left or right, or disable floating, based on the current
viewport size using the CSS float property. !important is
included to avoid specificity issues. These use the same viewport width breakpoints as the grid system.
Two similar non-responsive Sass mixins (float-left and float-right) are also available.
<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div><br>
<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
使用.sr-only可以对所有的设备隐藏某个元素,除了在屏幕阅读器里。组合使用.sr-only以及.sr-only-focusable可以让元素获得焦点时再次显示元素(即,键盘的用户用Tab键使它获得焦点)。它也可以用作mixins。
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
@include sr-only;
@include sr-only-focusable;
}
支持25%, 50%, 75%, and 100%.
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
</div>
You can also use max-width: 100%; and max-height: 100%; utilities as needed.
<img class="mw-100" src="..." alt="Max-width 100%">
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
</div>
用缩写的类向一个元素或者它的边的子集分配margin或者padding属性。包括支持单个属性、所有属性,以及垂直或水平属性。所有的类都使用全局默认的长度倍数范围:.25rem至.3rem。
The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for
sm, md, lg, and xl.
Where property is one of:
m - for classes that set marginp - for classes that set paddingWhere sides is one of:
t - for classes that set margin-top
or padding-topb - for classes that set margin-bottom
or padding-bottoml - for classes that set margin-left
or padding-leftr - for classes that set margin-right
or padding-rightx - for classes that set both *-left
and *-righty - for classes that set both *-top
and *-bottommargin or padding on all 4 sides of the element
Where size is one of:
0 - for classes that eliminate the margin or padding by setting it to
01 - (by default) for classes that set the margin or padding to $spacer * .252 - (by default) for classes that set the margin or padding to $spacer * .53 - (by default) for classes that set the margin or padding to $spacer4 - (by default) for classes that set the margin or padding to $spacer * 1.55 - (by default) for classes that set the margin or padding to $spacer * 3.mt-0 {
margin-top: 0 !important;
}
.ml-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
块状元素(display: block )且有固定宽度( width)的容器使用.mx-auto 来设置内容水平居中
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
使用文本对齐类,可以方便地将文本重新对齐。
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
使用 .text-nowrap 防止文本换行
<div class="row">
<div class="col-1 text-nowrap">
Curabitur blandit tempus ardua ridiculus sed magna.
</div>
<div class="col-11">
<img src="..." alt="An image to show the text doesn't wrap">
</div>
</div>
使用.text-truncate 来用...表示溢出
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
使用文字大小写设定类,可以转换文本大小写。
Lowercased text.
Uppercased text.
CapiTaliZed text.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Bold text.
Normal weight text.
Italic text.
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-italic">Italic text.</p>
使用vertical-alignment 设置元素垂直对齐. 请注意vertical-align 只效于 inline, inline-block,
inline-table, and table cell elements.
Choose from .align-baseline, .align-top,
.align-middle, .align-bottom,
.align-text-bottom, and .align-text-top
as needed.
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
With table cells:
| baseline | top | middle | bottom | text-top | text-bottom |
<table style="height: 100px;">
<tbody>
<tr>
<td class="align-baseline">baseline</td>
<td class="align-top">top</td>
<td class="align-middle">middle</td>
<td class="align-bottom">bottom</td>
<td class="align-text-top">text-top</td>
<td class="align-text-bottom">text-bottom</td>
</tr>
</tbody>
</table>
.invisible类仅仅能够改变元素的可见性,意味着它的display没有被修改,而且这个元素仍然可以影响文档流。
<div class="visible">...</div>
<div class="invisible">...</div>
// Class
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
// Usage as a mixin
.element {
@include invisible(visible);
}
.element {
@include invisible(hidden);
}
用[hidden]属性可以隐藏任何HTML元素。因为IE9-10并不原生支持[hidden],所以在我们的CSS中对它声明了display:
none来绕过这个问题。
<input type="text" hidden>