diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.2/examples')
7 files changed, 114 insertions, 32 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/_index.md b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/_index.md index 8241892a5..46688839b 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/_index.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/_index.md @@ -16,7 +16,7 @@ aliases: "/examples/" <p> <strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an improvement to suggest? </p> - <p><a href="{{ $.Site.Params.repo }}/issues/new">Please open an issue.</a></p> + <p><a href="{{ $.Site.Params.repo }}/issues/new/choose">Please open an issue.</a></p> </div> {{ end -}} </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/cheatsheet-rtl/index.html b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/cheatsheet-rtl/index.html index 77accc976..a05799873 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/cheatsheet-rtl/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/cheatsheet-rtl/index.html @@ -339,6 +339,15 @@ direction: rtl <label for="exampleInputPassword1" class="form-label">كلمة السر</label> <input type="password" class="form-control" id="exampleInputPassword1"> </div> + <div class="mb-3"> + <label for="exampleSelect" class="form-label">قائمة اختيار</label> + <select class="form-select" id="exampleSelect"> + <option selected>افتح قائمة الاختيار هذه</option> + <option value="1">واحد</option> + <option value="2">اثنان</option> + <option value="3">ثلاثة</option> + </select> + </div> <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">اخترني</label> @@ -440,7 +449,7 @@ direction: rtl <input class="form-control form-control-lg" type="text" placeholder="حقل إدخال كبير" aria-label=".form-control-lg مثال"> </div> <div class="mb-3"> - <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg مثال"> + <select class="form-select form-select-lg" aria-label=".form-select-lg مثال"> <option selected>افتح قائمة الاختيار هذه</option> <option value="1">واحد</option> <option value="2">اثنان</option> @@ -1530,7 +1539,7 @@ direction: rtl <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="exampleModalLabel">عنوان الصندوق العائم</h5> + <h1 class="modal-title fs-5" id="exampleModalLabel">عنوان الصندوق العائم</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button> </div> <div class="modal-body"> @@ -1547,7 +1556,7 @@ direction: rtl <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="staticBackdropLiveLabel">عنوان الصندوق العائم</h5> + <h1 class="modal-title fs-5" id="staticBackdropLiveLabel">عنوان الصندوق العائم</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button> </div> <div class="modal-body"> @@ -1564,7 +1573,7 @@ direction: rtl <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">عنوان الصندوق العائم</h5> + <h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">عنوان الصندوق العائم</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button> </div> <div class="modal-body"> @@ -1587,7 +1596,7 @@ direction: rtl <div class="modal-dialog modal-fullscreen"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title h4" id="exampleModalFullscreenLabel">صندوق عائم يملأ الشاشة</h5> + <h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">صندوق عائم يملأ الشاشة</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button> </div> <div class="modal-body"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/cheatsheet/index.html b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/cheatsheet/index.html index 5627f8375..a2285d0ed 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/cheatsheet/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/cheatsheet/index.html @@ -338,6 +338,15 @@ body_class: "bg-light" <label for="exampleInputPassword1" class="form-label">Password</label> <input type="password" class="form-control" id="exampleInputPassword1"> </div> + <div class="mb-3"> + <label for="exampleSelect" class="form-label">Select menu</label> + <select class="form-select" id="exampleSelect"> + <option selected>Open this select menu</option> + <option value="1">One</option> + <option value="2">Two</option> + <option value="3">Three</option> + </select> + </div> <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> @@ -439,7 +448,7 @@ body_class: "bg-light" <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example"> </div> <div class="mb-3"> - <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example"> + <select class="form-select form-select-lg" aria-label=".form-select-lg example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> @@ -1526,7 +1535,7 @@ body_class: "bg-light" <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> + <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -1543,7 +1552,7 @@ body_class: "bg-light" <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5> + <h1 class="modal-title fs-5" id="staticBackdropLiveLabel">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -1560,7 +1569,7 @@ body_class: "bg-light" <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5> + <h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -1579,7 +1588,7 @@ body_class: "bg-light" <div class="modal-dialog modal-fullscreen"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen modal</h5> + <h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">Full screen modal</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/features/features.css b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/features/features.css index 619222364..b5d658f6b 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/features/features.css +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/features/features.css @@ -29,3 +29,8 @@ background-position: center center; background-size: cover; } + +.feature-icon-small { + width: 3rem; + height: 3rem; +} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/features/index.html b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/features/index.html index 07ae5ad3c..c134a0a91 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/features/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/features/index.html @@ -74,7 +74,7 @@ body_class: "" <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> <svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg> </div> - <h2>Featured title</h2> + <h3 class="fs-2">Featured title</h3> <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 d-inline-flex align-items-center"> Call to action @@ -85,7 +85,7 @@ body_class: "" <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> <svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg> </div> - <h2>Featured title</h2> + <h3 class="fs-2">Featured title</h3> <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 d-inline-flex align-items-center"> Call to action @@ -96,7 +96,7 @@ body_class: "" <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> </div> - <h2>Featured title</h2> + <h3 class="fs-2">Featured title</h3> <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 d-inline-flex align-items-center"> Call to action @@ -116,7 +116,7 @@ body_class: "" <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> </div> <div> - <h2>Featured title</h2> + <h3 class="fs-2">Featured title</h3> <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 @@ -128,7 +128,7 @@ body_class: "" <svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg> </div> <div> - <h2>Featured title</h2> + <h3 class="fs-2">Featured title</h3> <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 @@ -140,7 +140,7 @@ body_class: "" <svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg> </div> <div> - <h2>Featured title</h2> + <h3 class="fs-2">Featured title</h3> <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 @@ -159,7 +159,7 @@ body_class: "" <div class="col"> <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 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> + <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h3> <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"> @@ -180,7 +180,7 @@ body_class: "" <div class="col"> <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 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> + <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h3> <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"> @@ -201,7 +201,7 @@ body_class: "" <div class="col"> <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 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> + <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h3> <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"> @@ -230,59 +230,118 @@ body_class: "" <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> + <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <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> + <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <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> + <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <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> + <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <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> + <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <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> + <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <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> + <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <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> + <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading.</p> </div> </div> </div> </div> + + <div class="b-example-divider"></div> + + <div class="container px-4 py-5"> + <h2 class="pb-2 border-bottom">Features with title</h2> + + <div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5"> + <div class="d-flex flex-column align-items-start gap-2"> + <h3 class="fw-bold">Left-aligned title explaining these awesome features</h3> + <p class="text-muted">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="btn btn-primary btn-lg">Primary button</a> + </div> + <div class="row row-cols-1 row-cols-sm-2 g-4"> + <div class="d-flex flex-column gap-2"> + <div + class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3"> + <svg class="bi" width="1em" height="1em"> + <use xlink:href="#collection" /> + </svg> + </div> + <h4 class="fw-semibold mb-0">Featured title</h4> + <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p> + </div> + + <div class="d-flex flex-column gap-2"> + <div + class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3"> + <svg class="bi" width="1em" height="1em"> + <use xlink:href="#gear-fill" /> + </svg> + </div> + <h4 class="fw-semibold mb-0">Featured title</h4> + <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p> + </div> + + <div class="d-flex flex-column gap-2"> + <div + class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3"> + <svg class="bi" width="1em" height="1em"> + <use xlink:href="#speedometer" /> + </svg> + </div> + <h4 class="fw-semibold mb-0">Featured title</h4> + <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p> + </div> + + <div class="d-flex flex-column gap-2"> + <div + class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3"> + <svg class="bi" width="1em" height="1em"> + <use xlink:href="#table" /> + </svg> + </div> + <h4 class="fw-semibold mb-0">Featured title</h4> + <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + </div> + </div> </main> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/modals/index.html b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/modals/index.html index 0f16aabf8..a68bd419e 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/modals/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/modals/index.html @@ -59,7 +59,7 @@ body_class: "" <div class="modal-dialog" role="document"> <div class="modal-content rounded-4 shadow"> <div class="modal-header border-bottom-0"> - <h5 class="modal-title">Modal title</h5> + <h1 class="modal-title fs-5">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body py-0"> @@ -133,8 +133,8 @@ body_class: "" <div class="modal-dialog" role="document"> <div class="modal-content rounded-4 shadow"> <div class="modal-header p-5 pb-4 border-bottom-0"> - <!-- <h5 class="modal-title">Modal title</h5> --> - <h2 class="fw-bold mb-0">Sign up for free</h2> + <!-- <h1 class="modal-title fs-5" >Modal title</h1> --> + <h1 class="fw-bold mb-0 fs-2">Sign up for free</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/starter-template/index.html b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/starter-template/index.html index a16984ab9..5a898a44d 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/starter-template/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/starter-template/index.html @@ -5,7 +5,7 @@ extra_css: - "starter-template.css" --- -<div class="col-lg-8 mx-auto p-3 py-md-5"> +<div class="col-lg-8 mx-auto p-4 py-md-5"> <header class="d-flex align-items-center pb-3 mb-5 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> |