mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-30 00:29:52 +02:00
Add v5.2.2 docs (#37237)
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.101.0">
|
||||
<meta name="generator" content="Hugo 0.104.2">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.2">
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
|
||||
|
||||
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
|
||||
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -470,7 +470,7 @@
|
||||
<main class="bd-main order-1">
|
||||
<div class="bd-intro pt-2 ps-lg-2">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.2/getting-started/download.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
<a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.2.2/site/content/docs/5.2/getting-started/download.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
<h1 class="bd-title mb-0" id="content">Download</h1>
|
||||
@@ -514,13 +514,13 @@
|
||||
|
||||
|
||||
<h2 id="compiled-css-and-js">Compiled CSS and JS <a class="anchor-link" href="#compiled-css-and-js" aria-label="Link to this section: Compiled CSS and JS"></a></h2>
|
||||
<p>Download ready-to-use compiled code for <strong>Bootstrap v5.2.1</strong> to easily drop into your project, which includes:</p>
|
||||
<p>Download ready-to-use compiled code for <strong>Bootstrap v5.2.2</strong> to easily drop into your project, which includes:</p>
|
||||
<ul>
|
||||
<li>Compiled and minified CSS bundles (see <a href="/docs/5.2/getting-started/contents/#css-files">CSS files comparison</a>)</li>
|
||||
<li>Compiled and minified JavaScript plugins (see <a href="/docs/5.2/getting-started/contents/#js-files">JS files comparison</a>)</li>
|
||||
</ul>
|
||||
<p>This doesn’t include documentation, source files, or any optional JavaScript dependencies like Popper.</p>
|
||||
<p><a href="https://github.com/twbs/bootstrap/releases/download/v5.2.1/bootstrap-5.2.1-dist.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download</a></p>
|
||||
<p><a href="https://github.com/twbs/bootstrap/releases/download/v5.2.2/bootstrap-5.2.2-dist.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download</a></p>
|
||||
<h2 id="source-files">Source files <a class="anchor-link" href="#source-files" aria-label="Link to this section: Source files"></a></h2>
|
||||
<p>Compile Bootstrap with your own asset pipeline by downloading our source Sass, JavaScript, and documentation files. This option requires some additional tooling:</p>
|
||||
<ul>
|
||||
@@ -528,22 +528,22 @@
|
||||
<li><a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> for CSS vendor prefixing</li>
|
||||
</ul>
|
||||
<p>Should you require our full set of <a href="/docs/5.2/getting-started/contribute/#tooling-setup">build tools</a>, they are included for developing Bootstrap and its docs, but they’re likely unsuitable for your own purposes.</p>
|
||||
<p><a href="https://github.com/twbs/bootstrap/archive/v5.2.1.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a></p>
|
||||
<p><a href="https://github.com/twbs/bootstrap/archive/v5.2.2.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a></p>
|
||||
<h2 id="examples">Examples <a class="anchor-link" href="#examples" aria-label="Link to this section: Examples"></a></h2>
|
||||
<p>If you want to download and examine our <a href="/docs/5.2/examples/">examples</a>, you can grab the already built examples:</p>
|
||||
<p><a href="https://github.com/twbs/bootstrap/releases/download/v5.2.1/bootstrap-5.2.1-examples.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Examples');">Download Examples</a></p>
|
||||
<p><a href="https://github.com/twbs/bootstrap/releases/download/v5.2.2/bootstrap-5.2.2-examples.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Examples');">Download Examples</a></p>
|
||||
<h2 id="cdn-via-jsdelivr">CDN via jsDelivr <a class="anchor-link" href="#cdn-via-jsdelivr" aria-label="Link to this section: CDN via jsDelivr"></a></h2>
|
||||
<p>Skip the download with <a href="https://www.jsdelivr.com/">jsDelivr</a> to deliver cached version of Bootstrap’s compiled CSS and JS to your project.</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">href</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"</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@5.2.1/dist/js/bootstrap.bundle.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"</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>
|
||||
<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">href</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"</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@5.2.2/dist/js/bootstrap.bundle.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"</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>If you’re using our compiled JavaScript and prefer to include Popper separately, add Popper before our JS, via a CDN preferably.</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/@popperjs/core@2.11.6/dist/umd/popper.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"</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@5.2.1/dist/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz"</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@5.2.2/dist/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk"</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">Package managers <a class="anchor-link" href="#package-managers" aria-label="Link to this section: Package managers"></a></h2>
|
||||
<p>Pull in Bootstrap’s <strong>source files</strong> into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will <strong>require a <a href="/docs/5.2/getting-started/contribute/#sass">Sass compiler</a> and <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a></strong> for a setup that matches our official compiled versions.</p>
|
||||
<h3 id="npm">npm <a class="anchor-link" href="#npm" aria-label="Link to this section: npm"></a></h3>
|
||||
<p>Install Bootstrap in your Node.js powered apps with <a href="https://www.npmjs.com/package/bootstrap">the npm package</a>:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm install bootstrap@5.2.1
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm install bootstrap@5.2.2
|
||||
</span></span></code></pre></div><p><code>const bootstrap = require('bootstrap')</code> or <code>import bootstrap from 'bootstrap'</code> will load all of Bootstrap’s plugins onto a <code>bootstrap</code> object.
|
||||
The <code>bootstrap</code> module itself exports all of our plugins. You can manually load Bootstrap’s plugins individually by loading the <code>/js/dist/*.js</code> files under the package’s top-level directory.</p>
|
||||
<p>Bootstrap’s <code>package.json</code> contains some additional metadata under the following keys:</p>
|
||||
@@ -557,16 +557,16 @@ The <code>bootstrap</code> module itself exports all of our plugins. You can man
|
||||
|
||||
<h3 id="yarn">yarn <a class="anchor-link" href="#yarn" aria-label="Link to this section: yarn"></a></h3>
|
||||
<p>Install Bootstrap in your Node.js powered apps with <a href="https://yarnpkg.com/en/package/bootstrap">the yarn package</a>:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">yarn add bootstrap@5.2.1
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">yarn add bootstrap@5.2.2
|
||||
</span></span></code></pre></div><h3 id="rubygems">RubyGems <a class="anchor-link" href="#rubygems" aria-label="Link to this section: RubyGems"></a></h3>
|
||||
<p>Install Bootstrap in your Ruby apps using <a href="https://bundler.io/">Bundler</a> (<strong>recommended</strong>) and <a href="https://rubygems.org/">RubyGems</a> by adding the following line to your <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">'~> 5.2.1'</span>
|
||||
<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">'~> 5.2.2'</span>
|
||||
</span></span></code></pre></div><p>Alternatively, if you’re not using Bundler, you can install the gem by running this command:</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 5.2.1
|
||||
<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 5.2.2
|
||||
</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap-rubygem/blob/master/README.md">See the gem’s README</a> for further details.</p>
|
||||
<h3 id="composer">Composer <a class="anchor-link" href="#composer" aria-label="Link to this section: Composer"></a></h3>
|
||||
<p>You can also install and manage Bootstrap’s Sass and JavaScript using <a href="https://getcomposer.org/">Composer</a>:</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:5.2.1
|
||||
<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:5.2.2
|
||||
</span></span></code></pre></div><h3 id="nuget">NuGet <a class="anchor-link" href="#nuget" aria-label="Link to this section: NuGet"></a></h3>
|
||||
<p>If you develop in .NET Framework, you can also install and manage Bootstrap’s <a href="https://www.nuget.org/packages/bootstrap/">CSS</a> or <a href="https://www.nuget.org/packages/bootstrap.sass/">Sass</a> and JavaScript using <a href="https://www.nuget.org/">NuGet</a>. Newer projects should use <a href="https://docs.microsoft.com/en-us/aspnet/core/client-side/libman/">libman</a> or another method as NuGet is designed for compiled code, not frontend assets.</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>
|
||||
@@ -588,7 +588,7 @@ The <code>bootstrap</code> module itself exports all of our plugins. You can man
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.2/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
|
||||
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
|
||||
<li class="mb-2">Currently v5.2.1.</li>
|
||||
<li class="mb-2">Currently v5.2.2.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -637,7 +637,7 @@ The <code>bootstrap</code> module itself exports all of our plugins. You can man
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
@@ -665,10 +665,10 @@ The <code>bootstrap</code> module itself exports all of our plugins. You can man
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.2\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
|
||||
<title>Bootstrap Example</title>
|
||||
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.1\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.2\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
</head>
|
||||
<body class="p-3 m-0 border-0 ${classes}">
|
||||
|
||||
|
Reference in New Issue
Block a user