mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-23 21:53:25 +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="Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.">
|
||||
<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>
|
||||
@@ -231,7 +231,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
@@ -243,7 +243,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">
|
||||
@@ -257,33 +257,33 @@
|
||||
<p>Wrap inline snippets of code with <code><code></code>. Be sure to escape HTML angle brackets.</p>
|
||||
<div class="bd-example">
|
||||
For example, <code><section></code> should be wrapped as inline.
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">For example, <span class="p"><</span><span class="nt">code</span><span class="p">></span><span class="ni">&lt;</span>section<span class="ni">&gt;</span><span class="p"></</span><span class="nt">code</span><span class="p">></span> should be wrapped as inline.</code></pre></div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">For example, <span class="p"><</span><span class="nt">code</span><span class="p">></span><span class="ni">&lt;</span>section<span class="ni">&gt;</span><span class="p"></</span><span class="nt">code</span><span class="p">></span> should be wrapped as inline.</span></span></code></pre></div>
|
||||
<h2 id="code-blocks">Code blocks</h2>
|
||||
<p>Use <code><pre></code>s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the <code>.pre-scrollable</code> class, which will set a max-height of 340px and provide a y-axis scrollbar.</p>
|
||||
<div class="bd-example">
|
||||
<pre><code><p>Sample text here...</p>
|
||||
<p>And another line of sample text here...</p>
|
||||
</code></pre>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">pre</span><span class="p">><</span><span class="nt">code</span><span class="p">></span><span class="ni">&lt;</span>p<span class="ni">&gt;</span>Sample text here...<span class="ni">&lt;</span>/p<span class="ni">&gt;</span>
|
||||
<span class="ni">&lt;</span>p<span class="ni">&gt;</span>And another line of sample text here...<span class="ni">&lt;</span>/p<span class="ni">&gt;</span>
|
||||
<span class="p"></</span><span class="nt">code</span><span class="p">></</span><span class="nt">pre</span><span class="p">></span></code></pre></div>
|
||||
</div><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">pre</span><span class="p">><</span><span class="nt">code</span><span class="p">></span><span class="ni">&lt;</span>p<span class="ni">&gt;</span>Sample text here...<span class="ni">&lt;</span>/p<span class="ni">&gt;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="ni">&lt;</span>p<span class="ni">&gt;</span>And another line of sample text here...<span class="ni">&lt;</span>/p<span class="ni">&gt;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">code</span><span class="p">></</span><span class="nt">pre</span><span class="p">></span></span></span></code></pre></div>
|
||||
<h2 id="variables">Variables</h2>
|
||||
<p>For indicating variables use the <code><var></code> tag.</p>
|
||||
<div class="bd-example">
|
||||
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">var</span><span class="p">></span>y<span class="p"></</span><span class="nt">var</span><span class="p">></span> = <span class="p"><</span><span class="nt">var</span><span class="p">></span>m<span class="p"></</span><span class="nt">var</span><span class="p">><</span><span class="nt">var</span><span class="p">></span>x<span class="p"></</span><span class="nt">var</span><span class="p">></span> + <span class="p"><</span><span class="nt">var</span><span class="p">></span>b<span class="p"></</span><span class="nt">var</span><span class="p">></span></code></pre></div>
|
||||
</div><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">var</span><span class="p">></span>y<span class="p"></</span><span class="nt">var</span><span class="p">></span> = <span class="p"><</span><span class="nt">var</span><span class="p">></span>m<span class="p"></</span><span class="nt">var</span><span class="p">><</span><span class="nt">var</span><span class="p">></span>x<span class="p"></</span><span class="nt">var</span><span class="p">></span> + <span class="p"><</span><span class="nt">var</span><span class="p">></span>b<span class="p"></</span><span class="nt">var</span><span class="p">></span></span></span></code></pre></div>
|
||||
<h2 id="user-input">User input</h2>
|
||||
<p>Use the <code><kbd></code> to indicate input that is typically entered via keyboard.</p>
|
||||
<div class="bd-example">
|
||||
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
|
||||
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">To switch directories, type <span class="p"><</span><span class="nt">kbd</span><span class="p">></span>cd<span class="p"></</span><span class="nt">kbd</span><span class="p">></span> followed by the name of the directory.<span class="p"><</span><span class="nt">br</span><span class="p">></span>
|
||||
To edit settings, press <span class="p"><</span><span class="nt">kbd</span><span class="p">><</span><span class="nt">kbd</span><span class="p">></span>ctrl<span class="p"></</span><span class="nt">kbd</span><span class="p">></span> + <span class="p"><</span><span class="nt">kbd</span><span class="p">></span>,<span class="p"></</span><span class="nt">kbd</span><span class="p">></</span><span class="nt">kbd</span><span class="p">></span></code></pre></div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">To switch directories, type <span class="p"><</span><span class="nt">kbd</span><span class="p">></span>cd<span class="p"></</span><span class="nt">kbd</span><span class="p">></span> followed by the name of the directory.<span class="p"><</span><span class="nt">br</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl">To edit settings, press <span class="p"><</span><span class="nt">kbd</span><span class="p">><</span><span class="nt">kbd</span><span class="p">></span>ctrl<span class="p"></</span><span class="nt">kbd</span><span class="p">></span> + <span class="p"><</span><span class="nt">kbd</span><span class="p">></span>,<span class="p"></</span><span class="nt">kbd</span><span class="p">></</span><span class="nt">kbd</span><span class="p">></span></span></span></code></pre></div>
|
||||
<h2 id="sample-output">Sample output</h2>
|
||||
<p>For indicating sample output from a program use the <code><samp></code> tag.</p>
|
||||
<div class="bd-example">
|
||||
<samp>This text is meant to be treated as sample output from a computer program.</samp>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">samp</span><span class="p">></span>This text is meant to be treated as sample output from a computer program.<span class="p"></</span><span class="nt">samp</span><span class="p">></span></code></pre></div>
|
||||
</div><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">samp</span><span class="p">></span>This text is meant to be treated as sample output from a computer program.<span class="p"></</span><span class="nt">samp</span><span class="p">></span></span></span></code></pre></div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
@@ -292,7 +292,7 @@ To edit settings, press <span class="p"><</span><span class="nt">kbd</span><s
|
||||
<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>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for displaying related images and text with the figure component in Bootstrap.">
|
||||
<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>
|
||||
@@ -231,7 +231,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
@@ -249,10 +249,10 @@
|
||||
|
||||
<figcaption class="figure-caption">A caption for the above image.</figcaption>
|
||||
</figure>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">figure</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure-img img-fluid rounded"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">figcaption</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure-caption"</span><span class="p">></span>A caption for the above image.<span class="p"></</span><span class="nt">figcaption</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">figure</span><span class="p">></span></code></pre></div>
|
||||
</div><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">figure</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure-img img-fluid rounded"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">figcaption</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure-caption"</span><span class="p">></span>A caption for the above image.<span class="p"></</span><span class="nt">figcaption</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">figure</span><span class="p">></span></span></span></code></pre></div>
|
||||
<p>Aligning the figure’s caption is easy with our <a href="/docs/4.6/utilities/text/#text-alignment">text utilities</a>.</p>
|
||||
<div class="bd-example">
|
||||
<figure class="figure">
|
||||
@@ -260,10 +260,10 @@
|
||||
|
||||
<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
|
||||
</figure>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">figure</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure-img img-fluid rounded"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">figcaption</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure-caption text-right"</span><span class="p">></span>A caption for the above image.<span class="p"></</span><span class="nt">figcaption</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">figure</span><span class="p">></span></code></pre></div>
|
||||
</div><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">figure</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure-img img-fluid rounded"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">figcaption</span> <span class="na">class</span><span class="o">=</span><span class="s">"figure-caption text-right"</span><span class="p">></span>A caption for the above image.<span class="p"></</span><span class="nt">figcaption</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">figure</span><span class="p">></span></span></span></code></pre></div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
@@ -272,7 +272,7 @@
|
||||
<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>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.">
|
||||
<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>
|
||||
@@ -231,7 +231,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
@@ -242,7 +242,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">
|
||||
@@ -257,7 +257,7 @@
|
||||
<div class="bd-example">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg img-fluid" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Responsive image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#6c757d"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Responsive image</text></svg>
|
||||
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"img-fluid"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span></code></pre></div>
|
||||
</div><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">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"img-fluid"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span></span></span></code></pre></div>
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="svg-images-and-internet-explorer">SVG images and Internet Explorer</h5>
|
||||
<p>In Internet Explorer 10 and 11, SVG images with <code>.img-fluid</code> are disproportionately sized. To fix this, add <code>width: 100%;</code> or <code>.w-100</code> where necessary. This fix improperly sizes other image formats, so Bootstrap doesn’t apply it automatically.
|
||||
@@ -268,7 +268,7 @@
|
||||
<div class="bd-example">
|
||||
<svg class="bd-placeholder-img img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera</title><rect width="100%" height="100%" fill="#6c757d"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg>
|
||||
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"img-thumbnail"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span></code></pre></div>
|
||||
</div><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">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"img-thumbnail"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span></span></span></code></pre></div>
|
||||
<h2 id="aligning-images">Aligning images</h2>
|
||||
<p>Align images with the <a href="/docs/4.6/utilities/float/">helper float classes</a> or <a href="/docs/4.6/utilities/text/#text-alignment">text alignment classes</a>. <code>block</code>-level images can be centered using <a href="/docs/4.6/utilities/spacing/#horizontal-centering">the <code>.mx-auto</code> margin utility class</a>.</p>
|
||||
<div class="bd-example">
|
||||
@@ -276,27 +276,27 @@
|
||||
|
||||
<svg class="bd-placeholder-img rounded float-right" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#6c757d"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg>
|
||||
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded float-left"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded float-right"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span></code></pre></div>
|
||||
</div><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">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded float-left"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded float-right"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span></span></span></code></pre></div>
|
||||
<div class="bd-example">
|
||||
<svg class="bd-placeholder-img rounded mx-auto d-block" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#6c757d"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg>
|
||||
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mx-auto d-block"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span></code></pre></div>
|
||||
</div><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">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded mx-auto d-block"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span></span></span></code></pre></div>
|
||||
<div class="bd-example">
|
||||
<div class="text-center">
|
||||
<svg class="bd-placeholder-img rounded" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#6c757d"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg>
|
||||
|
||||
</div>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-center"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
|
||||
</div><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">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-center"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"rounded"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div>
|
||||
<h2 id="picture">Picture</h2>
|
||||
<p>If you are using the <code><picture></code> element to specify multiple <code><source></code> elements for a specific <code><img></code>, make sure to add the <code>.img-*</code> classes to the <code><img></code> and not to the <code><picture></code> tag.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">picture</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">source</span> <span class="na">srcset</span><span class="o">=</span><span class="s">"..."</span> <span class="na">type</span><span class="o">=</span><span class="s">"image/svg+xml"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"img-fluid img-thumbnail"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">picture</span><span class="p">></span>
|
||||
</code></pre></div>
|
||||
<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">picture</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">source</span> <span class="na">srcset</span><span class="o">=</span><span class="s">"..."</span> <span class="na">type</span><span class="o">=</span><span class="s">"image/svg+xml"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"img-fluid img-thumbnail"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">picture</span><span class="p">></span>
|
||||
</span></span></code></pre></div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
@@ -304,7 +304,7 @@
|
||||
<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>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.">
|
||||
<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>
|
||||
@@ -231,7 +231,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">
|
||||
@@ -288,25 +288,25 @@
|
||||
</ul>
|
||||
<h2 id="native-font-stack">Native font stack</h2>
|
||||
<p>The default web fonts (Helvetica Neue, Helvetica, and Arial) have been dropped in Bootstrap 4 and replaced with a “native font stack” for optimum text rendering on every device and OS. Read more about <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stacks in this <em>Smashing Magazine</em> article</a>.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$font-family-sans-serif</span><span class="o">:</span>
|
||||
<span class="c1">// Safari for macOS and iOS (San Francisco)</span>
|
||||
<span class="o">-</span><span class="n">apple-system</span><span class="o">,</span>
|
||||
<span class="c1">// Chrome < 56 for macOS (San Francisco)</span>
|
||||
<span class="n">BlinkMacSystemFont</span><span class="o">,</span>
|
||||
<span class="c1">// Windows</span>
|
||||
<span class="s2">"Segoe UI"</span><span class="o">,</span>
|
||||
<span class="c1">// Android</span>
|
||||
<span class="n">Roboto</span><span class="o">,</span>
|
||||
<span class="c1">// Basic web fallback</span>
|
||||
<span class="s2">"Helvetica Neue"</span><span class="o">,</span> <span class="n">Arial</span><span class="o">,</span>
|
||||
<span class="c1">// Linux</span>
|
||||
<span class="s2">"Noto Sans"</span><span class="o">,</span>
|
||||
<span class="s2">"Liberation Sans"</span><span class="o">,</span>
|
||||
<span class="c1">// Sans serif fallback</span>
|
||||
<span class="ni">sans-serif</span><span class="o">,</span>
|
||||
<span class="c1">// Emoji fonts</span>
|
||||
<span class="s2">"Apple Color Emoji"</span><span class="o">,</span> <span class="s2">"Segoe UI Emoji"</span><span class="o">,</span> <span class="s2">"Segoe UI Symbol"</span><span class="o">,</span> <span class="s2">"Noto Color Emoji"</span> <span class="k">!default</span><span class="p">;</span>
|
||||
</code></pre></div><p>Note that because the font stack includes emoji fonts, many common symbol/dingbat unicode characters will be rendered as multi-colored pictographs. Their appearance will vary, depending on the style used in the browser/platform’s native emoji font, and they won’t be affected by any CSS <code>color</code> styles.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$font-family-sans-serif</span><span class="o">:</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Safari for macOS and iOS (San Francisco)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="o">-</span><span class="n">apple-system</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Chrome < 56 for macOS (San Francisco)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="n">BlinkMacSystemFont</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Windows</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"Segoe UI"</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Android</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="n">Roboto</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Basic web fallback</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"Helvetica Neue"</span><span class="o">,</span> <span class="n">Arial</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Linux</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"Noto Sans"</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"Liberation Sans"</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Sans serif fallback</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="ni">sans-serif</span><span class="o">,</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="c1">// Emoji fonts</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"Apple Color Emoji"</span><span class="o">,</span> <span class="s2">"Segoe UI Emoji"</span><span class="o">,</span> <span class="s2">"Segoe UI Symbol"</span><span class="o">,</span> <span class="s2">"Noto Color Emoji"</span> <span class="k">!default</span><span class="p">;</span>
|
||||
</span></span></code></pre></div><p>Note that because the font stack includes emoji fonts, many common symbol/dingbat Unicode characters will be rendered as multi-colored pictographs. Their appearance will vary, depending on the style used in the browser/platform’s native emoji font, and they won’t be affected by any CSS <code>color</code> styles.</p>
|
||||
<p>This <code>font-family</code> is applied to the <code><body></code> and automatically inherited globally throughout Bootstrap. To switch the global <code>font-family</code>, update <code>$font-family-base</code> and recompile Bootstrap.</p>
|
||||
<h2 id="headings-and-paragraphs">Headings and paragraphs</h2>
|
||||
<p>All heading elements—e.g., <code><h1></code>—and <code><p></code> are reset to have their <code>margin-top</code> removed. Headings have <code>margin-bottom: .5rem</code> added and paragraphs <code>margin-bottom: 1rem</code> for easy spacing.</p>
|
||||
@@ -524,7 +524,7 @@
|
||||
<p>Reboot includes an enhancement for <code>role="button"</code> to change the default cursor to <code>pointer</code>. Add this attribute to elements to help indicate elements are interactive. This role isn’t necessary for <code><button></code> elements, which get their own <code>cursor</code> change.</p>
|
||||
<div class="bd-example">
|
||||
<span role="button" tabindex="0">Non-button element button</span>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">span</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span><span class="p">></span>Non-button element button<span class="p"></</span><span class="nt">span</span><span class="p">></span></code></pre></div>
|
||||
</div><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">span</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span><span class="p">></span>Non-button element button<span class="p"></</span><span class="nt">span</span><span class="p">></span></span></span></code></pre></div>
|
||||
<h2 id="misc-elements">Misc elements</h2>
|
||||
<h3 id="address">Address</h3>
|
||||
<p>The <code><address></code> element is updated to reset the browser default <code>font-style</code> from <code>italic</code> to <code>normal</code>. <code>line-height</code> is also now inherited, and <code>margin-bottom: 1rem</code> has been added. <code><address></code>s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with <code><br></code>.</p>
|
||||
@@ -567,8 +567,8 @@
|
||||
</div>
|
||||
<h2 id="html5-hidden-attribute">HTML5 <code>[hidden]</code> attribute</h2>
|
||||
<p>HTML5 adds <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden">a new global attribute named <code>[hidden]</code></a>, which is styled as <code>display: none</code> by default. Borrowing an idea from <a href="https://purecss.io/">PureCSS</a>, we improve upon this default by making <code>[hidden] { display: none !important; }</code> to help prevent its <code>display</code> from getting accidentally overridden. While <code>[hidden]</code> isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">hidden</span><span class="p">></span>
|
||||
</code></pre></div><div class="bd-callout bd-callout-warning">
|
||||
<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">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">hidden</span><span class="p">></span>
|
||||
</span></span></code></pre></div><div class="bd-callout bd-callout-warning">
|
||||
<h5 id="jquery-incompatibility">jQuery incompatibility</h5>
|
||||
<p><code>[hidden]</code> is not compatible with jQuery’s <code>$(...).hide()</code> and <code>$(...).show()</code> methods. Therefore, we don’t currently especially endorse <code>[hidden]</code> over other techniques for managing the <code>display</code> of elements.
|
||||
</div>
|
||||
@@ -582,7 +582,7 @@
|
||||
<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>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.">
|
||||
<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>
|
||||
@@ -231,7 +231,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
@@ -263,7 +263,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">
|
||||
@@ -331,13 +331,13 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>h1. Bootstrap heading<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h2</span><span class="p">></span>h2. Bootstrap heading<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h3</span><span class="p">></span>h3. Bootstrap heading<span class="p"></</span><span class="nt">h3</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h4</span><span class="p">></span>h4. Bootstrap heading<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h5</span><span class="p">></span>h5. Bootstrap heading<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h6</span><span class="p">></span>h6. Bootstrap heading<span class="p"></</span><span class="nt">h6</span><span class="p">></span>
|
||||
</code></pre></div><p><code>.h1</code> through <code>.h6</code> classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.</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">h1</span><span class="p">></span>h1. Bootstrap heading<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h2</span><span class="p">></span>h2. Bootstrap heading<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h3</span><span class="p">></span>h3. Bootstrap heading<span class="p"></</span><span class="nt">h3</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h4</span><span class="p">></span>h4. Bootstrap heading<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h5</span><span class="p">></span>h5. Bootstrap heading<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h6</span><span class="p">></span>h6. Bootstrap heading<span class="p"></</span><span class="nt">h6</span><span class="p">></span>
|
||||
</span></span></code></pre></div><p><code>.h1</code> through <code>.h6</code> classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.</p>
|
||||
<div class="bd-example">
|
||||
<p class="h1">h1. Bootstrap heading</p>
|
||||
<p class="h2">h2. Bootstrap heading</p>
|
||||
@@ -345,12 +345,12 @@
|
||||
<p class="h4">h4. Bootstrap heading</p>
|
||||
<p class="h5">h5. Bootstrap heading</p>
|
||||
<p class="h6">h6. Bootstrap heading</p>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h1"</span><span class="p">></span>h1. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h2"</span><span class="p">></span>h2. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h3"</span><span class="p">></span>h3. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h4"</span><span class="p">></span>h4. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h5"</span><span class="p">></span>h5. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h6"</span><span class="p">></span>h6. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span></code></pre></div>
|
||||
</div><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">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h1"</span><span class="p">></span>h1. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h2"</span><span class="p">></span>h2. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h3"</span><span class="p">></span>h3. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h4"</span><span class="p">></span>h4. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h5"</span><span class="p">></span>h5. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"h6"</span><span class="p">></span>h6. Bootstrap heading<span class="p"></</span><span class="nt">p</span><span class="p">></span></span></span></code></pre></div>
|
||||
<h3 id="customizing-headings">Customizing headings</h3>
|
||||
<p>Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.</p>
|
||||
<div class="bd-example">
|
||||
@@ -358,10 +358,10 @@
|
||||
Fancy display heading
|
||||
<small class="text-muted">With faded secondary text</small>
|
||||
</h3>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">h3</span><span class="p">></span>
|
||||
Fancy display heading
|
||||
<span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>With faded secondary text<span class="p"></</span><span class="nt">small</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">h3</span><span class="p">></span></code></pre></div>
|
||||
</div><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">h3</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> Fancy display heading
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-muted"</span><span class="p">></span>With faded secondary text<span class="p"></</span><span class="nt">small</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">h3</span><span class="p">></span></span></span></code></pre></div>
|
||||
<h2 id="display-headings">Display headings</h2>
|
||||
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style. Keep in mind these headings are not responsive by default, but it’s possible to enable <a href="#responsive-font-sizes">responsive font sizes</a>.</p>
|
||||
<div class="bd-example bd-example-type">
|
||||
@@ -382,19 +382,19 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">"display-1"</span><span class="p">></span>Display 1<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">"display-2"</span><span class="p">></span>Display 2<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">"display-3"</span><span class="p">></span>Display 3<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">"display-4"</span><span class="p">></span>Display 4<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||||
</code></pre></div><h2 id="lead">Lead</h2>
|
||||
<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">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">"display-1"</span><span class="p">></span>Display 1<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">"display-2"</span><span class="p">></span>Display 2<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">"display-3"</span><span class="p">></span>Display 3<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">"display-4"</span><span class="p">></span>Display 4<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||||
</span></span></code></pre></div><h2 id="lead">Lead</h2>
|
||||
<p>Make a paragraph stand out by adding <code>.lead</code>.</p>
|
||||
<div class="bd-example">
|
||||
<p class="lead">
|
||||
This is a lead paragraph. It stands out from regular paragraphs.
|
||||
</p>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"lead"</span><span class="p">></span>
|
||||
This is a lead paragraph. It stands out from regular paragraphs.
|
||||
<span class="p"></</span><span class="nt">p</span><span class="p">></span></code></pre></div>
|
||||
</div><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">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"lead"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> This is a lead paragraph. It stands out from regular paragraphs.
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">p</span><span class="p">></span></span></span></code></pre></div>
|
||||
<h2 id="inline-text-elements">Inline text elements</h2>
|
||||
<p>Styling for common inline HTML5 elements.</p>
|
||||
<div class="bd-example">
|
||||
@@ -406,14 +406,14 @@
|
||||
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
||||
<p><strong>This line rendered as bold text.</strong></p>
|
||||
<p><em>This line rendered as italicized text.</em></p>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">p</span><span class="p">></span>You can use the mark tag to <span class="p"><</span><span class="nt">mark</span><span class="p">></span>highlight<span class="p"></</span><span class="nt">mark</span><span class="p">></span> text.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">del</span><span class="p">></span>This line of text is meant to be treated as deleted text.<span class="p"></</span><span class="nt">del</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">s</span><span class="p">></span>This line of text is meant to be treated as no longer accurate.<span class="p"></</span><span class="nt">s</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">ins</span><span class="p">></span>This line of text is meant to be treated as an addition to the document.<span class="p"></</span><span class="nt">ins</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">u</span><span class="p">></span>This line of text will render as underlined<span class="p"></</span><span class="nt">u</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">small</span><span class="p">></span>This line of text is meant to be treated as fine print.<span class="p"></</span><span class="nt">small</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">strong</span><span class="p">></span>This line rendered as bold text.<span class="p"></</span><span class="nt">strong</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">em</span><span class="p">></span>This line rendered as italicized text.<span class="p"></</span><span class="nt">em</span><span class="p">></</span><span class="nt">p</span><span class="p">></span></code></pre></div>
|
||||
</div><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">p</span><span class="p">></span>You can use the mark tag to <span class="p"><</span><span class="nt">mark</span><span class="p">></span>highlight<span class="p"></</span><span class="nt">mark</span><span class="p">></span> text.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">del</span><span class="p">></span>This line of text is meant to be treated as deleted text.<span class="p"></</span><span class="nt">del</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">s</span><span class="p">></span>This line of text is meant to be treated as no longer accurate.<span class="p"></</span><span class="nt">s</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">ins</span><span class="p">></span>This line of text is meant to be treated as an addition to the document.<span class="p"></</span><span class="nt">ins</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">u</span><span class="p">></span>This line of text will render as underlined<span class="p"></</span><span class="nt">u</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">small</span><span class="p">></span>This line of text is meant to be treated as fine print.<span class="p"></</span><span class="nt">small</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">strong</span><span class="p">></span>This line rendered as bold text.<span class="p"></</span><span class="nt">strong</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">em</span><span class="p">></span>This line rendered as italicized text.<span class="p"></</span><span class="nt">em</span><span class="p">></</span><span class="nt">p</span><span class="p">></span></span></span></code></pre></div>
|
||||
<p><code>.mark</code> and <code>.small</code> classes are also available to apply the same styles as <code><mark></code> and <code><small></code> while avoiding any unwanted semantic implications that the tags would bring.</p>
|
||||
<p>While not shown above, feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
|
||||
<h2 id="text-utilities">Text utilities</h2>
|
||||
@@ -424,17 +424,17 @@
|
||||
<div class="bd-example">
|
||||
<p><abbr title="attribute">attr</abbr></p>
|
||||
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">abbr</span> <span class="na">title</span><span class="o">=</span><span class="s">"attribute"</span><span class="p">></span>attr<span class="p"></</span><span class="nt">abbr</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">abbr</span> <span class="na">title</span><span class="o">=</span><span class="s">"HyperText Markup Language"</span> <span class="na">class</span><span class="o">=</span><span class="s">"initialism"</span><span class="p">></span>HTML<span class="p"></</span><span class="nt">abbr</span><span class="p">></</span><span class="nt">p</span><span class="p">></span></code></pre></div>
|
||||
</div><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">p</span><span class="p">><</span><span class="nt">abbr</span> <span class="na">title</span><span class="o">=</span><span class="s">"attribute"</span><span class="p">></span>attr<span class="p"></</span><span class="nt">abbr</span><span class="p">></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">abbr</span> <span class="na">title</span><span class="o">=</span><span class="s">"HyperText Markup Language"</span> <span class="na">class</span><span class="o">=</span><span class="s">"initialism"</span><span class="p">></span>HTML<span class="p"></</span><span class="nt">abbr</span><span class="p">></</span><span class="nt">p</span><span class="p">></span></span></span></code></pre></div>
|
||||
<h2 id="blockquotes">Blockquotes</h2>
|
||||
<p>For quoting blocks of content from another source within your document. Wrap <code><blockquote class="blockquote"></code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote.</p>
|
||||
<div class="bd-example">
|
||||
<blockquote class="blockquote">
|
||||
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
|
||||
</blockquote>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">blockquote</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-0"</span><span class="p">></span>A well-known quote, contained in a blockquote element.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">blockquote</span><span class="p">></span></code></pre></div>
|
||||
</div><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">blockquote</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-0"</span><span class="p">></span>A well-known quote, contained in a blockquote element.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">blockquote</span><span class="p">></span></span></span></code></pre></div>
|
||||
<h3 id="naming-a-source">Naming a source</h3>
|
||||
<p>Add a <code><footer class="blockquote-footer"></code> for identifying the source. Wrap the name of the source work in <code><cite></code>.</p>
|
||||
<div class="bd-example">
|
||||
@@ -442,10 +442,10 @@
|
||||
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
|
||||
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">blockquote</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-0"</span><span class="p">></span>A well-known quote, contained in a blockquote element.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">footer</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote-footer"</span><span class="p">></span>Someone famous in <span class="p"><</span><span class="nt">cite</span> <span class="na">title</span><span class="o">=</span><span class="s">"Source Title"</span><span class="p">></span>Source Title<span class="p"></</span><span class="nt">cite</span><span class="p">></</span><span class="nt">footer</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">blockquote</span><span class="p">></span></code></pre></div>
|
||||
</div><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">blockquote</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-0"</span><span class="p">></span>A well-known quote, contained in a blockquote element.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">footer</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote-footer"</span><span class="p">></span>Someone famous in <span class="p"><</span><span class="nt">cite</span> <span class="na">title</span><span class="o">=</span><span class="s">"Source Title"</span><span class="p">></span>Source Title<span class="p"></</span><span class="nt">cite</span><span class="p">></</span><span class="nt">footer</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">blockquote</span><span class="p">></span></span></span></code></pre></div>
|
||||
<h3 id="alignment">Alignment</h3>
|
||||
<p>Use text utilities as needed to change the alignment of your blockquote.</p>
|
||||
<div class="bd-example">
|
||||
@@ -453,19 +453,19 @@
|
||||
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
|
||||
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">blockquote</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote text-center"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-0"</span><span class="p">></span>A well-known quote, contained in a blockquote element.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">footer</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote-footer"</span><span class="p">></span>Someone famous in <span class="p"><</span><span class="nt">cite</span> <span class="na">title</span><span class="o">=</span><span class="s">"Source Title"</span><span class="p">></span>Source Title<span class="p"></</span><span class="nt">cite</span><span class="p">></</span><span class="nt">footer</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">blockquote</span><span class="p">></span></code></pre></div>
|
||||
</div><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">blockquote</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote text-center"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-0"</span><span class="p">></span>A well-known quote, contained in a blockquote element.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">footer</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote-footer"</span><span class="p">></span>Someone famous in <span class="p"><</span><span class="nt">cite</span> <span class="na">title</span><span class="o">=</span><span class="s">"Source Title"</span><span class="p">></span>Source Title<span class="p"></</span><span class="nt">cite</span><span class="p">></</span><span class="nt">footer</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">blockquote</span><span class="p">></span></span></span></code></pre></div>
|
||||
<div class="bd-example">
|
||||
<blockquote class="blockquote text-right">
|
||||
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
|
||||
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">blockquote</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote text-right"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-0"</span><span class="p">></span>A well-known quote, contained in a blockquote element.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">footer</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote-footer"</span><span class="p">></span>Someone famous in <span class="p"><</span><span class="nt">cite</span> <span class="na">title</span><span class="o">=</span><span class="s">"Source Title"</span><span class="p">></span>Source Title<span class="p"></</span><span class="nt">cite</span><span class="p">></</span><span class="nt">footer</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">blockquote</span><span class="p">></span></code></pre></div>
|
||||
</div><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">blockquote</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote text-right"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"mb-0"</span><span class="p">></span>A well-known quote, contained in a blockquote element.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">footer</span> <span class="na">class</span><span class="o">=</span><span class="s">"blockquote-footer"</span><span class="p">></span>Someone famous in <span class="p"><</span><span class="nt">cite</span> <span class="na">title</span><span class="o">=</span><span class="s">"Source Title"</span><span class="p">></span>Source Title<span class="p"></</span><span class="nt">cite</span><span class="p">></</span><span class="nt">footer</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">blockquote</span><span class="p">></span></span></span></code></pre></div>
|
||||
<h2 id="lists">Lists</h2>
|
||||
<h3 id="unstyled">Unstyled</h3>
|
||||
<p>Remove the default <code>list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
|
||||
@@ -484,20 +484,20 @@
|
||||
</li>
|
||||
<li>This may still come in handy in some situations.</li>
|
||||
</ul>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-unstyled"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">></span>This is a list.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">></span>It appears completely unstyled.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">></span>Structurally, it's still a list.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">></span>However, this style only applies to immediate child elements.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">></span>Nested lists:
|
||||
<span class="p"><</span><span class="nt">ul</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">></span>are unaffected by this style<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">></span>will still show a bullet<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">></span>and have appropriate left margin<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span><span class="p">></span>This may still come in handy in some situations.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div>
|
||||
</div><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">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-unstyled"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">></span>This is a list.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">></span>It appears completely unstyled.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">></span>Structurally, it's still a list.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">></span>However, this style only applies to immediate child elements.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">></span>Nested lists:
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ul</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">></span>are unaffected by this style<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">></span>will still show a bullet<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">></span>and have appropriate left margin<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">></span>This may still come in handy in some situations.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">ul</span><span class="p">></span></span></span></code></pre></div>
|
||||
<h3 id="inline">Inline</h3>
|
||||
<p>Remove a list’s bullets and apply some light <code>margin</code> with a combination of two classes, <code>.list-inline</code> and <code>.list-inline-item</code>.</p>
|
||||
<div class="bd-example">
|
||||
@@ -506,11 +506,11 @@
|
||||
<li class="list-inline-item">And another one.</li>
|
||||
<li class="list-inline-item">But they're displayed inline.</li>
|
||||
</ul>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-inline"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-inline-item"</span><span class="p">></span>This is a list item.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-inline-item"</span><span class="p">></span>And another one.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-inline-item"</span><span class="p">></span>But they're displayed inline.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div>
|
||||
</div><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">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-inline"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-inline-item"</span><span class="p">></span>This is a list item.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-inline-item"</span><span class="p">></span>And another one.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-inline-item"</span><span class="p">></span>But they're displayed inline.<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">ul</span><span class="p">></span></span></span></code></pre></div>
|
||||
<h3 id="description-list-alignment">Description list alignment</h3>
|
||||
<p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a <code>.text-truncate</code> class to truncate the text with an ellipsis.</p>
|
||||
<div class="bd-example">
|
||||
@@ -538,30 +538,30 @@
|
||||
</dl>
|
||||
</dd>
|
||||
</dl>
|
||||
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">dl</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-3"</span><span class="p">></span>Description lists<span class="p"></</span><span class="nt">dt</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span>A description list is perfect for defining terms.<span class="p"></</span><span class="nt">dd</span><span class="p">></span>
|
||||
|
||||
<span class="p"><</span><span class="nt">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-3"</span><span class="p">></span>Term<span class="p"></</span><span class="nt">dt</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>Definition for the term.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>And some more placeholder definition text.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">dd</span><span class="p">></span>
|
||||
|
||||
<span class="p"><</span><span class="nt">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-3"</span><span class="p">></span>Another term<span class="p"></</span><span class="nt">dt</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span>This definition is short, so no extra paragraphs or anything.<span class="p"></</span><span class="nt">dd</span><span class="p">></span>
|
||||
|
||||
<span class="p"><</span><span class="nt">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-3 text-truncate"</span><span class="p">></span>Truncated term is truncated<span class="p"></</span><span class="nt">dt</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span>This can be useful when space is tight. Adds an ellipsis at the end.<span class="p"></</span><span class="nt">dd</span><span class="p">></span>
|
||||
|
||||
<span class="p"><</span><span class="nt">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-3"</span><span class="p">></span>Nesting<span class="p"></</span><span class="nt">dt</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">dl</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-4"</span><span class="p">></span>Nested definition list<span class="p"></</span><span class="nt">dt</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-8"</span><span class="p">></span>I heard you like definition lists. Let me put a definition list inside your definition list.<span class="p"></</span><span class="nt">dd</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">dl</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">dd</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">dl</span><span class="p">></span></code></pre></div>
|
||||
</div><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">dl</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-3"</span><span class="p">></span>Description lists<span class="p"></</span><span class="nt">dt</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span>A description list is perfect for defining terms.<span class="p"></</span><span class="nt">dd</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">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-3"</span><span class="p">></span>Term<span class="p"></</span><span class="nt">dt</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Definition for the term.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>And some more placeholder definition text.<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">dd</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">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-3"</span><span class="p">></span>Another term<span class="p"></</span><span class="nt">dt</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span>This definition is short, so no extra paragraphs or anything.<span class="p"></</span><span class="nt">dd</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">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-3 text-truncate"</span><span class="p">></span>Truncated term is truncated<span class="p"></</span><span class="nt">dt</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span>This can be useful when space is tight. Adds an ellipsis at the end.<span class="p"></</span><span class="nt">dd</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">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-3"</span><span class="p">></span>Nesting<span class="p"></</span><span class="nt">dt</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">dl</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">dt</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-4"</span><span class="p">></span>Nested definition list<span class="p"></</span><span class="nt">dt</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">dd</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-8"</span><span class="p">></span>I heard you like definition lists. Let me put a definition list inside your definition list.<span class="p"></</span><span class="nt">dd</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">dl</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">dd</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">dl</span><span class="p">></span></span></span></code></pre></div>
|
||||
<h2 id="responsive-font-sizes">Responsive font sizes</h2>
|
||||
<p>As of v4.3.0, Bootstrap ships with the option to enable responsive font sizes, allowing text to scale more naturally across device and viewport sizes. <abbr title="Responsive font sizes">RFS</abbr> can be enabled by changing the <code>$enable-responsive-font-sizes</code> Sass variable to <code>true</code> and recompiling Bootstrap.</p>
|
||||
<p>To support <abbr title="Responsive font sizes">RFS</abbr>, we use a Sass mixin to replace our normal <code>font-size</code> properties. Responsive font sizes will be compiled into <code>calc()</code> functions with a mix of <code>rem</code> and viewport units to enable the responsive scaling behavior. More about <abbr title="Responsive font sizes">RFS</abbr> and its configuration can be found on its <a href="https://github.com/twbs/rfs/tree/v8.1.0">GitHub repository</a>.</p>
|
||||
@@ -573,7 +573,7 @@
|
||||
<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