Bootstrap 4参考手册

内容 | Content

排版 | Typography

引导打印的文档和示例，包括全局设置、标题、正文、列表等。

全局设置

引导设置基本的全局显示、排版和链接样式。当需要更多的控制时，请查看文本实用程序类...

用本机字体堆栈选择最好的font-family对于每个操作系统和设备。

对于更具包容性和可访问性的类型扩展，我们假设浏览器默认根目录font-size(通常是16 px），这样访问者就可以根据需要自定义他们的浏览器默认值。

使用$font-family-base，，，$font-size-base，和$line-height-base属性作为我们的打印基应用于<body>...

设置全局链接颜色$link-color并仅在:hover...

使用$body-bg设置background-color在<body>%28#fff默认情况下%29。

这些样式可以在_reboot.scss中定义的全局变量_variables.scss.确保$font-size-base在rem...

标题

所有HTML标题，<h1>透<h6>，都是可用的。

标题	例
<H1> </ H1>	H1.Bootstrap标题
<H2> </ H2>	H2.Bootstrap标题
<H3> </ H3>	H3.Bootstrap标题
<H4> </ H4>	H4.Bootstrap标题
<H5> </ H5>	H5.Bootstrap标题
<H6> </ H6>	H6.Bootstrap标题

<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>

.h1透.h6类也是可用的，当您想要匹配标题的字体样式但不能使用关联的HTML元素时。

打开getbootstrap.com上的示例

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

定制标题

使用包含的实用工具类重新创建Bootstrap 3中的小辅助标题文本。

打开getbootstrap.com上的示例

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

显示标题

传统的标题元素被设计为在页面内容的内容中发挥最佳效果。当您需要一个突出的标题时，请考虑使用显示标题-一种更大、稍微更固执己见的标题风格。

打开getbootstrap.com上的示例

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Lead

在某一段中加上.lead...

打开getbootstrap.com上的示例

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

内联文本元素

常见的内联HTML 5元素的样式。

打开getbootstrap.com上的示例

<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>

.mark和.small类还可以应用与<mark>和<small>同时避免了标签带来的任何不必要的语义影响。

虽然上面没有显示，但请随意使用<b>和<i>在HTML 5中。<b>意思是突出强调单词或短语，而不传递额外的重要性。<i>主要用于语音、技术术语等。

文本实用程序

更改文本对齐、转换、样式、重量和颜色文本实用程序...

缩略语

HTML的样式化实现<abbr>元素的缩写和缩略词，以显示悬停上的扩展版本。缩写具有默认下划线，并获得帮助光标，以便在悬停和辅助技术的用户上提供附加上下文。

加.initialism缩写为略小一点的字体大小。

打开getbootstrap.com上的示例

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

区块引号

引用文档中另一个源的内容块。包扎<blockquote class="blockquote">任何HTML的引号。

打开getbootstrap.com上的示例

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

命名源

加一个<footer class="blockquote-footer">来确认来源。将源工作的名称包装在<cite>...

打开getbootstrap.com上的示例

<blockquote class="blockquote">
  <p class="mb-0">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>

对齐

根据需要使用文本实用程序更改区块引号的对齐方式。

打开getbootstrap.com上的示例

<blockquote class="blockquote text-center">
  <p class="mb-0">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>

打开getbootstrap.com上的示例

<blockquote class="blockquote text-right">
  <p class="mb-0">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>

列表

未定型

删除默认值list-style和列表项%28直接子项上的左边距仅为%29。这仅适用于直接子列表项。，这意味着您还需要为任何嵌套列表添加类。

打开getbootstrap.com上的示例

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

内联

删除列表中的子弹，并施加一些光线margin两个班的组合，.list-inline和.list-inline-item...

打开getbootstrap.com上的示例

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

描述列表对齐

通过使用网格系统的预定义类%28或语义混合%29，水平对齐术语和描述。长期而言，您可以选择添加.text-truncate类以省略号截断文本。

打开getbootstrap.com上的示例

<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">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </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>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

反应式排版

反应式排版指通过简单地调整根元素的文本和组件font-size在一系列媒体查询中。引导并不能为您完成这个任务，但是如果您需要它，添加它是相当容易的。

这是一个实践中的例子。随便选择font-sizeS和媒体查询您的愿望。

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}

 © 2011–2017 Twitter, Inc.

根据MIT许可授权的代码。

根据CreativeCommonsAttributionLicense v3.0授权的文档。

内容 | Content相关

1.代码 \| Code
2.图片区 \| Figures
3.图片 \| Images
4.重置 \| Reboot
5.表格 \| Tables

Bootstrap 4

Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。

主页	https://getbootstrap.com/
源码	https://github.com/twbs/bootstrap
版本	4
发布版本	4.0.0-beta.2

Bootstrap 4目录

1.快速开始 \| Getting started
2.组件·信息提示框 \| Alerts
3.组件·徽章 \| Badges
4.组件·面包屑导航 \| Breadcrumb
5.组件·按钮组 \| Button group
6.组件·按钮 \| Buttons
7.组件·卡片 \| Cards
8.组件·轮播 \| Carousel
9.组件·折叠 \| Collapse
10.组件·下拉菜单 \| Dropdowns
11.组件·表单 \| Forms
12.组件·输入框组 \| Input group
13.组件·大屏幕 \| Jumbotron
14.组件·列表组 \| List group
15.组件·模态框 \| Modal
16.组件·导航栏 \| Navbar
17.组件·导航 \| Navs
18.组件·分页 \| Pagination
19.组件·弹出框 \| Popovers
20.组件·进度条 \| Progress
21.组件·滚动监听 \| Scrollspy
22.组件·提示工具 \| Tooltips
23.内容 \| Content
24.布局 \| Layout
25.迁移 \| Migration
26.实用工具 \| Utilities
27.Bootstrap4 网格系统
28.Bootstrap4 按钮组
29.Bootstrap4 按钮
30.Bootstrap4 图像形状
31.Bootstrap4 表格
32.Bootstrap4 颜色
33.Bootstrap4 文字排版
34.Bootstrap4 轮播
35.Bootstrap4 表单控件
36.Bootstrap4 表单
37.Bootstrap4 导航栏
38.Bootstrap4 导航
39.Bootstrap4 折叠
40.Bootstrap4 下拉菜单
41.Bootstrap4 卡片
42.Bootstrap4 分页
43.Bootstrap4 小工具
44.Bootstrap4 滚动监听
45.Bootstrap4 弹出框
46.Bootstrap4 提示框
47.Bootstrap4 模态框
48.Bootstrap 4 多媒体对象
49.Bootstrap 4 Flex（弹性）布局
50.Bootstrap4 创建一个网页
51.Bootstrap4 自定义表单
52.Bootstrap4 面包屑导航（Breadcrumb）