Skip to content

Commit

Permalink
5207 added bootstrap 5.3 buttons (#5235)
Browse files Browse the repository at this point in the history 
* 5207 added bootstrap 5.3 buttons

* 5207 added bootstrap 5.3 buttons
  • Loading branch information
@OleksandrTochonyi
OleksandrTochonyi authored Nov 29, 2023
1 parent 6f58a27 commit c355440
Showing 1 changed file with 210 additions and 13 deletions.
223 changes: 210 additions & 13 deletions bootstrap-5-3-new.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -590,11 +590,8 @@ <h2 class="block-title">Breadcrumb</h2>
<h4>Ordinary Example</h4>
<p>
Bootstrap:
<a
href="https://getbootstrap.com/docs/5.3/components/breadcrumb/#example"
target="_blank"
>https://getbootstrap.com/docs/5.3/components/breadcrumb/#example</a
>
<a href="https://getbootstrap.com/docs/5.3/components/breadcrumb/#example"
target="_blank">https://getbootstrap.com/docs/5.3/components/breadcrumb/#example</a>
</p>
</div>
<div class="html-center mb-3">
Expand All @@ -603,14 +600,14 @@ <h4>Ordinary Example</h4>
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
Expand All @@ -624,11 +621,8 @@ <h4>Ordinary Example</h4>
<h4>Dividers</h4>
<p>
Bootstrap:
<a
href="https://getbootstrap.com/docs/5.3/components/breadcrumb/#dividers"
target="_blank"
>https://getbootstrap.com/docs/5.3/components/breadcrumb/#dividers</a
>
<a href="https://getbootstrap.com/docs/5.3/components/breadcrumb/#dividers"
target="_blank">https://getbootstrap.com/docs/5.3/components/breadcrumb/#dividers</a>
</p>
</div>
<div class="html-center mb-3">
Expand All @@ -641,7 +635,9 @@ <h4>Dividers</h4>
</nav>
</div>
<div class="mb-3">
<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
<nav
style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);"
aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
Expand All @@ -657,7 +653,208 @@ <h4>Dividers</h4>
</nav>
</div>
</div>
</div>
<div class="doc-space line">
<h2 class="block-title">Buttons</h2>
<div class="html-center">
<h4>Base class</h4>
<p>
Bootstrap:
<a href="https://getbootstrap.com/docs/5.3/components/buttons/#base-class"
target="_blank">https://getbootstrap.com/docs/5.3/components/buttons/#base-class</a>
</p>
</div>
<div class="html-center mb-3">
<button type="button" class="btn">Base class</button>
</div>
<hr>
<div class="html-center">
<h4>Variants</h4>
<p>
Bootstrap:
<a href="https://getbootstrap.com/docs/5.3/components/buttons/#variants"
target="_blank">https://getbootstrap.com/docs/5.3/components/buttons/#variants</a>
</p>
</div>
<div class="html-center mb-3">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
</div>
<hr>
<div class="html-center">
<h4>Button tags</h4>
<p>
Bootstrap:
<a href="https://getbootstrap.com/docs/5.3/components/buttons/#button-tags"
target="_blank">https://getbootstrap.com/docs/5.3/components/buttons/#button-tags</a>
</p>
</div>
<div class="html-center mb-3">
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
</div>
<hr>
<div class="html-center">
<h4>Outline buttons</h4>
<p>
Bootstrap:
<a href="https://getbootstrap.com/docs/5.3/components/buttons/#outline-buttons"
target="_blank">https://getbootstrap.com/docs/5.3/components/buttons/#outline-buttons</a>
</p>
</div>
<div class="html-center mb-3">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
</div>
<hr>
<div class="html-center">
<h4>Sizes</h4>
<p>
Bootstrap:
<a href="https://getbootstrap.com/docs/5.3/components/buttons/#sizes"
target="_blank">https://getbootstrap.com/docs/5.3/components/buttons/#sizes</a>
</p>
</div>
<div class="html-center mb-3">
<div class="mb-3">
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
</div>
<div class="mb-3">
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
</div>
<div>
<button type="button" class="btn btn-primary"
style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
Custom button
</button>
</div>
</div>
<hr>
<div class="html-center">
<h4>Disabled state</h4>
<p>
Bootstrap:
<a href="https://getbootstrap.com/docs/5.3/components/buttons/#disabled-state"
target="_blank">https://getbootstrap.com/docs/5.3/components/buttons/#disabled-state</a>
</p>
</div>
<div class="html-center mb-3">
<div class="mb-3">
<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" disabled>Button</button>
</div>
<div>
<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>
</div>
</div>
<hr>
<div class="html-center">
<h4>Link functionality caveat</h4>
<p>
Bootstrap:
<a href="https://getbootstrap.com/docs/5.3/components/buttons/#link-functionality-caveat"
target="_blank">https://getbootstrap.com/docs/5.3/components/buttons/#link-functionality-caveat</a>
</p>
</div>
<div class="html-center mb-3">
<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary
link</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
</div>
<hr>
<div class="html-center">
<h4>Block buttons</h4>
<p>
Bootstrap:
<a href="https://getbootstrap.com/docs/5.3/components/buttons/#block-buttons"
target="_blank">https://getbootstrap.com/docs/5.3/components/buttons/#block-buttons</a>
</p>
</div>
<div class="html-center mb-3">
<div class="d-grid gap-2 mb-3">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
<div class="d-grid gap-2 mb-3 d-md-block">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
<div class="d-grid gap-2 mb-3 col-6 mx-auto">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-primary me-md-2" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
</div>
<hr>
<div class="html-center">
<h4>Toggle states</h4>
<p>
Bootstrap:
<a href="https://getbootstrap.com/docs/5.3/components/buttons/#toggle-states"
target="_blank">https://getbootstrap.com/docs/5.3/components/buttons/#toggle-states</a>
</p>
</div>
<div class="html-center mb-3">
<div class="mb-3">
<p class="d-inline-flex gap-1">
<button type="button" class="btn" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn active" data-bs-toggle="button" aria-pressed="true">Active toggle
button</button>
<button type="button" class="btn" disabled data-bs-toggle="button">Disabled toggle button</button>
</p>
<p class="d-inline-flex gap-1">
<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button"
aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle
button</button>
</p>
</div>
<div>
<p class="d-inline-flex gap-1">
<a href="#" class="btn" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn active" role="button" data-bs-toggle="button" aria-pressed="true">Active
toggle link</a>
<a class="btn disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle
link</a>
</p>
<p class="d-inline-flex gap-1">
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button"
aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button"
data-bs-toggle="button">Disabled toggle link</a>
</p>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
Expand Down

0 comments on commit c355440

Please sign in to comment.