mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 05:03:16 +02:00
Code Issues Releases Wiki Activity

Testing this out

Browse Source
This commit is contained in:
Mark Otto
2021-05-07 10:48:18 -07:00
parent d1334cc7ac
commit fbfc16fd8f
74 changed files with 282 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
docs/4.6/getting-started/theming/index.html
View File

@@ -59,6 +59,7 @@
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
</head>
@@ -239,7 +240,7 @@
</div>
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<nav id="TableOfContents">
<ul>
@@ -290,7 +291,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">
@@ -569,77 +570,77 @@
<h3 id="all-colors">All colors</h3>
<p>All colors available in Bootstrap 4, are available as Sass variables and a Sass map in <code>scss/_variables.scss</code> file. This will be expanded upon in subsequent minor releases to add additional shades, much like the <a href="#grays">grayscale palette</a> we already include.</p>
<div class="row">
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace swatch-blue">
<strong class="d-block">$blue</strong>
<small>#007bff</small>
</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace swatch-indigo">
<strong class="d-block">$indigo</strong>
<small>#6610f2</small>
</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace swatch-purple">
<strong class="d-block">$purple</strong>
<small>#6f42c1</small>
</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace swatch-pink">
<strong class="d-block">$pink</strong>
<small>#e83e8c</small>
</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace swatch-red">
<strong class="d-block">$red</strong>
<small>#dc3545</small>
</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace swatch-orange">
<strong class="d-block">$orange</strong>
<small>#fd7e14</small>
</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace swatch-yellow">
<strong class="d-block">$yellow</strong>
<small>#ffc107</small>
</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace swatch-green">
<strong class="d-block">$green</strong>
<small>#28a745</small>
</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace swatch-teal">
<strong class="d-block">$teal</strong>
<small>#20c997</small>
</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace swatch-cyan">
<strong class="d-block">$cyan</strong>
<small>#17a2b8</small>
</div>
</div>
</div>
<p>Here&rsquo;s how you can use these in your Sass:</p>
<div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// With variable
@@ -655,114 +656,114 @@ In the future, we&rsquo;ll aim to provide Sass maps and variables for shades of
<h3 id="theme-colors">Theme colors</h3>
<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 text-monospace bg-primary text-white">
<strong class="d-block">$primary</strong>
<small>#007bff</small>
</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace bg-secondary text-white">
<strong class="d-block">$secondary</strong>
<small>#868e96</small>
</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace bg-success text-white">
<strong class="d-block">$success</strong>
<small>#28a745</small>
</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace bg-danger text-white">
<strong class="d-block">$danger</strong>
<small>#dc3545</small>
</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace bg-warning text-dark">
<strong class="d-block">$warning</strong>
<small>#ffc107</small>
</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace bg-info text-white">
<strong class="d-block">$info</strong>
<small>#17a2b8</small>
</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace bg-light text-dark">
<strong class="d-block">$light</strong>
<small>#f8f9fa</small>
</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 text-monospace bg-dark text-white">
<strong class="d-block">$dark</strong>
<small>#343a40</small>
</div>
</div>
</div>
<h3 id="grays">Grays</h3>
<p>An expansive set of gray variables and a Sass map in <code>scss/_variables.scss</code> for consistent shades of gray across your project. Note that these are &ldquo;cool grays&rdquo;, which tend towards a subtle blue tone, rather than neutral grays.</p>
<div class="row mb-3">
<div class="col-md-4">
<div class="p-3 text-monospace swatch-100">
<strong class="d-block">$gray-100</strong>
<small>#f8f9fa</small>
</div>
<div class="p-3 text-monospace swatch-200">
<strong class="d-block">$gray-200</strong>
<small>#e9ecef</small>
</div>
<div class="p-3 text-monospace swatch-300">
<strong class="d-block">$gray-300</strong>
<small>#dee2e6</small>
</div>
<div class="p-3 text-monospace swatch-400">
<strong class="d-block">$gray-400</strong>
<small>#ced4da</small>
</div>
<div class="p-3 text-monospace swatch-500">
<strong class="d-block">$gray-500</strong>
<small>#adb5bd</small>
</div>
<div class="p-3 text-monospace swatch-600">
<strong class="d-block">$gray-600</strong>
<small>#6c757d</small>
</div>
<div class="p-3 text-monospace swatch-700">
<strong class="d-block">$gray-700</strong>
<small>#495057</small>
</div>
<div class="p-3 text-monospace swatch-800">
<strong class="d-block">$gray-800</strong>
<small>#343a40</small>
</div>
<div class="p-3 text-monospace swatch-900">
<strong class="d-block">$gray-900</strong>
<small>#212529</small>
</div>
</div>
</div>
<p>Within <code>scss/_variables.scss</code>, you&rsquo;ll find Bootstrap&rsquo;s color variables and Sass map. Here&rsquo;s an example of the <code>$colors</code> Sass map:</p>