mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-31 17:11:48 +02:00
Add v4.6.1 docs (#35273)
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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.80.0">
|
||||
<meta name="generator" content="Hugo 0.88.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.6">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
|
||||
<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
|
||||
|
||||
<!-- Documentation extras -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -104,13 +104,13 @@
|
||||
|
||||
<ul class="navbar-nav ml-md-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-expanded="false">
|
||||
v4.6
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.6/">Latest (4.6.x)</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/">5.0.x</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/">5.1.x</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
@@ -239,7 +239,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
@@ -259,7 +259,7 @@
|
||||
</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">
|
||||
@@ -270,13 +270,13 @@
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="compiled-css-and-js">Compiled CSS and JS</h2>
|
||||
<p>Download ready-to-use compiled code for <strong>Bootstrap v4.6.0</strong> to easily drop into your project, which includes:</p>
|
||||
<p>Download ready-to-use compiled code for <strong>Bootstrap v4.6.1</strong> to easily drop into your project, which includes:</p>
|
||||
<ul>
|
||||
<li>Compiled and minified CSS bundles (see <a href="/docs/4.6/getting-started/contents/#css-files">CSS files comparison</a>)</li>
|
||||
<li>Compiled and minified JavaScript plugins (see <a href="/docs/4.6/getting-started/contents/#js-files">JS files comparison</a>)</li>
|
||||
</ul>
|
||||
<p>This doesn’t include documentation, source files, or any optional JavaScript dependencies (jQuery and Popper).</p>
|
||||
<p><a href="https://github.com/twbs/bootstrap/releases/download/v4.6.0/bootstrap-4.6.0-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/v4.6.1/bootstrap-4.6.1-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</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>
|
||||
@@ -284,23 +284,23 @@
|
||||
<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/4.6/getting-started/build-tools/#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/v4.6.0.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/v4.6.1.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a></p>
|
||||
<h2 id="examples">Examples</h2>
|
||||
<p>If you want to download and examine our <a href="/docs/4.6/examples/">examples</a>, you can grab the already built examples:</p>
|
||||
<p><a href="https://github.com/twbs/bootstrap/releases/download/v4.6.0/bootstrap-4.6.0-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/v4.6.1/bootstrap-4.6.1-examples.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Examples');">Download Examples</a></p>
|
||||
<h2 id="jsdelivr">jsDelivr</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 class="chroma"><code class="language-html" data-lang="html"><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.0/dist/css/bootstrap.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span>
|
||||
<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.0/dist/js/bootstrap.bundle.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"</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="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.1/dist/css/bootstrap.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span>
|
||||
<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.1/dist/js/bootstrap.bundle.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"</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>
|
||||
</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 class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://code.jquery.com/jquery-3.5.1.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>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><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 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 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.0/dist/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"</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 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.1/dist/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2"</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>
|
||||
</code></pre></div><h2 id="package-managers">Package managers</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/4.6/getting-started/build-tools/#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</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 class="chroma"><code class="language-sh" data-lang="sh">npm install bootstrap
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm install bootstrap
|
||||
</code></pre></div><p><code>require('bootstrap')</code> will load all of Bootstrap’s jQuery plugins onto the jQuery object. The <code>bootstrap</code> module itself does not export anything. You can manually load Bootstrap’s jQuery plugins individually by loading the <code>/js/*.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>
|
||||
<ul>
|
||||
@@ -313,29 +313,29 @@
|
||||
|
||||
<h3 id="yarn">yarn</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 class="chroma"><code class="language-sh" data-lang="sh">yarn add bootstrap
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">yarn add bootstrap
|
||||
</code></pre></div><h3 id="rubygems">RubyGems</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 class="chroma"><code class="language-ruby" data-lang="ruby"><span class="n">gem</span> <span class="s1">'bootstrap'</span><span class="p">,</span> <span class="s1">'~> 4.6.0'</span>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-ruby" data-lang="ruby"><span class="n">gem</span> <span class="s1">'bootstrap'</span><span class="p">,</span> <span class="s1">'~> 4.6.1'</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 class="chroma"><code class="language-sh" data-lang="sh">gem install bootstrap -v 4.6.0
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">gem install bootstrap -v 4.6.1
|
||||
</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</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 class="chroma"><code class="language-sh" data-lang="sh">composer require twbs/bootstrap:4.6.0
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">composer require twbs/bootstrap:4.6.1
|
||||
</code></pre></div><h3 id="nuget">NuGet</h3>
|
||||
<p>If you develop in .NET, 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>:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-powershell" data-lang="powershell"><span class="nb">Install-Package</span> <span class="n">bootstrap</span>
|
||||
</code></pre></div><div class="highlight"><pre class="chroma"><code class="language-powershell" data-lang="powershell"><span class="nb">Install-Package</span> <span class="n">bootstrap</span><span class="p">.</span><span class="n">sass</span>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-powershell" data-lang="powershell"><span class="nb">Install-Package</span> <span class="n">bootstrap</span>
|
||||
</code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-powershell" data-lang="powershell"><span class="nb">Install-Package</span> <span class="n">bootstrap</span><span class="p">.</span><span class="n">sass</span>
|
||||
</code></pre></div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<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="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script>
|
||||
|
||||
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
|
||||
<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
Reference in New Issue
Block a user