mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
74 lines
4.6 KiB
HTML
74 lines
4.6 KiB
HTML
---
|
||
title: Text features
|
||
page-header: Text features
|
||
page-menu: extra.text-features
|
||
layout: default
|
||
permalink: text-features.html
|
||
---
|
||
|
||
<div class="row">
|
||
<div class="col-7">
|
||
<div class="card card-lg">
|
||
<div class="card-body">
|
||
<div class="markdown">
|
||
<h3>Text features</h3>
|
||
|
||
<p>HTML provides various tags to format text and add meaning. For example, <strong>important words</strong> can be highlighted, and <em>emphasized text</em> can be italicized.</p>
|
||
|
||
<p>If you want to visit an interesting website, check out <a href="{{ site.homepage }}" target="_blank">this page</a>.</p>
|
||
|
||
<p>The term <abbr data-bs-toggle="tooltip" data-bs-placement="top" title="Hypertext Markup Language">HTML</abbr> is widely used in web development.</p>
|
||
|
||
<p>Previously, the instruction said <del>"Do not include images."</del> However, <ins>"You may now add images."</ins></p>
|
||
|
||
<blockquote cite="{{ site.homepage }}">"The best way to predict the future is to create it." – Peter Drucker</blockquote>
|
||
|
||
<p>Sometimes, <mark>highlighting important text</mark> can improve readability.</p>
|
||
|
||
<p>In JavaScript, you can log messages using the following code: <code>console.log('Hello, world!');</code></p>
|
||
|
||
<p>To copy text on Windows, use <kbd>Ctrl + C</kbd>. On macOS, use <kbd>Cmd + C</kbd>.</p>
|
||
|
||
<p>Water is written chemically as H<sub>2</sub>O, while Einstein’s famous equation is E = mc<sup>2</sup>.</p>
|
||
|
||
<p>Many people mistakenly spell <span class="text-incorrect">"recieve"</span> instead of <span class="text-correct">"receive"</span>.</p>
|
||
|
||
<p>The correct way to write the date format is <span class="text-correct">"February 12, 2025"</span>, not <span class="text-incorrect">"12th February, 2025"</span> in American English.</p>
|
||
|
||
<p>
|
||
If you need select text, you can use your mouse or keyboard. To select text using your mouse, click and drag the cursor over the text <span class="text-selected">you want to highlight</span>.
|
||
</p>
|
||
|
||
<p><small>Disclaimer: This text is for demonstration purposes only.</small></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="card card-lg">
|
||
<div class="card-body">
|
||
<div class="markdown">
|
||
{% for i in (1..6) %}
|
||
<h{{ i }}>Heading {{ i }} by <a class="mention"><span class="mention-avatar" style="background-image: url(/static/avatars/035f.jpg)"></span><span class="visually-hidden">@</span>JohnDoe</a></h{{ i }}>
|
||
{% endfor %}
|
||
|
||
<p>
|
||
Tabler is a modern UI framework which <span class="text-incorrect" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">provide</span> developers with a lot of <span class="text-incorrect">pre-build</span> components and customizable options. It is
|
||
<span class="text-incorrect">build</span> on Bootstrap, making it easy to integrate into existing projects. The design is clean, responsive, and accessible, ensuring that <span class="text-incorrect">user</span> can navigate
|
||
through <span class="text-incorrect">interface</span> easily. Tabler also <span class="text-incorrect">support</span> all modern browsers, but some features may not work properly on Internet Explorer. With
|
||
<span class="text-incorrect">it's</span> lightweight structure and optimized performance, Tabler helps developers create stunning web applications faster.
|
||
</p>
|
||
|
||
<p>Hey <a class="mention"><span class="mention-avatar" style="background-image: url(/static/avatars/035f.jpg)"></span><span class="visually-hidden">@</span>JohnDoe</a>, have you seen the latest updates on <a class="mention">#WebDevelopment<span class="mention-count">16</span></a>? <a class="mention"><span class="mention-avatar" style="background-image: url(/static/avatars/035f.jpg)"></span><span class="visually-hidden">@</span>JaneSmith</a> just shared an interesting article about <a class="mention"><span class="mention-app" style="background-image: url(/static/brands/messenger.svg)"></span>Messenger</a> and <a class="mention"><span class="mention-app" style="background-image: url(/static/brands/netflix.svg)"></span>Netflix</a>!</p>
|
||
|
||
<p>
|
||
The sky is <span class="mention"><span class="mention-color bg-blue"></span>#066fd1</span>, the grass is <span class="mention"><span class="mention-color bg-green"></span>rgb(47, 179, 68)</span>, fire trucks are often <span class="mention"><span class="mention-color bg-red"></span>red</span>, oranges are <span class="mention"><span class="mention-color bg-orange"></span>hsl(24deg, 94.49%, 49.8%)</span>. Some flowers are <span class="mention"><span class="mention-color bg-purple"></span>hwb(288.35deg, 24.31%, 21.18%)</span>.
|
||
</p>
|
||
|
||
<hr />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|