ﯽﻓﺍﺮﮔﻮﭙﯾﺎﺗ/ﻦﺘﻣ :5 ﭖﺮﺘﺳﺍ ﺕﻮﺑ

فهرست مطالب

    نمایش فهرست مطالب

Bootstrap 5 ﺽﺮﻓ ﺶﯿﭘ ﺕﺎﻤﯿﻈﻨﺗ

Bootstrap 5 ﺯﺍ translate="no">ﻢﻠﻗ ﻩﺯﺍﺪﻧﺍ ﺶﯿﭘu

.(ﻞﺴﮑﯿﭘ 16 ﺽﺮﻓ ﺶﯿﭘ ﺭﻮﻃ ﻪﺑ) margin-bottom: 1rem

<h1> - <h6>

ﻮﮕﺨﺳﺎﭘ ﺖﻧﻮﻓ ﻩﺯﺍﺪﻧﺍ ﻭ ﺮﺗﮓﻧﺭﺮﭘ ﻢﻠﻗ ﻥﺯﻭ ﺎﺑ (<h6><

ﻝﺎﺜﻣ

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <p>The font-size of each Bootstrap heading depends on the screen size. Try to resize the browser window to see the effect.</p>
  <h1>h1 Bootstrap heading</h1>
  <h2>h2 Bootstrap heading</h2>
  <h3>h3 Bootstrap heading</h3>
  <h4>h4 Bootstrap heading</h4>
  <h5>h5 Bootstrap heading</h5>
  <h6>h6 Bootstrap heading</h6>
</div>

</body>
</html>

: .ﺪﯿﻨﮐ ﺭﺎﺘﻓﺭ ﻥﺍﻮﻨﻋ ﻥﺍﻮﻨﻋﻪﺑ ﺍﺭ ﺎﻬﻧﺁ ،ﻞﯾﺎﻤﺗ ﺕﺭﻮﺻ ﺭﺩ ﺎﺗ ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺮﮕﯾﺩ ﺮ

ﻝﺎﺜﻣ

<p class="h1">h1 Bootstrap heading</p>
<p class="h2">h2 Bootstrap heading</p>
<p class="h3">h3 Bootstrap heading</p>
<p class="h4">h4 Bootstrap heading</p>
<p class="h5">h5 Bootstrap heading</p>
<p class="h6">h6 Bootstrap heading</p>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <p class="h1">h1 Bootstrap heading</p>
  <p class="h2">h2 Bootstrap heading</p>
  <p class="h3">h3 Bootstrap heading</p>
  <p class="h4">h4 Bootstrap heading</p>
  <p class="h5">h5 Bootstrap heading</p>
  <p class="h6">h6 Bootstrap heading</p>
</div>

</body>
</html>

ﺎﻫ ﻞﺼﻓﺮﺳ ﺶﯾﺎﻤﻧ

ﺮﺘﮔﺭﺰﺑ) ﯽﻟﻮﻤﻌﻣ ﻦﯾﻭﺎﻨﻋ ﺯﺍ ﺮﺘﺸﯿﺑ ﻥﺪﺷ ﻪﺘﺴﺟﺮﺑ ﯼﺍﺮﺑ ﺶﯾﺎﻤﻧ ﻦﯾﻭﺎﻨﻋ

ﻝﺎﺜﻣ

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Display Headings</h1>
  <p>Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight):</p>
  <h1 class="display-1">Display 1</h1>
  <h1 class="display-2">Display 2</h1>
  <h1 class="display-3">Display 3</h1>
  <h1 class="display-4">Display 4</h1>
  <h1 class="display-5">Display 5</h1>
  <h1 class="display-6">Display 6</h1>
</div>

</body>
</html>

<small>

HTML ﺮﺼﻨﻋ 5 ﭖﺮﺘﺳﺍ ﺕﻮﺑ ﺭﺩ

<small>

:ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻥﺍﻮﻨﻋ ﺮﻫ ﺭﺩ ﻪﯾﻮﻧﺎﺛ ﻭ ﺮﺘﮑﭼﻮﮐ ﻦﺘﻣ ﮏﯾ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ (

ﻝﺎﺜﻣ

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Smaller, Secondary Text</h1>
  <p>The small element (and the .small class) is used to create a smaller, secondary text in any heading:</p>       
  <h1>h1 heading <small>secondary text</h1>
  <h2>h2 heading <small>secondary text</h2>
  <h3>h3 heading <small>secondary text</h3>
  <h4>h4 heading <small>secondary text</h4>
  <h5>h5 heading <small>secondary text</h5>
  <h6>h6 heading <small>secondary text</h6>
</div>

</body>
</html>

<mark>

:ﺪﻫﺩﯽﻣ ﻞﯾﺎﺘﺳﺍ ﮏﺘﺸﻟﺎﺑ ﯼﺭﺍﺪﻘﻣ ﻭ ﺩﺭﺯ ﻪﻨﯿﻣﺯﺲﭘ ﮓﻧﺭ ﺎﺑ ﺍﺭ ﮎﺭﺎﻣ.<"co

ﻝﺎﺜﻣ

.ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﻦﺘﻣ ﻥﺩﺮﮐ ﺖﯾﻼﯾﺎﻫ<";mark style="background-color:#fcf8e3;pa

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Highlight Text</h1>    
  <p>Use the mark element (or the .mark class) to <mark>highlight</mark> text.</p>
</div>

</body>
</html>

<abbr>

:ﺪﻫﺩﯽﻣ ﻞﯾﺎﺘﺳﺍ ﺭﻭﺎﻨﺷ ﯼﻭﺭ ﻝﺍﻮﺳ ﺖﻣﻼﻋ ﺎﺑ ﺎﻤﻧﻥﺎﮑﻣ ﻭ ﺭﺍﺩﻪﻄﻘﻧ ﻪﯿﺷﺎﺣ ﺎﺑ

ﻝﺎﺜﻣ

The WHO was founded in 1948.

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Abbreviations</h1>
  <p>The abbr element is used to mark up an abbreviation or acronym:</p>
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>

</body>
</html>

<blockquote>

ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ <blockquote> ﻪﺑ ﺍﺭ

ﻝﺎﺜﻣ

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Blockquotes</h1>
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>
</div>

</body>
</html>

<dl>

:ﺪﻨﮐ ﯽﻣ ﻞﯾﺎﺘﺳﺍ ﺮﯾﺯ ﺵﻭﺭ ﻪﺑ ﺍﺭ code class="w3-codespan">dl HTML> ﺮﺼﻨﻋ 5 ﭖ

ﻝﺎﺜﻣ

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Description Lists</h1>    
  <p>The dl element indicates a description list:</p>
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>     
</div>

</body>
</html>

<code>

:ﺪﻨﮐ ﯽﻣ ﻞﯾﺎﺘﺳﺍ ﺮﯾﺯ ﺵﻭﺭ ﻪﺑ ﺍﺭ HTML/>ﺪﮐ<"code class="w3-codespan> ﺮﺼﻨﻋ 5 ﭖ

ﻝﺎﺜﻣ

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Code Snippets</h1>
  <p>Inline snippets of code should be embedded in the code element:</p>
  <p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
</div>

</body>
</html>

<kbd>

:ﺪﻫﺩ ﯽﻣ ﻞﯾﺎﺘﺳﺍ ﺮﯾﺯ ﺵﻭﺭ ﻪﺑ ﺍﺭ <kbd>

ﻝﺎﺜﻣ

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Keyboard Inputs</h1>
  <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
  <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>

</body>
</html>

<pre>

:ﺪﻫﺩ ﯽﻣ ﻞﯾﺎﺘﺳﺍ ﺮﯾﺯ ﺵﻭﺭ ﻪﺑ ﺍﺭ code class="w3-codespan"><pre> HTML> ﺮﺼﻨﻋ

ﻝﺎﺜﻣ

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>
</div>

</body>
</html>

CSS ﺮﺘﺸﯿﺑ ﯽﻓﺍﺮﮔﻮﭙﯾﺎﺗ ﯼﺎﻫ ﺱﻼﮐ

:ﺩﺮﮐ ﻪﻓﺎﺿﺍ HTML ﺮﺻﺎﻨﻋ ﻞﯾﺎﺘﺳﺍ ﻪﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ ﺮﯾﺯ Bootstrap 5 ﯼﺎﻫ ﺱﻼﮐ

ﺱﻼﮐ:

.lead

ﺕﺎﺤﯿﺿﻮﺗ: ﺪﻨﮐ ﯽﻣ ﺰﯾﺎﻤﺘﻣ ﺍﺭ ﻑﺍﺮﮔﺍﺭﺎﭘ ﮏﯾ

: ﻝﺎﺜﻣ

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Typography</h2>
  <p>Use the .lead class to make a paragraph "stand out":</p>
  <p class="lead">This paragraph stands out.</p>
  <p>This is a regular paragraph.</p>
</div>

</body>
</html>

ﺱﻼﮐ:

.text-start

ﺕﺎﺤﯿﺿﻮﺗ: ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﭗﭼ ﺯﺍﺮﺗ ﻦﺘﻣ

: ﻝﺎﺜﻣ

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Typography</h2>
  <p class="text-start">Left-aligned text.</p>
  <p class="text-end">Right-aligned text.</p>      
  <p class="text-center">Center-aligned text.</p>
  <p class="text-nowrap">No wrap text. No wrap text. No wrap text. No wrap text.</p>
</div>

</body>
</html>

ﺱﻼﮐ:

.text-break

ﺕﺎﺤﯿﺿﻮﺗ: ﺪﻨﮐ ﯽﻣ ﯼﺮﯿﮔﻮﻠﺟ ﯽﻧﻻﻮﻃ ﻦﺘﻣ ﯼﺪﻨﺑ ﺡﺮﻃ ﻥﺪﺷ ﻪﺘﺴﮑﺷ ﺯﺍ

: ﻝﺎﺜﻣ

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
<body>

<div class="container mt-3">
  <h2>Text break / Word break</h2>
  <p>The .text-break class prevents long text from breaking layout.</p>
  <p>With .text-break:</p>
  <p class="text-break">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz</p>
  <p>Without .text-break:</p>
  <p>AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz</p>
</div>

</body>
</html>

ﺱﻼﮐ:

.text-center

ﺕﺎﺤﯿﺿﻮﺗ: ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﻂﺳﻭ ﺯﺍﺮﺗ ﻦﺘﻣ

: ﻝﺎﺜﻣ

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Typography</h2>
  <p class="text-start">Left-aligned text.</p>
  <p class="text-end">Right-aligned text.</p>      
  <p class="text-center">Center-aligned text.</p>
  <p class="text-nowrap">No wrap text. No wrap text. No wrap text. No wrap text.</p>
</div>

</body>
</html>

ﺱﻼﮐ:

.text-decoration-none

ﺕﺎﺤﯿﺿﻮﺗ: ﯽﻣ ﻑﺬﺣ ﺪﻧﻮﯿﭘ ﺯﺍ ﺍﺭ ﻂﺧﺮﯾﺯﺪﻨﮐ

: ﻝﺎﺜﻣ

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Text Decoration</h2>
  <p>Use the .text-decoration-none class to remove the underline from a link.</p>
  <a href="#" class="text-decoration-none">A link without underline.</a>
</div>

</body>
</html>

ﺱﻼﮐ:

.text-end

ﺕﺎﺤﯿﺿﻮﺗ: ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﺖﺳﺍﺭ ﺯﺍﺮﺗ ﻦﺘﻣ

: ﻝﺎﺜﻣ

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Typography</h2>
  <p class="text-start">Left-aligned text.</p>
  <p class="text-end">Right-aligned text.</p>      
  <p class="text-center">Center-aligned text.</p>
  <p class="text-nowrap">No wrap text. No wrap text. No wrap text. No wrap text.</p>
</div>

</body>
</html>

ﺱﻼﮐ:

.text-nowrap

ﺕﺎﺤﯿﺿﻮﺗ: ﯽﻣ ﻥﺎﺸﻧﺖﺳﺍ ﻩﺪﺸﻧ ﯼﺪﻨﺑ ﻪﺘﺴﺑ ﻦﺘﻣ ﻪﮐ ﺪﻫﺩ

: ﻝﺎﺜﻣ

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Typography</h2>
  <p class="text-start">Left-aligned text.</p>
  <p class="text-end">Right-aligned text.</p>      
  <p class="text-center">Center-aligned text.</p>
  <p class="text-nowrap">No wrap text. No wrap text. No wrap text. No wrap text.</p>
</div>

</body>
</html>

ﺱﻼﮐ:

.text-lowercase

ﺕﺎﺤﯿﺿﻮﺗ: ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﮏﭼﻮﮐ ﻑﻭﺮﺣ ﺎﺑ ﺍﺭ ﻦﺘﻣ

: ﻝﺎﺜﻣ

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Typography</h2>
  <p class="text-lowercase">Lowercased text.</p>
  <p class="text-uppercase">Uppercased text.</p>      
  <p class="text-capitalize">Capitalized text.</p>
</div>

</body>
</html>

ﺱﻼﮐ:

.text-uppercase

ﺕﺎﺤﯿﺿﻮﺗ: ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﮒﺭﺰﺑ ﻦﺘﻣ

: ﻝﺎﺜﻣ

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Typography</h2>
  <p class="text-lowercase">Lowercased text.</p>
  <p class="text-uppercase">Uppercased text.</p>      
  <p class="text-capitalize">Capitalized text.</p>
</div>

</body>
</html>

ﺱﻼﮐ:

.text-capitalize

ﺕﺎﺤﯿﺿﻮﺗ: ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﮒﺭﺰﺑ ﻑﻭﺮﺣ ﺎﺑ ﻦﺘﻣ

: ﻝﺎﺜﻣ

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Typography</h2>
  <p class="text-lowercase">Lowercased text.</p>
  <p class="text-uppercase">Uppercased text.</p>      
  <p class="text-capitalize">Capitalized text.</p>
</div>

</body>
</html>

ﺱﻼﮐ:

.initialism

ﺕﺎﺤﯿﺿﻮﺗ: ﺮﺼﻨﻋ ﮏﯾ ﺭﺩ ﺍﺭ ﻦﺘﻣ ﺪﻫﺩ

: ﻝﺎﺜﻣ

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Typography</h2>
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948. (normal abbr)</p>      
  <p>The <abbr title="World Health Organization" class="initialism">WHO</abbr> was founded in 1948. (slightly smaller abbr)</p>
</div>

</body>
</html>

ﺱﻼﮐ:

.list-unstyled

ﺕﺎﺤﯿﺿﻮﺗ: ﺶﯿﭘ ﺖﺳﺮﻬﻓ ﮏﺒﺳﯽﻣ ﻑﺬﺣ ﺖﺳﺮﻬﻓ ﺩﺭﺍﻮﻣ ﺭﺩ ﺍﺭ ﭗﭼ ﺖﻤﺳ ﻪﯿﺷﺎﺣ ﻭ ﺽﺮﻓu

: ﻝﺎﺜﻣ

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Typography</h2>
  <p>The class .list-unstyled removes the default list-style and left margin on list items (immediate children only):</p>
  <ul class="list-unstyled">
    <li>Coffee</li>
    <li>Tea
      <ul>
        <li>Black tea</li>
        <li>Green tea</li>
      </ul>
    </li>
    <li>Milk</li>
  </ul>
</div>

</body>
</html>

ﺱﻼﮐ:

.list-inline

ﺕﺎﺤﯿﺿﻮﺗ: ﯽﻣ ﺭﺍﺮﻗ ﻂﺧ ﮏﯾ ﺭﺩ ﺍﺭ ﺖﺳﺮﻬﻓ ﺩﺭﺍﻮﻣ ﻪﻤﻫﺪﻫﺩ (ﻩﺍﺮﻤﻫ ﻪﺑ

: ﻝﺎﺜﻣ

ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Typography</h2>
  <p>The class .list-inline places all list items on a single line, when used together with the .list-inline-item:</p>
  <ul class="list-inline">
    <li class="list-inline-item">Coffee</li>
    <li class="list-inline-item">Tea</li>
    <li class="list-inline-item">Milk</li>
  </ul>
</div>

</body>
</html>