mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
Improve overall new examples' accessibility (#33772)
This commit is contained in:
Gaël Poupard
GitHub
parent
3bcb9e7df7
commit
7bbf6d9ad3
@ -64,222 +64,225 @@ body_class: ""
|
||||
<path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
<main>
|
||||
<h1 class="visually-hidden">Features examples</h1>
|
||||
|
||||
<div class="container px-4 py-5" id="featured-3">
|
||||
<h2 class="pb-2 border-bottom">Columns with icons</h2>
|
||||
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
|
||||
<div class="feature col">
|
||||
<div class="feature-icon bg-primary bg-gradient">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg>
|
||||
</div>
|
||||
<h2>Featured title</h2>
|
||||
<p>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="icon-link">
|
||||
Call to action
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="feature col">
|
||||
<div class="feature-icon bg-primary bg-gradient">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg>
|
||||
</div>
|
||||
<h2>Featured title</h2>
|
||||
<p>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="icon-link">
|
||||
Call to action
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="feature col">
|
||||
<div class="feature-icon bg-primary bg-gradient">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
|
||||
</div>
|
||||
<h2>Featured title</h2>
|
||||
<p>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="icon-link">
|
||||
Call to action
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="container px-4 py-5" id="hanging-icons">
|
||||
<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 bg-light text-dark flex-shrink-0 me-3">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="container px-4 py-5" id="featured-3">
|
||||
<h2 class="pb-2 border-bottom">Columns with icons</h2>
|
||||
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
|
||||
<div class="feature col">
|
||||
<div class="feature-icon bg-primary bg-gradient">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg>
|
||||
</div>
|
||||
<h2>Featured title</h2>
|
||||
<p>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">
|
||||
Primary button
|
||||
<a href="#" class="icon-link">
|
||||
Call to action
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<div class="icon-square bg-light text-dark flex-shrink-0 me-3">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="feature col">
|
||||
<div class="feature-icon bg-primary bg-gradient">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg>
|
||||
</div>
|
||||
<h2>Featured title</h2>
|
||||
<p>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">
|
||||
Primary button
|
||||
<a href="#" class="icon-link">
|
||||
Call to action
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<div class="icon-square bg-light text-dark flex-shrink-0 me-3">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="feature col">
|
||||
<div class="feature-icon bg-primary bg-gradient">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
|
||||
</div>
|
||||
<h2>Featured title</h2>
|
||||
<p>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">
|
||||
Primary button
|
||||
<a href="#" class="icon-link">
|
||||
Call to action
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="container px-4 py-5" id="custom-cards">
|
||||
<h2 class="pb-2 border-bottom">Custom cards</h2>
|
||||
|
||||
<div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
|
||||
<div class="col">
|
||||
<div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');">
|
||||
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
|
||||
<h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h2>
|
||||
<ul class="d-flex list-unstyled mt-auto">
|
||||
<li class="me-auto">
|
||||
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
|
||||
</li>
|
||||
<li class="d-flex align-items-center me-3">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
|
||||
<small>Earth</small>
|
||||
</li>
|
||||
<li class="d-flex align-items-center">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
|
||||
<small>3d</small>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="container px-4 py-5" id="hanging-icons">
|
||||
<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 bg-light text-dark flex-shrink-0 me-3">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Featured title</h2>
|
||||
<p>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">
|
||||
Primary button
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');">
|
||||
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
|
||||
<h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h2>
|
||||
<ul class="d-flex list-unstyled mt-auto">
|
||||
<li class="me-auto">
|
||||
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
|
||||
</li>
|
||||
<li class="d-flex align-items-center me-3">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
|
||||
<small>Pakistan</small>
|
||||
</li>
|
||||
<li class="d-flex align-items-center">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
|
||||
<small>4d</small>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="col d-flex align-items-start">
|
||||
<div class="icon-square bg-light text-dark flex-shrink-0 me-3">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Featured title</h2>
|
||||
<p>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">
|
||||
Primary button
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-3.jpg');">
|
||||
<div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1">
|
||||
<h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h2>
|
||||
<ul class="d-flex list-unstyled mt-auto">
|
||||
<li class="me-auto">
|
||||
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
|
||||
</li>
|
||||
<li class="d-flex align-items-center me-3">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
|
||||
<small>California</small>
|
||||
</li>
|
||||
<li class="d-flex align-items-center">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
|
||||
<small>5d</small>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="col d-flex align-items-start">
|
||||
<div class="icon-square bg-light text-dark flex-shrink-0 me-3">
|
||||
<svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Featured title</h2>
|
||||
<p>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">
|
||||
Primary button
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="container px-4 py-5" id="icon-grid">
|
||||
<h2 class="pb-2 border-bottom">Icon grid</h2>
|
||||
<div class="container px-4 py-5" id="custom-cards">
|
||||
<h2 class="pb-2 border-bottom">Custom cards</h2>
|
||||
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
<div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
|
||||
<div class="col">
|
||||
<div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');">
|
||||
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
|
||||
<h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h2>
|
||||
<ul class="d-flex list-unstyled mt-auto">
|
||||
<li class="me-auto">
|
||||
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
|
||||
</li>
|
||||
<li class="d-flex align-items-center me-3">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
|
||||
<small>Earth</small>
|
||||
</li>
|
||||
<li class="d-flex align-items-center">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
|
||||
<small>3d</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
|
||||
<div class="col">
|
||||
<div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');">
|
||||
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
|
||||
<h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h2>
|
||||
<ul class="d-flex list-unstyled mt-auto">
|
||||
<li class="me-auto">
|
||||
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
|
||||
</li>
|
||||
<li class="d-flex align-items-center me-3">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
|
||||
<small>Pakistan</small>
|
||||
</li>
|
||||
<li class="d-flex align-items-center">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
|
||||
<small>4d</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
|
||||
<div class="col">
|
||||
<div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-3.jpg');">
|
||||
<div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1">
|
||||
<h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h2>
|
||||
<ul class="d-flex list-unstyled mt-auto">
|
||||
<li class="me-auto">
|
||||
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
|
||||
</li>
|
||||
<li class="d-flex align-items-center me-3">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
|
||||
<small>California</small>
|
||||
</li>
|
||||
<li class="d-flex align-items-center">
|
||||
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
|
||||
<small>5d</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="container px-4 py-5" id="icon-grid">
|
||||
<h2 class="pb-2 border-bottom">Icon grid</h2>
|
||||
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex align-items-start">
|
||||
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-0">Featured title</h4>
|
||||
<p>Paragraph of text beneath the heading to explain the heading.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -30,261 +30,266 @@ body_class: ""
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<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">
|
||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-4">Simple header</span>
|
||||
</a>
|
||||
<main>
|
||||
<h1 class="visually-hidden">Headers examples</h1>
|
||||
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item"><a href="#" class="nav-link active">Home</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">Features</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="container">
|
||||
<header class="d-flex justify-content-center py-3">
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item"><a href="#" class="nav-link active">Home</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">Features</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<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">
|
||||
<svg class="bi me-2" width="40" height="32"><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>
|
||||
</ul>
|
||||
|
||||
<div class="col-md-3 text-end">
|
||||
<button type="button" class="btn btn-outline-primary me-2">Login</button>
|
||||
<button type="button" class="btn btn-primary">Sign-up</button>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<header class="p-3 bg-dark text-white">
|
||||
<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-white text-decoration-none">
|
||||
<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">
|
||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-4">Simple header</span>
|
||||
</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 text-secondary">Home</a></li>
|
||||
<li><a href="#" class="nav-link px-2 text-white">Features</a></li>
|
||||
<li><a href="#" class="nav-link px-2 text-white">Pricing</a></li>
|
||||
<li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>
|
||||
<li><a href="#" class="nav-link px-2 text-white">About</a></li>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">Features</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="container">
|
||||
<header class="d-flex justify-content-center py-3">
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">Features</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
|
||||
<input type="search" class="form-control form-control-dark" placeholder="Search...">
|
||||
</form>
|
||||
<div class="col-md-3 text-end">
|
||||
<button type="button" class="btn btn-outline-primary me-2">Login</button>
|
||||
<button type="button" class="btn btn-primary">Sign-up</button>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div class="text-end">
|
||||
<button type="button" class="btn btn-outline-light me-2">Login</button>
|
||||
<button type="button" class="btn btn-warning">Sign-up</button>
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<header class="p-3 bg-dark text-white">
|
||||
<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-white 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 text-secondary">Home</a></li>
|
||||
<li><a href="#" class="nav-link px-2 text-white">Features</a></li>
|
||||
<li><a href="#" class="nav-link px-2 text-white">Pricing</a></li>
|
||||
<li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>
|
||||
<li><a href="#" class="nav-link px-2 text-white">About</a></li>
|
||||
</ul>
|
||||
|
||||
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
|
||||
<input type="search" class="form-control form-control-dark" placeholder="Search..." aria-label="Search">
|
||||
</form>
|
||||
|
||||
<div class="text-end">
|
||||
<button type="button" class="btn btn-outline-light me-2">Login</button>
|
||||
<button type="button" class="btn btn-warning">Sign-up</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<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">
|
||||
<svg class="bi me-2" width="40" height="32"><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>
|
||||
</ul>
|
||||
|
||||
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
|
||||
<input type="search" class="form-control" placeholder="Search...">
|
||||
</form>
|
||||
|
||||
<div class="dropdown text-end">
|
||||
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
|
||||
<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">
|
||||
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
|
||||
</a>
|
||||
<ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1">
|
||||
<li><a class="dropdown-item" href="#">New project...</a></li>
|
||||
<li><a class="dropdown-item" href="#">Settings</a></li>
|
||||
<li><a class="dropdown-item" href="#">Profile</a></li>
|
||||
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
|
||||
<input type="search" class="form-control" placeholder="Search..." aria-label="Search">
|
||||
</form>
|
||||
|
||||
<div class="dropdown text-end">
|
||||
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
|
||||
</a>
|
||||
<ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1">
|
||||
<li><a class="dropdown-item" href="#">New project...</a></li>
|
||||
<li><a class="dropdown-item" href="#">Settings</a></li>
|
||||
<li><a class="dropdown-item" href="#">Profile</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#">Sign out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<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" id="dropdownNavLink" 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" aria-labelledby="dropdownNavLink">
|
||||
<li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li>
|
||||
<li><a class="dropdown-item" href="#">Inventory</a></li>
|
||||
<li><a class="dropdown-item" href="#">Customers</a></li>
|
||||
<li><a class="dropdown-item" href="#">Products</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#">Sign out</a></li>
|
||||
<li><a class="dropdown-item" href="#">Reports</a></li>
|
||||
<li><a class="dropdown-item" href="#">Analytics</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center">
|
||||
<form class="w-100 me-3">
|
||||
<input type="search" class="form-control" placeholder="Search..." aria-label="Search">
|
||||
</form>
|
||||
|
||||
<div class="flex-shrink-0 dropdown">
|
||||
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
|
||||
</a>
|
||||
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
|
||||
<li><a class="dropdown-item" href="#">New project...</a></li>
|
||||
<li><a class="dropdown-item" href="#">Settings</a></li>
|
||||
<li><a class="dropdown-item" href="#">Profile</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#">Sign out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<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" id="dropdownNavLink" 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" aria-labelledby="dropdownNavLink">
|
||||
<li><a class="dropdown-item active" href="#">Overview</a></li>
|
||||
<li><a class="dropdown-item" href="#">Inventory</a></li>
|
||||
<li><a class="dropdown-item" href="#">Customers</a></li>
|
||||
<li><a class="dropdown-item" href="#">Products</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#">Reports</a></li>
|
||||
<li><a class="dropdown-item" href="#">Analytics</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center">
|
||||
<form class="w-100 me-3">
|
||||
<input type="search" class="form-control" placeholder="Search...">
|
||||
</form>
|
||||
|
||||
<div class="flex-shrink-0 dropdown">
|
||||
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
|
||||
</a>
|
||||
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
|
||||
<li><a class="dropdown-item" href="#">New project...</a></li>
|
||||
<li><a class="dropdown-item" href="#">Settings</a></li>
|
||||
<li><a class="dropdown-item" href="#">Profile</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#">Sign out</a></li>
|
||||
</ul>
|
||||
<div class="container-fluid pb-3">
|
||||
<div class="d-grid gap-3" style="grid-template-columns: 1fr 2fr;">
|
||||
<div class="bg-light border rounded-3">
|
||||
<br><br><br><br><br><br><br><br><br><br>
|
||||
</div>
|
||||
<div class="bg-light border rounded-3">
|
||||
<br><br><br><br><br><br><br><br><br><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container-fluid pb-3">
|
||||
<div class="d-grid gap-3" style="grid-template-columns: 1fr 2fr;">
|
||||
<div class="bg-light border rounded-3">
|
||||
<br><br><br><br><br><br><br><br><br><br>
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<nav class="py-2 bg-light border-bottom">
|
||||
<div class="container d-flex flex-wrap">
|
||||
<ul class="nav me-auto">
|
||||
<li class="nav-item"><a href="#" class="nav-link link-dark px-2 active" aria-current="page">Home</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Features</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Pricing</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">FAQs</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">About</a></li>
|
||||
</ul>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Login</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Sign up</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-light border rounded-3">
|
||||
<br><br><br><br><br><br><br><br><br><br>
|
||||
</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">
|
||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-4">Double header</span>
|
||||
</a>
|
||||
<form class="col-12 col-lg-auto mb-3 mb-lg-0">
|
||||
<input type="search" class="form-control" placeholder="Search..." aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<header>
|
||||
<div class="px-3 py-2 bg-dark text-white">
|
||||
<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 my-2 my-lg-0 me-lg-auto text-white 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 my-2 justify-content-center my-md-0 text-small">
|
||||
<li>
|
||||
<a href="#" class="nav-link text-secondary">
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#home"/></svg>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#speedometer2"/></svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#table"/></svg>
|
||||
Orders
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#grid"/></svg>
|
||||
Products
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#people-circle"/></svg>
|
||||
Customers
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 border-bottom mb-3">
|
||||
<div class="container d-flex flex-wrap justify-content-center">
|
||||
<form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto">
|
||||
<input type="search" class="form-control" placeholder="Search..." aria-label="Search">
|
||||
</form>
|
||||
|
||||
<div class="text-end">
|
||||
<button type="button" class="btn btn-light text-dark me-2">Login</button>
|
||||
<button type="button" class="btn btn-primary">Sign-up</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
</main>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<nav class="py-2 bg-light border-bottom">
|
||||
<div class="container d-flex flex-wrap">
|
||||
<ul class="nav me-auto">
|
||||
<li class="nav-item"><a href="#" class="nav-link link-dark px-2 active">Home</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Features</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Pricing</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">FAQs</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">About</a></li>
|
||||
</ul>
|
||||
<ul class="nav">
|
||||
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Login</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Sign up</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</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">
|
||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-4">Double header</span>
|
||||
</a>
|
||||
<form class="col-12 col-lg-auto mb-3 mb-lg-0">
|
||||
<input type="search" class="form-control" placeholder="Search...">
|
||||
</form>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<header class="px-3 py-2 bg-dark text-white">
|
||||
<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 my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
|
||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
</a>
|
||||
|
||||
<ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
|
||||
<li>
|
||||
<a href="#" class="nav-link text-secondary">
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#home"/></svg>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#speedometer2"/></svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#table"/></svg>
|
||||
Orders
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#grid"/></svg>
|
||||
Products
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#people-circle"/></svg>
|
||||
Customers
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="px-3 py-2 border-bottom mb-3">
|
||||
<div class="container d-flex flex-wrap justify-content-center">
|
||||
<form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto">
|
||||
<input type="search" class="form-control" placeholder="Search...">
|
||||
</form>
|
||||
|
||||
<div class="text-end">
|
||||
<button type="button" class="btn btn-light text-dark me-2">Login</button>
|
||||
<button type="button" class="btn btn-primary">Sign-up</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
@ -6,118 +6,122 @@ extra_css:
|
||||
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>
|
||||
<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">
|
||||
<button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main>
|
||||
<h1 class="visually-hidden">Heroes examples</h1>
|
||||
|
||||
<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>
|
||||
<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">
|
||||
<button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-hidden" style="max-height: 30vh;">
|
||||
<div class="container px-5">
|
||||
<img src="bootstrap-docs.png" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="container col-xxl-8 px-4 py-5">
|
||||
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
|
||||
<div class="col-10 col-sm-8 col-lg-6">
|
||||
<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>
|
||||
<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>
|
||||
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<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>
|
||||
<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">
|
||||
<form class="p-4 p-md-5 border rounded-3 bg-light">
|
||||
<div class="form-floating mb-3">
|
||||
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
|
||||
<label for="floatingInput">Email address</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
|
||||
<label for="floatingPassword">Password</label>
|
||||
</div>
|
||||
<div class="checkbox mb-3">
|
||||
<label>
|
||||
<input type="checkbox" value="remember-me"> Remember me
|
||||
</label>
|
||||
</div>
|
||||
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button>
|
||||
<hr class="my-4">
|
||||
<small class="text-muted">By clicking Sign up, you agree to the terms of use.</small>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 offset-lg-1 p-0 position-relative overflow-hidden shadow-lg">
|
||||
<div class="position-lg-absolute top-0 left-0 overflow-hidden">
|
||||
<img class="d-block rounded-lg-3" src="bootstrap-docs.png" alt="" width="720">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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">
|
||||
<button type="button" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold">Custom button</button>
|
||||
<button type="button" class="btn btn-outline-light btn-lg px-4">Secondary</button>
|
||||
<button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider mb-0"></div>
|
||||
<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>
|
||||
<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">
|
||||
<button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-hidden" style="max-height: 30vh;">
|
||||
<div class="container px-5">
|
||||
<img src="bootstrap-docs.png" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="container col-xxl-8 px-4 py-5">
|
||||
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
|
||||
<div class="col-10 col-sm-8 col-lg-6">
|
||||
<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>
|
||||
<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>
|
||||
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<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>
|
||||
<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">
|
||||
<form class="p-4 p-md-5 border rounded-3 bg-light">
|
||||
<div class="form-floating mb-3">
|
||||
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
|
||||
<label for="floatingInput">Email address</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
|
||||
<label for="floatingPassword">Password</label>
|
||||
</div>
|
||||
<div class="checkbox mb-3">
|
||||
<label>
|
||||
<input type="checkbox" value="remember-me"> Remember me
|
||||
</label>
|
||||
</div>
|
||||
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button>
|
||||
<hr class="my-4">
|
||||
<small class="text-muted">By clicking Sign up, you agree to the terms of use.</small>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 offset-lg-1 p-0 position-relative overflow-hidden shadow-lg">
|
||||
<div class="position-lg-absolute top-0 left-0 overflow-hidden">
|
||||
<img class="d-block rounded-lg-3" src="bootstrap-docs.png" alt="" width="720">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<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>
|
||||
<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">
|
||||
<button type="button" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold">Custom button</button>
|
||||
<button type="button" class="btn btn-outline-light btn-lg px-4">Secondary</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider mb-0"></div>
|
||||
</main>
|
||||
|
||||
@ -14,25 +14,27 @@ include_js: false
|
||||
</svg>
|
||||
|
||||
<div class="container py-3">
|
||||
<header class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
|
||||
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
|
||||
<span class="fs-4">Pricing example</span>
|
||||
</a>
|
||||
<header>
|
||||
<div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
|
||||
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
|
||||
<span class="fs-4">Pricing example</span>
|
||||
</a>
|
||||
|
||||
<nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
|
||||
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Features</a>
|
||||
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Enterprise</a>
|
||||
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Support</a>
|
||||
<a class="py-2 text-dark text-decoration-none" href="#">Pricing</a>
|
||||
</nav>
|
||||
<nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
|
||||
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Features</a>
|
||||
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Enterprise</a>
|
||||
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Support</a>
|
||||
<a class="py-2 text-dark text-decoration-none" href="#">Pricing</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="pricing-header p-3 pb-md-4 mx-auto text-center">
|
||||
<h1 class="display-4 fw-normal">Pricing</h1>
|
||||
<p class="fs-5 text-muted">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="pricing-header p-3 pb-md-4 mx-auto text-center">
|
||||
<h1 class="display-4 fw-normal">Pricing</h1>
|
||||
<p class="fs-5 text-muted">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
|
||||
<div class="col">
|
||||
|
||||
@ -67,321 +67,325 @@ body_class: ""
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="d-flex flex-column p-3 text-white bg-dark" style="width: 280px;">
|
||||
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
|
||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-4">Sidebar</span>
|
||||
</a>
|
||||
<hr>
|
||||
<ul class="nav nav-pills flex-column mb-auto">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link active">
|
||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg>
|
||||
Orders
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
|
||||
Products
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
|
||||
Customers
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="dropdown">
|
||||
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle me-2">
|
||||
<strong>mdo</strong>
|
||||
<main>
|
||||
<h1 class="visually-hidden">Sidebars examples</h1>
|
||||
|
||||
<div class="d-flex flex-column p-3 text-white bg-dark" style="width: 280px;">
|
||||
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
|
||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-4">Sidebar</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
|
||||
<li><a class="dropdown-item" href="#">New project...</a></li>
|
||||
<li><a class="dropdown-item" href="#">Settings</a></li>
|
||||
<li><a class="dropdown-item" href="#">Profile</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#">Sign out</a></li>
|
||||
<hr>
|
||||
<ul class="nav nav-pills flex-column mb-auto">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link active" aria-current="page">
|
||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg>
|
||||
Orders
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
|
||||
Products
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
|
||||
Customers
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="dropdown">
|
||||
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" 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>
|
||||
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
|
||||
<li><a class="dropdown-item" href="#">New project...</a></li>
|
||||
<li><a class="dropdown-item" href="#">Settings</a></li>
|
||||
<li><a class="dropdown-item" href="#">Profile</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#">Sign out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="d-flex flex-column p-3 bg-light" style="width: 280px;">
|
||||
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
|
||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-4">Sidebar</span>
|
||||
</a>
|
||||
<hr>
|
||||
<ul class="nav nav-pills flex-column mb-auto">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link active" aria-current="page">
|
||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link link-dark">
|
||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link link-dark">
|
||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg>
|
||||
Orders
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link link-dark">
|
||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
|
||||
Products
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link link-dark">
|
||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
|
||||
Customers
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="dropdown">
|
||||
<a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" 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>
|
||||
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
|
||||
<li><a class="dropdown-item" href="#">New project...</a></li>
|
||||
<li><a class="dropdown-item" href="#">Settings</a></li>
|
||||
<li><a class="dropdown-item" href="#">Profile</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#">Sign out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="d-flex flex-column bg-light" 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">
|
||||
<svg class="bi" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="visually-hidden">Icon-only</span>
|
||||
</a>
|
||||
<ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link active py-3 border-bottom" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
|
||||
<svg class="bi" width="24" height="24" role="img" aria-label="Home"><use xlink:href="#home"/></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link py-3 border-bottom" title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#speedometer2"/></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link py-3 border-bottom" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#table"/></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link py-3 border-bottom" title="Products" data-bs-toggle="tooltip" data-bs-placement="right">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#grid"/></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link py-3 border-bottom" title="Customers" data-bs-toggle="tooltip" data-bs-placement="right">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#people-circle"/></svg>
|
||||
</a>
|
||||
</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" id="dropdownUser3" 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" aria-labelledby="dropdownUser3">
|
||||
<li><a class="dropdown-item" href="#">New project...</a></li>
|
||||
<li><a class="dropdown-item" href="#">Settings</a></li>
|
||||
<li><a class="dropdown-item" href="#">Profile</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#">Sign out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="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">
|
||||
<svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-5 fw-semibold">Collapsible</span>
|
||||
</a>
|
||||
<ul class="list-unstyled ps-0">
|
||||
<li class="mb-1">
|
||||
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true">
|
||||
Home
|
||||
</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 rounded">Overview</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Updates</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Reports</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
|
||||
Dashboard
|
||||
</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 rounded">Overview</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Weekly</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Monthly</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Annually</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false">
|
||||
Orders
|
||||
</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 rounded">New</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Processed</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Shipped</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Returned</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="border-top my-3"></li>
|
||||
<li class="mb-1">
|
||||
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
|
||||
Account
|
||||
</button>
|
||||
<div class="collapse" id="account-collapse">
|
||||
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="#" class="link-dark rounded">New...</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Profile</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Settings</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Sign out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="d-flex flex-column p-3 bg-light" style="width: 280px;">
|
||||
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
|
||||
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-4">Sidebar</span>
|
||||
</a>
|
||||
<hr>
|
||||
<ul class="nav nav-pills flex-column mb-auto">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link active">
|
||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link link-dark">
|
||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link link-dark">
|
||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg>
|
||||
Orders
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link link-dark">
|
||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
|
||||
Products
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link link-dark">
|
||||
<svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
|
||||
Customers
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="dropdown">
|
||||
<a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle me-2">
|
||||
<strong>mdo</strong>
|
||||
<div class="d-flex flex-column align-items-stretch bg-white" style="width: 380px;">
|
||||
<a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">
|
||||
<svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-5 fw-semibold">List group</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
|
||||
<li><a class="dropdown-item" href="#">New project...</a></li>
|
||||
<li><a class="dropdown-item" href="#">Settings</a></li>
|
||||
<li><a class="dropdown-item" href="#">Profile</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#">Sign out</a></li>
|
||||
</ul>
|
||||
<div class="list-group list-group-flush border-bottom scrollarea">
|
||||
<a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small>Wed</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-muted">Tues</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-muted">Mon</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-muted">Wed</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-muted">Tues</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-muted">Mon</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-muted">Wed</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-muted">Tues</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-muted">Mon</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-muted">Wed</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-muted">Tues</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-muted">Mon</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="d-flex flex-column bg-light" 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">
|
||||
<svg class="bi" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="visually-hidden">Icon-only</span>
|
||||
</a>
|
||||
<ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link active py-3 border-bottom" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#home"/></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link py-3 border-bottom" title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#speedometer2"/></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link py-3 border-bottom" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#table"/></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link py-3 border-bottom" title="Products" data-bs-toggle="tooltip" data-bs-placement="right">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#grid"/></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link py-3 border-bottom" title="Customers" data-bs-toggle="tooltip" data-bs-placement="right">
|
||||
<svg class="bi" width="24" height="24"><use xlink:href="#people-circle"/></svg>
|
||||
</a>
|
||||
</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" id="dropdownUser3" 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" aria-labelledby="dropdownUser3">
|
||||
<li><a class="dropdown-item" href="#">New project...</a></li>
|
||||
<li><a class="dropdown-item" href="#">Settings</a></li>
|
||||
<li><a class="dropdown-item" href="#">Profile</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#">Sign out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="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">
|
||||
<svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-5 fw-semibold">Collapsible</span>
|
||||
</a>
|
||||
<ul class="list-unstyled ps-0">
|
||||
<li class="mb-1">
|
||||
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true">
|
||||
Home
|
||||
</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 rounded">Overview</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Updates</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Reports</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
|
||||
Dashboard
|
||||
</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 rounded">Overview</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Weekly</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Monthly</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Annually</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false">
|
||||
Orders
|
||||
</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 rounded">New</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Processed</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Shipped</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Returned</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="border-top my-3"></li>
|
||||
<li class="mb-1">
|
||||
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
|
||||
Account
|
||||
</button>
|
||||
<div class="collapse" id="account-collapse">
|
||||
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="#" class="link-dark rounded">New...</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Profile</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Settings</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Sign out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
|
||||
<div class="d-flex flex-column align-items-stretch bg-white" style="width: 380px;">
|
||||
<a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">
|
||||
<svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-5 fw-semibold">List group</span>
|
||||
</a>
|
||||
<div class="list-group list-group-flush border-bottom scrollarea">
|
||||
<a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small>Wed</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-muted">Tues</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-muted">Mon</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-muted">Wed</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-muted">Tues</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-muted">Mon</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-muted">Wed</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-muted">Tues</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-muted">Mon</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-muted">Wed</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-muted">Tues</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
|
||||
<div class="d-flex w-100 align-items-center justify-content-between">
|
||||
<strong class="mb-1">List group item heading</strong>
|
||||
<small class="text-muted">Mon</small>
|
||||
</div>
|
||||
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-example-divider"></div>
|
||||
<div class="b-example-divider"></div>
|
||||
</main>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
body {
|
||||
main {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
height: 100vh;
|
||||
@ -6,7 +6,7 @@ body {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
body > * {
|
||||
main > * {
|
||||
flex-shrink: 0;
|
||||
min-height: -webkit-fill-available;
|
||||
}
|
||||
|
||||
@ -13,37 +13,38 @@ extra_css:
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<h1>Get started with Bootstrap</h1>
|
||||
<p class="fs-5 col-md-8">Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.</p>
|
||||
<main>
|
||||
<h1>Get started with Bootstrap</h1>
|
||||
<p class="fs-5 col-md-8">Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.</p>
|
||||
|
||||
<div class="mb-5">
|
||||
<a href="{{< docsref "/examples" >}}" class="btn btn-primary btn-lg px-4">Download examples</a>
|
||||
</div>
|
||||
|
||||
<hr class="col-3 col-md-2 mb-5">
|
||||
|
||||
<div class="row g-5">
|
||||
<div class="col-md-6">
|
||||
<h2>Starter projects</h2>
|
||||
<p>Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.</p>
|
||||
<ul class="icon-list">
|
||||
<li><a href="https://github.com/twbs/bootstrap-npm-starter" rel="noopener" target="_blank">Bootstrap npm starter</a></li>
|
||||
<li class="text-muted">Bootstrap Parcel starter (coming soon!)</li>
|
||||
</ul>
|
||||
<div class="mb-5">
|
||||
<a href="{{< docsref "/examples" >}}" class="btn btn-primary btn-lg px-4">Download examples</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<h2>Guides</h2>
|
||||
<p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p>
|
||||
<ul class="icon-list">
|
||||
<li><a href="{{< docsref "/getting-started/introduction" >}}">Bootstrap quick start guide</a></li>
|
||||
<li><a href="{{< docsref "/getting-started/webpack" >}}">Bootstrap Webpack guide</a></li>
|
||||
<li><a href="{{< docsref "/getting-started/parcel" >}}">Bootstrap Parcel guide</a></li>
|
||||
<li><a href="{{< docsref "/getting-started/build-tools" >}}">Contributing to Bootstrap</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="col-3 col-md-2 mb-5">
|
||||
|
||||
<div class="row g-5">
|
||||
<div class="col-md-6">
|
||||
<h2>Starter projects</h2>
|
||||
<p>Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.</p>
|
||||
<ul class="icon-list">
|
||||
<li><a href="https://github.com/twbs/bootstrap-npm-starter" rel="noopener" target="_blank">Bootstrap npm starter</a></li>
|
||||
<li class="text-muted">Bootstrap Parcel starter (coming soon!)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<h2>Guides</h2>
|
||||
<p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p>
|
||||
<ul class="icon-list">
|
||||
<li><a href="{{< docsref "/getting-started/introduction" >}}">Bootstrap quick start guide</a></li>
|
||||
<li><a href="{{< docsref "/getting-started/webpack" >}}">Bootstrap Webpack guide</a></li>
|
||||
<li><a href="{{< docsref "/getting-started/parcel" >}}">Bootstrap Parcel guide</a></li>
|
||||
<li><a href="{{< docsref "/getting-started/build-tools" >}}">Contributing to Bootstrap</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="pt-5 my-5 text-muted border-top">
|
||||
Created by the Bootstrap team · © {{< year >}}
|
||||
</footer>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user