truncgit/citrus-cms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
citrus-cms/template/docs/utility-classes.html
T
Ümit Tunç 37e7296527 ikinci temizlik tamamlandı
2026-04-28 21:15:09 +03:00

232 lines
8.6 KiB
HTML
Raw Permalink Blame History

<!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">
<link rel="stylesheet" type="text/css" href="assets/vendor/glightbox/css/glightbox.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>Utility classes</h1>
<p class="lead">Utility classes — formerly helper classes to speed up your development process.</p>
<hr class="my-5">
</div>
<!-- Page content START -->
<p>For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.</p>
<a target="_blank" href="https://getbootstrap.com/docs/5.0/utilities/api/" class="btn btn-primary">Bootstrap utilities</a>
<hr class="my-5">
<p>We have added new utility classes in theme to speed up your development process. Checkout the list below: </p>
<div class="table-responsive">
<table class="table table-bordered">
<thead class="table-dark">
<tr>
<th>Utility class name</th>
<th>Description</th>
<th>Available options</th>
</tr>
</thead>
<tbody>
<tr>
<td>.text-primary-hover</td>
<td>Set text primary color on hover to all anchor tags under <code>.text-primary-hover</code> container.</td>
<td>-</td>
</tr>
<tr>
<td>.font-base</td>
<td>Apply font family base</td>
<td>-</td>
</tr>
<tr>
<td>.font-heading</td>
<td>Apply font family heading</td>
<td>-</td>
</tr>
<tr>
<td>.grayscale</td>
<td>To apply grayscale filter on image or any section. On hover it will change back to normal</td>
<td>-</td>
</tr>
<tr>
<td>.zoom-hover</td>
<td>Scale zoom on hover with smooth transition</td>
<td>-</td>
</tr>
<tr>
<td>.up-hover</td>
<td>Scale up on hover with smooth transition</td>
<td>-</td>
</tr>
<tr>
<td>.zoom-#</td>
<td>Zoom elements by using this class</td>
<td><code>.zoom-1 <br>.zoom-2 <br>.zoom-3 <br>.zoom-4</code></td>
</tr>
<tr>
<td>.opacity-#</td>
<td>Set opacity to elements by using this class</td>
<td><code>.opacity-1 <br>.opacity-2 <br>.opacity-3<br>.opacity-4 <br>.opacity-5 <br>.opacity-6<br>.opacity-7 <br>.opacity-8 <br>.opacity-9</code></td>
</tr>
<tr>
<td>.z-index-#</td>
<td>Set z-index</td>
<td><code>.z-index-9 <br> .z-index-99</code></td>
</tr>
<tr>
<td>.z-index-n9</td>
<td>Set z-index in negative</td>
<td>-</td>
</tr>
<tr>
<td>.h-###</td>
<td>Height utilities. You can also set different height in different Screen sizes by combining with Screen sizes classes <code>h-md-400</code></td>
<td><code>
.h-300<br>
.h-400<br>
.h-500<br>
.h-540<br>
.h-560<br>
.h-600<br>
.h-700<br></code></td>
</tr>
<tr>
<td>.icon-sm, md, lg, and xl </td>
<td>Set icon box with fixed height and width</td>
<td><code>
.icon-sm<br>
.icon-md<br>
.icon-lg<br>
.icon-xl<br>
</code></td>
</tr>
</tbody>
</table>
</div>
<!-- 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>
<script src="assets/vendor/glightbox/js/glightbox.js"></script>
<!-- Template Functions -->
<script src="assets/js/functions.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink