mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-22 05:03:16 +02:00
Add v4.6.2 docs (#36726)
This commit is contained in:
XhmikosR
GitHub
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Learn how to include Bootstrap in your project using Webpack.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.88.1">
|
||||
<meta name="generator" content="Hugo 0.101.0">
|
||||
|
||||
<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-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
|
||||
<link href="/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">
|
||||
@@ -105,10 +105,10 @@
|
||||
|
||||
<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-expanded="false">
|
||||
v4.6
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
|
||||
<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">(switch to other versions)</span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-md-right">
|
||||
<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.1/">5.1.x</a>
|
||||
@@ -240,7 +240,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
@@ -255,7 +255,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">
|
||||
@@ -269,57 +269,57 @@
|
||||
<p><a href="/docs/4.6/getting-started/download/#npm">Install bootstrap</a> as a Node.js module using npm.</p>
|
||||
<h2 id="importing-javascript">Importing JavaScript</h2>
|
||||
<p>Import <a href="/docs/4.6/getting-started/javascript/">Bootstrap’s JavaScript</a> by adding this line to your app’s entry point (usually <code>index.js</code> or <code>app.js</code>):</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="kr">import</span> <span class="s1">'bootstrap'</span><span class="p">;</span>
|
||||
</code></pre></div><p>Alternatively, you may <strong>import plugins individually</strong> as needed:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="kr">import</span> <span class="s1">'bootstrap/js/dist/util'</span><span class="p">;</span>
|
||||
<span class="kr">import</span> <span class="s1">'bootstrap/js/dist/alert'</span><span class="p">;</span>
|
||||
<span class="p">...</span>
|
||||
</code></pre></div><p>Bootstrap depends on <a href="https://jquery.com/">jQuery</a> and <a href="https://popper.js.org/">Popper</a>,
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">import</span> <span class="s1">'bootstrap'</span><span class="p">;</span>
|
||||
</span></span></code></pre></div><p>Alternatively, you may <strong>import plugins individually</strong> as needed:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">import</span> <span class="s1">'bootstrap/js/dist/util'</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="s1">'bootstrap/js/dist/alert'</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">...</span>
|
||||
</span></span></code></pre></div><p>Bootstrap depends on <a href="https://jquery.com/">jQuery</a> and <a href="https://popper.js.org/">Popper</a>,
|
||||
which are specified in the <code>peerDependencies</code> property; this means that you will have to make sure to add both of them
|
||||
to your <code>package.json</code> using <code>npm install --save jquery popper.js</code>.</p>
|
||||
<h2 id="importing-styles">Importing Styles</h2>
|
||||
<h3 id="importing-precompiled-sass">Importing Precompiled Sass</h3>
|
||||
<p>To enjoy the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project’s bundling process.</p>
|
||||
<p>First, create your own <code>_custom.scss</code> and use it to override the <a href="/docs/4.6/getting-started/theming/">built-in custom variables</a>. Then, use your main Sass file to import your custom variables, followed by Bootstrap:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="k">@import</span> <span class="s2">"custom"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"~bootstrap/scss/bootstrap"</span><span class="p">;</span>
|
||||
</code></pre></div><p>For Bootstrap to compile, make sure you install and use the required loaders: <a href="https://github.com/webpack-contrib/sass-loader">sass-loader</a>, <a href="https://github.com/webpack-contrib/postcss-loader">postcss-loader</a> with <a href="https://github.com/postcss/autoprefixer#webpack">Autoprefixer</a>. With minimal setup, your webpack config should include this rule or similar:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="p">...</span>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">test</span><span class="o">:</span> <span class="sr">/\.(scss)$/</span><span class="p">,</span>
|
||||
<span class="nx">use</span><span class="o">:</span> <span class="p">[{</span>
|
||||
<span class="nx">loader</span><span class="o">:</span> <span class="s1">'style-loader'</span><span class="p">,</span> <span class="c1">// inject CSS to page
|
||||
</span><span class="c1"></span> <span class="p">},</span> <span class="p">{</span>
|
||||
<span class="nx">loader</span><span class="o">:</span> <span class="s1">'css-loader'</span><span class="p">,</span> <span class="c1">// translates CSS into CommonJS modules
|
||||
</span><span class="c1"></span> <span class="p">},</span> <span class="p">{</span>
|
||||
<span class="nx">loader</span><span class="o">:</span> <span class="s1">'postcss-loader'</span><span class="p">,</span> <span class="c1">// Run postcss actions
|
||||
</span><span class="c1"></span> <span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">plugins</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="c1">// postcss plugins, can be exported to postcss.config.js
|
||||
</span><span class="c1"></span> <span class="k">return</span> <span class="p">[</span>
|
||||
<span class="nx">require</span><span class="p">(</span><span class="s1">'autoprefixer'</span><span class="p">)</span>
|
||||
<span class="p">];</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span> <span class="p">{</span>
|
||||
<span class="nx">loader</span><span class="o">:</span> <span class="s1">'sass-loader'</span> <span class="c1">// compiles Sass to CSS
|
||||
</span><span class="c1"></span> <span class="p">}]</span>
|
||||
<span class="p">},</span>
|
||||
<span class="p">...</span>
|
||||
</code></pre></div><h3 id="importing-compiled-css">Importing Compiled CSS</h3>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="k">@import</span> <span class="s2">"custom"</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="k">@import</span> <span class="s2">"~bootstrap/scss/bootstrap"</span><span class="p">;</span>
|
||||
</span></span></code></pre></div><p>For Bootstrap to compile, make sure you install and use the required loaders: <a href="https://github.com/webpack-contrib/sass-loader">sass-loader</a>, <a href="https://github.com/webpack-contrib/postcss-loader">postcss-loader</a> with <a href="https://github.com/postcss/autoprefixer#webpack">Autoprefixer</a>. With minimal setup, your webpack config should include this rule or similar:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="p">...</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">test</span><span class="o">:</span> <span class="sr">/\.(scss)$/</span><span class="p">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">use</span><span class="o">:</span> <span class="p">[{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">loader</span><span class="o">:</span> <span class="s1">'style-loader'</span><span class="p">,</span> <span class="c1">// inject CSS to page
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">loader</span><span class="o">:</span> <span class="s1">'css-loader'</span><span class="p">,</span> <span class="c1">// translates CSS into CommonJS modules
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">},</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">loader</span><span class="o">:</span> <span class="s1">'postcss-loader'</span><span class="p">,</span> <span class="c1">// Run postcss actions
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">plugins</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="c1">// postcss plugins, can be exported to postcss.config.js
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">return</span> <span class="p">[</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">require</span><span class="p">(</span><span class="s1">'autoprefixer'</span><span class="p">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">];</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">loader</span><span class="o">:</span> <span class="s1">'sass-loader'</span> <span class="c1">// compiles Sass to CSS
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="p">}]</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">},</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">...</span>
|
||||
</span></span></code></pre></div><h3 id="importing-compiled-css">Importing Compiled CSS</h3>
|
||||
<p>Alternatively, you may use Bootstrap’s ready-to-use CSS by simply adding this line to your project’s entry point:</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="kr">import</span> <span class="s1">'bootstrap/dist/css/bootstrap.min.css'</span><span class="p">;</span>
|
||||
</code></pre></div><p>In this case you may use your existing rule for <code>css</code> without any special modifications to webpack config, except you don’t need <code>sass-loader</code> just <a href="https://github.com/webpack-contrib/style-loader">style-loader</a> and <a href="https://github.com/webpack-contrib/css-loader">css-loader</a>.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="p">...</span>
|
||||
<span class="nx">module</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">rules</span><span class="o">:</span> <span class="p">[</span>
|
||||
<span class="p">{</span>
|
||||
<span class="nx">test</span><span class="o">:</span> <span class="sr">/\.css$/</span><span class="p">,</span>
|
||||
<span class="nx">use</span><span class="o">:</span> <span class="p">[</span><span class="s1">'style-loader'</span><span class="p">,</span> <span class="s1">'css-loader'</span><span class="p">]</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">]</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">...</span>
|
||||
</code></pre></div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">import</span> <span class="s1">'bootstrap/dist/css/bootstrap.min.css'</span><span class="p">;</span>
|
||||
</span></span></code></pre></div><p>In this case you may use your existing rule for <code>css</code> without any special modifications to webpack config, except you don’t need <code>sass-loader</code> just <a href="https://github.com/webpack-contrib/style-loader">style-loader</a> and <a href="https://github.com/webpack-contrib/css-loader">css-loader</a>.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="p">...</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nx">module</span><span class="o">:</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">rules</span><span class="o">:</span> <span class="p">[</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">test</span><span class="o">:</span> <span class="sr">/\.css$/</span><span class="p">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">use</span><span class="o">:</span> <span class="p">[</span><span class="s1">'style-loader'</span><span class="p">,</span> <span class="s1">'css-loader'</span><span class="p">]</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">...</span>
|
||||
</span></span></code></pre></div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
@@ -327,7 +327,7 @@ to your <code>package.json</code> using <code>npm install --save jquery popper.j
|
||||
<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-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
|
||||
<script src="/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>
|
||||
|
||||
Reference in New Issue
Block a user