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

Add newer version 5 alert on top of v4 and v5 pages (#38410)

Browse Source 
* Change newer version label of v3.3

* Change newer version label of v3.4

* Change newer version label of v4.0/v4.1/v4.2

* Add newer version alert for v4.3

* Add newer version alert for v4.4

* Add newer version alert for v4.5/v4.6 (using `.skippy` bg color)

* Add newer version alert for v5.0 (using `.skippy` bg color)

* Add newer version alert for v5.1 (using `.skippy` bg color)

* Add newer version alert for v5.2 (using `.skippy` bg color)

* Change some copy

- v4 gets 'Bootstrap 5 is here'
- v5 gets 'Theres a newer version of Bootstrap 5'

* Unique message: 'There\'s a newer version of Bootstrap!'

* Change HTML structure for focus visible

---------

Co-authored-by: Mark Otto <markdotto@gmail.com>
This commit is contained in:
Julien Déramond
2023-05-17 18:39:05 +02:00
committed by GitHub
parent 42ec3773d3
commit 87498ceeb2
812 changed files with 3788 additions and 1445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

280
docs/5.2/customize/color/index.html
View File

@@ -141,6 +141,10 @@
</svg>
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<div class="bd-navbar-toggle">
@@ -158,9 +162,9 @@
</a>
<div class="d-flex">
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
@@ -218,7 +222,7 @@
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
</li>
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -254,7 +258,7 @@
</header>
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
@@ -480,7 +484,7 @@
</div>
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
@@ -507,47 +511,47 @@
</nav>
</div>
</div>
<div class="bd-content ps-lg-2">
<h2 id="theme-colors">Theme colors <a class="anchor-link" href="#theme-colors" aria-label="Link to this section: Theme colors"></a></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="line"><span class="cl"><span class="nv">$theme-colors</span><span class="o">:</span> <span class="p">(</span>
@@ -566,265 +570,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">
@@ -832,24 +836,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>
@@ -1011,12 +1015,12 @@
<script src="/docs/5.2/assets/js/docs.min.js"></script>
<script>
document.querySelectorAll('.btn-edit').forEach(btn => {
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
@@ -1060,7 +1064,7 @@ ${htmlSnippet.replace(/^/gm, ' ')}
</script>
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>

24
docs/5.2/customize/components/index.html
View File

@@ -141,6 +141,10 @@
</svg>
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<div class="bd-navbar-toggle">
@@ -158,9 +162,9 @@
</a>
<div class="d-flex">
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
@@ -218,7 +222,7 @@
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
</li>
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -254,7 +258,7 @@
</header>
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
@@ -480,7 +484,7 @@
</div>
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
@@ -499,10 +503,10 @@
</nav>
</div>
</div>
<div class="bd-content ps-lg-2">
<h2 id="base-classes">Base classes <a class="anchor-link" href="#base-classes" aria-label="Link to this section: Base classes"></a></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>
@@ -685,12 +689,12 @@
<script src="/docs/5.2/assets/js/docs.min.js"></script>
<script>
document.querySelectorAll('.btn-edit').forEach(btn => {
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
@@ -734,7 +738,7 @@ ${htmlSnippet.replace(/^/gm, ' ')}
</script>
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>

24
docs/5.2/customize/css-variables/index.html
View File

@@ -141,6 +141,10 @@
</svg>
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<div class="bd-navbar-toggle">
@@ -158,9 +162,9 @@
</a>
<div class="d-flex">
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
@@ -218,7 +222,7 @@
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
</li>
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -254,7 +258,7 @@
</header>
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
@@ -480,7 +484,7 @@
</div>
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
@@ -500,10 +504,10 @@
</nav>
</div>
</div>
<div class="bd-content ps-lg-2">
<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>
@@ -669,12 +673,12 @@
<script src="/docs/5.2/assets/js/docs.min.js"></script>
<script>
document.querySelectorAll('.btn-edit').forEach(btn => {
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
@@ -718,7 +722,7 @@ ${htmlSnippet.replace(/^/gm, ' ')}
</script>
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>

24
docs/5.2/customize/optimize/index.html
View File

@@ -141,6 +141,10 @@
</svg>
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<div class="bd-navbar-toggle">
@@ -158,9 +162,9 @@
</a>
<div class="d-flex">
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
@@ -218,7 +222,7 @@
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
</li>
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -254,7 +258,7 @@
</header>
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
@@ -480,7 +484,7 @@
</div>
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
@@ -502,10 +506,10 @@
</nav>
</div>
</div>
<div class="bd-content ps-lg-2">
<h2 id="lean-sass-imports">Lean Sass imports <a class="anchor-link" href="#lean-sass-imports" aria-label="Link to this section: Lean Sass imports"></a></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>
@@ -685,12 +689,12 @@
<script src="/docs/5.2/assets/js/docs.min.js"></script>
<script>
document.querySelectorAll('.btn-edit').forEach(btn => {
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
@@ -734,7 +738,7 @@ ${htmlSnippet.replace(/^/gm, ' ')}
</script>
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>

22
docs/5.2/customize/options/index.html
View File

@@ -141,6 +141,10 @@
</svg>
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<div class="bd-navbar-toggle">
@@ -158,9 +162,9 @@
</a>
<div class="d-flex">
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
@@ -218,7 +222,7 @@
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
</li>
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -254,7 +258,7 @@
</header>
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
@@ -480,10 +484,10 @@
</div>
<div class="bd-content ps-lg-2">
<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>
@@ -654,12 +658,12 @@
<script src="/docs/5.2/assets/js/docs.min.js"></script>
<script>
document.querySelectorAll('.btn-edit').forEach(btn => {
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
@@ -703,7 +707,7 @@ ${htmlSnippet.replace(/^/gm, ' ')}
</script>
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>

38
docs/5.2/customize/overview/index.html
View File

@@ -141,6 +141,10 @@
</svg>
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<div class="bd-navbar-toggle">
@@ -158,9 +162,9 @@
</a>
<div class="d-flex">
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
@@ -218,7 +222,7 @@
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
</li>
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -254,7 +258,7 @@
</header>
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
@@ -480,56 +484,56 @@
</div>
<div class="bd-content ps-lg-2">
<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 <a class="anchor-link" href="#overview" aria-label="Link to this section: Overview"></a></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>
@@ -629,12 +633,12 @@
<script src="/docs/5.2/assets/js/docs.min.js"></script>
<script>
document.querySelectorAll('.btn-edit').forEach(btn => {
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
@@ -678,7 +682,7 @@ ${htmlSnippet.replace(/^/gm, ' ')}
</script>
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>

24
docs/5.2/customize/sass/index.html
View File

@@ -141,6 +141,10 @@
</svg>
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<div class="bd-navbar-toggle">
@@ -158,9 +162,9 @@
</a>
<div class="d-flex">
<div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
@@ -218,7 +222,7 @@
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
</li>
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -254,7 +258,7 @@
</header>
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<aside class="bd-sidebar">
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
@@ -480,7 +484,7 @@
</div>
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
@@ -519,10 +523,10 @@
</nav>
</div>
</div>
<div class="bd-content ps-lg-2">
<p>Utilize our source Sass files to take advantage of variables, maps, mixins, and more.</p>
<h2 id="file-structure">File structure <a class="anchor-link" href="#file-structure" aria-label="Link to this section: File structure"></a></h2>
@@ -822,12 +826,12 @@
<script src="/docs/5.2/assets/js/docs.min.js"></script>
<script>
document.querySelectorAll('.btn-edit').forEach(btn => {
btn.addEventListener('click', event => {
const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
@@ -871,7 +875,7 @@ ${htmlSnippet.replace(/^/gm, ' ')}
</script>
<div class="position-fixed"><input type="text" tabindex="-1"></div>
</body>