diff options
Diffstat (limited to 'docs/4.6/utilities/borders/index.html')
| -rw-r--r-- | docs/4.6/utilities/borders/index.html | 76 |
1 files changed, 38 insertions, 38 deletions
diff --git a/docs/4.6/utilities/borders/index.html b/docs/4.6/utilities/borders/index.html index 23d5edee79..77708237f0 100644 --- a/docs/4.6/utilities/borders/index.html +++ b/docs/4.6/utilities/borders/index.html @@ -5,7 +5,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element."> <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> @@ -273,7 +273,7 @@ </div> - + <nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation"> <nav id="TableOfContents"> <ul> @@ -289,7 +289,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"> @@ -308,11 +308,11 @@ <span class="border-right"></span> <span class="border-bottom"></span> <span class="border-left"></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">class</span><span class="o">=</span><span class="s">"border"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> -<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border-top"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> -<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border-right"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> -<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border-bottom"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> -<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border-left"</span><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">class</span><span class="o">=</span><span class="s">"border"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border-top"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border-right"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border-bottom"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border-left"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span></span></span></code></pre></div> <h3 id="subtractive">Subtractive</h3> <div class="bd-example bd-example-border-utils bd-example-border-utils-0"> <span class="border-0"></span> @@ -320,11 +320,11 @@ <span class="border-right-0"></span> <span class="border-bottom-0"></span> <span class="border-left-0"></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">class</span><span class="o">=</span><span class="s">"border-0"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> -<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border-top-0"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> -<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border-right-0"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> -<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border-bottom-0"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> -<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border-left-0"</span><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">class</span><span class="o">=</span><span class="s">"border-0"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border-top-0"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border-right-0"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border-bottom-0"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border-left-0"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span></span></span></code></pre></div> <h2 id="border-color">Border color</h2> <p>Change the border color using utilities built on our theme colors.</p> <div class="bd-example bd-example-border-utils"> @@ -338,15 +338,15 @@ <span class="border border-light"></span> <span class="border border-dark"></span> <span class="border border-white"></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">class</span><span class="o">=</span><span class="s">"border border-primary"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> -<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border border-secondary"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> -<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border border-success"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> -<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border border-danger"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> -<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border border-warning"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> -<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border border-info"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> -<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border border-light"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> -<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border border-dark"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> -<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border border-white"</span><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">class</span><span class="o">=</span><span class="s">"border border-primary"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border border-secondary"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border border-success"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border border-danger"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border border-warning"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border border-info"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border border-light"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border border-dark"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"border border-white"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span></span></span></code></pre></div> <h2 id="border-radius">Border-radius</h2> <p>Add classes to an element to easily round its corners.</p> <div class="bd-example"> @@ -366,14 +366,14 @@ <svg class="bd-placeholder-img rounded-0" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example non-rounded image (overrides rounding applied elsewhere): 75x75" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example non-rounded image (overrides rounding applied elsewhere)</title><rect width="100%" height="100%" fill="#6c757d"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">75x75</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"</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-top"</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-right"</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-bottom"</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-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-circle"</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-pill"</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-0"</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"</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-top"</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-right"</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-bottom"</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-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-circle"</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-pill"</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-0"</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="sizes">Sizes</h2> <p>Use <code>.rounded-lg</code> or <code>.rounded-sm</code> for larger or smaller border-radius.</p> <div class="bd-example"> @@ -381,8 +381,8 @@ <svg class="bd-placeholder-img rounded-lg" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example large rounded image: 75x75" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example large rounded image</title><rect width="100%" height="100%" fill="#6c757d"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">75x75</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-sm"</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-lg"</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-sm"</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-lg"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span></span></span></code></pre></div> </main> </div> @@ -391,7 +391,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> |