代码拉取完成，页面将自动刷新
<!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="#compiled-css-and-js">已编译的 CSS 和 JS</a>
</li>
<li>
<a href="#source-files">源文件</a>
</li>
<li>
<a href="#examples">示例</a>
</li>
<li>
<a href="#jsdelivr">jsDelivr</a>
</li>
<li>
<a href="#package-managers">软件包管理器</a>
<ul>
<li>
<a href="#npm">npm</a>
</li>
<li>
<a href="#yarn">yarn</a>
</li>
<li>
<a href="#rubygems">RubyGems</a>
</li>
<li>
<a href="#composer">Composer</a>
</li>
<li>
<a href="#nuget">NuGet</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</nav>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<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/download.md"
title="View and edit this file on GitHub" target="_blank" rel="noopener">在github上查看</a>
<h1 class="bd-title" id="content">下载</h1>
</div>
<p class="bd-lead">下载 Bootstrap 获取编译后的 CSS 和 JavaScript、源代码，或者通过喜欢的软件包管理器如 npm、RubyGems 等引入。</p>
<h2 id="compiled-css-and-js">编译后的 CSS 和 JS</h2>
<p>下载 <strong>Bootstrap v4.6.2</strong> 的即用即用的编译代码，轻松集成到你的项目中，包括：</p>
<ul>
<li>编译和压缩的 CSS 包（参见
<a href="/docs/4.6/getting-started/contents/#css-files">CSS 文件对比</a>）</li>
<li>编译和压缩的 JavaScript 插件（参见
<a href="/docs/4.6/getting-started/contents/#js-files">JS 文件对比</a>）</li>
</ul>
<p>这不包括文档、源文件或任何可选的 JavaScript 依赖项（jQuery 和 Popper）。</p>
<p>
<a href="https://github.com/twbs/bootstrap/releases/download/v4.6.2/bootstrap-4.6.2-dist.zip" class="btn btn-bd-primary"
onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">下载</a>
</p>
<h2 id="source-files">源文件</h2>
<p>通过下载我们的源 Sass、JavaScript 和文档文件，使用你自己的资产流水线编译 Bootstrap。此选项需要一些额外的工具：</p>
<ul>
<li>
<a href="/docs/4.6/getting-started/build-tools/#sass">Sass 编译器</a> 用于将 Sass 源文件编译为 CSS 文件</li>
<li>
<a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> 用于 CSS 厂商前缀</li>
</ul>
<p>如果你需要我们完整的
<a href="/docs/4.6/getting-started/build-tools/#tooling-setup">构建工具</a>，它们包含用于开发 Bootstrap 和其文档的工具，但它们可能不适合你自己的目的。
</p>
<p>
<a href="https://github.com/twbs/bootstrap/archive/v4.6.2.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">下载源代码</a>
</p>
<h2 id="examples">示例</h2>
<p>如果你想下载并查看我们的
<a href="/docs/4.6/examples/">示例</a>，你可以获取已构建的示例：</p>
<p>
<a href="https://github.com/twbs/bootstrap/releases/download/v4.6.2/bootstrap-4.6.2-examples.zip" class="btn btn-bd-primary"
onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Examples');">下载示例</a>
</p>
<h2 id="jsdelivr">jsDelivr</h2>
<p>使用
<a href="https://www.jsdelivr.com/">jsDelivr</a> 跳过下载，将 Bootstrap 编译后的 CSS 和 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">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 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>
<p>如果你正在使用我们编译后的 JavaScript 并希望单独包含 Popper，请在我们的 JS 之前添加 Popper，最好通过 CDN。</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/popper.js@1.16.1/dist/umd/popper.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"</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.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+"</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>
<h2 id="package-managers">软件包管理器</h2>
<p>使用一些最流行的软件包管理器，将 Bootstrap 的 <strong>源文件</strong> 引入几乎任何项目。无论使用哪个软件包管理器，Bootstrap 都将<strong>需要一个 <a
href="/docs/4.6/getting-started/build-tools/#sass">Sass 编译器</a> 和 <a
href="https://github.com/postcss/autoprefixer">Autoprefixer</a></strong>，以匹配我们官方编译版本的设置。</p>
<h3 id="npm">npm</h3>
<p>在你的 Node.js 项目中使用
<a href="https://www.npmjs.com/package/bootstrap">npm 包</a> 安装 Bootstrap：</p>
<div class="highlight">
<pre tabindex="0" class="chroma"><code class="language-sh" lang="sh"><span class="line"><span class="cl">npm install bootstrap
</span></span></code></pre>
</div>
<p><code>require('bootstrap')</code> 将所有 Bootstrap 的 jQuery 插件加载到 jQuery 对象上。 <code>bootstrap</code> 模块本身不导出任何内容。您可以通过加载包的顶层目录下的
<code>/js/*.js</code> 文件，手动单独加载 Bootstrap 的 jQuery 插件。</p>
<p>Bootstrap 的 <code>package.json</code> 包含以下键下的一些额外元数据：</p>
<ul>
<li><code>sass</code> - Bootstrap 主
<a href="https://sass-lang.com/">Sass</a> 源文件的路径</li>
<li><code>style</code> - Bootstrap 的非压缩 CSS 的路径，使用默认设置（无定制）预编译</li>
</ul>
<div class="bd-callout bd-callout-info">
<strong>通过 npm 使用我们的起始项目开始使用 Bootstrap！</strong> 访问
<a href="https://github.com/twbs/bootstrap-npm-starter">twbs/bootstrap-npm-starter</a> 模板存储库，了解如何在自己的 npm 项目中构建和定制 Bootstrap。包括 Sass 编译器、Autoprefixer、Stylelint、PurgeCSS 和
Bootstrap Icons。
</div>
<h3 id="yarn">yarn</h3>
<p>在你的 Node.js 应用中使用
<a href="https://yarnpkg.com/en/package/bootstrap">yarn 包</a> 安装 Bootstrap：</p>
<div class="highlight">
<pre tabindex="0" class="chroma"><code class="language-sh" lang="sh"><span class="line"><span class="cl">yarn add bootstrap
</span></span></code></pre>
</div>
<h3 id="rubygems">RubyGems</h3>
<p>使用
<a href="https://bundler.io/">Bundler</a>（<strong>推荐</strong>）和
<a href="https://rubygems.org/">RubyGems</a> 在 Ruby 应用中安装 Bootstrap，通过在你的
<a href="https://bundler.io/gemfile.html"><code>Gemfile</code></a> 中添加以下行：</p>
<div class="highlight">
<pre tabindex="0" class="chroma"><code class="language-ruby" data-lang="ruby"><span class="line"><span class="cl"><span class="n">gem</span> <span class="s1">'bootstrap'</span><span class="p">,</span> <span class="s1">'~> 4.6.2'</span>
</span></span></code></pre>
</div>
<p>或者，如果你没有使用 Bundler，你可以通过运行以下命令来安装 gem：</p>
<div class="highlight">
<pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">gem install bootstrap -v 4.6.2
</span></span></code></pre>
</div>
<p>你还可以使用
<a href="https://getcomposer.org/">Composer</a> 安装和管理 Bootstrap 的 Sass 和 JavaScript：</p>
<div class="highlight">
<pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">composer require twbs/bootstrap:4.6.2
</span></span></code></pre>
</div>
<h3 id="nuget">NuGet</h3>
<p>如果你在 .NET 中开发，你还可以使用
<a href="https://www.nuget.org/packages/bootstrap/">NuGet</a> 安装和管理 Bootstrap 的
<a href="https://www.nuget.org/packages/bootstrap/">CSS</a> 或
<a href="https://www.nuget.org/packages/bootstrap.sass/">Sass</a> 和 JavaScript：
</p>
<div class="highlight">
<pre tabindex="0" class="chroma"><code class="language-powershell" data-lang="powershell"><span class="line"><span class="cl"><span class="nb">Install-Package</span> <span class="n">bootstrap</span>
</span></span></code></pre>
</div>
<div class="highlight">
<pre tabindex="0" class="chroma"><code class="language-powershell" data-lang="powershell"><span class="line"><span class="cl"><span class="nb">Install-Package</span> <span class="n">bootstrap</span><span class="p">.</span><span class="n">sass</span>
</span></span></code></pre>
</div>
</main>
</body>
</html>
</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 助手