Ümit Tunç
560 lines
27 KiB
HTML
560 lines
27 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<title>Doc - Blogzine Theme</title>
|
||
<!-- Meta Tags -->
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<meta name="author" content="Webestica.com">
|
||
|
||
<!-- Favicon -->
|
||
<link rel="shortcut icon" href="assets/images/favicon.ico">
|
||
|
||
<!-- Google Font -->
|
||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&family=Rubik:wght@400;500;700&display=swap" rel="stylesheet">
|
||
|
||
<!-- Plugins CSS -->
|
||
<link rel="stylesheet" type="text/css" href="assets/vendor/font-awesome/css/all.min.css">
|
||
|
||
<!-- Theme CSS -->
|
||
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
|
||
<link rel="stylesheet" type="text/css" href="assets/css/doc.css">
|
||
<link rel="stylesheet" type="text/css" href="assets/css/prism.css">
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-- **************** MAIN CONTENT START **************** -->
|
||
<main>
|
||
<!-- Navbar top START -->
|
||
<div class="navbar-top bg-dark px-3 px-sm-4 px-md-5">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<!-- Logo START -->
|
||
<a class="navbar-brand py-3" href="index.html">
|
||
<img class="navbar-brand-item" src="assets/images/logo.svg" alt="logo">
|
||
</a>
|
||
<!-- Logo END -->
|
||
|
||
<!-- Navbar right -->
|
||
<div>
|
||
<ul class="text-end list-inline m-0">
|
||
<li class="list-inline-item me-2 me-md-4"> <a class="text-white" href="https://blogzine.webestica.com">Live Preview</a> </li>
|
||
<li class="list-inline-item me-2 me-md-4"> <a class="text-white" href="https://support.webestica.com" target="_blank">Support</a> </li>
|
||
<li class="list-inline-item text-white"> <span class="badge bg-danger text-white">v1.2.0</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Navbar top END -->
|
||
|
||
<div class="container-fluid px-0">
|
||
<div class="page-wrapper">
|
||
<!-- Left sidebar START -->
|
||
<nav class="navbar navbar-expand-sm navbar-light bg-light px-3">
|
||
<a class="navbar-brand py-2 d-sm-none" href="#">Doc nav</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#docNav" aria-controls="docNav" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="docNav">
|
||
<div class="left-sidebar bg-light">
|
||
<div class="content h-100vh">
|
||
<div class="list-group list-group-borderless p-3 p-md-4">
|
||
<b class="text-dark text-uppercase mb-2">Getting Started</b>
|
||
<a class="list-group-item" href="index.html">Introduction</a>
|
||
<a class="list-group-item" href="gulp.html">Gulp</a>
|
||
<a class="list-group-item" href="customization.html">Customization</a>
|
||
<a class="list-group-item" href="color-scheme.html">Color Scheme</a>
|
||
<a class="list-group-item" href="logo-settings.html">Logo Settings</a>
|
||
<a class="list-group-item" href="page-loading.html">Page Loading</a>
|
||
<a class="list-group-item" href="fonts.html">Fonts</a>
|
||
<a class="list-group-item" href="dark-mode.html">Dark mode</a>
|
||
<a class="list-group-item" href="rtl.html">RTL Version</a>
|
||
<a class="list-group-item" href="lazy-load.html">Lazy Load</a>
|
||
<a class="list-group-item" href="sources-and-credits.html">Sources and Credits</a>
|
||
<a class="list-group-item" href="changelog.html">Changelog</a>
|
||
<a class="list-group-item" href="updates.html">Updates</a>
|
||
<a class="list-group-item" href="support.html">Support</a>
|
||
<b class="text-dark text-uppercase mt-3 mb-2">Component</b>
|
||
<a class="list-group-item" href="alerts.html">Alerts</a>
|
||
<a class="list-group-item" href="avatar.html">Avatar</a>
|
||
<a class="list-group-item" href="badges.html">Badges</a>
|
||
<a class="list-group-item" href="breadcrumb.html">Breadcrumb</a>
|
||
<a class="list-group-item" href="buttons.html">Buttons</a>
|
||
<a class="list-group-item" href="card.html">Card</a>
|
||
<a class="list-group-item" href="font-icons.html">Font icons</a>
|
||
<a class="list-group-item" href="google-map.html">Google Map</a>
|
||
<a class="list-group-item" href="nav-and-tabs.html">Nav and Tabs</a>
|
||
<a class="list-group-item" href="pagination.html">Pagination</a>
|
||
<a class="list-group-item" href="progress.html">Progress</a>
|
||
<a class="list-group-item" href="sticky-element.html">Sticky element</a>
|
||
<a class="list-group-item" href="sticky-footer.html">Sticky footer</a>
|
||
<a class="list-group-item" href="utility-classes.html">Utility classes</a>
|
||
<b class="text-dark text-uppercase mt-3 mb-2">Plugins</b>
|
||
<a class="list-group-item" href="tiny-slider.html">Tiny Slider</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<!-- Left sidebar END -->
|
||
|
||
<!-- Main content START -->
|
||
<div class="main-content">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<!-- Page title -->
|
||
<div class="my-5">
|
||
<h1>Buttons</h1>
|
||
<p class="lead">Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.</p>
|
||
<hr class="my-5">
|
||
</div>
|
||
<!-- Page content START -->
|
||
|
||
<!-- Buttons Examples -->
|
||
<h3 class="mt-5">Examples</h3>
|
||
<p>Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
|
||
|
||
<!-- Tab START -->
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-1">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-2">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-1">
|
||
<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>
|
||
<span class="bg-dark d-inline-block p-2"> <button type="button" class="btn btn-light mb-0">Light</button></span>
|
||
<span class="bg-dark d-inline-block p-2"> <button type="button" class="btn btn-white mb-0">White</button></span>
|
||
<button type="button" class="btn btn-dark">Dark</button>
|
||
<button type="button" class="btn btn-link">Link</button>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-2">
|
||
<div class="position-relative">
|
||
<pre id="copy-1" class="my-3">
|
||
<code class="language-markup" data-lang="html"><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-white">White</button>
|
||
<button type="button" class="btn btn-dark">Dark</button>
|
||
<button type="button" class="btn btn-link">Link</button>
|
||
</code></pre>
|
||
<button id="copy_id-1" data-clipboard-action="copy" data-clipboard-target="#copy-1" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
<!-- Button Default soft Examples -->
|
||
<h3 class="mt-5">Button Default soft</h3>
|
||
|
||
<!-- Tab START -->
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-17">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-18">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-17">
|
||
<a class="btn btn-primary-soft" href="#">Primary</a>
|
||
<a class="btn btn-dark-soft" href="#">Dark</a>
|
||
<span class="bg-dark d-inline-block p-2"> <a class="btn btn-light-soft mb-0" href="#">Light</a></span>
|
||
<a class="btn btn-secondary-soft" href="#">Secondary</a>
|
||
<a class="btn btn-success-soft" href="#">Success</a>
|
||
<a class="btn btn-danger-soft" href="#">Danger</a>
|
||
<a class="btn btn-warning-soft" href="#">Warning</a>
|
||
<a class="btn btn-info-soft" href="#">Info</a>
|
||
</div>
|
||
<div class="tab-pane" id="tab-18">
|
||
<div class="position-relative">
|
||
<pre id="copy-10" class="my-3">
|
||
<code class="language-markup" data-lang="html"><a class="btn btn-primary-soft" href="#">Primary</a>
|
||
<a class="btn btn-dark-soft" href="#">Dark</a>
|
||
<a class="btn btn-light-soft" href="#">Light</a>
|
||
<a class="btn btn-secondary-soft" href="#">Secondary</a>
|
||
<a class="btn btn-success-soft" href="#">Success</a>
|
||
<a class="btn btn-danger-soft" href="#">Danger</a>
|
||
<a class="btn btn-warning-soft" href="#">Warning</a>
|
||
<a class="btn btn-info-soft" href="#">Info</a>
|
||
</code></pre>
|
||
<button id="copy_id-10" data-clipboard-action="copy" data-clipboard-target="#copy-10" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
<!-- Button tags Examples -->
|
||
<h3 class="mt-5">Button tags</h3>
|
||
<p>The <code>.btn</code> classes are designed to be used with the <code>button</code> element. However, you can also use these classes on <code>a</code> or <code>input</code> elements (though some browsers may apply a slightly different rendering).</p>
|
||
|
||
<p>When using button classes on <code>a</code> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a <code>role="button"</code> to appropriately convey their purpose to assistive technologies such as screen readers.</p>
|
||
|
||
<!-- Tab START -->
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-3">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-4">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-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>
|
||
|
||
<div class="tab-pane" id="tab-4">
|
||
<div class="position-relative">
|
||
<pre id="copy-2" class="my-3">
|
||
<code class="language-markup" data-lang="html"><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">
|
||
</code></pre>
|
||
<button id="copy_id-2" data-clipboard-action="copy" data-clipboard-target="#copy-2" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
<!-- Outline buttons content Examples -->
|
||
<h3 class="mt-5">Outline buttons content</h3>
|
||
<p>In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the <code>.btn-outline-*</code> ones to remove all background images and colors on any button.</p>
|
||
|
||
<!-- Tab START -->
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-5">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-6">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-5">
|
||
<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>
|
||
<span class="bg-dark d-inline-block p-2"> <button type="button" class="btn btn-outline-light mb-0">Light</button></span>
|
||
<span class="bg-dark d-inline-block p-2"> <button type="button" class="btn btn-outline-white mb-0">White</button></span>
|
||
<button type="button" class="btn btn-outline-dark">Dark</button>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-6">
|
||
<div class="position-relative">
|
||
<pre id="copy-4" class="my-3">
|
||
<code class="language-markup" data-lang="html"><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>
|
||
</code></pre>
|
||
<button id="copy_id-4" data-clipboard-action="copy" data-clipboard-target="#copy-4" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
<!-- Button icons and round Examples -->
|
||
<h3 class="mt-5">Button icons and round</h3>
|
||
|
||
<!-- Tab START -->
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-21">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-22">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-21">
|
||
<a class="btn btn-primary" href="#"><i class="fas fa-info-circle me-2"></i>Primary</a>
|
||
<a class="btn btn-dark" href="#">Dark <i class="fas fa-angle-right ms-2"></i></a>
|
||
<a class="btn btn-primary btn-round btn-sm" href="#"><i class="fas fa-play"></i></a>
|
||
<a class="btn btn-primary btn-round" href="#"><i class="fas fa-play"></i></a>
|
||
<a class="btn btn-primary btn-round btn-lg" href="#"><i class="fas fa-play"></i></a>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-22">
|
||
<div class="position-relative">
|
||
<pre id="copy-12" class="my-3">
|
||
<code class="language-markup" data-lang="html"><a class="btn btn-primary" href="#"><i class="fas fa-info-circle me-2"></i>Primary</a>
|
||
<a class="btn btn-dark" href="#">Dark <i class="fas fa-angle-right ms-2"></i></a>
|
||
<a class="btn btn-primary btn-round btn-sm" href="#"><i class="fas fa-play"></i></a>
|
||
<a class="btn btn-primary btn-round" href="#"><i class="fas fa-play"></i></a>
|
||
<a class="btn btn-primary btn-round btn-lg" href="#"><i class="fas fa-play"></i></a>
|
||
</code></pre>
|
||
<button id="copy_id-12" data-clipboard-action="copy" data-clipboard-target="#copy-12" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
<!-- Button hover and ripple animation Examples -->
|
||
<h3 class="mt-5">Button hover scale</h3>
|
||
|
||
<!-- Tab START -->
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-23">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-24">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-23">
|
||
<a class="btn btn-primary btn-round zoom-hover me-3" href="#"><i class="fas fa-play"></i></a>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-24">
|
||
<div class="position-relative">
|
||
<pre id="copy-13" class="my-3">
|
||
<code class="language-markup" data-lang="html"><a class="btn btn-primary btn-round zoom-hover me-3" href="#"><i class="fas fa-play"></i></a>
|
||
</code></pre>
|
||
<button id="copy_id-13" data-clipboard-action="copy" data-clipboard-target="#copy-13" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
<!-- Button with spinner Examples -->
|
||
<h3 class="mt-5">Button with spinner</h3>
|
||
|
||
<!-- Tab START -->
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-25">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-26">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-25">
|
||
<button class="btn btn-primary" type="button">
|
||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||
Loading...
|
||
</button>
|
||
<a class="btn btn-primary btn-round me-3" href="#"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></a>
|
||
|
||
<button class="btn btn-dark" type="button">
|
||
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
|
||
Loading...
|
||
</button>
|
||
<a class="btn btn-dark btn-round me-3" href="#"><span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span></a>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-26">
|
||
<div class="position-relative">
|
||
<pre id="copy-14" class="my-3">
|
||
<code class="language-markup" data-lang="html"><button class="btn btn-primary" type="button">
|
||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||
Loading...
|
||
</button>
|
||
<a class="btn btn-primary btn-round me-3" href="#"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></a>
|
||
|
||
<button class="btn btn-dark" type="button">
|
||
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
|
||
Loading...
|
||
</button>
|
||
<a class="btn btn-dark btn-round me-3" href="#"><span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span></a>
|
||
</code></pre>
|
||
<button id="copy_id-14" data-clipboard-action="copy" data-clipboard-target="#copy-14" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
<!-- Button Sizes Examples -->
|
||
<h3 class="mt-5">Button sizes</h3>
|
||
|
||
<!-- Tab START -->
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-19">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-20">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-19">
|
||
<a class="btn btn-primary btn-xs" href="#">x Small</a>
|
||
<a class="btn btn-primary btn-sm" href="#">Small</a>
|
||
<a class="btn btn-primary" href="#">Default</a>
|
||
<a class="btn btn-primary btn-lg" href="#">Large</a>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-20">
|
||
<div class="position-relative">
|
||
<pre id="copy-11" class="my-3">
|
||
<code class="language-markup" data-lang="html"><a class="btn btn-primary btn-xs" href="#">x Small</a>
|
||
<a class="btn btn-primary btn-sm" href="#">Small</a>
|
||
<a class="btn btn-primary" href="#">Default</a>
|
||
<a class="btn btn-primary btn-lg" href="#">Large</a>
|
||
</code></pre>
|
||
<button id="copy_id-11" data-clipboard-action="copy" data-clipboard-target="#copy-11" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
|
||
<!-- Disabled state -->
|
||
<h3 class="mt-5">Disabled state</h3>
|
||
<p>Make buttons look inactive by adding the <code>disabled</code> boolean attribute to any <code>button</code> element. Disabled buttons have <code>pointer-events:</code> none applied to, preventing hover and active states from triggering</p>
|
||
<!-- Tab START -->
|
||
|
||
<!-- Tab START -->
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-9">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-10">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-9">
|
||
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
|
||
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-10">
|
||
<div class="position-relative">
|
||
<pre id="copy-6" class="my-3">
|
||
<code class="language-markup" data-lang="html"><button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
|
||
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
|
||
</code></pre>
|
||
<button id="copy_id-6" data-clipboard-action="copy" data-clipboard-target="#copy-6" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
|
||
<!-- Disable links -->
|
||
<p class="mt-3">Disabled buttons using the <code><a></code> element behave a bit different:</p>
|
||
<ul>
|
||
<li><code><a></code>s don't support the <code>disabled</code> attribute, so you must add the <code>.disabled</code> class to make it visually appear disabled.</li>
|
||
<li>Some future-friendly styles are included to disable all <code>pointer-events</code> on anchor buttons.</li>
|
||
<li>Disabled buttons should include the <code>aria-disabled="true"</code> attribute to indicate the state of the element to assistive technologies.</li>
|
||
</ul>
|
||
<!-- Tab START -->
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-11">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-12">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-11">
|
||
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
|
||
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-12">
|
||
<div class="position-relative">
|
||
<pre id="copy-7" class="my-3">
|
||
<code class="language-markup" data-lang="html"><a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
|
||
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
|
||
|
||
</code></pre>
|
||
<button id="copy_id-7" data-clipboard-action="copy" data-clipboard-target="#copy-7" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
<!-- Block buttons -->
|
||
<h3 class="mt-5">Block buttons</h3>
|
||
<p class="mt-3">Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.</p>
|
||
|
||
<!-- Tab START -->
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-13">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-14">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-13">
|
||
<div class="d-grid gap-2">
|
||
<button class="btn btn-primary" type="button">Button</button>
|
||
<button class="btn btn-primary" type="button">Button</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-14">
|
||
<div class="position-relative">
|
||
<pre id="copy-8" class="my-3">
|
||
<code class="language-markup" data-lang="html"><div class="d-grid gap-2">
|
||
<button class="btn btn-primary" type="button">Button</button>
|
||
<button class="btn btn-primary" type="button">Button</button>
|
||
</div>
|
||
</code></pre>
|
||
<button id="copy_id-8" data-clipboard-action="copy" data-clipboard-target="#copy-8" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
<p class="mt-3">Here we create a responsive variation, starting with vertically stacked buttons until the <code>md</code> breakpoint, where <code>.d-md-block</code> replaces the <code>.d-grid</code> class, thus nullifying the <code>gap-2</code> utility. Resize your browser to see them change.</p>
|
||
<p>Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we’ve taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they’re no longer stacked.</p>
|
||
<!-- Tab START -->
|
||
<ul class="nav nav-tabs nav-tabs-line">
|
||
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-15">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-16">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-15">
|
||
<div class="d-grid gap-2 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 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>
|
||
|
||
<div class="tab-pane" id="tab-16">
|
||
<div class="position-relative">
|
||
<pre id="copy-9" class="my-3">
|
||
<code class="language-markup" data-lang="html"><div class="d-grid gap-2 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 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>
|
||
</code></pre>
|
||
<button id="copy_id-9" data-clipboard-action="copy" data-clipboard-target="#copy-9" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
|
||
|
||
<!--
|
||
Blogzine customizes the Bootstrap alerts through the SASS variables in <code>assets/sass/_variables.scss </code> and adds additional options in src/sass/_breadcrumb.scss.
|
||
-->
|
||
|
||
|
||
|
||
<!-- Page content END -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Main content END -->
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- =======================
|
||
JavaScripts -->
|
||
|
||
<!-- Bootstrap JS -->
|
||
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||
|
||
<script src="assets/js/simple-scrollbar.min.js"></script>
|
||
<script src="assets/js/prism.js"></script>
|
||
<script src="assets/js/clipboard.min.js"></script>
|
||
|
||
<!-- Template Functions -->
|
||
<script src="assets/js/functions.js"></script>
|
||
|
||
</body>
|
||
</html> |