mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-26 23:04:32 +02:00
Merge branch 'main' into main-jd-stackblitz-for-examples
This commit is contained in:
Julien Déramond
GitHub
@@ -1397,27 +1397,31 @@ direction: rtl
|
||||
|
||||
<div>
|
||||
{{< example show_markup="false" >}}
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar" role="progressbar" aria-label="مثال مع عنوان" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
|
||||
<div class="progress mb-3" role="progressbar" aria-label="مثال مع عنوان" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar">0%</div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar bg-success w-25" role="progressbar" aria-label="مثال ناجح مع عنوان" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
|
||||
<div class="progress mb-3" role="progressbar" aria-label="مثال ناجح مع عنوان" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-success w-25">25%</div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar text-bg-info w-50" role="progressbar" aria-label="مثال توضيح مع عنوان" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
|
||||
<div class="progress mb-3" role="progressbar" aria-label="مثال توضيح مع عنوان" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar text-bg-info w-50">50%</div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar text-bg-warning w-75" role="progressbar" aria-label="مثال تنبيه مع عنوان" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
|
||||
<div class="progress mb-3" role="progressbar" aria-label="مثال تنبيه مع عنوان" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar text-bg-warning w-75">75%</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-danger w-100" role="progressbar" aria-label="مثال خطر مع عنوان" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
|
||||
<div class="progress" role="progressbar" aria-label="مثال خطر مع عنوان" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-danger w-100">100%</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
{{< example show_markup="false" >}}
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-label="القسم الأول - مثال افتراضي" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-label="القسم الثاني - مثال ناجح مقلّم متحرك" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-stacked">
|
||||
<div class="progress" role="progressbar" aria-label="القسم الأول - مثال افتراضي" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="القسم الثاني - مثال ناجح مقلّم متحرك" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
@@ -1394,27 +1394,31 @@ body_class: "bg-light"
|
||||
|
||||
<div>
|
||||
{{< example show_markup="false" >}}
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar" role="progressbar" aria-label="Example with label" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
|
||||
<div class="progress mb-3" role="progressbar" aria-label="Example with label" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar">0%</div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar bg-success w-25" role="progressbar" aria-label="Success example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
|
||||
<div class="progress mb-3" role="progressbar" aria-label="Success example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-success w-25">25%</div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar text-bg-info w-50" role="progressbar" aria-label="Info example with label" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
|
||||
<div class="progress mb-3" role="progressbar" aria-label="Info example with label" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar text-bg-info w-50">50%</div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar text-bg-warning w-75" role="progressbar" aria-label="Warning example with label" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
|
||||
<div class="progress mb-3" role="progressbar" aria-label="Warning example with label" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar text-bg-warning w-75">75%</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-danger w-100" role="progressbar" aria-label="Danger example with label" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
|
||||
<div class="progress" role="progressbar" aria-label="Danger example with label" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-danger w-100">100%</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
{{< example show_markup="false" >}}
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-label="Segment one - default example" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-label="Segment two - animated striped success example" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-stacked">
|
||||
<div class="progress" role="progressbar" aria-label="Segment one - default example" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" aria-label="Segment two - animated striped success example" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
@@ -292,54 +292,53 @@ body_class: ""
|
||||
<h2 class="pb-2 border-bottom">Features with title</h2>
|
||||
|
||||
<div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
|
||||
<div class="d-flex flex-column align-items-start gap-2">
|
||||
<div class="col d-flex flex-column align-items-start gap-2">
|
||||
<h3 class="fw-bold">Left-aligned title explaining these awesome features</h3>
|
||||
<p class="text-muted">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
|
||||
<a href="#" class="btn btn-primary btn-lg">Primary button</a>
|
||||
</div>
|
||||
<div class="row row-cols-1 row-cols-sm-2 g-4">
|
||||
<div class="d-flex flex-column gap-2">
|
||||
<div
|
||||
class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
|
||||
<svg class="bi" width="1em" height="1em">
|
||||
<use xlink:href="#collection" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="fw-semibold mb-0">Featured title</h4>
|
||||
<p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column gap-2">
|
||||
<div
|
||||
class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
|
||||
<svg class="bi" width="1em" height="1em">
|
||||
<use xlink:href="#gear-fill" />
|
||||
</svg>
|
||||
<div class="col">
|
||||
<div class="row row-cols-1 row-cols-sm-2 g-4">
|
||||
<div class="col d-flex flex-column gap-2">
|
||||
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
|
||||
<svg class="bi" width="1em" height="1em">
|
||||
<use xlink:href="#collection" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="fw-semibold mb-0">Featured title</h4>
|
||||
<p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
<h4 class="fw-semibold mb-0">Featured title</h4>
|
||||
<p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column gap-2">
|
||||
<div
|
||||
class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
|
||||
<svg class="bi" width="1em" height="1em">
|
||||
<use xlink:href="#speedometer" />
|
||||
</svg>
|
||||
<div class="col d-flex flex-column gap-2">
|
||||
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
|
||||
<svg class="bi" width="1em" height="1em">
|
||||
<use xlink:href="#gear-fill" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="fw-semibold mb-0">Featured title</h4>
|
||||
<p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
<h4 class="fw-semibold mb-0">Featured title</h4>
|
||||
<p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column gap-2">
|
||||
<div
|
||||
class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
|
||||
<svg class="bi" width="1em" height="1em">
|
||||
<use xlink:href="#table" />
|
||||
</svg>
|
||||
<div class="col d-flex flex-column gap-2">
|
||||
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
|
||||
<svg class="bi" width="1em" height="1em">
|
||||
<use xlink:href="#speedometer" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="fw-semibold mb-0">Featured title</h4>
|
||||
<p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
|
||||
<div class="col d-flex flex-column gap-2">
|
||||
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
|
||||
<svg class="bi" width="1em" height="1em">
|
||||
<use xlink:href="#table" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="fw-semibold mb-0">Featured title</h4>
|
||||
<p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
<h4 class="fw-semibold mb-0">Featured title</h4>
|
||||
<p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -400,7 +400,7 @@ extra_css:
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-lg bg-light rounded" aria-label="Thirtheenth navbar example">
|
||||
<nav class="navbar navbar-expand-lg bg-light rounded" aria-label="Thirteenth navbar example">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample11" aria-controls="navbarsExample11" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
|
||||
Reference in New Issue
Block a user