mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-11 08:04:59 +02:00
Code Issues Releases Wiki Activity

Fathom

Browse Source
This commit is contained in:
Mark Otto
2022-05-09 16:59:05 -07:00
committed by Mark Otto
parent d0c6a9e12a
commit 0d0ca30f5d
825 changed files with 5120 additions and 4302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
docs/5.1/customize/color/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -398,7 +399,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -418,47 +419,47 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="theme-colors">Theme colors</h2>
<p>We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap&rsquo;s <code>scss/_variables.scss</code> file.</p>
<div class="row">
<div class="col-md-4">
<div class="p-3 mb-3 bg-primary text-white">Primary</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-secondary text-white">Secondary</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-success text-white">Success</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-danger text-white">Danger</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-warning text-dark">Warning</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-info text-dark">Info</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-light text-dark">Light</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-dark text-white">Dark</div>
</div>
</div>
<p>All these colors are available as a Sass map, <code>$theme-colors</code>.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$theme-colors</span><span class="o">:</span> <span class="p">(</span>
@@ -477,265 +478,265 @@
<p>All Bootstrap colors are available as Sass variables and a Sass map in <code>scss/_variables.scss</code> file. To avoid increased file sizes, we don&rsquo;t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a <a href="#theme-colors">theme palette</a>.</p>
<p>Be sure to monitor contrast ratios as you customize colors. As shown below, we&rsquo;ve added three contrast ratios to each of the main colors—one for the swatch&rsquo;s current colors, one for against white, and one for against black.</p>
<div class="row font-monospace">
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-blue">
<strong class="d-block">$blue</strong>
#0d6efd
</div>
<div class="p-3 bd-blue-100">$blue-100</div>
<div class="p-3 bd-blue-200">$blue-200</div>
<div class="p-3 bd-blue-300">$blue-300</div>
<div class="p-3 bd-blue-400">$blue-400</div>
<div class="p-3 bd-blue-500">$blue-500</div>
<div class="p-3 bd-blue-600">$blue-600</div>
<div class="p-3 bd-blue-700">$blue-700</div>
<div class="p-3 bd-blue-800">$blue-800</div>
<div class="p-3 bd-blue-900">$blue-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-indigo">
<strong class="d-block">$indigo</strong>
#6610f2
</div>
<div class="p-3 bd-indigo-100">$indigo-100</div>
<div class="p-3 bd-indigo-200">$indigo-200</div>
<div class="p-3 bd-indigo-300">$indigo-300</div>
<div class="p-3 bd-indigo-400">$indigo-400</div>
<div class="p-3 bd-indigo-500">$indigo-500</div>
<div class="p-3 bd-indigo-600">$indigo-600</div>
<div class="p-3 bd-indigo-700">$indigo-700</div>
<div class="p-3 bd-indigo-800">$indigo-800</div>
<div class="p-3 bd-indigo-900">$indigo-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-purple">
<strong class="d-block">$purple</strong>
#6f42c1
</div>
<div class="p-3 bd-purple-100">$purple-100</div>
<div class="p-3 bd-purple-200">$purple-200</div>
<div class="p-3 bd-purple-300">$purple-300</div>
<div class="p-3 bd-purple-400">$purple-400</div>
<div class="p-3 bd-purple-500">$purple-500</div>
<div class="p-3 bd-purple-600">$purple-600</div>
<div class="p-3 bd-purple-700">$purple-700</div>
<div class="p-3 bd-purple-800">$purple-800</div>
<div class="p-3 bd-purple-900">$purple-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-pink">
<strong class="d-block">$pink</strong>
#d63384
</div>
<div class="p-3 bd-pink-100">$pink-100</div>
<div class="p-3 bd-pink-200">$pink-200</div>
<div class="p-3 bd-pink-300">$pink-300</div>
<div class="p-3 bd-pink-400">$pink-400</div>
<div class="p-3 bd-pink-500">$pink-500</div>
<div class="p-3 bd-pink-600">$pink-600</div>
<div class="p-3 bd-pink-700">$pink-700</div>
<div class="p-3 bd-pink-800">$pink-800</div>
<div class="p-3 bd-pink-900">$pink-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-red">
<strong class="d-block">$red</strong>
#dc3545
</div>
<div class="p-3 bd-red-100">$red-100</div>
<div class="p-3 bd-red-200">$red-200</div>
<div class="p-3 bd-red-300">$red-300</div>
<div class="p-3 bd-red-400">$red-400</div>
<div class="p-3 bd-red-500">$red-500</div>
<div class="p-3 bd-red-600">$red-600</div>
<div class="p-3 bd-red-700">$red-700</div>
<div class="p-3 bd-red-800">$red-800</div>
<div class="p-3 bd-red-900">$red-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-orange">
<strong class="d-block">$orange</strong>
#fd7e14
</div>
<div class="p-3 bd-orange-100">$orange-100</div>
<div class="p-3 bd-orange-200">$orange-200</div>
<div class="p-3 bd-orange-300">$orange-300</div>
<div class="p-3 bd-orange-400">$orange-400</div>
<div class="p-3 bd-orange-500">$orange-500</div>
<div class="p-3 bd-orange-600">$orange-600</div>
<div class="p-3 bd-orange-700">$orange-700</div>
<div class="p-3 bd-orange-800">$orange-800</div>
<div class="p-3 bd-orange-900">$orange-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-yellow">
<strong class="d-block">$yellow</strong>
#ffc107
</div>
<div class="p-3 bd-yellow-100">$yellow-100</div>
<div class="p-3 bd-yellow-200">$yellow-200</div>
<div class="p-3 bd-yellow-300">$yellow-300</div>
<div class="p-3 bd-yellow-400">$yellow-400</div>
<div class="p-3 bd-yellow-500">$yellow-500</div>
<div class="p-3 bd-yellow-600">$yellow-600</div>
<div class="p-3 bd-yellow-700">$yellow-700</div>
<div class="p-3 bd-yellow-800">$yellow-800</div>
<div class="p-3 bd-yellow-900">$yellow-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-green">
<strong class="d-block">$green</strong>
#198754
</div>
<div class="p-3 bd-green-100">$green-100</div>
<div class="p-3 bd-green-200">$green-200</div>
<div class="p-3 bd-green-300">$green-300</div>
<div class="p-3 bd-green-400">$green-400</div>
<div class="p-3 bd-green-500">$green-500</div>
<div class="p-3 bd-green-600">$green-600</div>
<div class="p-3 bd-green-700">$green-700</div>
<div class="p-3 bd-green-800">$green-800</div>
<div class="p-3 bd-green-900">$green-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-teal">
<strong class="d-block">$teal</strong>
#20c997
</div>
<div class="p-3 bd-teal-100">$teal-100</div>
<div class="p-3 bd-teal-200">$teal-200</div>
<div class="p-3 bd-teal-300">$teal-300</div>
<div class="p-3 bd-teal-400">$teal-400</div>
<div class="p-3 bd-teal-500">$teal-500</div>
<div class="p-3 bd-teal-600">$teal-600</div>
<div class="p-3 bd-teal-700">$teal-700</div>
<div class="p-3 bd-teal-800">$teal-800</div>
<div class="p-3 bd-teal-900">$teal-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-cyan">
<strong class="d-block">$cyan</strong>
#0dcaf0
</div>
<div class="p-3 bd-cyan-100">$cyan-100</div>
<div class="p-3 bd-cyan-200">$cyan-200</div>
<div class="p-3 bd-cyan-300">$cyan-300</div>
<div class="p-3 bd-cyan-400">$cyan-400</div>
<div class="p-3 bd-cyan-500">$cyan-500</div>
<div class="p-3 bd-cyan-600">$cyan-600</div>
<div class="p-3 bd-cyan-700">$cyan-700</div>
<div class="p-3 bd-cyan-800">$cyan-800</div>
<div class="p-3 bd-cyan-900">$cyan-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-gray-500">
@@ -743,24 +744,24 @@
#adb5bd
</div>
<div class="p-3 bd-gray-100">$gray-100</div>
<div class="p-3 bd-gray-200">$gray-200</div>
<div class="p-3 bd-gray-300">$gray-300</div>
<div class="p-3 bd-gray-400">$gray-400</div>
<div class="p-3 bd-gray-500">$gray-500</div>
<div class="p-3 bd-gray-600">$gray-600</div>
<div class="p-3 bd-gray-700">$gray-700</div>
<div class="p-3 bd-gray-800">$gray-800</div>
<div class="p-3 bd-gray-900">$gray-900</div>
</div>
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 bd-black text-white">
<strong class="d-block">$black</strong>
@@ -916,7 +917,7 @@
<script src="/docs/5.1/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.1/customize/components/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -398,7 +399,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -410,10 +411,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="base-classes">Base classes</h2>
<p>Bootstrap&rsquo;s components are largely built with a base-modifier nomenclature. We group as many shared properties as possible into a base class, like <code>.btn</code>, and then group individual styles for each variant into modifier classes, like <code>.btn-primary</code> or <code>.btn-success</code>.</p>
@@ -592,7 +593,7 @@
<script src="/docs/5.1/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.1/customize/css-variables/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -398,7 +399,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -410,10 +411,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<p>Bootstrap includes many <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">CSS custom properties (variables)</a> in its compiled CSS for real-time customization without the need to recompile Sass. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser&rsquo;s inspector, a code sandbox, or general prototyping.</p>
<p><strong>All our custom properties are prefixed with <code>bs-</code></strong> to avoid conflicts with third party CSS.</p>
@@ -558,7 +559,7 @@
<script src="/docs/5.1/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.1/customize/optimize/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -398,7 +399,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -413,10 +414,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<h2 id="lean-sass-imports">Lean Sass imports</h2>
<p>When using Sass in your asset pipeline, make sure you optimize Bootstrap by only <code>@import</code>ing the components you need. Your largest optimizations will likely come from the <code>Layout &amp; Components</code> section of our <code>bootstrap.scss</code>.</p>
@@ -590,7 +591,7 @@
<script src="/docs/5.1/assets/js/docs.min.js"></script>
</body>
</html>

11
docs/5.1/customize/options/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -398,10 +399,10 @@
</div>
<div class="bd-content ps-lg-4">
<p>Customize Bootstrap with our built-in custom variables file and easily toggle global CSS preferences with new <code>$enable-*</code> Sass variables. Override a variable&rsquo;s value and recompile with <code>npm run test</code> as needed.</p>
<p>You can find and customize these variables for key global options in Bootstrap&rsquo;s <code>scss/_variables.scss</code> file.</p>
@@ -564,7 +565,7 @@
<script src="/docs/5.1/assets/js/docs.min.js"></script>
</body>
</html>

27
docs/5.1/customize/overview/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -398,56 +399,56 @@
</div>
<div class="bd-content ps-lg-4">
<div class="row g-3">
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../sass/">
<strong class="d-block h5 mb-0">Sass</strong>
<span class="text-secondary">Utilize our source Sass files to take advantage of variables, maps, mixins, and functions.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../options/">
<strong class="d-block h5 mb-0">Options</strong>
<span class="text-secondary">Customize Bootstrap with built-in variables to easily toggle global CSS preferences.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../color/">
<strong class="d-block h5 mb-0">Color</strong>
<span class="text-secondary">Learn about and customize the color systems that support the entire toolkit.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../components/">
<strong class="d-block h5 mb-0">Components</strong>
<span class="text-secondary">Learn how we build nearly all our components responsively and with base and modifier classes.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../css-variables/">
<strong class="d-block h5 mb-0">CSS variables</strong>
<span class="text-secondary">Use Bootstrap&#39;s CSS custom properties for fast and forward-looking design and development.</span>
</a>
</div>
<div class="col-md-6">
<a class="d-block text-decoration-none" href="../optimize/">
<strong class="d-block h5 mb-0">Optimize</strong>
<span class="text-secondary">Keep your projects lean, responsive, and maintainable so you can deliver the best experience.</span>
</a>
</div>
</div>
<h2 id="overview">Overview</h2>
<p>There are multiple ways to customize Bootstrap. Your best path can depend on your project, the complexity of your build tools, the version of Bootstrap you&rsquo;re using, browser support, and more.</p>
@@ -544,7 +545,7 @@
<script src="/docs/5.1/assets/js/docs.min.js"></script>
</body>
</html>

13
docs/5.1/customize/sass/index.html
View File

@@ -48,6 +48,7 @@
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
@@ -137,7 +138,7 @@
</header>
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
<div class="container-xxl d-flex align-items-md-center">
<form class="bd-search position-relative me-auto">
@@ -398,7 +399,7 @@
</div>
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
<nav id="TableOfContents">
@@ -430,10 +431,10 @@
</ul>
</nav>
</div>
<div class="bd-content ps-lg-4">
<p>Utilize our source Sass files to take advantage of variables, maps, mixins, and more.</p>
<h2 id="file-structure">File structure</h2>
@@ -722,7 +723,7 @@
<script src="/docs/5.1/assets/js/docs.min.js"></script>
</body>
</html>