框架丨Bootstrap 入门

前言

Bootstrap 来自 Twitter，它简洁灵活，可以使得 Web 开发更加快捷。

Bootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能，能够让你快速设计并定制你的网站。

目前最新版本是 V5.1.3，但我一般使用 V4.6.0 版本。

介绍

对照官方的中文文档实践即可。

布局容器

Bootstrap V4.x 提供了 .container（固体自适应布局）与 .container-fluid（流体100%自适应布局）两种容器布局。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Bootstrap v4.6.0</title>
  <!-- Bootstrap 的 CSS 文件，本地测试使用不压缩的 css -->
  <link rel="stylesheet" href="../bootstrap-4.6.0-dist/css/bootstrap.css">
  <style>
    .row {
      border: dashed 1px #2ecc71;
      text-align: center;
    }
  </style>
</head>

<body>
  <!-- 固体自适应栅格布局 -->
  <div class="container">
    <div class="row">
      <div class="col-sm">
        One of three columns
      </div>
      <div class="col-sm">
        One of three columns
      </div>
      <div class="col-sm">
        One of three columns
      </div>
    </div>
  </div>
  <!-- 100% 流体自适应布局 -->
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm">
        One of three columns
      </div>
      <div class="col-sm">
        One of three columns
      </div>
      <div class="col-sm">
        One of three columns
      </div>
    </div>
  </div>
  <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
  <script src="../jquery-3.6.0/package/dist/jquery.slim.js"></script>
  <script src="../bootstrap-4.6.0-dist/js/bootstrap.bundle.js"></script>
</body>
</html>

注意：容器布局是可以嵌套的，但是不推荐。

栅格等级

Bootstrap 的栅格系统分 5 个等级，如下所示。

Extra small	Small	Medium	Large	Extra large
<576px	≥576px	≥768px	≥992px	≥1200px

如果同时使用两个或两个以上的级别，并且比例相同，那么遵循移动端优先的原则。示例如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Bootstrap v4.6.0</title>
  <!-- Bootstrap 的 CSS 文件，本地测试使用不压缩的 css -->
  <link rel="stylesheet" href="../bootstrap-4.6.0-dist/css/bootstrap.css">
  <style>
    div {
      border: solid 1px #2ecc71;
      background-color: #a5a5a5;
      text-align: center;
    }
  </style>
</head>

<body>
  <!-- 固体自适应栅格布局 -->
  <div class="container">
    <div class="row">
      <div class="col-4 col-sm-1 col-md-4 col-lg-6 col-xl-12">
        第一列
      </div>
      <div class="col-4 col-sm-10 col-md-2 col-lg-6 col-xl-12">
        第二列
      </div>
      <div class="col-4 col-sm-1 col-md-6 col-lg-12 col-xl-12">
        第三列
      </div>
    </div>
  </div>
  <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
  <script src="../jquery-3.6.0/package/dist/jquery.slim.js"></script>
  <script src="../bootstrap-4.6.0-dist/js/bootstrap.bundle.js"></script>
</body>
</html>

使用 .w-100 可以切割栅格栏位，进行分行操作。

<!-- 100% 流体自适应布局 -->
<div class="container-fluid">
<div class="row">
  <div class="col-sm">
    One of three columns
  </div>
  <div class="col-sm">
    One of three columns
  </div>
  <!-- 分行 -->
  </div class="w-100"><div>
  <div class="col-sm">
    One of three columns
  </div>
</div>
</div>

隐藏与显示

一般来说，网页适配移动端，会单独开发一套对应移动端的页面，因为手机的尺寸不够，有些内容不方便浏览，所以需要隐藏一些元素。

要隐藏元素，只需要对任何响应屏幕变化使用 .d-none 这个 class 即可，语法为： .d-{sm, md, lg, xl}-none
要仅在给定的屏幕尺寸间隔上显示元素，可以将一个 .d-*-none 类与一个 .d-*-* 类组合使用，例如：.d-none .d-md-block .d-xl-none 将为所有屏幕尺寸隐藏该元素，但在中型和大型设备上则会显示。

功能描述	类
所有隐藏	.d-none
仅在 xs 尺寸上隐藏	.d-none .d-sm-block
仅在 sm 尺寸上隐藏	.d-sm-none .d-md-block
仅在 md 尺寸上隐藏	.d-md-none .d-lg-block
仅在 lg 尺寸上隐藏	.d-lg-none .d-xl-block
仅在 xl 尺寸上隐藏	.d-xl-none
所有可见	.d-block
仅在 xs 尺寸上可见	.d-block .d-sm-none
仅在 sm 尺寸上可见	.d-none .d-sm-block .d-md-none
仅在 md 尺寸上可见	.d-none .d-md-block .d-lg-none
仅在 lg 尺寸上可见	.d-none .d-lg-block .d-xl-none
仅在 xl 尺寸上可见	.d-none .d-xl-block

对齐与排列

对齐

行对齐	样式
居顶（默认）	.align-items-start
居中	.align-items-center
居底	.align-items-end

列对齐	样式
居顶（默认）	.align-self-start
居中	.align-self-center
居底	.align-self-end

水平对齐	样式
居左（默认）	.justify-content-start
居中	.justify-content-center
居右	.justify-content-end
间隔相等	.justify-content-around
两端对齐	.justify-content-between

排列

栅格的列可以排序，使用 .order-N 指定，N 的最大值为 12；
使用 .order-first 强行设置列为第一列，.order-last 为最后一列；
使用 .offset-N 或 .offset-*-N 设置列的偏移量，N 表示栅格列数；
使用 .ml-N 或 mr-N 微调列距离；
使用 .ml-auto 和 .mr-auto 来左右对齐。

页面内容

排版

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

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

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

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

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

一个显得更大的标题样式：Display headings，可以比原生的标题标签更大。

<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 类可以让段落突出显示。

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

内联文本元素

文本高亮：<mark> 标签。
文本显示删除线：对于被删除的文本使用 <del> 标签。
文本显示删除线：对于没用的文本使用 <s> 标签。
文本显示下划线：额外插入的文本使用 <ins> 标签。
文本显示下划线：为文本添加下划线，使用 <u> 标签。
小号文本：对于不需要强调的 inline 或 block 类型的文本，使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 <small> 元素被设置不同的 font-size 。你还可以为行内元素赋予 .small 类以代替任何 <small> 元素。
强调文本：通过增加 font-weight 值强调一段文本，使用 <strong> 标签。
斜体文本：用斜体强调一段文本，使用 <em> 标签。

在 HTML5 中可以放心使用 <b> 和 <i> 标签。<b> 用于高亮单词或短语，不带有任何着重的意味；而 <i> 标签主要用于发言、技术词汇等。

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

缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语有一个默认下划线，并获得一个帮助光标，以便在悬停时为用户提供额外的上下文。title 属性是单词全文，<abbr> 标签是你想要显示的缩略词。
为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。

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

引用块

将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，我们建议用 <p> 标签。

<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

命名来源

添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中（斜体显示）。

<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

展示风格

默认是左对齐，根据需要通过更改文本的对齐方式来更改 blockquote 的对齐方式。

<!-- 文本居中对齐 -->
<blockquote class="blockquote text-center">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

<!-- 文本居右对齐 -->
<blockquote class="blockquote text-right">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

列表

有序列表用 <ol> 标签；无序列表用 <ul> 标签，但是它们在各条列前面都有序号或符号以示区隔。

无样式列表

移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。

<ul class="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it's still a list.</li>
<li>However, this style only applies to immediate child elements.</li>
<li>Nested lists:
  <ul>
    <li>are unaffected by this style</li>
    <li>will still show a bullet</li>
    <li>and have appropriate left margin</li>
  </ul>
</li>
<li>This may still come in handy in some situations.</li>
</ul>

内联列表

将所有元素放置于同一行。

<ul class="list-inline">
<li class="list-inline-item">This is a list item.</li>
<li class="list-inline-item">And another one.</li>
<li class="list-inline-item">But they're displayed inline.</li>
</ul>

并排列表

<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">Term</dt>
<dd class="col-sm-9">
  <p>Definition for the term.</p>
  <p>And some more placeholder definition text.</p>
</dd>

<dt class="col-sm-3">Another term</dt>
<dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</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">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
  </dl>
</dd>
</dl>

代码

行内代码

用 <code> 包裹行内代码片段。请确保转义 HTML 代码中的尖括号。

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

代码块

用 <pre> 包裹多行代码。再次注意，请确保转义代码中的尖括号，以便正确展示。你还可以选择性地添加 .pre-scrollable 类，实现垂直滚动，并且设定的最大高度为 340px。

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

变量标签

使用 <var> 标签标识变量。

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

用户输入

<kbd> 标签通常用来标明键盘输入。

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

示例输出

<samp> 标签指示程序的示例输出。

<samp>This text is meant to be treated as sample output from a computer program.</samp>

表格

基本表格

为任意 <table> 标签添加 .table 类可以为其赋予基本的表格样式。

<table class="table">
<thead>
  <tr>...</tr>
</thead>
<tbody>
  <tr>...</tr>
</tbody>
</table>

颜色反转

使用 .table-dark 样式可以颜色反转，暗夜模式。

<table class="table table-dark">
<thead>
  <tr>...</tr>
</thead>
<tbody>
  <tr>...</tr>
</tbody>
</table>

表头颜色

可以给 <thead> 标签添加 .thead-light 或者 .thead-dark 样式实现浅黑色或深灰色的表头。

<table class="table">
<thead class="thead-dark">
  <tr>...</tr>
</thead>
<tbody>
  <tr>...</tr>
</tbody>
</table>

<table class="table">
<thead class="thead-light">
  <tr>...</tr>
</thead>
<tbody>
  <tr>...</tr>
</tbody>
</table>

条纹状表格

增加 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

<table class="table table-striped"></table>

有边框的表格

默认的表格，边框是不完全的；添加 .table-bordered 类为表格和其中的每个单元格增加边框。

<table class="table table-bordered"></table>

无边框的表格

添加 .table-borderless 类可以消除边框。

<table class="table table-borderless"></table>

悬停效果

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

<table class="table table-hover"></table>

紧缩表格

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

<table class="table table-sm"></table>

状态类

通过这些状态类可以为行或单元格设置颜色。

<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
<td class="table-active">...</td>
<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td>
</tr>

表格标题

<caption> 标签定义表格的标题，必须直接放置到 <table> 标签之后。但是 Bootstrap 的标题不是在表头，而是显示在表格的左下角。

<table class="table">
<caption>List of users</caption>
</table>

响应式表格

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

<div class="table-responsive">
<table class="table">
  ...
</table>
</div>

还可以设置 .table-responsive{-sm | -md | -lg | -xl} 适用于某一屏幕尺寸的响应式表格。

参考

官网：Bootstrap 官网
中文网：Bootstrap 中文网
案例：hackerthemes