代码拉取完成，页面将自动刷新
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.101.0">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="4.6">
<title>介绍文档 · Bootstrap v4.6</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/getting-started/introduction/">
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/4.6/assets/css/docs.css" rel="stylesheet">
<!-- Favicons -->
<link rel="manifest" href="https://getbootstrap.com/docs/4.6/assets/img/favicons/manifest.json">
<link rel="icon" href="https://getbootstrap.com/docs/4.6/assets/img/favicons/favicon.ico">
<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Introduction">
<meta name="twitter:description" content="Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.">
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.6/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.6/getting-started/introduction/">
<meta property="og:title" content="Introduction">
<meta property="og:description" content="Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.">
<meta property="og:type" content="article">
<meta property="og:image" content="https://getbootstrap.com/docs/4.6/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<script defer src="https://cdn.usefathom.com/script.js" site="ITUSEYJG"></script>
<script>
window.ga = window.ga || function () { (ga.q = ga.q || []).push(arguments) }; ga.l = +new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
</head>
<body>
<div class="skippy overflow-hidden">
<div class="container-xl">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" data-href="#content">跳转到主要内容</a>
<a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" data-href="#bd-docs-nav">跳转到文档导航</a>
</div>
</div>
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a data-href="" class="text-white">Bootstrap 有更新版本！</a>
</div>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" data-href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false">
<title>Bootstrap</title>
<path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"
/>
<path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"
/>
</svg>
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li class="nav-item">
<a class="nav-link" data-href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">主页</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-href="" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">文档</a>
</li>
<li class="nav-item">
<a class="nav-link" data-href="" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">示例</a>
</li>
<li class="nav-item">
<a class="nav-link" data-href="" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">图标</a>
</li>
<li class="nav-item">
<a class="nav-link" data-href="" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">主题</a>
</li>
<li class="nav-item">
<a class="nav-link" data-href="" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">博览会</a>
</li>
<li class="nav-item">
<a class="nav-link" data-href="" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">博客</a>
</li>
</ul>
</div>
<ul class="navbar-nav ml-md-auto">
<li class="nav-item dropdown">
<button class="btn nav-link dropdown-toggle mr-md-2" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Bootstrap </span> v4.6 <span class="sr-only">(选择其他版本)</span>
</button>
<div class="dropdown-menu dropdown-menu-md-right">
<a class="dropdown-item active" data-href="">当前 (4.6.x)</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-href="">5.1.x</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-href="">v3.4.1</a>
<a class="dropdown-item" data-href="">v2.3.2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-href="/">全部版本</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" data-data-href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false">
<title>GitHub</title>
<path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"
/>
</svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-1 mx-1 py-3 my-n2" data-href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter">
<svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false">
<title>Twitter</title>
<path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"
/>
</svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-1 mx-1 py-3 my-n2" data-href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener"
aria-label="Open Collective">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41"
role="img" focusable="false">
<title>Open Collective</title>
<path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"
/>
<path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z" />
</svg>
</a>
</li>
</ul>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" data-href="https://getbootstrap.com/docs/4.6/getting-started/download/">下载</a>
</header>
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<form role="search" class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"
data-docs-version="4.6">
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav"
aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false">
<title>菜单</title>
<path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22" />
</svg>
</button>
</form>
<div class="collapse d-md-block row" id="bd-docs-nav">
<nav class="bd-links" aria-label="Main navigation">
<div class="bd-toc-item active">
<a class="bd-toc-link" href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/">
入门
</a>
<ul class="nav bd-sidenav">
<li class="active bd-sidenav-active">
<a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/">介绍</a>
</li>
<li>
<a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/下载.html">下载</a>
</li>
<li>
<a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/目录.html">目录</a>
</li>
<li>
<a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/浏览器和设备.html">浏览器和设备</a>
</li>
<li>
<a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/JavaScript.html">JavaScript</a>
</li>
<li>
<a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/主题.html">主题</a>
</li>
<li>
<a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/构建工具">构建工具</a>
</li>
<li>
<a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/Webpack.html">Webpack</a>
</li>
<li>
<a href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/可访问性.html">可访问性</a>
</li>
</ul>
</div>
<div class="bd-toc-item">
<a class="bd-toc-link" href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/layout/">
布局
</a>
</div>
<div class="bd-toc-item">
<a class="bd-toc-link" data-href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/content/">
内容
</a>
</div>
<div class="bd-toc-item">
<a class="bd-toc-link" data-href="https://getbootstrap.com/docs/4.6/components/alerts/">
组件
</a>
</div>
<div class="bd-toc-item">
<a class="bd-toc-link" data-href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/utilities/">
实用工具
</a>
</div>
<div class="bd-toc-item">
<a class="bd-toc-link" data-href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/extend/">
扩展
</a>
</div>
<div class="bd-toc-item">
<a class="bd-toc-link" data-href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/migration/">
迁移
</a>
</div>
<div class="bd-toc-item">
<a class="bd-toc-link" data-href="https://cao-putin.gitee.io/bootstrap-v4-chinese-document/about/">
关于
</a>
</div>
</nav>
</div>
</div>
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="次要导航">
<nav id="TableOfContents">
<ul>
<li>
<a href="#quick-start">快速开始</a>
<ul>
<li>
<a href="#css">CSS</a>
</li>
<li>
<a href="#js">JS</a>
<ul>
<li>
<a href="#bundle">捆绑</a>
</li>
<li>
<a href="#separate">分离</a>
</li>
<li>
<a href="#components">组件</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#starter-template">起始模板</a>
</li>
<li>
<a href="#important-globals">重要全局变量</a>
<ul>
<li>
<a href="#html5-doctype">HTML5文档类型</a>
</li>
<li>
<a href="#responsive-meta-tag">响应式meta标签</a>
</li>
<li>
<a href="#box-sizing">盒模型</a>
</li>
<li>
<a href="#reboot">重置样式</a>
</li>
</ul>
</li>
<li>
<a href="#community">社区</a>
</li>
<li>
<a href="#csps-and-embedded-svgs">CSPs和嵌入式SVGs</a>
</li>
</ul>
</nav>
</nav>
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" data-href="https://github.com/twbs/bootstrap/blob/v4-dev/site/content/docs/4.6/getting-started/introduction.md"
title="在GitHub上查看并编辑此文件" target="_blank" rel="noopener">在 GitHub 上查看</a>
<h1 class="bd-title" id="content">介绍</h1>
</div>
<p class="bd-lead">开始使用 Bootstrap，这是全球最流行的框架，用于构建响应式、移动优先的网站，使用 jsDelivr 和模板起始页面。</p>
<h2 id="quick-start">快速入门</h2>
<p>想要快速将 Bootstrap 添加到您的项目中吗？使用 jsDelivr，一个免费的开源 CDN。使用软件包管理器或需要下载源文件？
<a data-href="https://getbootstrap.com/docs/4.6/getting-started/download/">前往下载页面</a>。</p>
<h3 id="css">CSS</h3>
<p>将样式表 <code><link></code> 复制粘贴到您的 <code><head></code> 中，放在所有其他样式表之前以加载我们的 CSS。</p>
<div class="highlight">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span
class="cl"><span class="p"><</span><span class="nt">link</span>
<span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span>
<span class="na">data-href</span><span
class="o">=</span><span
class="s">"https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"</span>
<span class="na">integrity</span><span
class="o">=</span><span
class="s">"sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"</span>
<span class="na">crossorigin</span><span
class="o">=</span><span
class="s">"anonymous"</span><span class="p">></span>
</span></span></code></pre>
</div>
<h3 id="js">JS</h3>
<p>我们的许多组件需要使用 JavaScript 才能正常运行。具体来说，它们需要
<a data-href="https://jquery.com/">jQuery</a>、
<a data-href="https://popper.js.org/">Popper</a> 和我们自己的 JavaScript 插件。我们使用
<a data-href="https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/">jQuery 的 slim 构建
</a>，但也支持完整版本。</p>
<p>在页面末尾的 <code></body></code> 标签前，放置 <strong>以下一个或多个 <code><script></code></strong>，以启用它们。必须先加载 jQuery，然后是
Popper，最后是我们的 JavaScript 插件。</p>
<h4 id="bundle">捆绑</h4>
<p>使用我们的两个捆绑包之一，包含每个 Bootstrap JavaScript 插件。 <code>bootstrap.bundle.js</code> 和 <code>bootstrap.bundle.min.js</code> 都包含
<a data-href="https://popper.js.org/">Popper</a>，用于我们的工具提示 和弹出框，但不包含
<a data-href="https://jquery.com/">jQuery</a>。先加载 jQuery，然后是 Bootstrap JavaScript 捆绑包。有关 Bootstrap 包含了什么的更多信息，请参阅我们的
<a data-href="https://getbootstrap.com/docs/4.6/getting-started/contents/#precompiled-bootstrap">内容</a> 部分。</p>
<div class="highlight">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span
class="cl"><span class="p"><</span><span class="nt">script</span>
<span class="na">src</span><span
class="o">=</span><span
class="s">"https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"</span>
<span class="na">integrity</span><span
class="o">=</span><span
class="s">"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"</span>
<span class="na">crossorigin</span><span
class="o">=</span><span
class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span
class="p">></span>
</span></span><span class="line"><span
class="cl"><span class="p"><</span><span class="nt">script</span>
<span class="na">src</span><span
class="o">=</span><span
class="s">"https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"</span>
<span class="na">integrity</span><span
class="o">=</span><span
class="s">"sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"</span>
<span class="na">crossorigin</span><span
class="o">=</span><span
class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span
class="p">></span>
</span></span></code></pre>
</div>
<h4 id="separate">分离</h4>
<p>如果选择使用分离的脚本解决方案，则 Popper 必须首先加载（如果使用工具提示或弹出框），然后是我们的 JavaScript 插件。</p>
<div class="highlight">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span>
</span></span></code></pre>
</div>
<h4 id="components">组件</h4>
<p>想知道哪些组件明确需要 jQuery、我们的 JavaScript 和 Popper 吗？点击下面的显示组件链接。如果您对页面结构不确定，请继续阅读一个示例页面模板。</p>
<details>
<summary class="text-primary mb-3">显示需要 JavaScript 的组件</summary>
<ul>
<li>用于解散的警报</li>
<li>用于切换状态和复选框/单选框功能的按钮</li>
<li>用于所有幻灯片行为、控件和指示器的轮播</li>
<li>用于切换内容可见性的折叠</li>
<li>用于显示和定位的下拉菜单（还需要
<a data-href="https://popper.js.org/">Popper</a>）</li>
<li>用于显示、定位和滚动行为的模态框</li>
<li>用于扩展我们的 Collapse 插件以实现响应式行为的导航栏</li>
<li>用于滚动行为和导航更新的 Scrollspy</li>
<li>用于显示和定位的工具提示和弹出框（还需要
<a data-href="https://popper.js.org/">Popper</a>）</li>
</ul>
</details>
<h2 id="starter-template">起始模板</h2>
<p>确保您的页面采用最新的设计和开发标准。这意味着使用 HTML5 文档类型，并包含一个 viewport meta 标签以实现正确的响应式行为。将它们组合在一起，您的页面应该如下所示：</p>
<div class="highlight">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!doctype html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="c"><!-- Required meta tags --></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1, shrink-to-fit=no"</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="c"><!-- Bootstrap CSS --></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">data-href</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Hello, world!<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h1</span><span class="p">></span>Hello, world!<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="c"><!-- Optional JavaScript; choose one of the two! --></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="c"><!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) --></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="c"><!-- Option 2: Separate Popper and Bootstrap JS --></span>
</span></span><span class="line"><span class="cl"> <span class="c"><!--
</span></span></span><span class="line"><span class="cl"><span class="c"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
</span></span></span><span class="line"><span class="cl"><span class="c"> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
</span></span></span><span class="line"><span class="cl"><span class="c"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
</span></span></span><span class="line"><span class="cl"><span class="c"> --></span>
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre>
</div>
<p>这就是您需要的整体页面要求。访问
<a href="https://getbootstrap.com/docs/4.6/layout/overview/">布局文档</a> 或
<a href="https://getbootstrap.com/docs/4.6/examples/">我们的官方示例</a>，开始布局您站点的内容和组件。</p>
<h2 id="important-globals">重要的全局设置</h2>
<p>Bootstrap 使用一些重要的全局样式和设置，使用时您需要注意，这些设置几乎都是为跨浏览器样式的 <em>标准化</em> 而设计的。让我们深入了解一下。</p>
<h3 id="html5-doctype">HTML5 文档类型</h3>
<p>Bootstrap 要求使用 HTML5 文档类型。没有它，您可能会看到一些奇怪的不完整样式，但包含它不应该引起任何重大问题。</p>
<div class="highlight">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!doctype html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> ...
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre>
</div>
<h3 id="responsive-meta-tag">响应式 meta 标签</h3>
<p>Bootstrap 采用 <em>移动优先</em> 的开发策略，即我们首先优化代码以适应移动设备，然后使用 CSS 媒体查询按需扩展组件。为了确保所有设备的正确渲染和触摸缩放，<strong>请在您的
<code><head></code> 中添加响应式 viewport meta 标签</strong>。</p>
<div class="highlight">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1, shrink-to-fit=no"</span><span class="p">></span>
</span></span></code></pre>
</div>
<p>您可以在
<a data-href="#starter-template">起始模板</a> 中看到此操作的示例。</p>
<h3 id="box-sizing">Box-sizing</h3>
<p>为了在 CSS 中更简单地进行尺寸调整，我们将全局 <code>box-sizing</code> 值从 <code>content-box</code> 切换到 <code>border-box</code>。这确保
<code>padding</code> 不会影响元素的最终计算宽度，但它可能会导致一些第三方软件（如 Google Maps 和 Google 自定义搜索引擎）出现问题。
</p>
<p>在极少数情况下，如果需要覆盖它，请使用如下所示的方法：</p>
<div class="highlight">
<pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">selector-for-some-widget</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="k">box-sizing</span><span class="p">:</span> <span class="kc">content-box</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre>
</div>
<p>使用上述片段，嵌套元素（包括通过 <code>::before</code> 和 <code>::after</code> 生成的内容）将继承指定的 <code>box-sizing</code>，用于
<code>.selector-for-some-widget</code>。
</p>
<p>了解有关
<a href="https://css-tricks.com/box-sizing/">盒模型和尺寸的更多信息，请访问 CSS Tricks</a>。</p>
<h3 id="reboot">重置样式</h3>
<p>为了改善跨浏览器渲染，我们使用
<a href="https://getbootstrap.com/docs/4.6/content/reboot/">Reboot</a>
来纠正浏览器和设备之间的不一致性，同时对常见 HTML 元素提供了更明确的重置样式。</p>
<h2 id="community">社区</h2>
<p>通过以下有用的资源，了解 Bootstrap 的开发动态并与社区联系。</p>
<ul>
<li>阅读并订阅
<a href="https://blog.getbootstrap.com/">官方 Bootstrap 博客</a>。</li>
<li>在 IRC 中与其他 Bootstrappers 进行聊天。在 <code>irc.libera.chat</code> 服务器的
<code>#bootstrap</code> 频道中。
</li>
<li>可以在 Stack Overflow 上找到有关实现的帮助（带有
<a href="https://stackoverflow.com/questions/tagged/bootstrap-4"><code>bootstrap-4</code></a> 标签）。</li>
<li>在通过
<a href="https://www.npmjs.com/search?q=keywords:bootstrap">npm</a> 或类似的分发机制分发修改或添加到 Bootstrap 功能的软件包时，开发人员应使用关键字 <code>bootstrap</code> 以最大程度地提高发现性。</li>
</ul>
<p>您还可以在
<a data-href="https://twitter.com/getbootstrap">@getbootstrap on Twitter</a> 上关注最新的 谣言和精彩音乐视频。
</p>
<h2 id="csps-and-embedded-svgs">CSPs 和嵌入的 SVG</h2>
<p>Bootstrap 的几个组件在我们的 CSS 中包含嵌入的 SVG，以在浏览器和设备之间一致轻松地样式化组件。对于具有更严格的 <abbr title="内容安全策略">CSP</abbr> 配置的组织，我们已记录了我们所有嵌入的
SVG（全部通过 <code>background-image</code> 应用）的所有实例，以便您可以更彻底地审查您的选择。
</p>
<ul>
<li>
<a data-href="https://getbootstrap.com/docs/4.6/utilities/close-icon/">关闭按钮</a>（在警告和模态框中使用）</li>
<li>
<a data-href="https://getbootstrap.com/docs/4.6/components/forms/#custom-forms">自定义复选框和单选按钮</a>
</li>
<li>
<a data-href="https://getbootstrap.com/docs/4.6/components/forms/#switches">表单开关</a>
</li>
<li>
<a data-href="https://getbootstrap.com/docs/4.6/components/forms/#validation">表单验证图标</a>
</li>
<li>
<a data-href="https://getbootstrap.com/docs/4.6/components/forms/#select-menu">自定义选择菜单</a>
</li>
<li>
<a data-href="https://getbootstrap.com/docs/4.6/components/carousel/#with-controls">轮播控制按钮</a>
</li>
<li>
<a data-href="https://getbootstrap.com/docs/4.6/components/navbar/#responsive-behaviors">导航栏切换按钮</a>
</li>
</ul>
<p>根据
<a data-href="https://github.com/twbs/bootstrap/issues/25394">社区讨论</a>，在您自己的代码库中解决此问题的一些建议包括用本地托管的资产替换 URL、删除图像并使用内联图像（在所有组件中都不可行）以及修改您的 CSP。我们建议仔细审查您自己的安全策略，并根据需要选择最佳路径。</p>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script>
window.jQuery || document.write('<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"><\/script>')
</script>
<script src="https://getbootstrap.com/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="https://getbootstrap.com/docs/4.6/assets/js/docs.min.js"></script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手