mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 09:54:24 +04:00
888 lines
58 KiB
HTML
888 lines
58 KiB
HTML
<!doctype html>
|
||
<!--
|
||
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
|
||
* @version v1.0.0-alpha
|
||
* @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 http-equiv="Content-Language" content="en"/>
|
||
<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?1578694044" rel="stylesheet"/>
|
||
<link href="../dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
|
||
<link href="../dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
|
||
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
|
||
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
|
||
<link href="../dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
|
||
<link href="../dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
|
||
<!-- Tabler Core -->
|
||
<link href="../dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
|
||
<!-- Tabler Plugins -->
|
||
<link href="../dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
|
||
<link href="../dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
|
||
<link href="../dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
|
||
</head>
|
||
<body class="antialiased">
|
||
<div class="wrapper">
|
||
<div class="content">
|
||
<header class="topnav">
|
||
<div class="container">
|
||
<div class="navbar navbar-expand-lg navbar-light">
|
||
<a href=".." class="navbar-brand mr-4">
|
||
<img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
|
||
<img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
|
||
</a>
|
||
<ul class="nav navbar-menu align-items-center ml-auto">
|
||
<li class="nav-item d-none d-lg-flex mr-3">
|
||
<a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
|
||
<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>
|
||
Source code
|
||
</a>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a href="#" data-toggle="dropdown"
|
||
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
|
||
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
|
||
<span class="ml-2 d-none d-lg-block lh-1">
|
||
Leesa Beaty
|
||
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
|
||
</span>
|
||
</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-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
|
||
Profile
|
||
</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-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>
|
||
Settings
|
||
</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-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
|
||
Inbox
|
||
<span class="badge bg-primary ml-auto">6</span>
|
||
</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-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
|
||
Message
|
||
</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-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
|
||
Need help?
|
||
</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-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
|
||
Sign out
|
||
</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<header class="topnav">
|
||
<div class="navbar navbar-expand-lg navbar-light">
|
||
<div class="container">
|
||
<ul class="navbar-nav flex-wrap">
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="../index.html" >
|
||
<span class="nav-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>
|
||
Dashboard
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="../form-elements.html" >
|
||
<span class="nav-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>
|
||
Form elements
|
||
</a>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
|
||
aria-expanded="false" >
|
||
<span class="nav-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>
|
||
Base
|
||
</a>
|
||
<ul class="dropdown-menu">
|
||
<li >
|
||
<a class="dropdown-item" href="../blank.html" >
|
||
Starter page
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../buttons.html" >
|
||
Buttons
|
||
<span class="badge bg-green ml-auto">New</span>
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../cards.html" >
|
||
Cards
|
||
</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="../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>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="../charts.html" >
|
||
<span class="nav-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="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
|
||
</span>
|
||
Charts
|
||
</a>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
|
||
aria-expanded="false" >
|
||
<span class="nav-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="9" y1="15" x2="15" y2="15"></line></svg>
|
||
</span>
|
||
Error pages
|
||
</a>
|
||
<ul class="dropdown-menu">
|
||
<li >
|
||
<a class="dropdown-item" href="../400.html" >
|
||
400 page
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../401.html" >
|
||
401 page
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../403.html" >
|
||
403 page
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../404.html" >
|
||
404 page
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../500.html" >
|
||
500 page
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../503.html" >
|
||
503 page
|
||
</a>
|
||
</li>
|
||
<li >
|
||
<a class="dropdown-item" href="../maintenance.html" >
|
||
Maintenance page
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
|
||
aria-expanded="false" >
|
||
<span class="nav-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="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
|
||
</span>
|
||
A
|
||
</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="dropright">
|
||
<a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
|
||
B
|
||
</a>
|
||
<div class="dropdown-menu">
|
||
<a href="../tmp.html" class="dropdown-item">C</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="../layouts.html" >
|
||
<span class="nav-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>
|
||
Layouts
|
||
<span class="badge bg-green ml-2">New</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
|
||
aria-expanded="false" >
|
||
<span class="nav-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>
|
||
Extra
|
||
</a>
|
||
<ul class="dropdown-menu">
|
||
<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="../search-results.html" >
|
||
Search results
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item active dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
|
||
aria-expanded="true" >
|
||
<span class="nav-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>
|
||
Documentation
|
||
</a>
|
||
<ul class="dropdown-menu">
|
||
<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/ribbons.html" >
|
||
Ribbons
|
||
<span class="badge bg-green ml-auto">New</span>
|
||
</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>
|
||
</ul>
|
||
<div class="navbar-search d-none d-xl-block">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<div class="content-page">
|
||
<main class="container my-4 flex-fill">
|
||
<!-- Page title -->
|
||
<div class="page-title-box">
|
||
<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">
|
||
<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/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="highlight">
|
||
<pre><code class="language-html" data-lang="html"><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="highlight">
|
||
<pre><code class="language-html" data-lang="html"><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="highlight">
|
||
<pre><code class="language-html" data-lang="html"><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="highlight">
|
||
<pre><code class="language-html" data-lang="html"><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="highlight">
|
||
<pre><code class="language-html" data-lang="html"><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="highlight">
|
||
<pre><code class="language-html" data-lang="html"><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="highlight">
|
||
<pre><code class="language-html" data-lang="html"><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="highlight">
|
||
<pre><code class="language-html" data-lang="html"><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="highlight">
|
||
<pre><code class="language-html" data-lang="html"><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="highlight">
|
||
<pre><code class="language-html" data-lang="html"><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="highlight">
|
||
<pre><code class="language-html" data-lang="html"><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>
|
||
</div>
|
||
<!-- Libs JS -->
|
||
<script src="../dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
|
||
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
|
||
<!-- Tabler Core -->
|
||
<script src="../dist/js/tabler.min.js?1578694044"></script>
|
||
</body>
|
||
</html> |