bootstrap4 cdn(Bootstrap4表格—图像形状—Jumbotron—信息提示框文档（一）章)
xiaoweiBootstrap4 教程
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。
谁适合阅读本教程？
只要您具备 HTML 和 CSS 的基础知识，您就可以阅读本教程，进而开发出自己的网站。在您学习完本教程后，您即可达到使用 Bootstrap 开发 Web 项目的中等水平。
阅读本教程前，您需要了解的知识：
在您开始阅读本教程之前，您必须具备 HTML 、 CSS 和 JavaScript 的基础知识。如果您还不了解这些概念，那么建议您先阅读我们的这些教程:
-
HTML 教程
-
CSS 教程
-
JavaScript 教程
Bootstrap4 实例
Boostrap4 与 Bootstrap3
Boostrap4 是 Bootstrap 的最新版本，与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了40%以上。
Boostrap4 放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。如果对于其中需要用到以前的浏览器，那么请使用 Bootstrap3。
Bootstrap4 安装使用
我们可以通过以下两种方式来安装 Bootstrap4：
-
使用 Bootstrap 4 CDN。
-
从官网 getbootstrap.com 下载 Bootstrap 4。
Bootstrap 4 CDN
国内推荐使用 BootCDN 上的库：
Bootstrap4 CDN
<!– 新 Bootstrap4 核心 CSS 文件 –><linkrel=\\\”stylesheet\\\”href=\\\”https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css\\\”><!– jQuery文件。务必在bootstrap.min.js 之前引入 –><scriptsrc=\\\”https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js\\\”></script><!– popper.min.js 用于弹窗、提示、下拉菜单 –><scriptsrc=\\\”https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js\\\”></script><!– 最新的 Bootstrap4 核心 JavaScript 文件 –><scriptsrc=\\\”https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js\\\”></script>
此外，你还可以使用以下的 CDN 服务：
-
国内推荐使用 : https://www.staticfile.org/
-
国际推荐使用：https://cdnjs.com/
下载 Bootstrap 4
你可以去官网 https://getbootstrap.com/ 下载 Bootstrap4 资源库。
注：此外你还可以通过包的管理工具 npm、 gem、 composer 等来安装：
npm install bootstrap@4.0.0-beta.2gem \’bootstrap\’, \’~> 4.0.0.beta2\’composer require twbs/bootstrap:4.0.0-beta.2
创建第一个 Bootstrap 4 页面
1、添加 HTML5 doctype
Bootstrap 要求使用 HTML5 文件类型，所以需要添加 HTML5 doctype 声明。
HTML5 doctype 在文档头部声明，并设置对应编码:
<!DOCTYPEhtml><html><head><metacharset=\\\”utf-8\\\”></head></html>
移动设备优先
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：
<meta name=\\\”viewport\\\” content=\\\”width=device-width, initial-scale=1, shrink-to-fit=no\\\”>
width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。
容器类
Bootstrap 4 需要一个容器元素来包裹网站的内容。
我们可以使用以下两个容器类：
-
.container 类用于固定宽度并支持响应式布局的容器。
-
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
两个 Bootstrap 4 页面
Bootstrap4 .container 实例
<divclass=\\\”container\\\”><h1>我的第一个 Bootstrap 页面</h1><p>这是一些文本。</p></div>
尝试一下 »
以下实例展示了占据全部视口（viewport）的容器。
Bootstrap4 .container-fluid 实例
<divclass=\\\”container-fluid\\\”><h1>我的第一个 Bootstrap 页面</h1><p>使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。</p></div>
尝试一下 »
Bootstrap4 网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
我们也可以根据自己的需要，定义列数：
111111111111444
48
66
12
Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。
网格类
Bootstrap 4 网格系统有以下 5 个类:
-
.col- 针对所有设备
-
.col-sm- 平板 – 屏幕宽度等于或大于 576px
-
.col-md- 桌面显示器 – 屏幕宽度等于或大于 768px)
-
.col-lg- 大桌面显示器 – 屏幕宽度等于或大于 992px)
-
.col-xl- 超大桌面显示器 – 屏幕宽度等于或大于 1200px)
下表总结了 Bootstrap 网格系统如何跨多个设备工作：
<576px
≥576px
≥768px
≥992px
≥1200px
None (auto)540px720px960px1140px
.col-.col-sm-.col-md-.col-lg-.col-xl-
12
30px （一个列的每边分别 15px）
Yes
Yes
以下各个类可以一起使用，从而创建更灵活的页面布局。
Bootstrap 4 网格的基本结构
以下代码为 Bootstrap 4 网格的基本结构:
Bootstrap4 网格基本结构
<!– 第一个例子：控制列的宽度及在不同的设备上如何显示 –><divclass=\\\”row\\\”><divclass=\\\”col-*-*\\\”></div></div><divclass=\\\”row\\\”><divclass=\\\”col-*-*\\\”></div><divclass=\\\”col-*-*\\\”></div><divclass=\\\”col-*-*\\\”></div></div><!– 第二个例子：或让 Bootstrap 者自动处理布局 –><divclass=\\\”row\\\”><divclass=\\\”col\\\”></div><divclass=\\\”col\\\”></div><divclass=\\\”col\\\”></div></div>
第一个例子：创建一行(<div class=\\\”row\\\”>)。然后， 添加是需要的列( .col-*-* 类中设置)。 第一个星号 (*) 表示响应的设备: sm, md, lg 或 xl, 第二个星号 (*) 表示一个数字, 同一行的数字相加为 12。
第二个例子: 不在每个 col 上添加数字，让 bootstrap 自动处理布局，同一行的每个列宽度相等： 两个 \\\”col\\\” ，每个就为 50% 的宽度。三个 \\\”col\\\”每个就为 33.33% 的宽度，四个 \\\”col\\\”每个就为 25% 的宽度，以此类推。同样，你可以使用 .col-sm|md|lg|xl 来设置列的响应规则。
接下来我们可以看看实例。
创建相等宽度的列，Bootstrap 自动布局
实例
<divclass=\\\”row\\\”><divclass=\\\”col\\\”>.col</div><divclass=\\\”col\\\”>.col</div><divclass=\\\”col\\\”>.col</div></div>
尝试一下 »
等宽响应式列
以下实例演示了如何在平板及更大屏幕上创建等宽度的响应式列。 在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版:
实例
<divclass=\\\”col-sm-3\\\”>.col-sm-3</div><divclass=\\\”col-sm-3\\\”>.col-sm-3</div><divclass=\\\”col-sm-3\\\”>.col-sm-3</div><divclass=\\\”col-sm-3\\\”>.col-sm-3</div>
尝试一下 »
不等宽响应式列
以下实例演示了在平板及更大屏幕上创建不等宽度的响应式列。 在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版:
实例
<divclass=\\\”row\\\”><divclass=\\\”col-sm-4\\\”>.col-sm-4</div><divclass=\\\”col-sm-8\\\”>.col-sm-8</div></div>
Bootstrap4 文字排版
Bootstrap 4 默认设置
Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。
默认的 font-family 为 \\\”Helvetica Neue\\\”, Helvetica, Arial, sans-serif。
此外，所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。
<h1> – <h6>
Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。请看下面的实例：
实例
<divclass=\\\”container\\\”><h1>h1 Bootstrap 标题 (2.5rem = 40px)</h1><h2>h2 Bootstrap 标题 (2rem = 32px)</h2><h3>h3 Bootstrap 标题 (1.75rem = 28px)</h3><h4>h4 Bootstrap 标题 (1.5rem = 24px)</h4><h5>h5 Bootstrap 标题 (1.25rem = 20px)</h5><h6>h6 Bootstrap 标题 (1rem = 16px)</h6></div>
尝试一下 »
Display 标题类
Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。
实例
<divclass=\\\”container\\\”><h1>Display 标题</h1><p>Display 标题可以输出更大更粗的字体样式。</p><h1class=\\\”display-1\\\”>Display 1</h1><h1class=\\\”display-2\\\”>Display 2</h1><h1class=\\\”display-3\\\”>Display 3</h1><h1class=\\\”display-4\\\”>Display 4</h1></div>
尝试一下 »
<small>
在 Bootstrap 4 中 HTML <small> 元素用于创建字号更小的颜色更浅的文本:
实例
<divclass=\\\”container\\\”><h1>更小文本标题</h1><p>small 元素用于字号更小的颜色更浅的文本:</p><h1>h1 标题 <small>副标题</small></h1><h2>h2 标题 <small>副标题</small></h2><h3>h3 标题 <small>副标题</small></h3><h4>h4 标题 <small>副标题</small></h4><h5>h5 标题 <small>副标题</small></h5><h6>h6 标题 <small>副标题</small></h6></div>
尝试一下 »
<mark>
Bootstrap 4 定义 <mark> 为黄色背景及有一定的内边距:
实例
<divclass=\\\”container\\\”><h1>高亮文本</h1><p>使用 mark 元素来 <mark>高亮</mark> 文本。</p></div>
尝试一下 »
<abbr>
Bootstrap 4 定义 HTML <abbr> 元素的样式为显示在文本底部的一条虚线边框:
实例
<divclass=\\\”container\\\”><h1>Abbreviations</h1><p>The abbr element is used to mark up an abbreviation or acronym:</p><p>The <abbrtitle=\\\”World Health Organization\\\”>WHO</abbr> was founded in 1948.</p></div>
尝试一下 »
<blockquote>
对于引用的内容可以在 <blockquote> 上添加 .blockquote 类 :
实例
<divclass=\\\”container\\\”><h1>Blockquotes</h1><p>The blockquote element is used to present content from another source:</p><blockquoteclass=\\\”blockquote\\\”><p>For 50 years, WWF has been protecting the future of nature. The world\’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p><footerclass=\\\”blockquote-footer\\\”>From WWF\’s website</footer></blockquote></div>
尝试一下 »
<dl>
Bootstrap 4 定义 HTML <dl> 元素的样式如下:
实例
<divclass=\\\”container\\\”><h1>Description Lists</h1><p>The dl element indicates a description list:</p><dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl></div>
尝试一下 »
<code>
Bootstrap 4 定义 HTML <code> 元素的样式如下:
实例
<divclass=\\\”container\\\”><h1>代码片段</h1><p>可以将一些代码元素放到 code 元素里面:</p><p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定义部分文档内容。</p></div>
尝试一下 »
<kbd>
Bootstrap 4 定义 HTML <kbd> 元素的样式如下:
实例
<divclass=\\\”container\\\”><h1>Keyboard Inputs</h1><p>To indicate input that is typically entered via the keyboard, use the kbd element:</p><p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p></div>
尝试一下 »
<pre>
Bootstrap 4 定义 HTML <pre> 元素的样式如下:
实例
<divclass=\\\”container\\\”><h1>Multiple Code Lines</h1><p>For multiple lines of code, use the pre element:</p><pre>Text in a pre elementis displayed in a fixed-widthfont, and it preservesboth spaces andline breaks.</pre></div>
尝试一下 »
更多排版类
下表提供了 Bootstrap4 更多排版类的实例：
.font-weight-bold加粗文本尝试一下.font-weight-normal普通文本尝试一下.font-weight-light更细的文本尝试一下.font-italic斜体文本尝试一下.lead让段落更突出尝试一下.small指定更小文本 (为父元素的 85% )尝试一下.text-left左对齐尝试一下.text-center居中尝试一下.text-right右对齐尝试一下.text-justify设定文本对齐,段落中超出屏幕部分文字自动换行尝试一下.text-nowrap段落中超出屏幕部分不换行尝试一下.text-lowercase设定文本小写尝试一下.text-uppercase设定文本大写尝试一下.text-capitalize设定单词首字母大写尝试一下.initialism显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母尝试一下.list-unstyled移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)尝试一下.list-inline将所有列表项放置同一行尝试一下.pre-scrollable使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
Bootstrap4 颜色
Bootstrap 4 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light:
实例
<divclass=\\\”container\\\”><h2>代表指定意义的文本颜色</h2><pclass=\\\”text-muted\\\”>柔和的文本。</p><pclass=\\\”text-primary\\\”>重要的文本。</p><pclass=\\\”text-success\\\”>执行成功的文本。</p><pclass=\\\”text-info\\\”>代表一些提示信息的文本。</p><pclass=\\\”text-warning\\\”>警告文本。</p><pclass=\\\”text-danger\\\”>危险操作文本。</p><pclass=\\\”text-secondary\\\”>副标题。</p><pclass=\\\”text-dark\\\”>深灰色文字。</p><pclass=\\\”text-light\\\”>浅灰色文本（白色背景上看不清楚）。</p><pclass=\\\”text-white\\\”>白色文本（白色背景上看不清楚）。</p></div>
尝试一下 »
在链接中使用
实例
<divclass=\\\”container\\\”><h2>文本颜色</h2><p>鼠标移动到链接。</p><ahref=\\\”#\\\”class=\\\”text-muted\\\”>柔和的链接。</a><ahref=\\\”#\\\”class=\\\”text-primary\\\”>主要链接。</a><ahref=\\\”#\\\”class=\\\”text-success\\\”>成功链接。</a><ahref=\\\”#\\\”class=\\\”text-info\\\”>信息文本链接。</a><ahref=\\\”#\\\”class=\\\”text-warning\\\”>警告链接。</a><ahref=\\\”#\\\”class=\\\”text-danger\\\”>危险链接。</a><ahref=\\\”#\\\”class=\\\”text-secondary\\\”>副标题链接。</a><ahref=\\\”#\\\”class=\\\”text-dark\\\”>深灰色链接。</a><ahref=\\\”#\\\”class=\\\”text-light\\\”>浅灰色链接。</a></div>
尝试一下 »
背景颜色
提供背景颜色的类有: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark和 .bg-light。
注意背景颜色不会设置文本的颜色，在一些实例中你需要与 .text-* 类一起使用。
实例
<divclass=\\\”container\\\”><h2>背景颜色</h2><pclass=\\\”bg-primary text-white\\\”>重要的背景颜色。</p><pclass=\\\”bg-success text-white\\\”>执行成功背景颜色。</p><pclass=\\\”bg-info text-white\\\”>信息提示背景颜色。</p><pclass=\\\”bg-warning text-white\\\”>警告背景颜色</p><pclass=\\\”bg-danger text-white\\\”>危险背景颜色。</p><pclass=\\\”bg-secondary text-white\\\”>副标题背景颜色。</p><pclass=\\\”bg-dark text-white\\\”>深灰背景颜色。</p><pclass=\\\”bg-light text-dark\\\”>浅灰背景颜色。</p></div>
Bootstrap4 表格
Bootstrap4 基础表格
Bootstrap4 通过 .table 类来设置基础表格的样式，实例如下:
实例
<tableclass=\\\”table\\\”><thead><tr><th>Firstname</th><th>Lastname</th><th>Email</th></tr></thead><tbody><tr><td>John</td><td>Doe</td><td>john@example.com</td></tr><tr><td>Mary</td><td>Moe</td><td>mary@example.com</td></tr><tr><td>July</td><td>Dooley</td><td>july@example.com</td></tr></tbody></table>
尝试一下 »
条纹表格
通过添加 .table-striped 类，您将在 <tbody> 内的行上看到条纹，如下面的实例所示：
实例
<tableclass=\\\”table table-striped\\\”><thead><tr><th>Firstname</th><th>Lastname</th><th>Email</th></tr></thead><tbody><tr><td>John</td><td>Doe</td><td>john@example.com</td></tr><tr><td>Mary</td><td>Moe</td><td>mary@example.com</td></tr><tr><td>July</td><td>Dooley</td><td>july@example.com</td></tr></tbody></table>
尝试一下 »
带边框表格
.table-bordered 类可以为表格添加边框
实例
<tableclass=\\\”table table-bordered\\\”><thead><tr><th>Firstname</th><th>Lastname</th><th>Email</th></tr></thead><tbody><tr><td>John</td><td>Doe</td><td>john@example.com</td></tr><tr><td>Mary</td><td>Moe</td><td>mary@example.com</td></tr><tr><td>July</td><td>Dooley</td><td>july@example.com</td></tr></tbody></table>
尝试一下 »
鼠标悬停状态表格
.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）：
实例
<tableclass=\\\”table table-hover\\\”><thead><tr><th>Firstname</th><th>Lastname</th><th>Email</th></tr></thead><tbody><tr><td>John</td><td>Doe</td><td>john@example.com</td></tr><tr><td>Mary</td><td>Moe</td><td>mary@example.com</td></tr><tr><td>July</td><td>Dooley</td><td>july@example.com</td></tr></tbody></table>
尝试一下 »
黑色背景表格
.table-dark 类可以为表格添加黑色背景：
实例
<tableclass=\\\”table table-dark\\\”><thead><tr><th>Firstname</th><th>Lastname</th><th>Email</th></tr></thead><tbody><tr><td>John</td><td>Doe</td><td>john@example.com</td></tr><tr><td>Mary</td><td>Moe</td><td>mary@example.com</td></tr><tr><td>July</td><td>Dooley</td><td>july@example.com</td></tr></tbody></table>
尝试一下 »
黑色条纹表格
联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格：
实例
<tableclass=\\\”table table-dark table-striped\\\”><thead><tr><th>Firstname</th><th>Lastname</th><th>Email</th></tr></thead><tbody><tr><td>John</td><td>Doe</td><td>john@example.com</td></tr><tr><td>Mary</td><td>Moe</td><td>mary@example.com</td></tr><tr><td>July</td><td>Dooley</td><td>july@example.com</td></tr></tbody></table>
尝试一下 »
鼠标悬停效果 – 黑色背景表格
联合使用 .table-dark 和 .table-hover 类可以设置黑色背景表格的鼠标悬停效果：
实例
<tableclass=\\\”table table-dark table-hover\\\”><thead><tr><th>Firstname</th><th>Lastname</th><th>Email</th></tr></thead><tbody><tr><td>John</td><td>Doe</td><td>john@example.com</td></tr><tr><td>Mary</td><td>Moe</td><td>mary@example.com</td></tr><tr><td>July</td><td>Dooley</td><td>july@example.com</td></tr></tbody></table>
尝试一下 »
指定意义的颜色类
通过指定意义的颜色类可以为表格的行或者单元格设置颜色：
实例
<tableclass=\\\”table\\\”><thead><tr><th>Firstname</th><th>Lastname</th><th>Email</th></tr></thead><tbody><tr><td>Default</td><td>Defaultson</td><td>def@somemail.com</td></tr><trclass=\\\”table-primary\\\”><td>Primary</td><td>Joe</td><td>joe@example.com</td></tr><trclass=\\\”table-success\\\”><td>Success</td><td>Doe</td><td>john@example.com</td></tr><trclass=\\\”table-danger\\\”><td>Danger</td><td>Moe</td><td>mary@example.com</td></tr><trclass=\\\”table-info\\\”><td>Info</td><td>Dooley</td><td>july@example.com</td></tr><trclass=\\\”table-warning\\\”><td>Warning</td><td>Refs</td><td>bo@example.com</td></tr><trclass=\\\”table-active\\\”><td>Active</td><td>Activeson</td><td>act@example.com</td></tr><trclass=\\\”table-secondary\\\”><td>Secondary</td><td>Secondson</td><td>sec@example.com</td></tr><trclass=\\\”table-light\\\”><td>Light</td><td>Angie</td><td>angie@example.com</td></tr><trclass=\\\”table-dark text-dark\\\”><td>Dark</td><td>Bo</td><td>bo@example.com</td></tr></tbody></table>
尝试一下 »
下表列出了表格颜色类的说明:
.table-primary蓝色: 指定这是一个重要的操作.table-success绿色: 指定这是一个允许执行的操作.table-danger红色: 指定这是可以危险的操作.table-info浅蓝色: 表示内容已变更.table-warning橘色: 表示需要注意的操作.table-active灰色: 用于鼠标悬停效果.table-secondary灰色: 表示内容不怎么重要.table-light浅灰色，可以是表格行的背景.table-dark深灰色，可以是表格行的背景
表头颜色
在 Bootstrap v4.0.0-beta.2 中.thead-dark 类用于给表头添加黑色背景， .thead-light 类用于给表头添加灰色背景:
在 Bootstrap v4.0.0-beta 这个版本中，.thead-inverse 类用于给表头添加黑色背景，.thead-default 类用于给表头添加灰色背景。
实例
<tableclass=\\\”table\\\”><theadclass=\\\”thead-dark\\\”><tr><th>Firstname</th><th>Lastname</th><th>Email</th></tr></thead><tbody><tr><td>John</td><td>Doe</td><td>john@example.com</td></tr><tr><td>Mary</td><td>Moe</td><td>mary@example.com</td></tr><tr><td>July</td><td>Dooley</td><td>july@example.com</td></tr></tbody></table><tableclass=\\\”table\\\”><theadclass=\\\”thead-light\\\”><tr><th>Firstname</th><th>Lastname</th><th>Email</th></tr></thead><tbody><tr><td>John</td><td>Doe</td><td>john@example.com</td></tr><tr><td>Mary</td><td>Moe</td><td>mary@example.com</td></tr><tr><td>July</td><td>Dooley</td><td>july@example.com</td></tr></tbody></table>
尝试一下 »
较小的表格
.table-sm 类用于通过减少内边距来设置较小的表格:
实例
<tableclass=\\\”table table-bordered table-sm\\\”><thead><tr><th>Firstname</th><th>Lastname</th><th>Email</th></tr></thead><tbody><tr><td>John</td><td>Doe</td><td>john@example.com</td></tr><tr><td>Mary</td><td>Moe</td><td>mary@example.com</td></tr><tr><td>July</td><td>Dooley</td><td>july@example.com</td></tr></tbody></table>
尝试一下 »
响应式表格
.table-responsive 类用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）:
实例
<divclass=\\\”table-responsive\\\”><tableclass=\\\”table\\\”><thead><tr><th>#</th><th>Firstname</th><th>Lastname</th><th>Age</th><th>City</th><th>Country</th><th>Sex</th><th>Example</th><th>Example</th><th>Example</th><th>Example</th></tr></thead><tbody><tr><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td><td>Female</td><td>Yes</td><td>Yes</td><td>Yes</td><td>Yes</td></tr></tbody></table></div>
尝试一下 »
你可以通过以下类设定在指定屏幕宽度下显示滚动条：
.table-responsive-sm< 576px.table-responsive-md< 768px.table-responsive-lg< 992px.table-responsive-xl< 1200px
实例
<divclass=\\\”table-responsive-sm\\\”><tableclass=\\\”table\\\”> … </table></div>
Bootstrap4 图像形状
圆角图片
.rounded 类可以让图片显示圆角效果：
实例
<imgsrc=\\\”cinqueterre.jpg\\\”class=\\\”rounded\\\”alt=\\\”Cinque Terre\\\”>
尝试一下 »
椭圆图片
.rounded-circle 类可以设置椭圆形图片:
实例
<imgsrc=\\\”cinqueterre.jpg\\\”class=\\\”rounded-circle\\\”alt=\\\”Cinque Terre\\\”>
尝试一下 »
缩略图
.img-thumbnail 类用于设置图片缩略图(图片有边框):
实例
<imgsrc=\\\”cinqueterre.jpg\\\”class=\\\”img-thumbnail\\\”alt=\\\”Cinque Terre\\\”>
尝试一下 »
图片对齐方式
使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐:
实例
<imgsrc=\\\”paris.jpg\\\”class=\\\”float-left\\\”><imgsrc=\\\”cinqueterre.jpg\\\”class=\\\”float-right\\\”>
尝试一下 »
响应式图片
图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。
我们可以通过在 <img> 标签中添加 .img-fluid 类来设置响应式图片。
.img-fluid 类设置了 max-width: 100%; 、 height: auto; :
实例
<imgclass=\\\”img-fluid\\\”src=\\\”img_chania.jpg\\\”alt=\\\”Chania\\\”>
Bootstrap4 Jumbotron
Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。
提示: Jumbotron 里头可以放一些 HTML标签，也可以是 Bootstrap 的元素。
我们可以通过在 <div> 元素 中添加 .jumbotron 类来创建 jumbotron:
实例
<divclass=\\\”jumbotron\\\”><h1>编程改变未来</h1><p>学的不仅是技术，更是梦想！！！</p></div>
尝试一下 »
全屏幕的 Jumbotron
如果你想创建一个没有圆角的全屏幕，可以在 .jumbotron-fluid 类里头的 div添加 .container 或 .container-fluid 类来实现:
实例
<divclass=\\\”jumbotron jumbotron-fluid\\\”><divclass=\\\”container\\\”><h1>编程改变未来</h1><p>学的不仅是技术，更是梦想！！！</p></div></div>
尝试一下 »
Bootstrap4 信息提示框
Bootstrap 4 可以很容易实现信息提示框。
提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现:
实例
<divclass=\\\”alert alert-success\\\”><strong>成功!</strong> 指定操作成功提示信息。</div>
尝试一下 »
提示框添加链接
提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接：
实例
<divclass=\\\”alert alert-success\\\”><strong>成功!</strong> 你应该认真阅读 <ahref=\\\”#\\\”class=\\\”alert-link\\\”>这条信息</a>。</div>
尝试一下 »
关闭提示框
我们可以在提示框中的 div 中添加 .alert-dismissable 类，然后在关闭按钮的链接上添加 class=\\\”close\\\” 和 data-dismiss=\\\”alert\\\” 类来设置提示框的关闭操作。
实例
<divclass=\\\”alert alert-success alert-dismissable\\\”><buttontype=\\\”button\\\”class=\\\”close\\\”data-dismiss=\\\”alert\\\”>×</button><strong>成功!</strong> 指定操作成功提示信息。</div>
尝试一下 »
提示: × (×) 是 HTML 实体字符，来表示关闭操作，而不是字母 \\\”x\\\”。
提示框动画
.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果：
实例
<divclass=\\\”alert alert-danger alert-dismissable fade show\\\”>
尝试一下 »
发布于：2022-12-28，除非注明，否则均为 原创文章，转载请注明出处。
发表评论