mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-27 15:19:52 +02:00
Code Issues Releases Wiki Activity

Examples: color mode enhancement (#38144)

Browse Source 
* Tool bar proposal inside examples

* Some examples fixes

* Change appearance and position of the color mode toggler

* Proposal

* .

---------

Co-authored-by: Mark Otto <markdotto@gmail.com>
This commit is contained in:
Louis-Maxime Piton
2023-03-04 20:49:07 +01:00
committed by GitHub
parent 9a1f4ed9e5
commit b26233c1ab
8 changed files with 101 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
site/content/docs/5.3/examples/carousel/carousel.css
View File

@@ -5,7 +5,7 @@
body {
padding-top: 3rem;
padding-bottom: 3rem;
color: #5a5a5a;
color: rgb(var(--bs-tertiary-color-rgb));
}

2
site/content/docs/5.3/examples/carousel/carousel.rtl.css
View File

@@ -5,7 +5,7 @@
body {
padding-top: 3rem;
padding-bottom: 3rem;
color: #5a5a5a;
color: rgb(var(--bs-tertiary-color-rgb));
}

20
site/content/docs/5.3/examples/carousel/index.html
View File

@@ -5,7 +5,7 @@ extra_css:
- "carousel.css"
---
<header>
<header data-bs-theme="dark">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Carousel</a>
@@ -43,7 +43,7 @@ extra_css:
</div>
<div class="carousel-inner">
<div class="carousel-item active">
{{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
{{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
<div class="container">
<div class="carousel-caption text-start">
<h1>Example headline.</h1>
@@ -53,7 +53,7 @@ extra_css:
</div>
</div>
<div class="carousel-item">
{{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
{{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
@@ -63,7 +63,7 @@ extra_css:
</div>
</div>
<div class="carousel-item">
{{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
{{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
<div class="container">
<div class="carousel-caption text-end">
<h1>One more for good measure.</h1>
@@ -93,19 +93,19 @@ extra_css:
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4">
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
{{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
<h2 class="fw-normal">Heading</h2>
<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
<p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
{{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
<h2 class="fw-normal">Heading</h2>
<p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
<p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
{{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
<h2 class="fw-normal">Heading</h2>
<p>And lastly this, the third column of representative placeholder content.</p>
<p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
@@ -123,7 +123,7 @@ extra_css:
<p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
</div>
<div class="col-md-5">
{{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
{{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
</div>
</div>
@@ -135,7 +135,7 @@ extra_css:
<p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
</div>
<div class="col-md-5 order-md-1">
{{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
{{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
</div>
</div>
@@ -147,7 +147,7 @@ extra_css:
<p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
</div>
<div class="col-md-5">
{{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
{{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
</div>
</div>