Ümit Tunç
293 lines
14 KiB
HTML
293 lines
14 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>Badges</h1>
|
||
<p class="lead">Documentation and examples for badges, our small count and labeling component.</p>
|
||
<hr class="my-5">
|
||
</div>
|
||
<!-- Page content START -->
|
||
|
||
<!-- Badges Examples -->
|
||
<h3 class="mt-5">Examples</h3>
|
||
<p>Badges scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units. As of v5, badges no longer have focus or hover styles for links.</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">
|
||
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
|
||
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
|
||
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
|
||
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
|
||
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
|
||
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
|
||
</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"><h1>Example heading <span class="badge bg-secondary">New</span></h1>
|
||
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
|
||
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
|
||
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
|
||
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
|
||
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
|
||
</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 -->
|
||
|
||
|
||
<!-- Background-color Examples -->
|
||
<h3 class="mt-5">Background colors</h3>
|
||
<p>Use our background utility classes to quickly change the appearance of a badge. Please note that when using Bootstrap’s default <code>.bg-light</code>, you’ll likely need a text color utility like <code>.text-dark</code> for proper styling. This is because background utilities do not set anything but <code>background-color</code>.</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">
|
||
<span class="badge bg-primary">Primary</span>
|
||
<span class="badge bg-secondary">Secondary</span>
|
||
<span class="badge bg-success">Success</span>
|
||
<span class="badge bg-danger">Danger</span>
|
||
<span class="badge bg-warning text-dark">Warning</span>
|
||
<span class="badge bg-info">Info</span>
|
||
<span class="badge bg-light text-dark">Light</span>
|
||
<span class="badge bg-dark">Dark</span>
|
||
</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"><span class="badge bg-primary">Primary</span>
|
||
<span class="badge bg-secondary">Secondary</span>
|
||
<span class="badge bg-success">Success</span>
|
||
<span class="badge bg-danger">Danger</span>
|
||
<span class="badge bg-warning text-dark">Warning</span>
|
||
<span class="badge bg-info">Info</span>
|
||
<span class="badge bg-light text-dark">Light</span>
|
||
<span class="badge bg-dark">Dark</span>
|
||
</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 -->
|
||
|
||
|
||
<!-- Badge with icon -->
|
||
<h3 class="mt-5">Badge with icon</h3>
|
||
<p>You can use any <a href="font-icons.html">font icon</a> or SVG icons with badge.</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">
|
||
<a href="#" class="badge bg-primary"><i class="fas fa-circle me-2 small fw-bold"></i>Primary</a>
|
||
<a href="#" class="badge bg-secondary"><i class="fas fa-circle me-2 small fw-bold"></i>Secondary</a>
|
||
<a href="#" class="badge bg-success"><i class="fas fa-circle me-2 small fw-bold"></i>Success</a>
|
||
<a href="#" class="badge bg-danger"><i class="fas fa-circle me-2 small fw-bold"></i>Danger</a>
|
||
<a href="#" class="badge bg-warning"><i class="fas fa-circle me-2 small fw-bold"></i>Warning</a>
|
||
<a href="#" class="badge bg-info"><i class="fas fa-circle me-2 small fw-bold"></i>Info</a>
|
||
<a href="#" class="badge bg-light text-dark"><i class="fas fa-circle me-2 small fw-bold"></i>Light</a>
|
||
<a href="#" class="badge bg-dark"><i class="fas fa-circle me-2 small fw-bold"></i>Dark</a>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-6">
|
||
<div class="position-relative">
|
||
<pre id="copy-3" class="my-3">
|
||
<code class="language-markup" data-lang="html"><a href="#" class="badge bg-primary"><i class="fas fa-circle me-2 small fw-bold"></i>Primary</a>
|
||
<a href="#" class="badge bg-secondary"><i class="fas fa-circle me-2 small fw-bold"></i>Secondary</a>
|
||
<a href="#" class="badge bg-success"><i class="fas fa-circle me-2 small fw-bold"></i>Success</a>
|
||
<a href="#" class="badge bg-danger"><i class="fas fa-circle me-2 small fw-bold"></i>Danger</a>
|
||
<a href="#" class="badge bg-warning"><i class="fas fa-circle me-2 small fw-bold"></i>Warning</a>
|
||
<a href="#" class="badge bg-info"><i class="fas fa-circle me-2 small fw-bold"></i>Info</a>
|
||
<a href="#" class="badge bg-light text-dark"><i class="fas fa-circle me-2 small fw-bold"></i>Light</a>
|
||
<a href="#" class="badge bg-dark"><i class="fas fa-circle me-2 small fw-bold"></i>Dark</a>
|
||
</code></pre>
|
||
<button id="copy_id-3" data-clipboard-action="copy" data-clipboard-target="#copy-3" class="copy-link btn btn-primary btn-sm">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab END -->
|
||
|
||
|
||
<!-- soft-background Badge -->
|
||
<h3 class="mt-5">Background soft colors</h3>
|
||
<p>Use our background soft utility classes to quickly change the appearance of a badge. Please note that when using background soft utility classes, you’ll likely need a text color utility like <code>.text-primary</code> for proper styling. This is because background utilities do not set anything but <code>background-color</code>.</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-7">Result</a> </li>
|
||
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-8">HTML</a> </li>
|
||
</ul>
|
||
<div class="tab-content bg-light p-4">
|
||
<div class="tab-pane show active" id="tab-7">
|
||
<a href="#" class="badge bg-primary bg-opacity-10 text-primary">Primary soft</a>
|
||
<a href="#" class="badge bg-secondary-soft text-secondary">Secondary soft</a>
|
||
<a href="#" class="badge bg-success bg-opacity-10 text-success">Success soft</a>
|
||
<a href="#" class="badge bg-danger bg-opacity-10 text-danger">Danger soft</a>
|
||
<a href="#" class="badge bg-warning bg-opacity-15 text-warning">Warning soft</a>
|
||
<a href="#" class="badge bg-info bg-opacity-10 text-info">Info soft</a>
|
||
<a href="#" class="badge bg-dark-soft text-dark">Dark soft</a>
|
||
</div>
|
||
|
||
<div class="tab-pane" id="tab-8">
|
||
<div class="position-relative">
|
||
<pre id="copy-4" class="my-3">
|
||
<code class="language-markup" data-lang="html"><a href="#" class="badge bg-primary bg-opacity-10 text-primary">Primary soft</a>
|
||
<a href="#" class="badge bg-secondary-soft text-secondary">Secondary soft</a>
|
||
<a href="#" class="badge bg-success bg-opacity-10 text-success">Success soft</a>
|
||
<a href="#" class="badge bg-danger bg-opacity-10 text-danger">Danger soft</a>
|
||
<a href="#" class="badge bg-warning bg-opacity-15 text-warning">Warning soft</a>
|
||
<a href="#" class="badge bg-info bg-opacity-10 text-info">Info soft</a>
|
||
<a href="#" class="badge bg-dark-soft text-dark">Dark soft</a>
|
||
</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 -->
|
||
|
||
<p class="mt-5">For more information refer <a href="https://getbootstrap.com/docs/5.0/components/badge/">official Bootstrap documentation</a> for detailed technical explanation.
|
||
</p>
|
||
|
||
<!-- 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> |