【学习笔记】Bootstrap4 - 用于HTML、CSS和JS开发的开源工具包

shawxlee

已于 2023-09-24 14:56:00 修改

阅读量621

点赞数

分类专栏：学习笔记 Bootstrap 文章标签：学习笔记 bootstrap html css javascript

于 2023-09-13 20:22:08 首次发布

本文链接：https://blog.csdn.net/weixin_43642751/article/details/132864037

版权

学习笔记同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

Bootstrap

5 篇文章 0 订阅

订阅专栏

Bootstrap4 布局

1、移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签：

<!DOCTYPE html>
<html>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>……</title>
</head>
<body>
    ……

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

width=device-width  宽度是设备屏幕的宽度
initial-scale=1  初始的缩放比例为1
shrink-to-fit=no  自动适应手机屏幕的宽度

2、容器类：`.container` / `.container-fluid`

Bootstrap 4 需要一个容器元素来包裹网站的内容

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

<div class="container">
  …… 
</div>

![此处输入图片的描述][1]

.container-fluid：用于100%宽度，占据全部viewport的容器

<div class="container-fluid">
  …… 
</div>

![此处输入图片的描述][2]

3、网格系统

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

![此处输入图片的描述][3]

• 网格的基本结构：`.row` > `.col-①`/`.col-②-①`

.row 行    .col 列
① 1~12 当前div在当前行中占据的列数（每行共12列）    auto 适应内容
② sm 小屏幕    md 中等屏幕    lg 大屏幕    xl 超大屏幕

	超小屏幕	小屏幕	中等屏幕	大屏幕	超大屏幕
设备尺寸	＜576px	≥ 576px	≥ 768px	≥ 992px	≥ 1200px
class前缀	`.col-*`	`.col-sm-*`	`.col-md-*`	`.col-lg-*`	`.col-xl-*`
容器宽度	auto	540px	720px	960px	1140px

<!-- 首先创建一行row -->
<div class="row">
    <!-- 然后给每个div添加网格类 -->
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    ……
</div>

- 等宽布局：`.col`

不在col上添加数字，自动调整为等宽布局，即同一行的每个div宽度相等

<div class="row">
    <div class="col">第1块（占4列）</div>
    <div class="col">第2块（占4列）</div>
    <div class="col">第3块（占4列）</div>
</div>
<div class="row">
    <div class="col">第1块（占3列）</div>
    <!-- 若设置了一个div的宽度，其他div将自动均分剩余宽度 -->
    <div class="col-6">第2块（占6列）</div>
    <div class="col">第3块（占3列）</div>
</div>

![此处输入图片的描述][4]

- 内容布局：`.col-auto` `.col-*-auto`

使div的宽度跟随内容调整，且固定为内容的宽度，不受其他div影响

<div class="row">
    <div class="col-2">……</div>
    <div class="col-auto">.col-*-auto使div的宽度跟随内容</div>
    <div class="col">……</div>
	<div class="col">……</div>
</div>

![此处输入图片的描述][5]

- 响应式布局：`.col-sm|md|lg|xl-*`

适应不同屏幕尺寸的布局，而在移动设备上，多个列将会上下堆叠排版

<div class="row">
    <div class="col-md-3">……</div>
    <div class="col-md-3">……</div>
    <div class="col-md-3">……</div>
    <div class="col-md-3">……</div>
</div>
<!-- 并排显示四个div，当屏幕为md时每个div占3列 -->
    
<div class="row">
    <div class="col-md-4">……</div>
    <div class="col-md-8">……</div>
</div>
<!-- 并排显示两个div，当屏幕为md时，第一个占4列，第二个占8列 -->

<div class="row">
    <div class="col-md-3 col-lg-6">……</div>
    <div class="col-md-9 col-lg-6">……</div>
</div>
<!-- 并排显示两个div，md时分别占比25%、75%，lg时分别占比50%、50% -->

<div class="row">
    <div class="col-sm-12 col-md-9 col-lg-6 col-xl-3">……</div>
    ……
</div>
<!-- 随着屏幕尺寸的变化，应用不同的布局 -->

- 嵌套布局：`.col` > `.row`

在现有列中添加一组新row，最多可添加12个或更少的列

<div class="row">
    <div class="col">一级div</div>
    <div class="col">一级div
        <div class="row">
            <div class="col-5">二级div</div>
            <div class="col">二级div</div>
            <div class="col">二级div</div>
        </div>
    </div>
</div>

![此处输入图片的描述][6]

• 网格的排列方式

- row内垂直对齐方式：`.align-items-start|center|end`

<div class="container">
    <div class="row align-items-start">
        <div class="col">start顶端对齐</div>
        ……
    </div>
    <div class="row align-items-center">
        <div class="col">center垂直居中</div>
        ……
    </div>
    <div class="row align-items-end">
        <div class="col">end底端对齐</div>
        ……
    </div>
</div>

- row内水平对齐方式：`.justify-content-start|center|end|around|between`

<div class="container">
    <div class="row justify-content-start">
        <div class="col-3">start左对齐</div>
        ……
    </div>
    <div class="row justify-content-center">
        <div class="col-3">center水平居中</div>
        ……
    </div>
    <div class="row justify-content-end">
        <div class="col-3">end右对齐</div>
        ……
    </div>
    <div class="row justify-content-around">
        <div class="col-3">around分散对齐</div>
        ……
    </div>
    <div class="row justify-content-between">
        <div class="col-3">between两端对齐</div>
        ……
    </div>
</div>

![此处输入图片的描述][7]

- col内垂直对齐方式：`.align-self-start|center|end`

<div class="container">
    <div class="row">
        <div class="col align-self-start">……</div>
        <div class="col align-self-center">……</div>
        <div class="col align-self-end">……</div>
    </div>
</div>

- 清除内外边距：`.no-gutters`

<div class="container">
    <div class="row no-gutters">
        <div class="col">……</div>
        <div class="col">……</div>
        <div class="col">……</div>
    </div>
</div>

![此处输入图片的描述][8]

- 强制换行：`.w-100`

<div class="row">
    <div class="col">……</div>
    <div class="col">……</div>
    <!-- 插入一个带.w-100的空div可强制换行 -->
    <div class="w-100"></div>
    <div class="col">……</div>
    <div class="col">……</div>
</div>

<!-- 若一行中div的总宽度超过12列，则会自动换行 -->

![此处输入图片的描述][9]

- 重新排序：`.order-|first|last` `.order-sm|md|lg|xl-`

按照*的大小重新排列div的显示顺序，其中1≤ * ≤12

优先级：.order-first|last ＞无＞ .order-*/.order-sm|md|lg|xl-*

<div class="row">
	<div class="col">这是第一个div，无order，所以排在第二个</div>
    <div class="col order-12">这是第二个div，但添加了.order-12，所以排在第六个</div>
    <div class="col order-1">这是第三个div，但添加了.order-1，所以排在第四个</div>
    <div class="col order-last">这是第四个div，但添加了.order-last，所以排在最后</div>
	<div class="col">这是第五个div，无order，所以排在第三个</div>
	<div class="col order-3">这是第六个div，但添加了.order-3，所以排在第五个</div>
	<div class="col order-first">这是最后一个div，但添加了.order-first，所以排在最前</div>
</div>

![此处输入图片的描述][10]

- 偏移列：`.offset-sm|md|lg|xl-*`

在规定屏幕尺寸上使用偏移，会把一个div的左外边距增加*列，其中1≤ * ≤11

<div class="row" >
      <div class="col-md-6 offset-md-3">……</div>
</div>
<!-- 当屏幕为md时，div向右偏移3列（此时为居中显示） -->

<!-- 或可使用外边距工具.m*-*-*调整div之间的距离 -->

Bootstrap4 样式

全局默认样式：
font-size: 16px;
line-height: 1.5;
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;

1、标签/属性样式重启

<abbr>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

![此处输入图片的描述][11]

<address>

<address>
Written by <strong>Shaw</strong><br>
Email: <a href="mailto:shaw@example.com">shaw@example.com</a>
</address>

![此处输入图片的描述][12]

<blockquote>

<h1>About WWF</h1>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="https://www.worldwildlife.org/about">
    For nearly 60 years, WWF has been protecting the future of nature.
    The world’s leading conservation organization, WWF works in 100 countries and is supported by more than one million members in the United States and close to five million globally. WWF's unique way of working combines global reach with a foundation in science, involves action at every level from local to global, and ensures the delivery of innovative solutions that meet the needs of both people and nature.
</blockquote>

![此处输入图片的描述][13]

<button>

<button type="button">button按钮（IE默认值）</button>
<button type="submit">submit按钮（其他浏览器默认值）</button>

![此处输入图片的描述][14]

<code>

<p>HTML元素 <code>&lt;span&gt;</code>, <code>&lt;section&gt;</code>, <code>&lt;div&gt;</code> 用于定义部分文档内容。</p>

![此处输入图片的描述][15]

<del> <em> <ins> <mark> <s> <small> <strong> <u>

<del>This line of text is meant to be treated as deleted text.</del>
<em>This line rendered as italicized text.</em>
<ins>This line of text is meant to be treated as an addition to the document.</ins>
You can use the mark tag to <mark>highlight</mark> text.
<s>This line of text is meant to be treated as no longer accurate.</s>
<small>This line of text is meant to be treated as fine print.</small>
<strong>This line rendered as bold text.</strong>
<u>This line of text will render as underlined</u>

![此处输入图片的描述][16]

<details> > <summary>

<details>
    <summary>点击展开详情</summary>
    <p>这是被折叠隐藏的详情内容，展开后才可见</p>
</details>
<br>
<details open>
    <summary>详情设置为可见，点击折叠</summary>
    <p>这是被折叠隐藏的详情内容，展开后才可见</p>
</details>

![此处输入图片的描述][17]

<dl> > <dt> <dd>

★ 可使用网格系统布局

<dl>
	<dt>项目一名称</dt>
	<dd>这是对项目一的描述</dd>
	<dt>项目二名称</dt>
	<dd>这是对项目二的描述</dd>
	……
</dl>

![此处输入图片的描述][18]

<form> > <fieldset> > <legend> <label> <input>

<form>
	<fieldset>
		<legend>Personal Information</legend>
		<p>What's your name?
		<input type="text" name="name" placeholder="My name is..."></p>
		<p>What's your gender?
		<label for="male"></label>
	    <input id="male" type="radio" name="sex" checked>Male
	    <label for="female"></label>
	    <input id="female" type="radio" name="sex">Female</p>
		<input type="submit" value="Submit">
	</fieldset>
</form>

![此处输入图片的描述][19]

<h1>~<h6> <p>

<h1>h1标题（2.5rem = 40px）</h1>
<h2>h2标题（2rem = 32px）</h2>
<h3>h3标题（1.75rem = 28px）</h3>
<h4>h4标题（1.5rem = 24px）</h4>
<h5>h5标题（1.25rem = 20px）</h5>
<h6>h6标题（1rem = 16px）</h6>
<p>p文字段落（1rem = 16px）</p>

![此处输入图片的描述][20]

<kbd>

使用快捷键 <kbd>Ctrl</kbd> + <kbd>C</kbd> 进行复制

![此处输入图片的描述][21]

<ol> > <li>

<ol>
	<li>第1项</li>
	    <ol>
	    	<li>第1.1项</li>
	    	<li>第1.2项</li>
			    <ol>
	    	        <li>第1.2.1项</li>
	    	        <li>第1.2.2项</li>
	            </ol>
	    </ol>
	<li>第2项</li>
	<li>第3项</li>
	    <ol>
	    	<li>第3.1项</li>
	    </ol>
</ol>

![此处输入图片的描述][22]

<pre>

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

![此处输入图片的描述][23]

<samp>

字符序列 <samp>ae</samp> 可能会被转换为 &aelig; 连字字符

![此处输入图片的描述][24]

<select> > <optgroup> > <option>

<select>
	<optgroup label="Junior">
		<option value="junior1">junior 1</option>
		<option value="junior2">junior 2</option>
		<option value="junior3">junior 3</option>
	</optgroup>
	<optgroup label="Senior">
		<option value="senior1">senior 1</option>
		<option value="senior2">senior 2</option>
		<option value="senior3">senior 3</option>
	</optgroup>
</select>

![此处输入图片的描述][25]

<table> > <caption> <tr> > <th>/<td>

<table border="1">
    <caption>caption元素不再作为表格标题，而是位于下方的一段描述文本</caption>
    <tr>
        <th>表头：1行1列</th>
        <th>表头：1行2列</th>
    </tr>
    <tr>
        <td>内容：2行1列</td>
        <td>内容：2行2列</td>
    </tr>
</table>

![此处输入图片的描述][26]

textarea

<textarea>这是一个多行文本框，只能垂直调整大小</textarea>

![此处输入图片的描述][27]

<ul> > <li>

<ul>
	<li>第1项</li>
	    <ul>
	    	<li>第1.1项</li>
	    	<li>第1.2项</li>
			    <ul>
	    	        <li>第1.2.1项</li>
	    	        <li>第1.2.2项</li>
	            </ul>
	    </ul>
	<li>第2项</li>
	<li>第3项</li>
	    <ul>
	    	<li>第3.1项</li>
	    </ul>
</ul>

![此处输入图片的描述][28]

<var>

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

![此处输入图片的描述][29]

display: none → hidden

<p hidden>这个元素会被隐藏</p>

2、排版样式类

• 标题类：`.h1|h2|h3|h4|h5|h6`

当想要匹配标题的字体样式但不能使用关联的HTML元素时

<p class="h1">.h1标题（2.5rem = 40px）</p>
<p class="h2">.h2标题（2rem = 32px）</p>
<p class="h3">.h3标题（1.75rem = 28px）</p>
<p class="h4">.h4标题（1.5rem = 24px）</p>
<p class="h5">.h5标题（1.25rem = 20px）</p>
<p class="h6">.h6标题（1rem = 16px）</p>
<p>p文字段落（1rem = 16px）</p>

![此处输入图片的描述][30]

• 扩大标题：`.display-1|2|3|4`

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

<!-- display-*的样式是固定的，与标签类型无关 -->

![此处输入图片的描述][31]

• 突出段落：`.lead`

<p>这是一段普通文本</p>
<p class="lead">这是一段突出文本</p>
<p>这是一段普通文本</p>

![此处输入图片的描述][32]

• 高亮文本：`.mark`

<p class="mark">这是一行高亮的文本</p>
<p>文本中插入<span class="mark">带.mark的span</span>高亮局部</p>

![此处输入图片的描述][33]

• 缩小文本字号：`.small`

缩小文本字号为父元素字号的85%

<p>这是一段普通文本，字号为16px</p>
<p class="small">这是一段.small文本，字号为13.6px</p>

<div style="font-size: 30px;">
    <p>这是父元素设定字号30px下的普通文本</p>
    <p class="small">这是30px下的.small文本，字号为25.5px</p>
</div>

![此处输入图片的描述][34]

• 小号大写字母缩写：`.initialism`

显示在abbr元素中的文本以小号字体展示，且可以将小写字母转换为大写字母

<p>The <abbr class="initialism" title="World Health Organization">who</abbr> was founded in 1948.</p>

![此处输入图片的描述][35]

• 突出引用内容：`.blockquote` > `.blockquote-footer`

<h1>About WWF</h1>
<!-- 向<blockquote>标签添加.blockquote可突出引用内容 -->
<blockquote class="blockquote">
    <p>For nearly 60 years, WWF has been protecting the future of nature.
        The world’s leading conservation organization, WWF works in 100 countries and is supported by more than one million members in the United States and close to five million globally. WWF's unique way of working combines global reach with a foundation in science, involves action at every level from local to global, and ensures the delivery of innovative solutions that meet the needs of both people and nature.</p>
    <!-- 向<footer>标签添加.blockquote-footer生成引用注脚，将引用源包裹在cite标签内，通过title属性备注源信息 -->
    <footer class="blockquote-footer">Quote from <cite title="https://www.worldwildlife.org/about">WWF</cite>'s website</footer>
</blockquote>

![此处输入图片的描述][36]

• 清除列表样式：`.list-unstyled`

<!-- 向父元素添加.list-unstyled，只对一级列表项有效 -->
<ul class="list-unstyled">
	<li>第1项</li>
	    <ul>
	    	<li>第1.1项</li>
	    	<li>第1.2项</li>
			    <ul>
	    	        <li>第1.2.1项</li>
	    	        <li>第1.2.2项</li>
	            </ul>
	    </ul>
	<li>第2项</li>
	<li>第3项</li>
	    <ul>
	    	<li>第3.1项</li>
	    </ul>
</ul>

![此处输入图片的描述][37]

• 行内并排列表项：`.list-inline` > `.list-inline-item`

<ul class="list-inline">
    <li class="list-inline-item">第一项</li>
    <li class="list-inline-item">第二项</li>
    <li class="list-inline-item">第三项</li>
</ul>

![此处输入图片的描述][38]

3、代码样式类：`.pre-scrollable`

使 pre 元素可滚动，代码块高度超出 340px 时，就会在 Y 轴出现滚动条

<pre class="pre-scrollable">
使 pre 元素可滚动
代码块区域最大高度为 340px
一旦超出这个高度
就会在 Y 轴出现滚动条
</pre>

![此处输入图片的描述][39]

4、图片样式类

• 响应式图像：`.img-fluid`

<img src="/image.jpg" class="img-fluid" alt="响应式图像">

<!-- max-width:100% 和 height:auto 使图像适应父元素缩放比例 -->

![此处输入图片的描述][40]

• 1px圆角边框：`.img-thumbnail`

<img src="/image.jpg" class="img-thumbnail" alt="1px圆角">

![此处输入图片的描述][41]

5、表格样式类：`.table`

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

![此处输入图片的描述][42]

• 表格颜色：`.table-active|primary|secondary|success|danger|warning|info|light|dark`

<!-- 表格整体背景色 -->
<table class="table table-active">
  <!-- 行背景色 -->
  <tr class="table-primary">
    <!-- 单元格背景色 -->
    <th class="table-secondary">1</th>
    <td class="table-success">Mark</td>
    ……
  </tr>
</table>

![此处输入图片的描述][43]

• 斑马纹：`.table-striped`

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

![此处输入图片的描述][44]

• 单元格边框：`.table-bordered`

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

![此处输入图片的描述][45]

• 清除表格边框：`.table-borderless`

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

![此处输入图片的描述][46]

• 悬停行：`.table-hover`

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

![此处输入图片的描述][47]

• 小尺寸表格：`.table-sm`

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

![此处输入图片的描述][48]

• 表头颜色：`.thead-light|dark`

<table class="table">
  <thead class="thead-light">
    ……
  </thead>
  <tbody>
    ……
  </tbody>
</table>

![此处输入图片的描述][49]

• 响应式表格：`.table-responsive`/`.table-responsive-sm|md|lg|xl` > `.table`

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

![此处输入图片的描述][50]

6、数据样式类：`.figure` > `.figure-img`+`.figure-caption`

<p>这是一段主要内容这是一段主要内容这是一段主要内容</p>
<figure class="figure">
    <p>这是一段附加内容：</p>
    <img src="/img.jpg" alt="附加图片" class="figure-img" width="50%">
    <figcaption class="figure-caption">附加内容的小标题</figcaption>
</figure>

![此处输入图片的描述][51]

Bootstrap4 组件

1、路径导航：`.breadcrumb` > `.breadcrumb-item` `.active`

路径导航表示当前页面在导航层次结构内的位置，可以显示日期、类别或标签等

<!-- 以一个nav标签开始 -->
<nav>
    <!-- 创建一个带.breadcrumb的有序列表ol -->
    <ol class="breadcrumb">
        <!-- 向每个li添加.breadcrumb-item，父级项内包裹a链接 -->
	    <li class="breadcrumb-item"><a href="#">2018</a></li>
	    <li class="breadcrumb-item"><a href="#">Nov.</a></li>
	    <!-- 当前项li用.active标记 -->
	    <li class="breadcrumb-item active">08th</li>
    </ol>
</nav>

<!-- 各路径间的分隔符已经自动通过CSS设置好了 -->

![此处输入图片的描述][52]

2、卡片：`.card`

★ 可使用网格系统布局

• 主体内容：`.card-body` > `.card-title`/`.card-subtitle`/`.card-text`/`.card-link`

<div class="card" style="width: 18rem;">
    <div class="card-body">
        <!-- 在.card-body下创建标题/文本/链接 -->
        <h3 class="card-title">这是卡片的标题</h3>
        <h5 class="card-subtitle">这是卡片的副标题</h5>
        <p class="card-text">这是卡片的文本内容</p>
        <a href="#" class="card-link">这是一条链接</a>
    </div>
</div>

![此处输入图片的描述][53]

• 封面图：`.card-img-top`

<div class="card" style="width: 18rem;">
    <!-- 在.card下插入带.card-img-top的img标签 -->
    <img src="/img1.jpg" class="card-img-top">
    <div class="card-body">这是卡片的主体内容</div>
    <!-- .card-img-top的位置即图片的位置 -->
    <img src="/img2.jpg" class="card-img-top">
</div>

<!-- 图片默认填充，按原始比例缩放 -->

![此处输入图片的描述][54]

• 图片背景：`.card-img` + `.card-img-overlay`

将图像转换为卡片背景，并在背景中添加文本内容

<div class="card" style="width: 18rem;">
    <img src="/img.jpg" class="card-img">
    <!-- 在.card-img后插入带.card-img-overlay的div -->
	<div class="card-img-overlay">这是.card-img-overlay中的内容</div>
    <div class="card-body">这是.card-body中的内容</div>
</div>

<!-- 图片默认填充，按原始比例缩放 -->

![此处输入图片的描述][55]

• 列表组：`.list-group` `.list-group-flush` > `.list-group-item`

<div class="card" style="width: 10rem;">
    <!-- 在.card下插入带.list-group和.list-group-flush的ul标签 -->
    <ul class="list-group list-group-flush">
        <!-- 在li标签内添加.list-group-item -->
        <li class="list-group-item">列表项1</li>
        <li class="list-group-item">列表项2</li>
        <li class="list-group-item">列表项3</li>
    </ul>
</div>

![此处输入图片的描述][56]

• 页眉和页脚：`.card-header` + `.card-footer`

<div class="card" style="width: 18rem;">
    <!-- 在.card下开头插入带.card-header的div/h*标签 -->
    <div class="card-header">这是卡片的页眉</div>
    <div class="card-body">这是卡片的主体</div>
    <!-- 在.card下末尾插入带.card-footer的div/h*标签 -->
    <div class="card-footer">这是卡片的页脚</div>
</div>

<!-- .card-header和.card-footer可添加到h*标签中强调文本 -->

![此处输入图片的描述][57]

• 卡片导航：( `.card-header` > `.nav` `.nav-tabs|pills` `.card-header-tabs|pills` > `.nav-item` ) + ( `.card-body` > `.tab-content` )

<div class="card" style="width: 30rem;">
	<div class="card-header">
		<!-- 在.card-header下创建tab导航组件，添加.card-header-tabs -->
		<ul class="nav nav-tabs card-header-tabs">
		    <!-- 当前选项卡用.active标记 -->
			<li class="nav-item"><a href="#part1" class="nav-link active" data-toggle="tab">导航链接1</a></li>
			<li class="nav-item"><a href="#part2" class="nav-link" data-toggle="tab">导航链接2</a></li>
			<li class="nav-item"><a href="#part3" class="nav-link" data-toggle="tab">导航链接3</a></li>
		</ul>
	</div>
	<div class="card-body">
	    <!-- 在.card-body下创建对应的选项卡组件 -->
		<div class="tab-content">
		    <!-- 当前页面用.active标记 -->
			<div class="tab-pane active" id="part1">这是第一部分</div>
			<div class="tab-pane" id="part2">这是第二部分</div>
			<div class="tab-pane" id="part3">这是第三部分</div>
		</div>
	</div>
</div>

![此处输入图片的描述][58]

<div class="card" style="width: 30rem;">
	<div class="card-header">
		<!-- 在.card-header下创建pill导航组件，添加.card-header-pills -->
		<ul class="nav nav-pills card-header-pills">
			……
		</ul>
	</div>
	<div class="card-body">
		<div class="tab-content">
			……
		</div>
	</div>
</div>

![此处输入图片的描述][59]

C2、卡片组

紧邻卡片组：`.card-group`

将一系列卡片从左到右排列在一行显示，默认等宽且等高，卡片之间无间距紧邻

<!-- 将多个卡片包裹在一个带.card-group的div里 -->
<div class="card-group">
    <div class="card">
        <img class="card-img" src="/image1.jpg" alt="image1">
        <div class="card-body">卡片1主体内容</div>
    </div>
    <div class="card">
        <div class="card-header">卡片2页眉内容</div>
        <img class="card-img" src="/image2.jpg" alt="image2">
        <div class="card-body">卡片2主体内容</div>
        <div class="card-footer">卡片2页脚内容</div>
    </div>
    <div class="card">
        <div class="card-header">卡片3页眉内容</div>
        <img class="card-img" src="/image3.jpg" alt="image3">
        <div class="card-body">卡片3主体内容</div>
        <div class="card-footer">卡片3页脚内容</div>
    </div>
    ……
</div>

<!-- 顶部按顶端对齐，底部按底端对齐，各部分高度随内容调整 -->

![此处输入图片的描述][60]

间隔卡片组：`.card-deck`

将一系列卡片从左到右排列在一行显示，默认等宽且等高，卡片之间等间距间隔

<!-- 将多个卡片包裹在一个带.card-deck的div里 -->
<div class="card-deck">
    <div class="card">
        ……
    </div>
    <div class="card">
        ……
    </div>
    <div class="card">
        ……
    </div>
    ……
</div>

<!-- 顶部按顶端对齐，底部按底端对齐，各部分高度随内容调整 -->

![此处输入图片的描述][61]

堆砌卡片组：`.card-columns`

将一系列卡片从上到下堆砌成三列，默认等宽，每个卡片的高度根据内容调整

<!-- 将多个卡片包裹在一个带.card-columns的div里 -->
<div class="card-columns">
    <div class="card">
        ……
    </div>
    <div class="card">
        ……
    </div>
    <div class="card">
        ……
    </div>
    ……
</div>

![此处输入图片的描述][62]

3、下拉菜单

• 基础下拉/弹出菜单：`.dropdown` > [ `.dropdown-toggle` `data-toggle="dropdown"` + ( `.dropdown-menu` > `.dropdown-item` ) ]

<!-- 将触发器和菜单包裹在带.dropdown的div里，指定一个下拉菜单 -->
<div class="dropdown">
    <!-- 向触发器添加.dropdown-toggle和data-toggle="dropdown" -->
	<button class="dropdown-toggle" type="button" data-toggle="dropdown">下拉菜单</button>
	<!-- 添加带.dropdown-menu的div标签，创建一个下拉菜单 -->
	<div class="dropdown-menu">
	    <!-- 添加带.dropdown-item的a标签，创建菜单列表 -->
		<a class="dropdown-item" href="#">链接1</a>
		<a class="dropdown-item" href="#">链接2</a>
		<a class="dropdown-item" href="#">链接3</a>
	</div>
</div>

![此处输入图片的描述][63]

• 按钮下拉/弹出菜单：`.btn-group` > [ `.dropdown-toggle` `data-toggle="dropdown"` + ( `.dropdown-menu` > `.dropdown-item` ) ]

<!-- 将按钮和菜单包裹在带.btn-group的div里，创建按钮下拉菜单 -->
<div class="btn-group">
    <!-- 任何按钮颜色和按钮尺寸的类都适用于按钮下拉菜单 -->
	<button class="dropdown-toggle" type="button" data-toggle="dropdown">按钮下拉菜单</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="#">链接1</a>
		<a class="dropdown-item" href="#">链接2</a>
		<a class="dropdown-item" href="#">链接3</a>
	</div>
</div>

![此处输入图片的描述][64]

- 菜单弹出方向：`.dropup`/`.dropright`/`.dropleft`

<!-- 在.btn-group后添加方向类，使触发的下拉菜单向上/右/左打开 -->
<div class="btn-group dropup">
	……
</div>

<!-- 仅当弹出方向有足够空间显示菜单时才能正确弹出 -->

![此处输入图片的描述][65]

- 菜单的位置：`data-offset="……"`/`data-reference="……"`

<div class="dropdown">
    <!-- 在触发按钮中添加data-offset="……" -->
    <button type="button" class="dropdown-toggle" data-toggle="dropdown" data-offset="10,20">Offset </button>
    <div class="dropdown-menu">
      ……
    </div>
</div>

<div class="dropdown">
    <!-- 在触发按钮中添加data-reference="……" -->
    <button type="button" class="dropdown-toggle" data-toggle="dropdown" data-reference="parent">Reference </button>
    <div class="dropdown-menu">
      ……
    </div>
</div>

![此处输入图片的描述][66]

- 分裂式按钮菜单：`.dropdown-toggle-split`

<div class="btn-group">
    <!-- 将按钮的button与下拉菜单触发器的button分开书写 -->
	<button class="btn btn-outline-primary" type="button">按钮下拉菜单</button>
	<button class="btn btn-primary dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown">
    </button>
	<div class="dropdown-menu">
		……
	</div>
</div>

![此处输入图片的描述][67]

- 菜单右对齐：`.dropdown-menu-right`

下拉菜单默认沿着父元素的上沿和左侧被定位为100%宽度，可以改为右对齐

<div class="btn-group">
	<button class="dropdown-toggle" type="button" data-toggle="dropdown">菜单右对齐</button>
	<!-- 向.dropdown-menu添加.dropdown-menu-right使菜单右对齐 -->
	<div class="dropdown-menu dropdown-menu-right">
        ……
    </div>
</div>

<!-- 仅当div左侧有足够空间显示下拉菜单时才能右对齐 -->

![此处输入图片的描述][68]

- 菜单响应式对齐：`data-display="static"` > `.dropdown-menu-sm|md|lg|xl-right` `.dropdown-menu-sm|md|lg|xl-left`

<div class="btn-group">
    <button type="button" class="dropdown-toggle" data-toggle="dropdown" data-display="static">Left-aligned but right aligned when large screen </button>
    <!-- 大屏幕时右对齐 -->
    <div class="dropdown-menu dropdown-menu-lg-right">
        ……
    </div>
</div>

<div class="btn-group">
    <button type="button" class="dropdown-toggle" data-toggle="dropdown" data-display="static">Right-aligned but left aligned when large screen </button>
    <!-- 大屏幕时左对齐 -->
    <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
        ……
    </div>
</div>

- 菜单中的文本/标题/分割线：`.dropdown-item-text`/`.dropdown-header`/`.dropdown-divider`

<div class="btn-group">
	<button class="dropdown-toggle" type="button" data-toggle="dropdown">Dropdown</button>
	<!-- .dropdown-menu下可包含丰富的文本或表单内容 -->
	<div class="dropdown-menu">
	    <!-- 在菜单项之间添加带.dropdown-item-text的文本标签 -->
	    <span class="dropdown-item-text">Dropdown item text</span>
	    <!-- 在菜单项之间添加带.dropdown-header的文本标签 -->
	    <h6 class="dropdown-header">Dropdown header</h6>
	    <a class="dropdown-item" href="#">Action</a>
	    <a class="dropdown-item" href="#">Another action</a>
	    <!-- 在菜单项之间添加带.dropdown-divider的空div -->
		<div class="dropdown-divider"></div>
	    <a class="dropdown-item" href="#">Something else here</a>
	</div>
</div>

![此处输入图片的描述][69]

4、表单

★ 可使用网格系统布局

• 输入表单：`.form-group` > `.form-control`/`.form-control-file|range`

<!-- 以一个form标签开始 -->
<form>
    <!-- 在form下创建带.form-group的块，作为一组 -->
	<div class="form-group">
		<label for="input1">input - .form-control</label>
		<!-- 向input添加.form-control -->
		<input type="text" class="form-control" id="input1">
	</div>
	
	<div class="form-group">
		<label for="select1">select - .form-control</label>
		<!-- 向select添加.form-control -->
		<select class="form-control" id="select1">
			<option>1</option>
			<option>2</option>
			<option>3</option>
		</select>
	</div>
	
	<div class="form-group">
		<label for="textarea1">textarea - .form-control</label>
		<!-- 向textarea添加.form-control -->
		<textarea class="form-control" id="textarea1" rows="3"></textarea>
	</div>
	
	<div class="form-group">
		<label for="file1">input[type="file"] - .form-control-file</label>
		<!-- 向type="file"添加.form-control-file -->
		<input type="file" class="form-control-file" id="file1">
	</div>
	
	<div class="form-group">
		<label for="range1">input[type="range"] - .form-control-range</label>
		<!-- 向type="range"添加.form-control-range -->
		<input type="range" class="form-control-range" id="range1">
	</div>
</form>

![此处输入图片的描述][70]

- 输入框尺寸：`.form-control-sm|lg`

<!-- 在.form-control后添加.form-control-sm|lg -->
<input type="text" class="form-control form-control-sm">

![此处输入图片的描述][71]

- 纯文本：`.form-control-plaintext`

<!-- .form-control-plaintext可清除边框样式，显示纯文本 -->
<input type="text" class="form-control-plaintext" placeholder=".form-control-plaintext" readonly>

![此处输入图片的描述][72]

- 自定义下拉框样式：`.custom-select`

<!-- 向select元素添加.custom-select -->
<select class="custom-select">
    <option selected>.custom-select</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

<!-- select元素无法用br隔开，需用设置上/下外边距 -->

![此处输入图片的描述][73]

- 自定义下拉框尺寸：`.custom-select-sm|lg`

<!-- 在.custom-select后添加.custom-select-sm|lg，可改变尺寸 -->
<select class="custom-select custom-select-sm">
    ……
</select>

![此处输入图片的描述][74]

- 自定义区间条样式：`.custom-range`

<label for="range1">.custom-range</label>
<!-- 向type="range"添加.custom-range -->
<input type="range" id="range1" class="custom-range">

<label for="range2">区间0~5，每步0.5</label>
<input type="range" id="range2" class="custom-range" min="0" max="5" step="0.5">

![此处输入图片的描述][75]

- 帮助文本：`.form-text`

<label for="password1">设置密码：</label>
<input type="password" class="form-control" id="password1">
<!-- 插入内联文本元素，添加.form-text -->
<small class="form-text text-muted" id="password1">您的密码长度必须为8-20个字符，包含字母和数字，且不得包含空格，特殊字符或表情符号。</small>

![此处输入图片的描述][76]

• 自定义文件浏览框：`.custom-file` > `.custom-file-input`+`.custom-file-label`

<!-- 将.form-group替换为.custom-file -->
<div class="custom-file">
    <!-- 将.form-control-file替换为.custom-file-input -->
    <input type="file" id="file1" class="custom-file-input">
    <!-- 向label添加.custom-file-label -->
    <label class="custom-file-label" for="file1">Choose file</label>
</div>

<div class="custom-file">
    <input type="file" id="file2" class="custom-file-input">
    <!-- 添加 data-browse="……" 来修改浏览键的文本 -->
    <label class="custom-file-label" for="file2" data-browse="浏览">选择文件</label>
</div>

![此处输入图片的描述][77]

• 选框表单：`.form-check` > `.form-check-input`+`.form-check-label`

<form>
    <!-- 在form下创建带.form-check的div，作为一组 -->
    <div class="form-check">
        <!-- 向checkbox、radio类型添加.form-check-input -->
        <input type="checkbox" id="checkbox1" class="form-check-input">
        <!-- 向label元素添加.form-check-label -->
        <label class="form-check-label" for="checkbox1">复选框1</label>
    </div>
    <div class="form-check">
        <input type="checkbox" id="checkbox2" class="form-check-input">
        <label class="form-check-label" for="checkbox2">复选框2</label>
    </div>
</form>

![此处输入图片的描述][78]

- 内联选框：`.form-check-inline`

<!-- 每个.form-check后添加.form-check-inline，可将选项排成一行 -->
<div class="form-check form-check-inline">
    ……
</div>
<div class="form-check form-check-inline">
    ……
</div>
……

![此处输入图片的描述][79]

- 无标签选框：`.position-static`

<div class="form-check">
    <!-- 若无标签，需在.form-check-input后添加.position-static -->
    <input type="checkbox" class="form-check-input position-static" id="checkbox1">
</div>
<div class="form-check">
    <input type="radio" class="form-check-input position-static" name="blankRadio" value="radio1">
</div>
……

![此处输入图片的描述][80]

• 自定义选框样式：`.custom-control` `.custom-checkbox|switch|radio` > `.custom-control-input`+`.custom-control-label`

<form>
    <!-- 将.form-check替换为.custom-control加.custom-checkbox -->
    <div class="custom-control custom-checkbox">
        <!-- 将.form-check-input替换为.custom-control-input -->
        <input type="checkbox" id="checkbox1" class="custom-control-input">
        <!-- 将.form-check-label替换为.custom-control-label -->
        <label class="custom-control-label" for="checkbox1">.custom-checkbox</label>
    </div>
    
    <!-- 将.custom-checkbox替换为.custom-switch -->
    <div class="custom-control custom-switch">
        <input type="checkbox" id="checkbox2" class="custom-control-input">
        <label class="custom-control-label" for="checkbox2">.custom-switch</label>
    </div>
</form>

<form>
    <!-- 将.form-check替换为.custom-control，并添加.custom-radio -->
    <div class="custom-control custom-radio">
        <input type="radio" name="group" id="radio1" class="custom-control-input">
        <label class="custom-control-label" for="radio1">.custom-radio 1</label>
    </div>
    <div class="custom-control custom-radio">
        <input type="radio" name="group" id="radio2" class="custom-control-input">
        <label class="custom-control-label" for="radio2">.custom-radio 2</label>
    </div>
</form>

![此处输入图片的描述][81]

- 内联自定义选框：`.custom-control-inline`

<div class="custom-control custom-radio custom-control-inline">
    ……
</div>
<div class="custom-control custom-radio custom-control-inline">
    ……
</div>
……

![此处输入图片的描述][82]

• 表单网格：`.form-row` > `.col-*`/`.form-group|check` > `.form-control`

<form>
    <!-- 在form下创建.form-row网格系统 -->
    <div class="form-row">
        <div class="col">
            <input type="text" class="form-control" placeholder="First name">
        </div>
        <div class="col">
            <input type="text" class="form-control" placeholder="Last name">
        </div>
    </div>
    
    <div class="form-row">
        <!-- 在.col-*后添加.form-group|check创建表单分组 -->
        <div class="col-8 form-group">
            <label for="inputEmail">Email:</label>
            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="col-4 form-group">
            <label for="inputPassword">Password:</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
    </div>
</form>

![此处输入图片的描述][83]

- 标签对齐：`.col-form-label`

使用网格创建水平表单时，使标签与相关的表单控件垂直居中

<div class="form-group row">
    <!-- 在label的.col-*后添加.col-form-label -->
    <label class="col-2 col-form-label" for="text1">lable: </label>
    <div class="col-10">
        <input type="text" id="text1" class="form-control">
    </div>
</div>
    
<fieldset class="form-group">
    <div class="row">
        <!-- 在legend的.col-*后添加.col-form-label -->
        <legend class="col-3 col-form-label">legend: </legend>
        <div class="col-9">
            <label class="col-form-label" for="text2">lable: </label>
            <input type="text" id="text2" class="form-control">
        </div>
    </div>
</fieldset>

![此处输入图片的描述][84]

- 标签尺寸：`.col-form-label-sm|lg`

<div class="form-group row">
    <!-- 在.col-form-label后添加.col-form-label-sm|lg以配合控件尺寸 -->
    <label class="col-2 col-form-label col-form-label-sm" for="text1">label</label>
    <div class="col-10">
        <input type="text" id="text1" class="form-control form-control-sm">
    </div>
 </div>

![此处输入图片的描述][85]

C4、表单项

• 内联表单：`.form-inline`

<!-- 向form添加.form-inline，使表单内所有元素排成一行 -->
<form class="form-inline">
    ……
</form>

![此处输入图片的描述][86]

• 表单验证：`.was-validated` > `required`+`.invalid-feedback`

<!-- 向form添加.was-validated，默认表单已验证（未通过） -->
<form class="was-validated">
    <div class="form-group">
        <label for="text1">输入框：</label>
        <!-- 向表单控件添加required属性，关联为必填项 -->
        <input type="text" id="text1" class="form-control" required>
        <!-- 控件后插入.invalid-feedback，设置验证未通过时的提示文本 -->
        <div class="invalid-feedback">必填项，请输入内容！</div>
    </div>
    
    <div class="form-check">
        <input type="radio" name="group" id="radio1" class="form-check-input" required>
        <label class="form-check-label" for="radio1">单选框1</label>
    </div>
    <div class="form-check">
        <input type="radio" name="group" id="radio2" class="form-check-input" required>
        <label class="form-check-label" for="radio2">单选框2</label>
        <!-- 单选框组的提示文本写在最后一项结尾 -->
        <div class="invalid-feedback">必填项，请选择一项！</div>
    </div>
    
    <div class="form-group">
        <select class="form-control" required>
            <!-- 需预设一个非选项，向第一个option添加value="" -->
            <option value="">预显示文本（非选项）</option>
            <option value="1">选项1</option>
            <option value="2">选项2</option>
        </select>
        <div class="invalid-feedback">必填项，请选择一项！</div>
    </div>
</form>

![此处输入图片的描述][87]

- 服务器验证：`.is-valid|invalid`+`.valid|invalid-feedback`

<label for="text1">请输入：</label>
<!-- 在.form-control后添加.is-valid，预设验证通过 -->
<input type="text" id="text1" class="form-control is-valid" required>
<!-- .valid-feedback设置验证通过时的提示文本 -->
<div class="valid-feedback">验证通过！</div>

<label for="text2">请输入：</label>
<!-- 在.form-control后添加.is-invalid，预设验证未通过 -->
<input type="text" id="text2" class="form-control is-invalid" required>
<!-- .invalid-feedback设置验证未通过时的提示文本 -->
<div class="invalid-feedback">验证未通过！</div>

![此处输入图片的描述][88]

5、输入框组：`.input-group` > `.input-group-prepend|append` > `.input-group-text`

<!-- 以一个带.input-group的div开始，作为一组 -->
<div class="input-group">
    <!-- 创建.input-group-prepend，显示为前缀区域 -->
    <div class="input-group-prepend">
        <!-- 在带.input-group-text的span里设置文本内容 -->
        <span class="input-group-text">文本前缀</span>
    </div>
    <input type="text" class="form-control">
</div>

<div class="input-group">
    <input type="text" class="form-control">
    <!-- 创建.input-group-append，显示为后缀区域 -->
    <div class="input-group-append">
        <div class="input-group-text">
            <!-- 在.input-group-text里嵌入其他元素 -->
            <input type="checkbox">选框后缀
        </div>
    </div>
</div>

<!-- .input-group下可内联多个控件，前后缀中可内联多项内容 -->

![此处输入图片的描述][89]
![此处输入图片的描述][90]

• 输入组的尺寸：`.input-group-lg|sm`

<!-- 在.input-group后添加.input-group-lg|sm -->
<div class="input-group input-group-lg">
    ……
</div>

![此处输入图片的描述][91]

6、超大屏幕：`.jumbotron`

创建一个大的灰色背景框，里面可以设置HTML标签等一些特殊的内容和信息

<div class="jumbotron">
    ……
</div>

![此处输入图片的描述][92]

• 全屏幕：`.jumbotron-fluid` > `.container`/`.container-fluid`

创建一个没有圆角的全屏幕

<!-- 在.jumbotron后添加.jumbotron-fluid -->
<div class="jumbotron jumbotron-fluid">
    <!-- 将内容包裹在一个带容器类的div里 -->
    <div class="container">
        ……
    </div>
</div>

![此处输入图片的描述][93]

7、模态框：`data-toggle="modal"` `data-target="#……"` + ( `.modal` `id="……"` `tabindex="-1"` > `.modal-dialog` > `.modal-content` > `.modal-header`+`.modal-body`+`.modal-footer` )

★ 可使用网格系统布局

<!-- 触发按钮，关键插件：data-toggle="modal" data-target="#……" -->
<button data-toggle="modal" data-target="#modal1">点击显示对话框</button>
<!-- .modal创建模态框组件，标记id，并添加tabindex="-1" -->
<div class="modal" id="modal1" tabindex="-1">
    <!-- .modal-dialog创建对话框 -->
    <div class="modal-dialog">
        <!-- .modal-content设置对话框内容 -->
        <div class="modal-content">
            <!-- .modal-header为页眉部分 -->
            <div class="modal-header">这是页眉</div>
            <!-- .modal-body为主体部分（必需项） -->
            <div class="modal-body">这是主体内容</div>
            <!-- .modal-footer为页脚部分，内容自动右对齐 -->
            <div class="modal-footer">这是页脚</div>
        </div>
    </div>
</div>

<!-- 默认点击页面其他位置可关闭对话框，向触发器添加data-backdrop="static"可禁止这一动作 -->

![此处输入图片的描述][94]

• 对话框可滚动：`.modal-dialog-scrollable`

<div class="modal" id="modal2" tabindex="-1">
    <!-- 在.modal-dialog后添加.modal-dialog-scrollable -->
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-body">
                ……
            </div>
        </div>
    </div>
</div>

![此处输入图片的描述][95]

• 对话框居中显示：`.modal-dialog-centered`

<div class="modal" id="modal3" tabindex="-1">
    <!-- 在.modal-dialog后添加.modal-dialog-centered -->
    <div class="modal-dialog modal-dialog-centered">
        ……
    </div>
</div>

![此处输入图片的描述][96]

• 对话框尺寸：`.modal-sm|lg|xl`

	Small	Default	Large	Extra large
Class	`.modal-sm`		`.modal-lg`	`.modal-xl`
Max-width	300px	500px	800px	1140px

<div class="modal" id="modal3" tabindex="-1">
    <!-- 在.modal-dialog后添加.modal-sm|lg|xl -->
    <div class="modal-dialog modal-sm">
        ……
    </div>
</div>

![此处输入图片的描述][97]

• 页眉与页脚

- 对话框标题：`.modal-title`

<div class="modal-header">
    <!-- 在.modal-header下创建.modal-title文本 -->
    <h5 class="modal-title">这是标题</h5>
</div>

![此处输入图片的描述][98]

- 关闭对话框：`data-dismiss="modal"`

<div class="modal-content">
    <div class="modal-header">
        <!-- 在.modal-header下创建关闭按钮，可使用.close小工具 -->
        <button type="button" class="close" data-dismiss="modal">
            <span>&times;</span>
        </button>
    </div>
    
    <div class="modal-body">
        ……
    </div>
    
    <div class="modal-footer">
        <!-- 在.modal-footer下创建关闭按钮 -->
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
    </div>
</div>

<!-- 默认点击页面其他位置可关闭对话框，向触发器添加data-backdrop="static"可禁止这一动作 -->

![此处输入图片的描述][99]

8、导航列表

• 基础导航：`.nav` > `.nav-link`

<!-- 以一个带.nav的nav标签开始 -->
<nav class="nav">
    <!-- 直接在nav下创建导航链接.nav-link -->
	<a href="#" class="nav-link">导航链接1</a>
	<a href="#" class="nav-link">导航链接2</a>
	……
</nav>

![此处输入图片的描述][100]

• 项目导航：`.nav` > `.nav-item` > `.nav-link`

<!-- 以一个带.nav的ul/ol标签开始 -->
<ul class="nav">
    <!-- 向li添加.nav-item，创建导航列表项 -->
	<li class="nav-item">
	    <!-- 在li下创建导航链接.nav-link -->
	    <a href="#" class="nav-link">导航链接1</a>
	</li>
	<li class="nav-item">
	    <a href="#" class="nav-link">导航链接2</a>
	</li>
	……
</ul>

<!-- 若导航项的顺序很重要，建议使用ul/ol标签 -->

![此处输入图片的描述][101]

- 导航样式：`.nav-tabs|pills`

<!-- 在.nav后添加.nav-tabs|pills，可创建标签式/胶囊式导航 -->
<ul class="nav nav-tabs">
	<li class="nav-item">
	    <!-- 当前项用.active标记 -->
	    <a href="#" class="nav-link active">导航链接1</a>
	</li>
	<li class="nav-item">
	    <a href="#" class="nav-link">导航链接2</a>
	</li>
	……
</ul>

![此处输入图片的描述][102]
![此处输入图片的描述][103]

- 排列方式：`.nav-fill|justified`

<!-- 在.nav后添加.nav-fill，使导航项填充排列，每项宽度自适应内容 -->
<ul class="nav nav-pills nav-fill">
	<li class="nav-item"><a href="#" class="nav-link active">导航链接1</a></li>
	<li class="nav-item"><a href="#" class="nav-link">导航链接2</a></li>
	……
</ul>

<!-- 在.nav后添加.nav-justified，使导航项等宽排列，每项宽度均等 -->
<ul class="nav nav-pills nav-justified">
	<li class="nav-item"><a href="#" class="nav-link active">导航链接1</a></li>
	<li class="nav-item"><a href="#" class="nav-link">导航链接2</a></li>
	……
</ul>

<!-- 必须要有.nav-item才能使排列生效 -->

![此处输入图片的描述][104]
![此处输入图片的描述][105]

- 带下拉菜单的导航：`.nav-item` `.dropdown` > `.nav-link` `.dropdown-toggle`

<ul class="nav">
	<li class="nav-item"><a href="#" class="nav-link active">Active</a></li>
	<!-- 在.nav-item后添加.dropdown，创建下拉菜单组件 -->
	<li class="nav-item dropdown">
	    <!-- 在.nav-link后添加.dropdown-toggle、data-toggle="dropdown" -->
	    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown</a>
	    <!-- 创建下拉菜单 -->
	    <div class="dropdown-menu">
	        ……
	    </div>
	</li>
	<li class="nav-item"><a href="#" class="nav-link">Link</a></li>
	……
</ul>

![此处输入图片的描述][106]

• 选项卡切换

★ 可使用网格系统布局

- 标签式选项卡切换：( `.nav` `.nav-tabs` > `.nav-item` > `.nav-link` `data-toggle="tab"` `href="#……"` ) + ( `.tab-content` > `.tab-pane` `id="……"` )

<ul class="nav nav-tabs">
    <!-- nav-tabs下，向a添加data-toggle="tab"，绑定对应页面id -->
	<li class="nav-item"><a href="#tab1" class="nav-link active" data-toggle="tab">Tab 1</a></li>
	<li class="nav-item"><a href="#tab2" class="nav-link" data-toggle="tab">Tab 2</a></li>
	……
</ul>

<!-- 所有页面需包裹在.tab-content里 -->
<div class="tab-content">
    <!-- .tab-pane创建页面，标记唯一id，.active标记当前页面 -->
	<div class="tab-pane active" id="tab1">这是Tab 1的页面内容</div>
	<div class="tab-pane" id="tab2">这是Tab 2的页面内容</div>
	……
</div>

<!-- nav标签的标签式选项卡切换样式 -->
<nav>
    <div class="nav nav-tabs">
        <a href="#tab1" class="nav-item nav-link active"data-toggle="tab">Tab 1</a>
        <a href="#tab2" class="nav-item nav-link" data-toggle="tab">Tab 2</a>
        ……
    </div>
</nav>
<div class="tab-content">
	<div class="tab-pane active" id="tab1">这是Tab 1的页面内容</div>
	<div class="tab-pane" id="tab2">这是Tab 2的页面内容</div>
	……
</div>

![此处输入图片的描述][107]

- 胶囊式选项卡切换：( `.nav` `.nav-pills` > `.nav-item` > `.nav-link` `data-toggle="pill"` `href="#……"` ) + ( `.tab-content` > `.tab-pane` `id="……"` )

<ul class="nav nav-pills">
    <!-- nav-pills下，向a添加data-toggle="pill"，绑定对应页面id -->
	<li class="nav-item"><a href="#tab1" class="nav-link active" data-toggle="pill">Tab 1</a></li>
	<li class="nav-item"><a href="#tab2" class="nav-link" data-toggle="pill">Tab 2</a></li>
	……
</ul>

<div class="tab-content">
	<div class="tab-pane active" id="tab1">这是Tab 1的页面内容</div>
	<div class="tab-pane" id="tab2">这是Tab 2的页面内容</div>
	……
</div>

<!-- nav标签的胶囊式选项卡切换样式 -->
<nav>
    <div class="nav nav-pills">
        <a href="#tab1" class="nav-item nav-link active" data-toggle="pill">Tab 1</a>
        <a href="#tab2" class="nav-item nav-link" data-toggle="pill">Tab 2</a>
        ……
    </div>
</nav>
<div class="tab-content">
	<div class="tab-pane active" id="tab1">这是Tab 1的页面内容</div>
	<div class="tab-pane" id="tab2">这是Tab 2的页面内容</div>
	……
</div>

![此处输入图片的描述][108]

9、导航栏：`.navbar`

• 折叠导航栏： ( `.navbar-toggler` `data-toggle="collapse"` `data-target="#……"` > `.navbar-toggler-icon` )+( `.collapse` `.navbar-collapse` `id="……"` > `.navbar-nav` > `.nav-item` > `.nav-link` )

<!-- 以一个带.navbar的nav标签开始 -->
<nav class="navbar">
	<!-- 创建一个带.navbar-toggler、data-toggle="collapse"、data-target="#……"的折叠按钮 -->
	<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#collapseDiv">
		<!-- 用带.navbar-toggler-icon的span内置按钮样式图标 -->
		<span class="navbar-toggler-icon"></span>
	</button>
	
	<!-- 创建折叠面板，包裹所有折叠内容 -->
	<div class="collapse navbar-collapse" id="collapseDiv">
		<!-- 创建导航列表 -->
		<ul class="navbar-nav">
			<li class="nav-item active"><a href="#" class="nav-link">导航链接1</a></li>
			<li class="nav-item"><a href="#" class="nav-link">导航链接2</a></li>
			……
		</ul>
		<!-- 导航列表之外的其他元素 -->
		<form class="form-inline">……</form>
		……
	</div>
</nav>

<!-- 此外，折叠杆中的id属性也可匹配网页其他内容 -->

<div class="collapse navbar-collapse" id="collapseDiv">
	<!-- 也可不使用列表标签创建导航菜单，避免格式困扰 -->
	<div class="navbar-nav">
		<a href="#" class="nav-item nav-link active">导航链接1</a>
		<a href="#" class="nav-item nav-link">导航链接2</a>
		……
	</div>
	……
</div>

![此处输入图片的描述][109]

- 品牌标志：`.navbar-brand`

<nav class="navbar">
    <!-- 在nav下添加带.navbar-brand的a标签，生成品牌链接 -->
	<a href="#" class="navbar-brand">Brand</a>
</nav>

<nav class="navbar">
    <!-- 使用span生成品牌文本 -->
	<span class="navbar-brand">Brand</span>
</nav>

<nav class="navbar">
	<a href="#" class="navbar-brand">
	    <!-- 在.navbar-brand中插入图片作为品牌logo，需调整尺寸 -->
	    <img src="/image.jpg" height="30">
	</a>
</nav>

<nav class="navbar">
	<a href="#" class="navbar-brand">
	    <!-- 添加.align-top使图片与文字对齐 -->
	    <img src="/image.jpg" height="30" class="align-top"> Brand
	</a>
</nav>

![此处输入图片的描述][110]

- 导航栏中的文本：`.navbar-text`

导航栏上的非链接文本，保证水平对齐，颜色与内边距一样

<nav class="navbar">
    <!-- 在nav下添加带.navbar-text的span -->
    <span class="navbar-text">Navbar text</span>
</nav>

![此处输入图片的描述][111]

• 响应式导航栏：`.navbar-expand-sm|md|lg|xl`

<!-- 在.navbar后添加.navbar-expand-*，小于此尺寸时导航栏才折叠 -->
<nav class="navbar navbar-expand-lg">
    <!-- 除折叠按钮外，nav下所有元素默认完整显示，按顺序横向排列 -->
    <a href="#" class="navbar-brand">Brand</a>
    <span class="navbar-text mr-3">Navbar text</span>
	<!-- 默认隐藏此按钮，仅在折叠时可见 -->
	<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#collapseDiv">……</button>
	<!-- 菜单内容默认两端对齐显示，仅在折叠时收起，竖向排列 -->
	<div class="collapse navbar-collapse" id="collapseDiv">
		<ul class="navbar-nav">……</ul>
		<span class="navbar-text">Navbar text</span>
	</div>
</nav>

![此处输入图片的描述][112]

• 导航栏配色：`.navbar-light|dark`

<!-- 在.navbar后添加.navbar-light|dark，一般搭配.bg-*背景色 -->
<nav class="navbar bg-light navbar-light">
    ……
</nav>

<!-- 浅色背景搭配.navbar-light，深色背景搭配.navbar-dark -->

![此处输入图片的描述][113]

• 定位方式

- 固定在顶部：`.fixed-top`

/* 需为body设置padding-top大于导航栏高度，至少50px */
body {padding-top: 70px;}

<!-- 在.navbar后添加.fixed-top，使导航栏固定在窗口顶部 -->
<nav class="navbar fixed-top">
    ……
</nav>
<div>需为body设置padding-top，页面内容才不会被导航栏遮挡。</div>

![此处输入图片的描述][114]

- 固定在底部：`.fixed-bottom`

/* 需为body设置padding-bottom大于导航栏高度，至少50px */
body {padding-bottom: 70px;}

<!-- 在.navbar后添加.fixed-bottom，使导航栏固定在窗口顶部 -->
<nav class="navbar fixed-bottom">
    ……
</nav>
<div>需为body设置padding-bottom，页面内容才不会被导航栏遮挡。</div>

![此处输入图片的描述][115]

- 粘黏在顶部：`.sticky-top`

<!-- 在.navbar后添加.sticky-top，使导航栏粘黏在窗口顶部 -->
<nav class="navbar sticky-top">
    ……
</nav>

![此处输入图片的描述][116]

10、弹出框：`data-toggle="popover"` `data-content="……"`

鼠标点击到元素后，在旁边显示弹出框，需再次点击该元素才能关闭

※ 要使弹出框生效，需在 jQuery 里初始化所有控件

$(function () {
    $('[data-toggle="popover"]').popover()
})

<!-- 向button/a标签添加data-toggle="popover"、data-content="……" -->
<button type="button" data-toggle="popover" data-content="这是弹出框中的文本内容！">点击显示弹出框</button>

![此处输入图片的描述][117]

• 弹出框中的标题：`title="……"`

<button type="button" data-toggle="popover" title="这是标题" data-content="这是弹出框中的文本内容！">点击显示弹出框</button>

![此处输入图片的描述][118]

• 指定弹出方向：`data-placement="top|right|bottom|left"`

<button type="button" data-toggle="popover" data-content="这是弹出框中的文本内容！" data-placement="top">向上弹出框</button>

<!-- 仅当元素与页面边框间距足够时，该方向才能弹出，否则反方向弹出 -->

![此处输入图片的描述][119]

• focus弹出框：`data-trigger="focus"` `tabindex="0"`

点击元素显示弹出框后，再点击该元素之外的其他任意位置都可以关闭弹出框

<!-- 必须使用a标签，再添加data-trigger="focus"、tabindex="0" -->
<a class="btn btn-primary" data-toggle="popover" data-content="这是弹出框中的文本内容！" data-trigger="focus" tabindex="0">点击显示弹出框</a>

![此处输入图片的描述][120]

• hover弹出框：`data-trigger="hover"`

显示弹出框后，再点击除了该元素之外的其他任意位置都可以关闭弹出框

<!-- 必须使用a标签，再添加data-trigger="hover" -->
<a data-toggle="popover" data-content="这是弹出框中的文本内容！" data-trigger="hover">鼠标移到a上显示弹出框，移走消失</a>

![此处输入图片的描述][121]

Bootstrap4 通用

1、边框

• 添加边框：`.border`/`.border-top|right|bottom|left`

<div class="border"></div>
<div class="border-top"></div>

![此处输入图片的描述][122]

• 清除边框：`.border-0`/`.border-top|right|bottom|left-0`

<div class="border-0"></div>
<div class="border-top-0"></div>

![此处输入图片的描述][123]

• 边框颜色：`.border-primary|secondary|success|danger|warning|info|light|dark|white`

<div class="border border-primary"></div>

![此处输入图片的描述][124]
![此处输入图片的描述][125]

• 边框圆角：`.rounded`/`.rounded-top|right|bottom|left|circle|pill|0`

<div class="rounded"></div>
<div class="rounded-top"></div>

![此处输入图片的描述][126]

• 圆角尺寸：`.rounded-sm|lg`

<div class="rounded-sm"></div>

![此处输入图片的描述][127]

2、颜色

• 文本颜色：`.text-primary|secondary|success|danger|warning|info|light|dark|body|muted|white|black-50|white-50`

<p class="text-primary">.text-primary</p>

![此处输入图片的描述][128]

• 背景颜色：`.bg-primary|secondary|success|danger|warning|info|light|dark|white|transparent`

<p class="bg-primary">.bg-primary</p>

![此处输入图片的描述][129]

3、显示

• 元素框的类型：`.d-②-①`

d display
① none 不显示 inline 内联元素 inline-block 行内块元素 block 块元素 table 块级表格元素 table-cell 表格单元格元素 table-row 表格行元素 flex 弹性布局块元素 inline-flex 弹性布局内联元素
② sm ≥576px md ≥768px lg ≥992px xl ≥1200px

Screen Size	Class
Hidden on all	`.d-none`
Hidden only on xs	`.d-none` `.d-sm-block`
Hidden only on sm	`.d-sm-none` `.d-md-block`
Hidden only on md	`.d-md-none` `.d-lg-block`
Hidden only on lg	`.d-lg-none` `.d-xl-block`
Hidden only on xl	`.d-xl-none`
Visible on all	`.d-block`
Visible only on xs	`.d-block` `.d-sm-none`
Visible only on sm	`.d-none` `.d-sm-block` `.d-md-none`
Visible only on md	`.d-none` `.d-md-block` `.d-lg-none`
Visible only on lg	`.d-none` `.d-lg-block` `.d-xl-none`
Visible only on xl	`.d-none` `.d-xl-block`

• 打印显示：`.d-print-①`

① none 不显示 inline 内联元素 inline-block 行内块元素 block 块元素 table 块级表格元素 table-cell 表格单元格元素 table-row 表格行元素 flex 弹性布局块元素 inline-flex 弹性布局内联元素

4、弹性布局：`.d-①-flex`/`.d-①-inline-flex`

① sm ≥576px md ≥768px lg ≥992px xl ≥1200px

• 项目在容器内的水平方向：`.flex-①-row`/`.flex-①-row-reverse`

① sm ≥576px md ≥768px lg ≥992px xl ≥1200px

<div class="d-flex flex-row">……</div>
<div class="d-flex flex-row-reverse">……</div>

![此处输入图片的描述][130]

• 项目在容器内的垂直方向：`.flex-①-column`/`.flex-①-column-reverse`

① sm ≥576px md ≥768px lg ≥992px xl ≥1200px

<div class="d-flex flex-column">……</div>
<div class="d-flex flex-column-reverse">……</div>

![此处输入图片的描述][131]

• 项目在容器内的水平对齐方式：`.justify-content-①-start|end|center|between|around`

① sm ≥576px md ≥768px lg ≥992px xl ≥1200px

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

![此处输入图片的描述][132]

• 项目在容器内的垂直对齐方式：`.align-items-①-start|end|center|baseline|stretch`

① sm ≥576px md ≥768px lg ≥992px xl ≥1200px

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

![此处输入图片的描述][133]

• 项目在容器内是否溢出/换行：`.flex-①-nowrap|wrap`/`.flex-①-wrap-reverse`

① sm ≥576px md ≥768px lg ≥992px xl ≥1200px

<div class="d-flex flex-nowrap">……</div>
<div class="d-flex flex-wrap">……</div>
<div class="d-flex flex-wrap-reverse">……</div>

![此处输入图片的描述][134]
![此处输入图片的描述][135]
![此处输入图片的描述][136]

• 行在容器内的垂直对齐方式：`.align-content-①-start|end|center|between|around|stretch`

① sm ≥576px md ≥768px lg ≥992px xl ≥1200px

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

![此处输入图片的描述][137]
![此处输入图片的描述][138]
![此处输入图片的描述][139]
![此处输入图片的描述][140]
![此处输入图片的描述][141]
![此处输入图片的描述][142]

• 单个项目的水平对齐方式：`.flex-①-fill`/`.flex-①-grow|shrink-0|1`

① sm ≥576px md ≥768px lg ≥992px xl ≥1200px

<div class="d-flex">
  <div class="flex-fill">Flex item</div>
  <div class="flex-grow-1">Flex item</div>
  <div class="flex-shrink-1">Flex item</div>
</div>

![此处输入图片的描述][143]
![此处输入图片的描述][144]
![此处输入图片的描述][145]

• 单个项目的垂直对齐方式：`.align-self-①-start|end|center|baseline|stretch`

① sm ≥576px md ≥768px lg ≥992px xl ≥1200px

<div class="d-flex">
  <div class="align-self-start">Aligned flex item</div>
</div>

![此处输入图片的描述][146]

• 单个项目在容器内的顺序：`.order-①-*`

① sm ≥576px md ≥768px lg ≥992px xl ≥1200px

<div class="d-flex">
  <div class="order-3">First flex item</div>
  <div class="order-2">Second flex item</div>
  <div class="order-1">Third flex item</div>
</div>

![此处输入图片的描述][147]

5、浮动：`.float-②-①`

① left 向左浮动 right 向右浮动 none 不浮动
② sm ≥576px md ≥768px lg ≥992px xl ≥1200px

6、尺寸：`.②-w-①`/`.②-h-①`

w width    h height
① 25 25%    50 50%    75 75%    100 100%    auto 适应内容
② m max    v viewport    min min

7、间距：`.m①-③-②`/`.p①-③-②`

m margin    p padding
① t top    r right    b bottom    l left    x X轴方向    y Y轴方向
② auto 适应内容    0 清除间距    1 0.25rem    2 0.5rem    3 1rem    4 1.5rem    5 3rem
③ sm ≥576px    md ≥768px    lg ≥992px    xl ≥1200px

8、文本

• 文本水平对齐方式：`.text-justify|left|center|right`

<p class="text-justify">左起两端对齐</p>
<p class="text-left">左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-right">右对齐</p>

![此处输入图片的描述][148]

• 文本换行/溢出/省略：`.text-wrap|nowrap|truncate`/`.text-break`

<p class="bg-secondary w-25">默认的中文文本不会溢出，换行显示；英文文本会溢出，一行显示</p>
<p class="bg-primary w-25 text-wrap">.text-wrap的中文文本不会溢出，换行显示；英文文本会溢出，一行显示</p>
<p class="bg-success w-25 text-nowrap">.text-nowrap的文本会溢出，一行显示</p>
<p class="bg-warning w-25 text-truncate">.text-truncate的文本不会溢出，不换行，溢出部分省略为...</p>
<p class="bg-danger w-25 text-break">.text-break的文本不会溢出，换行显示</p>

![此处输入图片的描述][149]

• 字母大小写转换：`.text-uppercase|lowercase|capitalize`

<p class="text-lowercase">全小写 text-lowercase</p>
<p class="text-uppercase">全大写 text-uppercase</p>      
<p class="text-capitalize">首字母大写 text-capitalize</p>

![此处输入图片的描述][150]

• 文本粗细与斜体：`.font-weight-bolder|bold|normal|light|lighter` `.font-italic`

<p class="font-weight-normal">普通文本 .font-weight-normal</p>
<p class="font-weight-bold">粗体文本 .font-weight-bold</p>
<p class="font-weight-bolder">更粗文本 .font-weight-bolder</p>
<p class="font-weight-light">细体文本 .font-weight-light</p>
<p class="font-weight-lighter">更细文本 .font-weight-lighter</p>
<p class="font-italic">斜体文本 .font-italic</p>

<!-- .font-weight-*和.font-italic可搭配使用 -->

![此处输入图片的描述][151]

• 等宽英文字体：`.text-monospace`

<p class="text-monospace">This is in monospace</p>

![此处输入图片的描述][152]

• 文本从父继承颜色：`.text-reset`

<p class="text-muted">
    <a href="#">链接1：默认颜色</a>
    <a href="#" class="text-reset">链接2：.text-reset从父继承颜色</a>
</p>

![此处输入图片的描述][153]

• 清除链接下划线：`.text-decoration-none`

<a href="#" class="text-decoration-none">没有下划线的链接文本</a>

![此处输入图片的描述][154]

9、可见：`.visible`/`.invisible`

visible 可见占位 { visibility: visible !important; }
invisible 不可见占位 { visibility: hidden !important; }

shawxlee

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【学习笔记】Bootstrap4 - 用于HTML、CSS和JS开发的开源工具包

Bootstrap4 布局1、移动设备优先为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签：<!DOCTYPE html><html><head>  <meta charset="utf-8"> <meta name="viewport" content="w
复制链接

扫一扫