در این بخش با ویژگی‌های مرتبط با تایپوگرافی در بوت استرپ آشنا می‌شوید. تایپوگرافی هنر نمایش نوشته‌ها به شکلی خوانا، جذاب و زیباست؛ به‌طوری‌که کاربر در نگاه اول با متن ارتباط برقرار کند.
تنظیمات پیش‌فرض و سراسری بوت استرپ
در نسخه‌های جدید بوت استرپ، تنظیمات پایه‌ای برای تایپوگرافی، لینک‌ها و نمایش متن از قبل تعریف شده‌اند. در ادامه به برخی از این تنظیمات اشاره می‌کنیم:
-
اندازه پیش‌فرض فونت در بوت استرپ برابر با
1remاست، که معادل ۱۶ پیکسل می‌باشد. -
ارتفاع خط (line-height) برای خوانایی بهتر، مقدار
1.5در نظر گرفته شده است. -
برای نمایش بهینه متن در تمام دستگاه‌ها و سیستم‌عامل‌ها، بوت استرپ از Native Font Stack استفاده می‌کند.
-
رنگ پس‌زمینه تگ
<body>با استفاده از متغیر$body-bgتنظیم می‌شود و مقدار پیش‌فرض آن#fffاست. -
رنگ لینک‌های سراسری از طریق متغیر
$link-colorتعریف می‌شود و خط زیر لینک‌ها تنها هنگام hover (قرار گرفتن موس) نمایش داده می‌شود. -
برای اعمال تایپوگرافی پایه روی تگ
<body>می‌توان از متغیرهایی مانند$font-family-base،$font-size-baseو$line-height-baseاستفاده کرد. -
مقدار
$font-size-baseباید بر اساس rem تنظیم شود. تمام متغیرهای تایپوگرافی در فایل_variables.scssتعریف شده‌اند و سبک‌های نهایی آن‌ها در فایل_reboot.scssاعمال می‌شوند.
هدینگ ها (Headings)
تگ‌های هدینگ HTML یعنی <h1> تا <h6> در بوت استرپ به‌گونه‌ای طراحی شده‌اند که ساختار و اندازه آن‌ها با ظاهر کلی پروژه هماهنگ باشد. در بخش بعدی به نحوه استایل‌دهی این تگ‌ها می‌پردازیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Typography - Headings </title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h1>Heading 1 - h1</h1> <h2>Heading 2 - h2</h2> <h3>Heading 3 - h3</h3> <h4>Heading 4 - h4</h4> <h5>Heading 5 - h5</h5> <h6>Heading 6 - h6</h6> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
کلاس‌های .h1 تا .h6 نیز در بوت استرپ وجود دارند و این امکان را فراهم می‌کنند که استایل تایپوگرافی هدینگ‌ها را بدون استفاده از تگ‌های HTML مربوطه (مثل <h1> تا <h6>) اعمال کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Typography - Headings Classes </title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <p class="h1">Class h1 - Heading 1</p> <p class="h2">Class h2 - Heading 2</p> <p class="h3">Class h3 - Heading 3</p> <p class="h4">Class h4 - Heading 4</p> <p class="h5">Class h5 - Heading 5</p> <p class="h6">Class h6 - Heading 6</p> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
سفارشی سازی هدینگ ها در بوت استرپ
برای تغییر ظاهر هدینگ ها در بوت استرپ، میتوانید از کلاس‌های کاربردی (utility classes) استفاده کنید. این کلاس‌ها به شما اجازه می‌دهند اندازه فونت، رنگ، فاصله و سایر ویژگی‌ها را متناسب با طراحی خود تنظیم کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Typography - Customizing Headings </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <p>This is an example to show the customized heading.</p> <h4> Here the text will <small class="text-muted"> be customized through this class.</small> </h4> </body> </html> |
هدینگ های نمایشی (Display Headings)
زمانی که می‌خواهید هدینگ ها را با اندازه بزرگ‌تر و استایل برجسته‌تری نمایش دهید، میتوانید از کلاس‌های نمایشی (display heading) در بوت استرپ استفاده کنید. این کلاس‌ها ظاهر هدینگ را چشم‌گیرتر و تأثیرگذارتر می‌کنند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Typography - Display Headings </title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <p class="display-1">Display 1 - Heading 1</p> <p class="display-2">Display 2 - Heading 2</p> <p class="display-3">Display 3 - Heading 3</p> <p class="display-4">Display 4 - Heading 4</p> <p class="display-5">Display 5 - Heading 5</p> <p class="display-6">Display 6 - Heading 6</p> </body> </html> |
متن برجسته (Lead)
کلاس .lead در بوت استرپ باعث می‌شود پاراگراف مورد نظر بیشتر دیده شود و از سایر متن‌ها متمایز باشد. این کلاس اندازه فونت را بزرگ‌تر، وزن فونت را سبک‌تر و فاصله خطوط را بیشتر می‌کند تا پاراگراف جلوه بصری بهتری داشته باشد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Typography - Lead </title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <p class="lead"> The class lead will make the paragraph look different from the regular paragraph. It looks stand-out. </p> </body> </html> |
مخفف‌ها (Abbreviations)
در بوت استرپ، تگ HTML <abbr> به‌گونه‌ای استایل‌دهی شده که هنگام قرار گرفتن نشانگر موس روی آن، فرم کامل مخفف یا اختصار نمایش داده می‌شود. همچنین، یک خط‌چین ظریف زیر متن ظاهر می‌شود تا کاربر متوجه شود با یک مخفف روبرو است.
برای نمایش مخفف با اندازه فونت کمی کوچک‌تر، میتوانید از کلاس .initialism استفاده کنید. این کلاس معمولاً برای مخفف‌های رسمی یا اسامی سازمانی کاربرد دارد.
مثال:
ISRO
WHO
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Typography - Abbreviations </title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <p><abbr title="Indian Space Research Organisation">ISRO</abbr></p> <p><abbr title="World Health Organisation" class="initialism">WHO</abbr></p> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
نقل‌قول (Blockquote)
زمانی که می‌خواهید یک بخش از محتوا را به‌عنوان نقل‌قول در سند قرار دهید، میتوانید کلاس .blockquote را به همراه تگ HTML <blockquote> استفاده کنید. این کلاس ظاهر نقل‌قول را برجسته‌تر و ساختاریافته‌تر نمایش می‌دهد.
مثال: این یک نقل قول نمونه در بوت استرپ است است.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Typography - Blockquote </title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Example for blockquote</h4> <p>Refer the quote given below.</p> <blockquote class="blockquote"> <p>An ounce of patience is worth more than a tonne of preaching</p> </blockquote> </body> </html> |
نام‌گذاری منبع (Naming a Source)
برای مشخص کردن منبع یک نقل‌قول، بوت استرپ کلاس .blockquote-footer را ارائه می‌دهد که درون تگ <footer> قرار می‌گیرد. همچنین برای نمایش نام منبع، از تگ <cite> استفاده می‌شود تا نام اثر یا نویسنده به‌درستی و با استایل مناسب نمایش داده شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Typography - Naming Source </title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Example for Naming a Source</h4> <p>Refer the quote given below.</p> <blockquote class="blockquote"> <p>An ounce of patience is worth more than a tonne of preaching</p> <footer class="blockquote-footer">Written by someone <cite title="Very famous">Very famous</cite></footer> </blockquote> </body> </html> |
تراز بندی (Alignment)
بوت استرپ کلاس‌هایی مانند .text-center و .text-right را برای تغییر جهت تراز متن در نقل‌قول‌ها ارائه می‌دهد. با استفاده از این کلاس‌ها میتوانید محتوای تگ <blockquote> را در وسط یا سمت راست صفحه قرار دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Typography - Blockquote Alignment </title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Example for alignment of blockquote</h4> <p>Refer the quote given below.</p> <blockquote class="blockquote text-center"> <p>An ounce of patience is worth more than a tonne of preaching</p> <footer class="blockquote-footer">Written by someone <cite title="Very famous">Very famous</cite></footer> </blockquote> </body> </html> |
عناصر متنی درون‌خطی (Inline Text Elements)
به جای استفاده مستقیم از تگ‌های HTML5 برای متن درون‌خطی، بوت استرپ کلاس‌هایی را ارائه می‌دهد که می‌توانند برای استایل‌دهی به متن استفاده شوند. این کلاس‌ها ساختار متن را خواناتر و زیباتر می‌کنند.
کلاس .mark
کلاس .mark برای هایلایت یا نشانه‌گذاری بخشی از متن استفاده می‌شود و عملکردی مشابه تگ <mark> دارد. این کلاس معمولاً برای جلب توجه به یک کلمه یا عبارت در میان متن کاربرد دارد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Typography Inline Elements</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Use of mark </h4> <p>Demonstrating use of mark tag to <mark> highlight </mark> text.</p> <p class="mark">Demonstrating use of mark class to highlight text.</p> </body> </html> |
.small
کلاس .small متن را به‌صورت ریز و کم‌رنگ‌تر نمایش می‌دهد و معمولاً برای متون فرعی مانند کپی‌رایت، توضیحات حقوقی یا پاورقی استفاده می‌شود. این کلاس عملکردی مشابه تگ <small> در HTML دارد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Typography Inline Elements</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Use of small</h4> <p>Demonstrating use of <small> tag to make the text look fineprint.</p> <p class="small">Demonstrating use of small class to make the text look fineprint.</p> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
.text-decoration-underline
کلاس .text-decoration-underline متن را به‌صورت زیرخط‌دار نمایش می‌دهد و عملکردی مشابه تگ <u> در HTML دارد. از این کلاس می‌توان برای تأکید بصری یا مشخص کردن لینک‌های غیرفعال استفاده کرد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Typography Inline Elements</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Use of .text-decoration-underline</h4> <p>Demonstrating use of <u> tag to make the text underlined.</p> <p class="text-decoration-underline">Demonstrating use of text-decoration-underline class to make the text underlined.</p> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
.text-decoration-line-through
کلاس .text-decoration-line-through متن را به‌صورت خط خورده نمایش می‌دهد و نشان می‌دهد که آن بخش از متن دیگر معتبر یا قابل استفاده نیست. این کلاس عملکردی مشابه تگ <s> در HTML دارد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Typography Inline Elements</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Use of .text-decoration-line-through</h4> <p>Demonstrating use of s tag to treat the text as no longer accurate.</p> <p class="text-decoration-line-through">Demonstrating use of text-decoration-line-through class to treat the text as no longer accurate.</p> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
<del>
تگ <del> برای نمایش متنی که حذف شده است استفاده می‌شود. این تگ معمولاً برای نشان دادن تغییرات یا ویرایش‌هایی به‌کار می‌رود که در نسخه جدید متن دیگر وجود ندارند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Typography Inline Elements</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Use of <del> element</h4> <p><del>Demonstrating use of <del> tag to render the text as deleted.</del></p> </body> </html> |
<strong>
تگ <strong> متن را به‌صورت پررنگ (bold) نمایش می‌دهد و برای تأکید معنایی روی کلمات یا جملات استفاده می‌شود. استفاده از این تگ نشان می‌دهد که آن بخش از متن از نظر محتوا اهمیت بیشتری دارد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Typography Inline Elements</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Use of strong element</h4> <p><strong>Demonstrating use of strong tag to render the text as bold.</strong></p> </body> </html> |
<em>
تگ <em> متن را به‌صورت مورب (italic) نمایش می‌دهد و برای تأکید معنایی با لحن متفاوت در خواندن جمله استفاده می‌شود. این تأکید معمولاً به‌صورت صوتی در خوانش متن نیز قابل درک است.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Typography Inline Elements</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Use of em element</h4> <p><em>Demonstrating use of em tag to render the text as italicized.</em></p> </body> </html> |
لیست ها در بوت استرپ
لیست بدون استایل (Unstyled Lists)
کلاس .list-unstyled در بوت استرپ استایل پیش‌فرض لیست مانند بولت‌ها (نقطه‌های ابتدای آیتم‌ها) و فاصله چپ (left margin) را از آیتم‌های لیست حذف می‌کند.
نکته مهم این است که این کلاس فقط روی آیتم‌های فرزند مستقیم لیست تأثیر می‌گذارد و در صورت وجود لیست‌های تو در تو، باید کلاس را به آن‌ها نیز جداگانه اعمال کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Typography Lists</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Use of .list-unstyled</h4> <p>The class .list-unstyled removes the default style of list and the left margin on the items of the list.</p> <ul class="list-unstyled"> <li>Snacks</li> <li>Beverages <ul class="list"> <li>Cold Beverage</li> <li>Hot Beverage</li> </ul> </li> </ul> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
لیست درون‌خطی (Inline Lists)
بوت استرپ برای ایجاد لیست‌های درون‌خطی، از ترکیب دو کلاس .list-inline و .list-inline-item استفاده می‌کند. این ترکیب باعث می‌شود نشانگر بولت از آیتم‌های لیست حذف شود و هر آیتم با کمی فاصله در کنار هم به‌صورت افقی نمایش داده شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Typography Lists</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Use of .list-inline and .list-inline-item</h4> <p>The classes <b>.list-inline</b> and <b>.list-inline-item</b> removes a list's bullets and adds a little margin.</p> <ul class="list-inline"> <li class="list-inline-item">Tea</li> <li class="list-inline-item">Coffee</li> <li class="list-inline-item">Juice</li> </ul> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
تراز لیست‌های توضیحی (Description List Alignment)
بوت استرپ کلاس‌های آماده‌ای برای تگ‌های HTML شامل <dl>، <dt> و <dd> ارائه می‌دهد که امکان تراز افقی بین عبارات و توضیحات را فراهم می‌کند. این ساختار برای زمانی مناسب است که بخواهید عنوان و توضیح را در یک خط نمایش دهید.
در صورت نیاز میتوانید کلاس .text-truncate را نیز به عناصر اضافه کنید تا متن‌های طولانی با سه‌نقطه (…) کوتاه شوند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Typography Description List Alignment</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Use of classes for description list alignment</h4> <p>The predefined classes of bootstrap help to align terms and description in grid form.</p> <dl class="row"> <dt class="col-sm-3">Description Lists</dt> <dd class="col-sm-9">This tag shows the description of the term</dd> <dt class="col-sm-3 text-truncate">The predefined class text-truncate truncates the text and returns the output with ellipsis.</dt> <dd class="col-sm-9">This tag shows the truncated text with ellipsis</dd> </dl> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
اندازه فونت واکنش گرا (Responsive Font Sizes)
در بوت استرپ ۵، اندازه فونت واکنش گرا به‌صورت پیش‌فرض فعال است. این ویژگی که به اختصار RFS نامیده می‌شود، باعث می‌شود اندازه متن‌ها به‌صورت خودکار با توجه به اندازه صفحه نمایش یا دستگاه تغییر کند.
RFS فقط محدود به فونت نیست، بلکه می‌تواند برای واحدهایی مثل margin، padding، border-radius و حتی box-shadow نیز اندازه متناسب را محاسبه و اعمال کند.
این سیستم به‌طور هوشمند، اندازه مناسب را با توجه به ابعاد ویوپورت (viewport) مرورگر محاسبه کرده و ظاهر متن را در تمام دستگاه‌ها یکنواخت و خوانا نگه می‌دارد. یادگیری این تکنیک برای افرادی که در مسیر آموزش طراحی سایت با بوت استرپ هستند، یک گام ضروری برای ایجاد تجربه کاربری حرفه‌ای محسوب می‌شود.
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۳۰ اردیبهشت ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره آموزش Go
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
