rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Update snippet examples for dark mode (#37834)

Browse Source 
* Update snippet examples for dark mode

* Fix markup

* Review comments

* undo colored links docs from this PR
This commit is contained in:
Mark Otto 2023-01-10 16:33:33 -08:00 committed by GitHub
parent 3fc305b2de
commit f40e76d1f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 468 additions and 313 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/content/docs/5.3/examples/blog/index.html
View File

@ -14,7 +14,7 @@ include_js: false
<a class="link-secondary" href="#">Subscribe</a>
</div>
<div class="col-4 text-center">
<a class="blog-header-logo text-dark" href="#">Large</a>
<a class="blog-header-logo text-body-emphasis" href="#">Large</a>
</div>
<div class="col-4 d-flex justify-content-end align-items-center">
<a class="link-secondary" href="#" aria-label="Search">

24
site/content/docs/5.3/examples/dropdowns/dropdowns.css
View File

@ -1,7 +1,3 @@
.dropdown-menu {
margin: 4rem auto;
}
.dropdown-item-danger {
color: var(--bs-red);
}
@ -15,12 +11,13 @@
}
.btn-hover-light {
background-color: var(--bs-white);
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
}
.btn-hover-light:hover,
.btn-hover-light:focus {
color: var(--bs-blue);
background-color: var(--bs-light);
color: var(--bs-link-hover-color);
background-color: var(--bs-tertiary-bg);
}
.cal-month,
@ -46,22 +43,17 @@
}
.cal-btn:not([disabled]) {
font-weight: 500;
color: var(--bs-emphasis-color);
}
.cal-btn:hover,
.cal-btn:focus {
background-color: rgba(0, 0, 0, .05);
background-color: var(--bs-secondary-bg);
}
.cal-btn[disabled] {
border: 0;
opacity: .5;
}
.form-control-dark {
background-color: rgba(255, 255, 255, .05);
border-color: rgba(255, 255, 255, .15);
}
.w-220px {
width: 220px;
}
@ -74,6 +66,6 @@
width: 340px;
}
.w-600px {
width: 600px;
.opacity-10 {
opacity: .1;
}

349
site/content/docs/5.3/examples/dropdowns/index.html
View File

@ -49,15 +49,15 @@ body_class: ""
</symbol>
</svg>
<div class="d-flex gap-5 justify-content-center">
<ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-3 mx-0 shadow w-220px">
<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
<ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-3 mx-0 shadow w-220px" data-bs-theme="light">
<li><a class="dropdown-item rounded-2 active" href="#">Action</a></li>
<li><a class="dropdown-item rounded-2" href="#">Another action</a></li>
<li><a class="dropdown-item rounded-2" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item rounded-2" href="#">Separated link</a></li>
</ul>
<ul class="dropdown-menu dropdown-menu-dark position-static d-grid gap-1 p-2 rounded-3 mx-0 border-0 shadow w-220px">
<ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-3 mx-0 border-0 shadow w-220px" data-bs-theme="dark">
<li><a class="dropdown-item rounded-2 active" href="#">Action</a></li>
<li><a class="dropdown-item rounded-2" href="#">Another action</a></li>
<li><a class="dropdown-item rounded-2" href="#">Something else here</a></li>
@ -68,8 +68,8 @@ body_class: ""
<div class="b-example-divider"></div>
<div class="d-flex gap-5 justify-content-center">
<div class="dropdown-menu d-block position-static pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px">
<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
<div class="dropdown-menu d-block position-static pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px" data-bs-theme="light">
<form class="p-2 mb-2 bg-body-tertiary border-bottom">
<input type="search" class="form-control" autocomplete="false" placeholder="Type to filter...">
</form>
@ -93,9 +93,9 @@ body_class: ""
</ul>
</div>
<div class="dropdown-menu dropdown-menu-dark d-block position-static border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px">
<div class="dropdown-menu d-block position-static border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px" data-bs-theme="dark">
<form class="p-2 mb-2 bg-dark border-bottom border-dark">
<input type="search" class="form-control form-control-dark" autocomplete="false" placeholder="Type to filter...">
<input type="search" class="form-control bg-dark" autocomplete="false" placeholder="Type to filter...">
</form>
<ul class="list-unstyled mb-0">
<li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
@ -120,8 +120,8 @@ body_class: ""
<div class="b-example-divider"></div>
<div class="d-flex gap-5 justify-content-center">
<ul class="dropdown-menu d-block position-static mx-0 shadow w-220px">
<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
<ul class="dropdown-menu d-block position-static mx-0 shadow w-220px" data-bs-theme="light">
<li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
@ -160,7 +160,7 @@ body_class: ""
</a>
</li>
</ul>
<ul class="dropdown-menu dropdown-menu-dark d-block position-static mx-0 border-0 shadow w-220px">
<ul class="dropdown-menu d-block position-static mx-0 border-0 shadow w-220px" data-bs-theme="dark">
<li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
@ -203,80 +203,161 @@ body_class: ""
<div class="b-example-divider"></div>
<div class="dropdown-menu d-block position-static p-2 shadow rounded-3 w-340px">
<div class="d-grid gap-1">
<div class="cal">
<div class="cal-month">
<button class="btn cal-btn" type="button">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
</button>
<strong class="cal-month-name">June</strong>
<select class="form-select cal-month-name d-none">
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option selected value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<button class="btn cal-btn" type="button">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
</button>
<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
<div class="dropdown-menu d-block position-static p-2 mx-0 shadow rounded-3 w-340px" data-bs-theme="light">
<div class="d-grid gap-1">
<div class="cal">
<div class="cal-month">
<button class="btn cal-btn" type="button">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
</button>
<strong class="cal-month-name">June</strong>
<select class="form-select cal-month-name d-none">
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option selected value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<button class="btn cal-btn" type="button">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
</button>
</div>
<div class="cal-weekdays text-muted">
<div class="cal-weekday">Sun</div>
<div class="cal-weekday">Mon</div>
<div class="cal-weekday">Tue</div>
<div class="cal-weekday">Wed</div>
<div class="cal-weekday">Thu</div>
<div class="cal-weekday">Fri</div>
<div class="cal-weekday">Sat</div>
</div>
<div class="cal-days">
<button class="btn cal-btn" disabled type="button">30</button>
<button class="btn cal-btn" disabled type="button">31</button>
<button class="btn cal-btn" type="button">1</button>
<button class="btn cal-btn" type="button">2</button>
<button class="btn cal-btn" type="button">3</button>
<button class="btn cal-btn" type="button">4</button>
<button class="btn cal-btn" type="button">5</button>
<button class="btn cal-btn" type="button">6</button>
<button class="btn cal-btn" type="button">7</button>
<button class="btn cal-btn" type="button">8</button>
<button class="btn cal-btn" type="button">9</button>
<button class="btn cal-btn" type="button">10</button>
<button class="btn cal-btn" type="button">11</button>
<button class="btn cal-btn" type="button">12</button>
<button class="btn cal-btn" type="button">13</button>
<button class="btn cal-btn" type="button">14</button>
<button class="btn cal-btn" type="button">15</button>
<button class="btn cal-btn" type="button">16</button>
<button class="btn cal-btn" type="button">17</button>
<button class="btn cal-btn" type="button">18</button>
<button class="btn cal-btn" type="button">19</button>
<button class="btn cal-btn" type="button">20</button>
<button class="btn cal-btn" type="button">21</button>
<button class="btn cal-btn" type="button">22</button>
<button class="btn cal-btn" type="button">23</button>
<button class="btn cal-btn" type="button">24</button>
<button class="btn cal-btn" type="button">25</button>
<button class="btn cal-btn" type="button">26</button>
<button class="btn cal-btn" type="button">27</button>
<button class="btn cal-btn" type="button">28</button>
<button class="btn cal-btn" type="button">29</button>
<button class="btn cal-btn" type="button">30</button>
<button class="btn cal-btn" type="button">31</button>
</div>
</div>
<div class="cal-weekdays text-muted">
<div class="cal-weekday">Sun</div>
<div class="cal-weekday">Mon</div>
<div class="cal-weekday">Tue</div>
<div class="cal-weekday">Wed</div>
<div class="cal-weekday">Thu</div>
<div class="cal-weekday">Fri</div>
<div class="cal-weekday">Sat</div>
</div>
<div class="cal-days">
<button class="btn cal-btn" disabled type="button">30</button>
<button class="btn cal-btn" disabled type="button">31</button>
</div>
</div>
<button class="btn cal-btn" type="button">1</button>
<button class="btn cal-btn" type="button">2</button>
<button class="btn cal-btn" type="button">3</button>
<button class="btn cal-btn" type="button">4</button>
<button class="btn cal-btn" type="button">5</button>
<button class="btn cal-btn" type="button">6</button>
<button class="btn cal-btn" type="button">7</button>
<div class="dropdown-menu d-block position-static p-2 mx-0 shadow rounded-3 w-340px" data-bs-theme="dark">
<div class="d-grid gap-1">
<div class="cal">
<div class="cal-month">
<button class="btn cal-btn" type="button">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
</button>
<strong class="cal-month-name">June</strong>
<select class="form-select cal-month-name d-none">
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option selected value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<button class="btn cal-btn" type="button">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
</button>
</div>
<div class="cal-weekdays text-muted">
<div class="cal-weekday">Sun</div>
<div class="cal-weekday">Mon</div>
<div class="cal-weekday">Tue</div>
<div class="cal-weekday">Wed</div>
<div class="cal-weekday">Thu</div>
<div class="cal-weekday">Fri</div>
<div class="cal-weekday">Sat</div>
</div>
<div class="cal-days">
<button class="btn cal-btn" disabled type="button">30</button>
<button class="btn cal-btn" disabled type="button">31</button>
<button class="btn cal-btn" type="button">8</button>
<button class="btn cal-btn" type="button">9</button>
<button class="btn cal-btn" type="button">10</button>
<button class="btn cal-btn" type="button">11</button>
<button class="btn cal-btn" type="button">12</button>
<button class="btn cal-btn" type="button">13</button>
<button class="btn cal-btn" type="button">14</button>
<button class="btn cal-btn" type="button">1</button>
<button class="btn cal-btn" type="button">2</button>
<button class="btn cal-btn" type="button">3</button>
<button class="btn cal-btn" type="button">4</button>
<button class="btn cal-btn" type="button">5</button>
<button class="btn cal-btn" type="button">6</button>
<button class="btn cal-btn" type="button">7</button>
<button class="btn cal-btn" type="button">15</button>
<button class="btn cal-btn" type="button">16</button>
<button class="btn cal-btn" type="button">17</button>
<button class="btn cal-btn" type="button">18</button>
<button class="btn cal-btn" type="button">19</button>
<button class="btn cal-btn" type="button">20</button>
<button class="btn cal-btn" type="button">21</button>
<button class="btn cal-btn" type="button">8</button>
<button class="btn cal-btn" type="button">9</button>
<button class="btn cal-btn" type="button">10</button>
<button class="btn cal-btn" type="button">11</button>
<button class="btn cal-btn" type="button">12</button>
<button class="btn cal-btn" type="button">13</button>
<button class="btn cal-btn" type="button">14</button>
<button class="btn cal-btn" type="button">22</button>
<button class="btn cal-btn" type="button">23</button>
<button class="btn cal-btn" type="button">24</button>
<button class="btn cal-btn" type="button">25</button>
<button class="btn cal-btn" type="button">26</button>
<button class="btn cal-btn" type="button">27</button>
<button class="btn cal-btn" type="button">28</button>
<button class="btn cal-btn" type="button">15</button>
<button class="btn cal-btn" type="button">16</button>
<button class="btn cal-btn" type="button">17</button>
<button class="btn cal-btn" type="button">18</button>
<button class="btn cal-btn" type="button">19</button>
<button class="btn cal-btn" type="button">20</button>
<button class="btn cal-btn" type="button">21</button>
<button class="btn cal-btn" type="button">29</button>
<button class="btn cal-btn" type="button">30</button>
<button class="btn cal-btn" type="button">31</button>
<button class="btn cal-btn" type="button">22</button>
<button class="btn cal-btn" type="button">23</button>
<button class="btn cal-btn" type="button">24</button>
<button class="btn cal-btn" type="button">25</button>
<button class="btn cal-btn" type="button">26</button>
<button class="btn cal-btn" type="button">27</button>
<button class="btn cal-btn" type="button">28</button>
<button class="btn cal-btn" type="button">29</button>
<button class="btn cal-btn" type="button">30</button>
<button class="btn cal-btn" type="button">31</button>
</div>
</div>
</div>
</div>
@ -284,24 +365,98 @@ body_class: ""
<div class="b-example-divider"></div>
<div class="dropdown-menu position-static d-flex align-items-stretch p-3 rounded-3 shadow-lg w-600px">
<nav class="d-grid gap-2 col-8">
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-center gap-3 py-2 px-3 lh-sm text-start">
<svg class="bi" width="32" height="32"><use xlink:href="#image-fill"/></svg>
<div>
<strong class="d-block">Features</strong>
<small>Take a tour through the product</small>
</div>
</a>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-center gap-3 py-2 px-3 lh-sm text-start">
<svg class="bi" width="32" height="32"><use xlink:href="#question-circle"/></svg>
<div>
<strong class="d-block">Support</strong>
<small>Get help from our support crew</small>
</div>
</a>
</nav>
<div class="col-4">
...
<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
<div class="dropdown-menu position-static d-flex flex-column flex-lg-row align-items-stretch justify-content-start p-3 rounded-3 shadow-lg" data-bs-theme="light">
<nav class="col-lg-8">
<ul class="list-unstyled d-flex flex-column gap-2">
<li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#image-fill"/></svg>
<div>
<strong class="d-block">Main product</strong>
<small>Take a tour through the product</small>
</div>
</a>
</li>
<li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#music-note-beamed"/></svg>
<div>
<strong class="d-block">Another product</strong>
<small>Explore this other product we offer</small>
</div>
</a>
</li>
<li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#question-circle"/></svg>
<div>
<strong class="d-block">Support</strong>
<small>Get help from our support crew</small>
</div>
</a>
</li>
</ul>
</nav>
<div class="d-none d-lg-block vr mx-4 opacity-10">&nbsp;</div>
<hr class="d-lg-none">
<div class="col-lg-auto pe-3">
<nav>
<ul class="d-flex flex-column gap-2 list-unstyled small">
<li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Documentation</a></li>
<li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Use cases</a></li>
<li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">API status</a></li>
<li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Partners</a></li>
<li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Resources</a></li>
</ul>
</nav>
</div>
</div>
<div class="dropdown-menu position-static d-flex flex-column flex-lg-row align-items-stretch justify-content-start p-3 rounded-3 shadow-lg" data-bs-theme="dark">
<nav class="col-lg-8">
<ul class="list-unstyled d-flex flex-column gap-2">
<li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#image-fill"/></svg>
<div>
<strong class="d-block">Main product</strong>
<small>Take a tour through the product</small>
</div>
</a>
</li>
<li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#music-note-beamed"/></svg>
<div>
<strong class="d-block">Another product</strong>
<small>Explore this other product we offer</small>
</div>
</a>
</li>
<li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#question-circle"/></svg>
<div>
<strong class="d-block">Support</strong>
<small>Get help from our support crew</small>
</div>
</a>
</li>
</ul>
</nav>
<div class="d-none d-lg-block vr mx-4 opacity-10">&nbsp;</div>
<hr class="d-lg-none">
<div class="col-lg-auto pe-3">
<nav>
<ul class="d-flex flex-column gap-2 list-unstyled small">
<li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Documentation</a></li>
<li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Use cases</a></li>
<li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">API status</a></li>
<li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Partners</a></li>
<li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Resources</a></li>
</ul>
</nav>
</div>
</div>
</div>

6
site/content/docs/5.3/examples/features/index.html
View File

@ -112,7 +112,7 @@ body_class: ""
<h2 class="pb-2 border-bottom">Hanging icons</h2>
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="col d-flex align-items-start">
<div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
</div>
<div>
@ -124,7 +124,7 @@ body_class: ""
</div>
</div>
<div class="col d-flex align-items-start">
<div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg>
</div>
<div>
@ -136,7 +136,7 @@ body_class: ""
</div>
</div>
<div class="col d-flex align-items-start">
<div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg>
</div>
<div>

10
site/content/docs/5.3/examples/footers/index.html
View File

@ -24,7 +24,7 @@ body_class: ""
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<p class="col-md-4 mb-0 text-muted">&copy; {{< year >}} Company, Inc</p>
<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
</a>
@ -77,7 +77,7 @@ body_class: ""
<div class="container">
<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top">
<div class="col mb-3">
<a href="/" class="d-flex align-items-center mb-3 link-dark text-decoration-none">
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
</a>
<p class="text-muted">&copy; {{< year >}}</p>
@ -177,9 +177,9 @@ body_class: ""
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
<p>&copy; {{< year >}} Company, Inc. All rights reserved.</p>
<ul class="list-unstyled d-flex">
<li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
<li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
<li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
</ul>
</div>
</footer>

24
site/content/docs/5.3/examples/headers/index.html
View File

@ -35,7 +35,7 @@ body_class: ""
<div class="container">
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Simple header</span>
</a>
@ -68,16 +68,16 @@ body_class: ""
<div class="container">
<header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
<a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 link-secondary">Home</a></li>
<li><a href="#" class="nav-link px-2 link-dark">Features</a></li>
<li><a href="#" class="nav-link px-2 link-dark">Pricing</a></li>
<li><a href="#" class="nav-link px-2 link-dark">FAQs</a></li>
<li><a href="#" class="nav-link px-2 link-dark">About</a></li>
<li><a href="#" class="nav-link px-2">Features</a></li>
<li><a href="#" class="nav-link px-2">Pricing</a></li>
<li><a href="#" class="nav-link px-2">FAQs</a></li>
<li><a href="#" class="nav-link px-2">About</a></li>
</ul>
<div class="col-md-3 text-end">
@ -121,15 +121,15 @@ body_class: ""
<header class="p-3 mb-3 border-bottom">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 link-secondary">Overview</a></li>
<li><a href="#" class="nav-link px-2 link-dark">Inventory</a></li>
<li><a href="#" class="nav-link px-2 link-dark">Customers</a></li>
<li><a href="#" class="nav-link px-2 link-dark">Products</a></li>
<li><a href="#" class="nav-link px-2 link-body-emphasis">Inventory</a></li>
<li><a href="#" class="nav-link px-2 link-body-emphasis">Customers</a></li>
<li><a href="#" class="nav-link px-2 link-body-emphasis">Products</a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
@ -157,7 +157,7 @@ body_class: ""
<header class="py-3 mb-3 border-bottom">
<div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;">
<div class="dropdown">
<a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
</a>
<ul class="dropdown-menu text-small shadow">
@ -222,7 +222,7 @@ body_class: ""
</nav>
<header class="py-3 mb-4 border-bottom">
<div class="container d-flex flex-wrap justify-content-center">
<a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-dark text-decoration-none">
<a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Double header</span>
</a>

12
site/content/docs/5.3/examples/heroes/index.html
View File

@ -11,7 +11,7 @@ body_class: ""
<div class="px-4 py-5 my-5 text-center">
<img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
<h1 class="display-5 fw-bold">Centered hero</h1>
<h1 class="display-5 fw-bold text-body-emphasis">Centered hero</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
@ -24,7 +24,7 @@ body_class: ""
<div class="b-example-divider"></div>
<div class="px-4 pt-5 my-5 text-center border-bottom">
<h1 class="display-4 fw-bold">Centered screenshot</h1>
<h1 class="display-4 fw-bold text-body-emphasis">Centered screenshot</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
@ -47,7 +47,7 @@ body_class: ""
<img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
</div>
<div class="col-lg-6">
<h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1>
<h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">Responsive left-aligned hero with image</h1>
<p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
<button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button>
@ -62,7 +62,7 @@ body_class: ""
<div class="container col-xl-10 col-xxl-8 px-4 py-5">
<div class="row align-items-center g-lg-5 py-5">
<div class="col-lg-7 text-center text-lg-start">
<h1 class="display-4 fw-bold lh-1 mb-3">Vertically centered hero sign-up form</h1>
<h1 class="display-4 fw-bold lh-1 text-body-emphasis mb-3">Vertically centered hero sign-up form</h1>
<p class="col-lg-10 fs-4">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
</div>
<div class="col-md-10 mx-auto col-lg-5">
@ -93,7 +93,7 @@ body_class: ""
<div class="container my-5">
<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
<div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
<h1 class="display-4 fw-bold lh-1">Border hero with cropped image and shadows</h1>
<h1 class="display-4 fw-bold lh-1 text-body-emphasis">Border hero with cropped image and shadows</h1>
<p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
<button type="button" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">Primary</button>
@ -110,7 +110,7 @@ body_class: ""
<div class="bg-dark text-secondary px-4 py-5 text-center">
<div class="py-5">
<h1 class="display-5 fw-bold text-white">Dark mode hero</h1>
<h1 class="display-5 fw-bold text-white">Dark color hero</h1>
<div class="col-lg-6 mx-auto">
<p class="fs-5 mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">

250
site/content/docs/5.3/examples/list-groups/index.html
View File

@ -27,43 +27,45 @@ body_class: ""
</symbol>
</svg>
<div class="list-group w-auto">
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">List group item heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">List group item heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">now</small>
</div>
<small class="opacity-50 text-nowrap">now</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Another title here</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph that goes a little longer so it wraps to a new line.</p>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Another title here</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph that goes a little longer so it wraps to a new line.</p>
</div>
<small class="opacity-50 text-nowrap">3d</small>
</div>
<small class="opacity-50 text-nowrap">3d</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Third heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Third heading</h6>
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
</div>
<small class="opacity-50 text-nowrap">1w</small>
</div>
<small class="opacity-50 text-nowrap">1w</small>
</div>
</a>
</a>
</div>
</div>
<div class="b-example-divider"></div>
<div class="d-flex gap-5 justify-content-center">
<div class="list-group mx-0 w-auto">
<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
<div class="list-group">
<label class="list-group-item d-flex gap-2">
<input class="form-check-input flex-shrink-0" type="checkbox" value="" checked>
<span>
@ -87,7 +89,7 @@ body_class: ""
</label>
</div>
<div class="list-group mx-0 w-auto">
<div class="list-group">
<label class="list-group-item d-flex gap-2">
<input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios1" value="" checked>
<span>
@ -114,109 +116,115 @@ body_class: ""
<div class="b-example-divider"></div>
<div class="list-group w-auto">
<label class="list-group-item d-flex gap-3">
<input class="form-check-input flex-shrink-0" type="checkbox" value="" checked style="font-size: 1.375em;">
<span class="pt-1 form-checked-content">
<strong>Finish sales report</strong>
<small class="d-block text-muted">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
1:00–2:00pm
</small>
</span>
</label>
<label class="list-group-item d-flex gap-3">
<input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
<span class="pt-1 form-checked-content">
<strong>Weekly All Hands</strong>
<small class="d-block text-muted">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
2:00–2:30pm
</small>
</span>
</label>
<label class="list-group-item d-flex gap-3">
<input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
<span class="pt-1 form-checked-content">
<strong>Out of office</strong>
<small class="d-block text-muted">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#alarm"/></svg>
Tomorrow
</small>
</span>
</label>
<label class="list-group-item d-flex gap-3 bg-body-tertiary">
<input class="form-check-input form-check-input-placeholder bg-body-tertiary flex-shrink-0 pe-none" disabled type="checkbox" value="" style="font-size: 1.375em;">
<span class="pt-1 form-checked-content">
<span contenteditable="true" class="w-100">Add new task...</span>
<small class="d-block text-muted">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#list-check"/></svg>
Choose list...
</small>
</span>
</label>
<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
<div class="list-group">
<label class="list-group-item d-flex gap-3">
<input class="form-check-input flex-shrink-0" type="checkbox" value="" checked style="font-size: 1.375em;">
<span class="pt-1 form-checked-content">
<strong>Finish sales report</strong>
<small class="d-block text-muted">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
1:00–2:00pm
</small>
</span>
</label>
<label class="list-group-item d-flex gap-3">
<input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
<span class="pt-1 form-checked-content">
<strong>Weekly All Hands</strong>
<small class="d-block text-muted">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
2:00–2:30pm
</small>
</span>
</label>
<label class="list-group-item d-flex gap-3">
<input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
<span class="pt-1 form-checked-content">
<strong>Out of office</strong>
<small class="d-block text-muted">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#alarm"/></svg>
Tomorrow
</small>
</span>
</label>
<label class="list-group-item d-flex gap-3 bg-body-tertiary">
<input class="form-check-input form-check-input-placeholder bg-body-tertiary flex-shrink-0 pe-none" disabled type="checkbox" value="" style="font-size: 1.375em;">
<span class="pt-1 form-checked-content">
<span contenteditable="true" class="w-100">Add new task...</span>
<small class="d-block text-muted">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#list-check"/></svg>
Choose list...
</small>
</span>
</label>
</div>
</div>
<div class="b-example-divider"></div>
<div class="list-group list-group-checkable d-grid gap-2 border-0 w-auto">
<input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios1" value="" checked>
<label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios1">
First radio
<span class="d-block small opacity-50">With support text underneath to add more detail</span>
</label>
<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
<div class="list-group list-group-checkable d-grid gap-2 border-0">
<input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios1" value="" checked>
<label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios1">
First radio
<span class="d-block small opacity-50">With support text underneath to add more detail</span>
</label>
<input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios2" value="">
<label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios2">
Second radio
<span class="d-block small opacity-50">Some other text goes here</span>
</label>
<input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios2" value="">
<label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios2">
Second radio
<span class="d-block small opacity-50">Some other text goes here</span>
</label>
<input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios3" value="">
<label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios3">
Third radio
<span class="d-block small opacity-50">And we end with another snippet of text</span>
</label>
<input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios3" value="">
<label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios3">
Third radio
<span class="d-block small opacity-50">And we end with another snippet of text</span>
</label>
<input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios4" value="" disabled>
<label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios4">
Fourth disabled radio
<span class="d-block small opacity-50">This option is disabled</span>
</label>
<input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios4" value="" disabled>
<label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios4">
Fourth disabled radio
<span class="d-block small opacity-50">This option is disabled</span>
</label>
</div>
</div>
<div class="b-example-divider"></div>
<div class="list-group list-group-radio d-grid gap-2 border-0 w-auto">
<div class="position-relative">
<input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid1" value="" checked>
<label class="list-group-item py-3 pe-5" for="listGroupRadioGrid1">
<strong class="fw-semibold">First radio</strong>
<span class="d-block small opacity-75">With support text underneath to add more detail</span>
</label>
</div>
<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
<div class="list-group list-group-radio d-grid gap-2 border-0">
<div class="position-relative">
<input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid1" value="" checked>
<label class="list-group-item py-3 pe-5" for="listGroupRadioGrid1">
<strong class="fw-semibold">First radio</strong>
<span class="d-block small opacity-75">With support text underneath to add more detail</span>
</label>
</div>
<div class="position-relative">
<input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid2" value="">
<label class="list-group-item py-3 pe-5" for="listGroupRadioGrid2">
<strong class="fw-semibold">Second radio</strong>
<span class="d-block small opacity-75">Some other text goes here</span>
</label>
</div>
<div class="position-relative">
<input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid2" value="">
<label class="list-group-item py-3 pe-5" for="listGroupRadioGrid2">
<strong class="fw-semibold">Second radio</strong>
<span class="d-block small opacity-75">Some other text goes here</span>
</label>
</div>
<div class="position-relative">
<input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid3" value="">
<label class="list-group-item py-3 pe-5" for="listGroupRadioGrid3">
<strong class="fw-semibold">Third radio</strong>
<span class="d-block small opacity-75">And we end with another snippet of text</span>
</label>
</div>
<div class="position-relative">
<input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid3" value="">
<label class="list-group-item py-3 pe-5" for="listGroupRadioGrid3">
<strong class="fw-semibold">Third radio</strong>
<span class="d-block small opacity-75">And we end with another snippet of text</span>
</label>
</div>
<div class="position-relative">
<input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid4" value="" disabled>
<label class="list-group-item py-3 pe-5" for="listGroupRadioGrid4">
<strong class="fw-semibold">Fourth disabled radio</strong>
<span class="d-block small opacity-75">This option is disabled</span>
</label>
<div class="position-relative">
<input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid4" value="" disabled>
<label class="list-group-item py-3 pe-5" for="listGroupRadioGrid4">
<strong class="fw-semibold">Fourth disabled radio</strong>
<span class="d-block small opacity-75">This option is disabled</span>
</label>
</div>
</div>
</div>

14
site/content/docs/5.3/examples/list-groups/list-groups.css
View File

@ -1,6 +1,7 @@
.list-group {
width: 100%;
max-width: 460px;
margin: 4rem auto;
margin-inline: 1.5rem;
}
.form-check-input:checked + .form-checked-content {
@ -22,11 +23,12 @@
clip: rect(0, 0, 0, 0);
}
.list-group-item-check:hover + .list-group-item {
background-color: var(--bs-light);
background-color: var(--bs-secondary-bg);
}
.list-group-item-check:checked + .list-group-item {
color: #fff;
background-color: var(--bs-blue);
background-color: var(--bs-primary);
border-color: var(--bs-primary);
}
.list-group-item-check[disabled] + .list-group-item,
.list-group-item-check:disabled + .list-group-item {
@ -45,13 +47,13 @@
}
.list-group-radio .list-group-item:hover,
.list-group-radio .list-group-item:focus {
background-color: var(--bs-light);
background-color: var(--bs-secondary-bg);
}
.list-group-radio .form-check-input:checked + .list-group-item {
background-color: var(--bs-body);
border-color: var(--bs-blue);
box-shadow: 0 0 0 2px var(--bs-blue);
border-color: var(--bs-primary);
box-shadow: 0 0 0 2px var(--bs-primary);
}
.list-group-radio .form-check-input[disabled] + .list-group-item,
.list-group-radio .form-check-input:disabled + .list-group-item {

23
site/content/docs/5.3/examples/modals/index.html
View File

@ -55,7 +55,7 @@ body_class: ""
</symbol>
</svg>
<div class="modal modal-sheet position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSheet">
<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalSheet">
<div class="modal-dialog" role="document">
<div class="modal-content rounded-4 shadow">
<div class="modal-header border-bottom-0">
@ -65,9 +65,9 @@ body_class: ""
<div class="modal-body py-0">
<p>This is a modal sheet, a variation of the modal that docs itself to the bottom of the viewport like the newer share sheets in iOS.</p>
</div>
<div class="modal-footer flex-column border-top-0">
<button type="button" class="btn btn-lg btn-primary w-100 mx-0 mb-2">Save changes</button>
<button type="button" class="btn btn-lg btn-light w-100 mx-0" data-bs-dismiss="modal">Close</button>
<div class="modal-footer flex-column align-items-stretch w-100 gap-2 pb-3 border-top-0">
<button type="button" class="btn btn-lg btn-primary">Save changes</button>
<button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
@ -75,7 +75,7 @@ body_class: ""
<div class="b-example-divider"></div>
<div class="modal modal-alert position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalChoice">
<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalChoice">
<div class="modal-dialog" role="document">
<div class="modal-content rounded-3 shadow">
<div class="modal-body p-4 text-center">
@ -83,8 +83,8 @@ body_class: ""
<p class="mb-0">You can always change your mind in your account settings.</p>
</div>
<div class="modal-footer flex-nowrap p-0">
<button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0 border-end"><strong>Yes, enable</strong></button>
<button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0" data-bs-dismiss="modal">No thanks</button>
<button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0 border-end"><strong>Yes, enable</strong></button>
<button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0" data-bs-dismiss="modal">No thanks</button>
</div>
</div>
</div>
@ -92,13 +92,13 @@ body_class: ""
<div class="b-example-divider"></div>
<div class="modal modal-tour position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalTour">
<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalTour">
<div class="modal-dialog" role="document">
<div class="modal-content rounded-4 shadow">
<div class="modal-body p-5">
<h2 class="fw-bold mb-0">What's new</h2>
<ul class="d-grid gap-4 my-5 list-unstyled">
<ul class="d-grid gap-4 my-5 list-unstyled small">
<li class="d-flex gap-4">
<svg class="bi text-muted flex-shrink-0" width="48" height="48"><use xlink:href="#grid-fill"/></svg>
<div>
@ -129,11 +129,10 @@ body_class: ""
<div class="b-example-divider"></div>
<div class="modal modal-signin position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSignin">
<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalSignin">
<div class="modal-dialog" role="document">
<div class="modal-content rounded-4 shadow">
<div class="modal-header p-5 pb-4 border-bottom-0">
<!-- <h1 class="modal-title fs-5" >Modal title</h1> -->
<h1 class="fw-bold mb-0 fs-2">Sign up for free</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
@ -152,7 +151,7 @@ body_class: ""
<small class="text-muted">By clicking Sign up, you agree to the terms of use.</small>
<hr class="my-4">
<h2 class="fs-5 fw-bold mb-3">Or use a third-party</h2>
<button class="w-100 py-2 mb-2 btn btn-outline-dark rounded-3" type="submit">
<button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit">
<svg class="bi me-1" width="16" height="16"><use xlink:href="#twitter"/></svg>
Sign up with Twitter
</button>

7
site/content/docs/5.3/examples/modals/modals.css
View File

@ -6,10 +6,3 @@
padding-bottom: 2rem;
}
.modal-alert .modal-dialog {
width: 380px;
}
.modal-tour .modal-dialog {
width: 380px;
}

44
site/content/docs/5.3/examples/sidebars/index.html
View File

@ -127,7 +127,7 @@ body_class: ""
<div class="b-example-divider b-example-vr"></div>
<div class="d-flex flex-column flex-shrink-0 p-3 bg-body-tertiary" style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Sidebar</span>
</a>
@ -140,25 +140,25 @@ body_class: ""
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
<a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
Dashboard
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
<a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg>
Orders
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
<a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
Products
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
<a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
Customers
</a>
@ -166,7 +166,7 @@ body_class: ""
</ul>
<hr>
<div class="dropdown">
<a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<a href="#" class="d-flex align-items-center link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
<strong>mdo</strong>
</a>
@ -183,7 +183,7 @@ body_class: ""
<div class="b-example-divider b-example-vr"></div>
<div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 4.5rem;">
<a href="/" class="d-block p-3 link-dark text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
<a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi pe-none" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
<span class="visually-hidden">Icon-only</span>
</a>
@ -215,7 +215,7 @@ body_class: ""
</li>
</ul>
<div class="dropdown border-top">
<a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<a href="#" class="d-flex align-items-center justify-content-center p-3 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle">
</a>
<ul class="dropdown-menu text-small shadow">
@ -230,8 +230,8 @@ body_class: ""
<div class="b-example-divider b-example-vr"></div>
<div class="flex-shrink-0 p-3 bg-white" style="width: 280px;">
<a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
<div class="flex-shrink-0 p-3" style="width: 280px;">
<a href="/" class="d-flex align-items-center pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom">
<svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
<span class="fs-5 fw-semibold">Collapsible</span>
</a>
@ -242,9 +242,9 @@ body_class: ""
</button>
<div class="collapse show" id="home-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Overview</a></li>
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Updates</a></li>
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Reports</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Overview</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Updates</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Reports</a></li>
</ul>
</div>
</li>
@ -254,10 +254,10 @@ body_class: ""
</button>
<div class="collapse" id="dashboard-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Overview</a></li>
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Weekly</a></li>
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Monthly</a></li>
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Annually</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Overview</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Weekly</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Monthly</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Annually</a></li>
</ul>
</div>
</li>
@ -267,10 +267,10 @@ body_class: ""
</button>
<div class="collapse" id="orders-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">New</a></li>
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Processed</a></li>
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Shipped</a></li>
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Returned</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">New</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Processed</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Shipped</a></li>
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Returned</a></li>
</ul>
</div>
</li>
@ -294,7 +294,7 @@ body_class: ""
<div class="b-example-divider b-example-vr"></div>
<div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-body-tertiary" style="width: 380px;">
<a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">
<a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
<svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
<span class="fs-5 fw-semibold">List group</span>
</a>

14
site/content/docs/5.3/examples/sidebars/sidebars.css
View File

@ -20,13 +20,13 @@ main {
.btn-toggle {
padding: .25rem .5rem;
font-weight: 600;
color: rgba(0, 0, 0, .65);
color: var(--bs-emphasis-color);
background-color: transparent;
}
.btn-toggle:hover,
.btn-toggle:focus {
color: rgba(0, 0, 0, .85);
background-color: #d2f4ea;
color: rgba(var(--bs-emphasis-color-rgb), .85);
background-color: var(--bs-tertiary-bg);
}
.btn-toggle::before {
@ -37,8 +37,12 @@ main {
transform-origin: .5em 50%;
}
[data-bs-theme="dark"] .btn-toggle::before {
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
}
.btn-toggle[aria-expanded="true"] {
color: rgba(0, 0, 0, .85);
color: rgba(var(--bs-emphasis-color-rgb), .85);
}
.btn-toggle[aria-expanded="true"]::before {
transform: rotate(90deg);
@ -51,7 +55,7 @@ main {
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
background-color: #d2f4ea;
background-color: var(--bs-tertiary-bg);
}
.scrollarea {

1
site/content/docs/5.3/utilities/link.md
View File

@ -86,6 +86,7 @@ Just like the `.link-opacity-*-hover` utilities, `.link-offset` and `.link-under
<p><a href="#" class="link-{{ .name }} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">{{ .name | title }} link</a></p>
{{- end -}}
{{< /colored-links.inline >}}
<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>
{{< /example >}}
{{< callout info >}}

1
site/layouts/_default/examples.html
View File

@ -36,6 +36,7 @@
}
.b-example-divider {
width: 100%;
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);