mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
845 lines
55 KiB
HTML
845 lines
55 KiB
HTML
<!doctype html>
|
||
<!--
|
||
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
|
||
* @version 1.0.0-alpha.3
|
||
* @link https://github.com/tabler/tabler
|
||
* Copyright 2018-2019 The Tabler Authors
|
||
* Copyright 2018-2019 codecalm.net Paweł Kuna
|
||
* Licensed under MIT (https://tabler.io/license)
|
||
-->
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
|
||
<meta name="msapplication-TileColor" content="#206bc4"/>
|
||
<meta name="theme-color" content="#206bc4"/>
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
|
||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||
<meta name="mobile-web-app-capable" content="yes"/>
|
||
<meta name="HandheldFriendly" content="True"/>
|
||
<meta name="MobileOptimized" content="320"/>
|
||
<meta name="robots" content="noindex,nofollow,noarchive"/>
|
||
<link rel="icon" href="../favicon.ico" type="image/x-icon"/>
|
||
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
|
||
<title>Typography - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
|
||
<meta name="description" content="Documentation and examples for common text utilities to control alignment, wrapping, weight, and more."/>
|
||
<!-- Libs CSS -->
|
||
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1580915872" rel="stylesheet"/>
|
||
<link href="../dist/libs/selectize/dist/css/selectize.css?1580915872" rel="stylesheet"/>
|
||
<link href="../dist/libs/fullcalendar/core/main.min.css?1580915872" rel="stylesheet"/>
|
||
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1580915872" rel="stylesheet"/>
|
||
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1580915872" rel="stylesheet"/>
|
||
<link href="../dist/libs/fullcalendar/list/main.min.css?1580915872" rel="stylesheet"/>
|
||
<link href="../dist/libs/flatpickr/dist/flatpickr.min.css?1580915872" rel="stylesheet"/>
|
||
<link href="../dist/libs/nouislider/distribute/nouislider.min.css?1580915872" rel="stylesheet"/>
|
||
<!-- Tabler Core -->
|
||
<link href="../dist/css/tabler.min.css?1580915872" rel="stylesheet"/>
|
||
<!-- Tabler Plugins -->
|
||
<link href="../dist/css/tabler-flags.min.css?1580915872" rel="stylesheet"/>
|
||
<link href="../dist/css/tabler-payments.min.css?1580915872" rel="stylesheet"/>
|
||
<link href="../dist/css/tabler-buttons.min.css?1580915872" rel="stylesheet"/>
|
||
<link href="../dist/css/demo.min.css?1580915872" rel="stylesheet"/>
|
||
</head>
|
||
<body class="antialiased">
|
||
<div class="page">
|
||
<nav class="navbar navbar-expand-lg navbar-dark navbar-primary" id="navbar-primary">
|
||
<div class="container">
|
||
<a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
|
||
<img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
|
||
<img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
|
||
</a>
|
||
<div class="navbar-collapse collapse">
|
||
<h6 class="navbar-heading">Navigation</h6>
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="../index.html" >
|
||
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
|
||
</span>
|
||
<span class="nav-link-title">Home</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="../form-elements.html" >
|
||
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
|
||
</span>
|
||
<span class="nav-link-title">Forms</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
|
||
aria-expanded="false" >
|
||
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
|
||
</span>
|
||
<span class="nav-link-title">Base</span>
|
||
</a>
|
||
<ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns dropdown-menu-columns-2">
|
||
<li >
|
||
<a class="dropdown-item" href="../blank.html" >
|
||
Starter page
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../buttons.html" >
|
||
Buttons
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../cards.html" >
|
||
Cards
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../charts.html" >
|
||
Charts
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../datatables.html" >
|
||
Data Tables
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../calendar.html" >
|
||
Calendar
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../carousel.html" >
|
||
Carousel
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../lists.html" >
|
||
Lists
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../users.html" >
|
||
Users
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../gallery.html" >
|
||
Gallery
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../profile.html" >
|
||
Profile
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../music.html" >
|
||
Music
|
||
</a>
|
||
</li>
|
||
<li class="dropright">
|
||
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
|
||
Authentication
|
||
</a>
|
||
<div class="dropdown-menu">
|
||
<a href="../sign-in.html" class="dropdown-item">Sign in</a>
|
||
<a href="../sign-up.html" class="dropdown-item">Sign up</a>
|
||
<a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
|
||
<a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
|
||
</div>
|
||
</li>
|
||
<li class="dropright">
|
||
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
|
||
Error pages
|
||
</a>
|
||
<div class="dropdown-menu">
|
||
<a href="../400.html" class="dropdown-item">400 page</a>
|
||
<a href="../401.html" class="dropdown-item">401 page</a>
|
||
<a href="../403.html" class="dropdown-item">403 page</a>
|
||
<a href="../404.html" class="dropdown-item">404 page</a>
|
||
<a href="../500.html" class="dropdown-item">500 page</a>
|
||
<a href="../503.html" class="dropdown-item">503 page</a>
|
||
<a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="../layouts.html" >
|
||
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
|
||
</span>
|
||
<span class="nav-link-title">Layouts</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
|
||
aria-expanded="false" >
|
||
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||
</span>
|
||
<span class="nav-link-title">Extra</span>
|
||
</a>
|
||
<ul class="dropdown-menu dropdown-menu-arrow">
|
||
<li >
|
||
<a class="dropdown-item" href="../invoice.html" >
|
||
Invoice
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../blog.html" >
|
||
Blog cards
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../snippets.html" >
|
||
Snippets
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../search-results.html" >
|
||
Search results
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item active">
|
||
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
|
||
aria-expanded="true" >
|
||
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
|
||
</span>
|
||
<span class="nav-link-title">Docs</span>
|
||
</a>
|
||
<ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns dropdown-menu-columns-3">
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/index.html" >
|
||
Introduction
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/alerts.html" >
|
||
Alerts
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/autosize.html" >
|
||
Autosize
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/avatars.html" >
|
||
Avatars
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/badges.html" >
|
||
Badges
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/breadcrumb.html" >
|
||
Breadcrumb
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/buttons.html" >
|
||
Buttons
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/cards.html" >
|
||
Cards
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/carousel.html" >
|
||
Carousel
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/colors.html" >
|
||
Colors
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/countup.html" >
|
||
Countup
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/cursors.html" >
|
||
Cursors
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/charts.html" >
|
||
Charts
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/divider.html" >
|
||
Divider
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/empty.html" >
|
||
Empty states
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/flags.html" >
|
||
Flags
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/form-elements.html" >
|
||
Form elements
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/form-helpers.html" >
|
||
Form helpers
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/input-mask.html" >
|
||
Form input mask
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/layout.html" >
|
||
Layout
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/progress.html" >
|
||
Progress
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/payments.html" >
|
||
Payments
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/range-slider.html" >
|
||
Range slider
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/ribbons.html" >
|
||
Ribbons
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/spinners.html" >
|
||
Spinners
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/steps.html" >
|
||
Steps
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/tables.html" >
|
||
Tables
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/tabs.html" >
|
||
Tabs
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/timelines.html" >
|
||
Timelines
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/toasts.html" >
|
||
Toasts
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../docs/tooltips.html" >
|
||
Tooltips
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item active" href="../docs/typography.html" >
|
||
Typography
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item d-none-navbar-vertical" title="Soon" data-toggle="tooltip">
|
||
<a href="#" class="nav-link disabled">
|
||
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
|
||
</span>
|
||
<span class="nav-link-title">Customize</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<h6 class="navbar-heading mt-4">Tools</h6>
|
||
<div class="navbar-side d-none-navbar-vertical-narrow">
|
||
<div class="d-none d-xl-block ml-auto">
|
||
<form action="." method="get">
|
||
<div class="input-icon">
|
||
<span class="input-icon-addon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
||
</span>
|
||
<input type="text" class="form-control" placeholder="Search…">
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<a href="#" class="btn btn-primary d-none-navbar-horizontal btn-block">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
|
||
Customize
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
|
||
<div class="container">
|
||
<a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
|
||
<img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
|
||
<img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
|
||
</a>
|
||
<ul class="navbar-nav ml-auto">
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Link</a>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Dropdown
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
|
||
<a class="dropdown-item" href="#">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
||
Action
|
||
</a>
|
||
<a class="dropdown-item" href="#">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
|
||
Another action
|
||
</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
|
||
Separated link</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
<div class="content">
|
||
<main class="container">
|
||
<!-- Page title -->
|
||
<div class="page-header">
|
||
<div class="row align-items-center">
|
||
<div class="col-auto">
|
||
<h2 class="page-title">
|
||
Documentation
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-3 order-lg-1 mb-4">
|
||
<a href="https://github.com/tabler/tabler" class="btn btn-secondary mb-4 btn-block" target="_blank" rel="noreferrer">
|
||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
|
||
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
|
||
</svg>
|
||
Browse source code
|
||
</a>
|
||
<div class="list-group list-group-transparent mb-0">
|
||
<a href="../docs/index.html" class="list-group-item list-group-item-action">
|
||
Introduction
|
||
</a>
|
||
<a href="../docs/alerts.html" class="list-group-item list-group-item-action">
|
||
Alerts
|
||
</a>
|
||
<a href="../docs/autosize.html" class="list-group-item list-group-item-action">
|
||
Autosize
|
||
</a>
|
||
<a href="../docs/avatars.html" class="list-group-item list-group-item-action">
|
||
Avatars
|
||
</a>
|
||
<a href="../docs/badges.html" class="list-group-item list-group-item-action">
|
||
Badges
|
||
</a>
|
||
<a href="../docs/breadcrumb.html" class="list-group-item list-group-item-action">
|
||
Breadcrumb
|
||
</a>
|
||
<a href="../docs/buttons.html" class="list-group-item list-group-item-action">
|
||
Buttons
|
||
</a>
|
||
<a href="../docs/cards.html" class="list-group-item list-group-item-action">
|
||
Cards
|
||
</a>
|
||
<a href="../docs/carousel.html" class="list-group-item list-group-item-action">
|
||
Carousel
|
||
</a>
|
||
<a href="../docs/colors.html" class="list-group-item list-group-item-action">
|
||
Colors
|
||
</a>
|
||
<a href="../docs/countup.html" class="list-group-item list-group-item-action">
|
||
Countup
|
||
</a>
|
||
<a href="../docs/cursors.html" class="list-group-item list-group-item-action">
|
||
Cursors
|
||
</a>
|
||
<a href="../docs/charts.html" class="list-group-item list-group-item-action">
|
||
Charts
|
||
</a>
|
||
<a href="../docs/divider.html" class="list-group-item list-group-item-action">
|
||
Divider
|
||
</a>
|
||
<a href="../docs/empty.html" class="list-group-item list-group-item-action">
|
||
Empty states
|
||
</a>
|
||
<a href="../docs/flags.html" class="list-group-item list-group-item-action">
|
||
Flags
|
||
</a>
|
||
<a href="../docs/form-elements.html" class="list-group-item list-group-item-action">
|
||
Form elements
|
||
</a>
|
||
<a href="../docs/form-helpers.html" class="list-group-item list-group-item-action">
|
||
Form helpers
|
||
</a>
|
||
<a href="../docs/input-mask.html" class="list-group-item list-group-item-action">
|
||
Form input mask
|
||
</a>
|
||
<a href="../docs/layout.html" class="list-group-item list-group-item-action">
|
||
Layout
|
||
</a>
|
||
<a href="../docs/progress.html" class="list-group-item list-group-item-action">
|
||
Progress
|
||
</a>
|
||
<a href="../docs/payments.html" class="list-group-item list-group-item-action">
|
||
Payments
|
||
</a>
|
||
<a href="../docs/range-slider.html" class="list-group-item list-group-item-action">
|
||
Range slider
|
||
</a>
|
||
<a href="../docs/ribbons.html" class="list-group-item list-group-item-action">
|
||
Ribbons
|
||
<span class="badge bg-green ml-auto">New</span>
|
||
</a>
|
||
<a href="../docs/spinners.html" class="list-group-item list-group-item-action">
|
||
Spinners
|
||
</a>
|
||
<a href="../docs/steps.html" class="list-group-item list-group-item-action">
|
||
Steps
|
||
</a>
|
||
<a href="../docs/tables.html" class="list-group-item list-group-item-action">
|
||
Tables
|
||
</a>
|
||
<a href="../docs/tabs.html" class="list-group-item list-group-item-action">
|
||
Tabs
|
||
</a>
|
||
<a href="../docs/timelines.html" class="list-group-item list-group-item-action">
|
||
Timelines
|
||
</a>
|
||
<a href="../docs/toasts.html" class="list-group-item list-group-item-action">
|
||
Toasts
|
||
</a>
|
||
<a href="../docs/tooltips.html" class="list-group-item list-group-item-action">
|
||
Tooltips
|
||
</a>
|
||
<a href="../docs/typography.html" class="list-group-item list-group-item-action active">
|
||
Typography
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-9">
|
||
<div class="card">
|
||
<div class="card-body p-md-6 p-xl-7">
|
||
<div class="markdown">
|
||
<p class="mb-4 float-right">
|
||
<a href="https://getbootstrap.com/docs/4.4/content/typography/" target="_blank">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
|
||
Bootstrap documentation
|
||
</a>
|
||
</p>
|
||
<h2 class="h1 mt-0 mb-3">Typography
|
||
</h2>
|
||
<p>Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.</p>
|
||
<h3 id="headings">Headings</h3>
|
||
<div class="example">
|
||
<h1>H1 Heading</h1>
|
||
<h2>H2 Heading</h2>
|
||
<h3>H3 Heading</h3>
|
||
<h4>H4 Heading</h4>
|
||
<h5>H5 Heading</h5>
|
||
<h6>H6 Heading</h6>
|
||
</div>
|
||
<div class="example-code language-html" data-lang="html">
|
||
<pre class="highlight"><code><span class="nt"><h1></span>H1 Heading<span class="nt"></h1></span>
|
||
<span class="nt"><h2></span>H2 Heading<span class="nt"></h2></span>
|
||
<span class="nt"><h3></span>H3 Heading<span class="nt"></h3></span>
|
||
<span class="nt"><h4></span>H4 Heading<span class="nt"></h4></span>
|
||
<span class="nt"><h5></span>H5 Heading<span class="nt"></h5></span>
|
||
<span class="nt"><h6></span>H6 Heading<span class="nt"></h6></span></code></pre>
|
||
</div>
|
||
<h3 id="paragraphs">Paragraphs</h3>
|
||
<div class="example">
|
||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
|
||
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
|
||
</div>
|
||
<div class="example-code language-html" data-lang="html">
|
||
<pre class="highlight"><code><span class="nt"><p></span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<span class="nt"></p></span>
|
||
<span class="nt"><p></span>At vero eos et accusam et justo duo dolores et ea rebum.<span class="nt"></p></span></code></pre>
|
||
</div>
|
||
<h3 id="semantic-text-elements">Semantic text elements</h3>
|
||
<div class="example">
|
||
<abbr title="Internationalization">I18N</abbr> <code class="ml-2">abbr</code><br />
|
||
<strong>Bold</strong> <code class="ml-2">strong</code> <code>b</code><br />
|
||
<cite>Citation</cite> <code class="ml-2">cite</code><br />
|
||
<code>Hello World!</code> <code class="ml-2">code</code><br />
|
||
<del>Deleted</del> <code class="ml-2">del</code><br />
|
||
<em>Emphasis</em> <code class="ml-2">em</code><br />
|
||
<i>Italic</i> <code class="ml-2">i</code><br />
|
||
<ins>Inserted</ins> <code class="ml-2">ins</code><br />
|
||
<kbd>Ctrl + S</kbd> <code class="ml-2">kbd</code><br />
|
||
<mark>Highlighted</mark> <code class="ml-2">mark</code><br />
|
||
<s>Strikethrough</s> <code class="ml-2">s</code><br />
|
||
<samp>Sample</samp> <code class="ml-2">samp</code><br />
|
||
Text <sub>Subscripted</sub> <code class="ml-2">sub</code><br />
|
||
Text <sup>Superscripted</sup> <code class="ml-2">sup</code><br />
|
||
<time>20:00</time> <code class="ml-2">time</code><br />
|
||
<u>Underline</u> <code class="ml-2">u</code><br />
|
||
<var>x</var> = <var>y</var> + 2 <code class="ml-2">var</code><br />
|
||
</div>
|
||
<div class="example-code language-html" data-lang="html">
|
||
<pre class="highlight"><code><span class="nt"><abbr</span> <span class="na">title=</span><span class="s">"Internationalization"</span><span class="nt">></span>I18N<span class="nt"></abbr><hide></span> <span class="nt"><code</span> <span class="na">class=</span><span class="s">"ml-2"</span><span class="nt">></span>abbr<span class="nt"></code><br/></span>
|
||
<span class="nt"></hide></span>
|
||
<span class="nt"><strong></span>Bold<span class="nt"></strong><hide></span> <span class="nt"><code</span> <span class="na">class=</span><span class="s">"ml-2"</span><span class="nt">></span>strong<span class="nt"></code></span> <span class="nt"><code></span>b<span class="nt"></code><br/></span>
|
||
<span class="nt"></hide></span>
|
||
<span class="nt"><cite></span>Citation<span class="nt"></cite><hide></span> <span class="nt"><code</span> <span class="na">class=</span><span class="s">"ml-2"</span><span class="nt">></span>cite<span class="nt"></code><br/></span>
|
||
<span class="nt"></hide></span>
|
||
<span class="nt"><code></span>Hello World!<span class="nt"></code><hide></span> <span class="nt"><code</span> <span class="na">class=</span><span class="s">"ml-2"</span><span class="nt">></span>code<span class="nt"></code><br/></span>
|
||
<span class="nt"></hide></span>
|
||
<span class="nt"><del></span>Deleted<span class="nt"></del><hide></span> <span class="nt"><code</span> <span class="na">class=</span><span class="s">"ml-2"</span><span class="nt">></span>del<span class="nt"></code><br/></span>
|
||
<span class="nt"></hide></span>
|
||
<span class="nt"><em></span>Emphasis<span class="nt"></em><hide></span> <span class="nt"><code</span> <span class="na">class=</span><span class="s">"ml-2"</span><span class="nt">></span>em<span class="nt"></code><br/></span>
|
||
<span class="nt"></hide></span>
|
||
<span class="nt"><i></span>Italic<span class="nt"></i><hide></span> <span class="nt"><code</span> <span class="na">class=</span><span class="s">"ml-2"</span><span class="nt">></span>i<span class="nt"></code><br/></span>
|
||
<span class="nt"></hide></span>
|
||
<span class="nt"><ins></span>Inserted<span class="nt"></ins><hide></span> <span class="nt"><code</span> <span class="na">class=</span><span class="s">"ml-2"</span><span class="nt">></span>ins<span class="nt"></code><br/></span>
|
||
<span class="nt"></hide></span>
|
||
<span class="nt"><kbd></span>Ctrl + S<span class="nt"></kbd><hide></span> <span class="nt"><code</span> <span class="na">class=</span><span class="s">"ml-2"</span><span class="nt">></span>kbd<span class="nt"></code><br/></span>
|
||
<span class="nt"></hide></span>
|
||
<span class="nt"><mark></span>Highlighted<span class="nt"></mark><hide></span> <span class="nt"><code</span> <span class="na">class=</span><span class="s">"ml-2"</span><span class="nt">></span>mark<span class="nt"></code><br/></span>
|
||
<span class="nt"></hide></span>
|
||
<span class="nt"><s></span>Strikethrough<span class="nt"></s</span><span class="err"><hide</span><span class="nt">></span>> <span class="nt"><code</span> <span class="na">class=</span><span class="s">"ml-2"</span><span class="nt">></span>s<span class="nt"></code><br/></span>
|
||
<span class="nt"></hide></span>
|
||
<span class="nt"><samp></span>Sample<span class="nt"></samp><hide></span> <span class="nt"><code</span> <span class="na">class=</span><span class="s">"ml-2"</span><span class="nt">></span>samp<span class="nt"></code><br/></span>
|
||
<span class="nt"></hide></span>
|
||
Text <span class="nt"><sub></span>Subscripted<span class="nt"></sub><hide></span> <span class="nt"><code</span> <span class="na">class=</span><span class="s">"ml-2"</span><span class="nt">></span>sub<span class="nt"></code><br/></span>
|
||
<span class="nt"></hide></span>
|
||
Text <span class="nt"><sup></span>Superscripted<span class="nt"></sup><hide></span> <span class="nt"><code</span> <span class="na">class=</span><span class="s">"ml-2"</span><span class="nt">></span>sup<span class="nt"></code><br/></span>
|
||
<span class="nt"></hide></span>
|
||
<span class="nt"><time></span>20:00<span class="nt"></time><hide></span> <span class="nt"><code</span> <span class="na">class=</span><span class="s">"ml-2"</span><span class="nt">></span>time<span class="nt"></code><br/></span>
|
||
<span class="nt"></hide></span>
|
||
<span class="nt"><u></span>Underline<span class="nt"></u><hide></span> <span class="nt"><code</span> <span class="na">class=</span><span class="s">"ml-2"</span><span class="nt">></span>u<span class="nt"></code><br/></span>
|
||
<span class="nt"></hide></span>
|
||
<span class="nt"><var></span>x<span class="nt"></var></span> = <span class="nt"><var></span>y<span class="nt"></var></span> + 2<span class="nt"><hide></span> <span class="nt"><code</span> <span class="na">class=</span><span class="s">"ml-2"</span><span class="nt">></span>var<span class="nt"></code><br/></span>
|
||
<span class="nt"></hide></span></code></pre>
|
||
</div>
|
||
<h3 id="horizontal-rules">Horizontal rules</h3>
|
||
<div class="example">
|
||
<hr />
|
||
</div>
|
||
<div class="example-code language-html" data-lang="html">
|
||
<pre class="highlight"><code><span class="nt"><hr></span></code></pre>
|
||
</div>
|
||
<h4 id="horizontal-rules-with-label">Horizontal rules with label</h4>
|
||
<div class="example">
|
||
<p>
|
||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
||
</p>
|
||
<div class="hr-text">
|
||
<span>Rule text</span>
|
||
</div>
|
||
<p>
|
||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||
</p>
|
||
<div class="hr-text hr-text-center">
|
||
<span>Rule text</span>
|
||
</div>
|
||
<p>
|
||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
||
</p>
|
||
<div class="hr-text hr-text-right">
|
||
<span>Rule text</span>
|
||
</div>
|
||
<p>
|
||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||
</p>
|
||
</div>
|
||
<div class="example-code language-html" data-lang="html">
|
||
<pre class="highlight"><code><span class="nt"><p></span>
|
||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
||
<span class="nt"></p></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"hr-text"</span><span class="nt">></span>
|
||
<span class="nt"><span></span>Rule text<span class="nt"></span></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><p></span>
|
||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||
<span class="nt"></p></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"hr-text hr-text-center"</span><span class="nt">></span>
|
||
<span class="nt"><span></span>Rule text<span class="nt"></span></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><p></span>
|
||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
||
<span class="nt"></p></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"hr-text hr-text-right"</span><span class="nt">></span>
|
||
<span class="nt"><span></span>Rule text<span class="nt"></span></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><p></span>
|
||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||
<span class="nt"></p></span></code></pre>
|
||
</div>
|
||
<h3 id="optimized-for-asian-african-and-middle-eastern-alphabets">Optimized for Asian, African, and Middle Eastern alphabets</h3>
|
||
<div class="example">
|
||
<h5>Chinese</h5>
|
||
<p>汉字</p>
|
||
<h5>Japanese</h5>
|
||
<p>日本語の表記体系</p>
|
||
<h5>Korean</h5>
|
||
<p>한글</p>
|
||
<h5>Cyrillic</h5>
|
||
<p>Кириллица</p>
|
||
<h5>Greek</h5>
|
||
<p>Eλληνική</p>
|
||
<h5>Georgian</h5>
|
||
<p>ქართული დამწერლობა</p>
|
||
<h5>Armenian</h5>
|
||
<p>Հայերենի այբուբեն</p>
|
||
<h5>Arabic</h5>
|
||
<p>الحروف العربية</p>
|
||
<h5>Hebrew</h5>
|
||
<p>אלפבית עברי</p>
|
||
<h5>Thai</h5>
|
||
<p>อักษรไทย</p>
|
||
</div>
|
||
<div class="example-code language-html" data-lang="html">
|
||
<pre class="highlight"><code><span class="nt"><h5></span>Chinese<span class="nt"></h5></span>
|
||
<span class="nt"><p></span>汉字<span class="nt"></p></span>
|
||
<span class="nt"><h5></span>Japanese<span class="nt"></h5></span>
|
||
<span class="nt"><p></span>日本語の表記体系<span class="nt"></p></span>
|
||
<span class="nt"><h5></span>Korean<span class="nt"></h5></span>
|
||
<span class="nt"><p></span>한글<span class="nt"></p></span>
|
||
<span class="nt"><h5></span>Cyrillic<span class="nt"></h5></span>
|
||
<span class="nt"><p></span>Кириллица<span class="nt"></p></span>
|
||
<span class="nt"><h5></span>Greek<span class="nt"></h5></span>
|
||
<span class="nt"><p></span>Eλληνική<span class="nt"></p></span>
|
||
<span class="nt"><h5></span>Georgian<span class="nt"></h5></span>
|
||
<span class="nt"><p></span>ქართული დამწერლობა<span class="nt"></p></span>
|
||
<span class="nt"><h5></span>Armenian<span class="nt"></h5></span>
|
||
<span class="nt"><p></span>Հայերենի այբուբեն<span class="nt"></p></span>
|
||
<span class="nt"><h5></span>Arabic<span class="nt"></h5></span>
|
||
<span class="nt"><p></span>الحروف العربية<span class="nt"></p></span>
|
||
<span class="nt"><h5></span>Hebrew<span class="nt"></h5></span>
|
||
<span class="nt"><p></span>אלפבית עברי<span class="nt"></p></span>
|
||
<span class="nt"><h5></span>Thai<span class="nt"></h5></span>
|
||
<span class="nt"><p></span>อักษรไทย<span class="nt"></p></span></code></pre>
|
||
</div>
|
||
<h3 id="text-transform">Text transform</h3>
|
||
<p>Transform text in components with text capitalization classes.</p>
|
||
<div class="example">
|
||
<p class="text-lowercase">Lowercased text.</p>
|
||
<p class="text-uppercase">Uppercased text.</p>
|
||
<p class="text-capitalize">Capitalized text.</p>
|
||
</div>
|
||
<div class="example-code language-html" data-lang="html">
|
||
<pre class="highlight"><code><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-lowercase"</span><span class="nt">></span>Lowercased text.<span class="nt"></p></span>
|
||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-uppercase"</span><span class="nt">></span>Uppercased text.<span class="nt"></p></span>
|
||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-capitalize"</span><span class="nt">></span>Capitalized text.<span class="nt"></p></span></code></pre>
|
||
</div>
|
||
<h3 id="letter-spacing">Letter spacing</h3>
|
||
<p>Utilities for controlling the tracking (letter spacing) of an element.</p>
|
||
<div class="example">
|
||
<p class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</p>
|
||
<p class="tracking-normal">Lorem ipsum dolor sit amet. Normal letter spacing.</p>
|
||
<p class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</p>
|
||
</div>
|
||
<div class="example-code language-html" data-lang="html">
|
||
<pre class="highlight"><code><span class="nt"><p</span> <span class="na">class=</span><span class="s">"tracking-tight"</span><span class="nt">></span>Lorem ipsum dolor sit amet. Tight letter spacing.<span class="nt"></p></span>
|
||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"tracking-normal"</span><span class="nt">></span>Lorem ipsum dolor sit amet. Normal letter spacing.<span class="nt"></p></span>
|
||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"tracking-wide"</span><span class="nt">></span>Lorem ipsum dolor sit amet. Wide letter spacing.<span class="nt"></p></span></code></pre>
|
||
</div>
|
||
<h3 id="line-height">Line Height</h3>
|
||
<p>Utilities for controlling the leading (line height) of an element.</p>
|
||
<div class="example">
|
||
<p class="lh-1">Lorem ipsum dolor sit amet.<br />
|
||
Dolor sit amet.</p>
|
||
<p class="lh-sm">Lorem ipsum dolor sit amet.<br />
|
||
Dolor sit amet.</p>
|
||
<p class="lh-base">Lorem ipsum dolor sit amet.<br />
|
||
Dolor sit amet.</p>
|
||
<p class="lh-lg">Lorem ipsum dolor sit amet.<br />
|
||
Dolor sit amet.</p>
|
||
</div>
|
||
<div class="example-code language-html" data-lang="html">
|
||
<pre class="highlight"><code><span class="nt"><p</span> <span class="na">class=</span><span class="s">"lh-1"</span><span class="nt">></span>Lorem ipsum dolor sit amet.<span class="nt"><br></span>
|
||
Dolor sit amet.<span class="nt"></p></span>
|
||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"lh-sm"</span><span class="nt">></span>Lorem ipsum dolor sit amet.<span class="nt"><br></span>
|
||
Dolor sit amet.<span class="nt"></p></span>
|
||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"lh-base"</span><span class="nt">></span>Lorem ipsum dolor sit amet.<span class="nt"><br></span>
|
||
Dolor sit amet.<span class="nt"></p></span>
|
||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"lh-lg"</span><span class="nt">></span>Lorem ipsum dolor sit amet.<span class="nt"><br></span>
|
||
Dolor sit amet.<span class="nt"></p></span></code></pre>
|
||
</div>
|
||
<h3 id="antialiasing">Antialiasing</h3>
|
||
<p>Utilities for controlling the font smoothing of an element.</p>
|
||
<p>Use the <code class="highlighter-rouge">.antialiased</code> utility to render text using subpixel antialiasing or use the <code class="highlighter-rouge">.subpixel-antialiased</code> render without antialiasing.</p>
|
||
<div class="example">
|
||
<div class="antialiased">Text with antialiasing</div>
|
||
<div class="subpixel-antialiased">Text without antialiasing</div>
|
||
</div>
|
||
<div class="example-code language-html" data-lang="html">
|
||
<pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"antialiased"</span><span class="nt">></span>Text with antialiasing<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"subpixel-antialiased"</span><span class="nt">></span>Text without antialiasing<span class="nt"></div></span></code></pre>
|
||
</div>
|
||
<h3 id="markdown-elements">Markdown elements</h3>
|
||
<p>When you can’t use the CSS classes you want, or when you just want to directly use HTML tags, use <code class="highlighter-rouge">.markdown</code> as container. It can handle almost any HTML tag.</p>
|
||
<div class="example">
|
||
<div class="markdown">
|
||
<h1>Hello World</h1>
|
||
<p>Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!</p>
|
||
<h2>Second level</h2>
|
||
<p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
|
||
<ul>
|
||
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
|
||
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
|
||
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
|
||
<li>Ut non enim metus.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="example-code language-html" data-lang="html">
|
||
<pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"markdown"</span><span class="nt">></span>
|
||
<span class="nt"><h1></span>Hello World<span class="nt"></h1></span>
|
||
<span class="nt"><p></span>Lorem ipsum<span class="nt"><sup><a></span>[1]<span class="nt"></a></sup></span> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<span class="nt"><sub></span>script<span class="nt"></sub></span> works as well!<span class="nt"></p></span>
|
||
<span class="nt"><h2></span>Second level<span class="nt"></h2></span>
|
||
<span class="nt"><p></span>Curabitur accumsan turpis pharetra <span class="nt"><strong></span>augue tincidunt<span class="nt"></strong></span> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.<span class="nt"></p></span>
|
||
<span class="nt"><ul></span>
|
||
<span class="nt"><li></span>In fermentum leo eu lectus mollis, quis dictum mi aliquet.<span class="nt"></li></span>
|
||
<span class="nt"><li></span>Morbi eu nulla lobortis, lobortis est in, fringilla felis.<span class="nt"></li></span>
|
||
<span class="nt"><li></span>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.<span class="nt"></li></span>
|
||
<span class="nt"><li></span>Ut non enim metus.<span class="nt"></li></span>
|
||
<span class="nt"></ul></span>
|
||
<span class="nt"></div></span></code></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
<!-- Libs JS -->
|
||
<script src="../dist/libs/jquery/dist/jquery.slim.min.js?1580915872"></script>
|
||
<!-- Tabler Core -->
|
||
<script src="../dist/js/tabler.min.js?1580915872"></script>
|
||
<script src="../dist/js/tabler-range-sliders.min.js?1580915872"></script>
|
||
</body>
|
||
</html> |