در این بخش با ابزارهای پرکاربرد قالب بندی متن در بوت استرپ آشنا می‌شوید. بوت استرپ با استفاده از کلاس های کاربردی، امکان تغییر راحت تراز متن، وزن فونت، فاصله بین خطوط، نحوه شکستن خطوط، اندازه فونت و سایر ویژگی‌های نمایشی را فراهم می‌کند.
تراز متن در بوت استرپ (Text alignment)
بوت استرپ کلاس هایی برای تراز متن در اختیار شما قرار می‌دهد. این کلاس ها کمک می‌کنند متن را به راحتی در موقعیت چپ (start)، راست (end) یا وسط (center) قرار دهید. این قابلیت‌ها کاملاً واکنش گرا هستند و مانند سیستم گرید بوت استرپ از نقاط شکست (breakpoints) مختلف پشتیبانی می‌کنند. اگر با ساختارهای گرید و کلاس های واکنش‌گرا آشنایی ندارید، پیشنهاد می‌کنیم ابتدا از یک منبع معتبر آموزش طراحی سایت با بوت استرپ را ببینید تا درک بهتری از کاربرد این کلاس ها داشته باشید.
نکته: اندازه مرورگر را تغییر دهید تا تاثیر این کلاس ها را در اندازه های مختلف صفحه بهتر ببینید.
|
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 - Text</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="text-start text-info">Text aligned at starting position across all viewports sizes.</p> <p class="text-center text-danger">Text aligned at center position across all viewports sizes.</p> <p class="text-end text-warning">Text aligned at end position across all viewports sizes.</p> <p class="text-sm-start text-primary">Text aligned at start on viewports sized SM (small) or wider.</p> <p class="text-md-start text-primary">Text aligned at start on viewports sized MD (medium) or wider.</p> <p class="text-lg-start text-primary">Text aligned at start on viewports sized LG (large) or wider.</p> <p class="text-xl-start text-primary">Text aligned at start on viewports sized XL (extra-large) or wider.</p> </body> </html> |
بوت استرپ کلاس کاربردی مخصوصی برای «تراز کامل متن» (Justify) ارائه نمی‌دهد. این یعنی اگرچه ممکن است متن‌های تراز شده از نظر بصری منظم‌تر به نظر برسند، اما معمولاً باعث ایجاد فاصله‌های غیرطبیعی بین کلمات می‌شوند و در نتیجه خواندن متن را دشوارتر می‌کنند.
شکست متن و کنترل سرریز (Text wrapping and overflow)
برای فعال کردن قابلیت شکست متن (یعنی برگشتن خودکار به خط بعد هنگام کمبود فضا)، میتوانید از کلاس .text-wrap استفاده کنید. این کلاس اطمینان می‌دهد که متن در عرض مشخص‌شده باقی می‌ماند و به درستی درون عنصر خود جا می‌گیرد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Text</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> <div class="badge bg-warning text-wrap" style="width: 8rem;"> This sentence should be wrapped. </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
برای جلوگیری از شکست متن و حفظ آن در یک خط، از کلاس .text-nowrap استفاده کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Text</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> <div class="text-nowrap bg-body-secondary border" style="width: 8rem;"> This sentence should overflow the parent. </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
شکستن کلمه در بوت استرپ (Word break)
- برای جلوگیری از به‌هم‌ریختگی ظاهر اجزای صفحه در مواجهه با رشته های متنی طولانی (مانند لینک ها یا کلمات بدون فاصله)، میتوانید از کلاس
.text-breakدر بوت استرپ استفاده کنید. این کلاس، ترکیبی از دو ویژگیword-wrap: break-wordوword-break: break-wordرا اعمال می‌کند که به مرورگر اجازه می‌دهد در صورت نیاز، کلمه را در نقطه مناسب بشکند و به خط بعد منتقل کند. - برای سازگاری بهتر با مرورگرهای مختلف، استفاده از
word-wrapبه‌جایoverflow-wrapتوصیه می‌شود. همچنین به‌کارگیری ویژگی منسوخword-break: break-wordنیز می‌تواند از بروز مشکلات احتمالی در ساختارهای مبتنی بر فلکس (flex containers) جلوگیری کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Text</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="text-break text-primary">TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</p> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
در زبان‌هایی مانند عربی و فارسی که از راست به چپ نوشته می‌شوند و ساختار پیوسته‌تری دارند، امکان شکستن کلمه (word breaking) به‌صورت طبیعی وجود ندارد. عربی رایج‌ترین زبان RTL در وب است و به همین دلیل، بوت استرپ ویژگی .text-break را از نسخه‌های راست‌چین شده فایل CSS خود حذف کرده است تا با ساختار زبانی و بصری این زبان‌ها سازگارتر باشد.
تبدیل حروف در بوت استرپ (Text transform)
برای تغییر نوع نوشتار متن (مثلاً حروف بزرگ یا کوچک)، بوت استرپ کلاس‌هایی ارائه می‌دهد که به‌راحتی میتوانید در اجزای مختلف صفحه استفاده کنید. این کلاس ها به شما امکان می‌دهند که متن را به حروف بزرگ، کوچک یا با حرف اول بزرگ (مانند تیتر) تبدیل کنید، بدون اینکه نیاز به تغییر دستی در محتوای اصلی باشد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Text</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="text-lowercase text-danger">This is a lower case text.</p> <p class="text-uppercase text-info"> This is a upper case text.</p> <p class="text-capitalize text-warning">This is a capitalized text.</p> </body> </html> |
کلاس .text-capitalize در بوت استرپ، فقط حرف اول هر واژه را به حالت بزرگ تبدیل می‌کند، بدون اینکه سایر حروف کلمه تغییر کنند. بنابراین اگر بخشی از متن شما به صورت ترکیبی از حروف بزرگ و کوچک نوشته شده باشد، فقط حرف ابتدایی هر کلمه تحت تأثیر این کلاس قرار می‌گیرد و ساختار کلی حروف باقی می‌ماند.
اندازه فونت در بوت استرپ (Font size)
- برای تغییر اندازه متن در بوت استرپ میتوانید از کلاس‌های مخصوص اندازه فونت استفاده کنید. برخلاف کلاس‌های عنوان (مانند
.h1تا.h6) که علاوه بر اندازه فونت، ویژگی‌هایی مانند ضخامت متن (font-weight) و ارتفاع خط (line-height) را هم شامل می‌شوند، کلاس‌های اندازه فقط روی خود سایز متن تمرکز دارند. - مقیاس این کلاس‌ها مشابه تگ‌های عنوان HTML عمل می‌کند؛ یعنی هرچه شماره کلاس بزرگ‌تر شود (مثلاً
.fs-6)، اندازه فونت کوچک‌تر خواهد بود.
|
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 - Text</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="fs-1 text-info">This is a text of .fs-1 font size.</p> <p class="fs-2 text-info">This is a text of .fs-2 font size.</p> <p class="fs-3 text-info">This is a text of .fs-3 font size.</p> <p class="fs-4 text-info">This is a text of .fs-4 font size.</p> <p class="fs-5 text-info">This is a text of .fs-5 font size.</p> <p class="fs-6 text-info">This is a text of .fs-6 font size.</p> </body> </html> |
برای تنظیم اندازه های فونت به‌صورت سفارشی در پروژه هایی که از Sass استفاده می‌کنند، میتوانید مقدار متغیر $font-sizes را در نقشه (map) مربوط به فونت ها تغییر دهید.
وزن فونت و حالت ایتالیک (Font weight and italics)
بوت استرپ کلاس های ساده و کاربردی برای تغییر وزن و سبک متن ارائه کرده است:
-
برای تغییر وزن فونت از کلاس های مخفف‌شده
.fw-*استفاده کنید. مثلاً.fw-boldبرای فونت ضخیم،.fw-lightبرای فونت نازک و.fw-normalبرای وزن معمولی کاربرد دارند. -
برای تنظیم سبک فونت به صورت ایتالیک یا نرمال، از کلاس‌های
.fst-*استفاده می‌شود. به‌عنوان نمونه،.fst-italicمتن را به صورت کج نمایش می‌دهد و.fst-normalسبک پیش‌فرض را بازمی‌گرداند.
این کلاس ها بدون نیاز به تعریف CSS اضافی، امکان کنترل سریع و دقیق ظاهر متن را در بخش‌های مختلف رابط کاربری فراهم می‌کنند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Text</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="fw-bold text-primary">This is a bold text.</p> <p class="fw-bolder text-primary">This is a bolder weight text (relative to the parent element).</p> <p class="fw-semibold text-primary">This is a semibold weight text.</p> <p class="fw-medium text-secodary">This is a medium weight text.</p> <p class="fw-normal text-secodary">This is a normal weight text.</p> <p class="fw-light text-secodary">This is a light weight text.</p> <p class="fw-lighter text-danger">This is a lighter weight text (relative to the parent element).</p> <p class="fst-italic text-danger">This is a italic text.</p> <p class="fst-normal text-danger">This is a text with normal font style.</p> </body> </html> |
ارتفاع خط در بوت استرپ (Line height)
برای تنظیم فاصله بین خطوط متن، بوت استرپ کلاس های کاربردی .lh-* را در اختیار شما قرار می‌دهد. این کلاس ها ارتفاع خط را تغییر می‌دهند تا خوانایی متن بهبود پیدا کند یا با طراحی کلی صفحه هماهنگ شود.
به‌عنوان مثال:
-
.lh-1باعث می‌شود خطوط خیلی فشرده نمایش داده شوند. -
.lh-smبرای ارتفاع خط کوچک (کمتر از حالت عادی) استفاده می‌شود. -
.lh-baseمقدار پیش‌فرض و استاندارد ارتفاع خط را اعمال می‌کند. -
.lh-lgفاصله خطوط را افزایش می‌دهد تا متن بازتر و خواناتر دیده شود.
استفاده از این کلاس ها در طراحی واکنش گرا، به شما امکان می‌دهد تا ظاهر متن را بر اساس نوع محتوا یا اندازه صفحه، به شکل دقیق کنترل کنید.
|
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 - Text</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="lh-1 text-primary">This is a long text that demonstrates how the utilities affect the line height of an element. Classes can be added to the element directly or occasionally to its parent element. With the help of utility API, these classes can be modified as required.</p> <p class="lh-sm text-secondary">This is a long text that demonstrates how the utilities affect the line height of an element. Classes can be added to the element directly or occasionally to its parent element. With the help of utility API, these classes can be modified as required.</p> <p class="lh-base text-warning">This is a long text that demonstrates how the utilities affect the line height of an element. Classes can be added to the element directly or occasionally to its parent element. With the help of utility API, these classes can be modified as required.</p> <p class="lh-lg text-info">This is a long text that demonstrates how the utilities affect the line height of an element. Classes can be added to the element directly or occasionally to its parent element. With the help of utility API, these classes can be modified as required.</p> </body> </html> |
فونت Monospace
برای تبدیل متن به فونت monospace (که در آن تمام حروف عرض یکسان دارند)، میتوانید از کلاس .font-monospace در بوت استرپ استفاده کنید. این کلاس از یک فونت استک مخصوص فونت های کدنویسی و فنی استفاده می‌کند.
فونت های monospace معمولاً در محیط‌هایی مثل نمایش کد، اطلاعات سیستمی، یا داده های جدولی کاربرد دارند، زیرا به‌دلیل یکنواخت بودن عرض کاراکترها، چینش دقیق‌تری از محتوا را امکان‌پذیر می‌کنند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Text</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="font-monospace text-primary">Text in monospace font.</p> </body> </html> |
بازنشانی رنگ متن در بوت استرپ (Reset color)
برای بازگرداندن رنگ یک متن یا لینک به حالت پیش‌فرض و اجازه دادن به آن برای پیروی از رنگ عنصر والد، از کلاس .text-reset استفاده کنید. این کلاس، هر رنگ مستقلی که قبلاً برای متن تنظیم شده را حذف می‌کند و باعث می‌شود رنگ نهایی به صورت خودکار از محیط اطراف (عنصر والد) به ارث برسد.
|
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 - Text</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="text-body-danger"> There is a <a href="#" class="text-reset">reset link</a> in this muted text. </p> <p class="text-body-secondary"> There is a <a href="#">reset link without text-reset class</a> in this muted text. </p> </body> </html> |
استایل دادن به متن در بوت استرپ (Text decoration)
برای کنترل نحوه نمایش استایل متن، بوت استرپ کلاس های مخصوصی ارائه می‌دهد که ظاهر متن را در اجزای مختلف رابط کاربری بهبود می‌بخشند. این کلاس ها به شما اجازه می‌دهند که به‌سادگی خط زیر متن را فعال یا غیرفعال کنید.
برخی از کلاس های پرکاربرد در این بخش عبارت‌اند از:
-
.text-decoration-none: حذف کامل هرگونه استایل (مثل خط زیر لینک) -
.text-decoration-underline: اضافه کردن خط زیر متن -
.text-decoration-line-through: نمایش خط روی متن (حذف‌شده یا تمام‌شده)
استفاده از این کلاس ها باعث می‌شود بدون نیاز به نوشتن CSS اضافی، ظاهر متنی دلخواه خود را در طراحی حفظ کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Text</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="text-decoration-underline text-danger">There is a line underneath in this paragraph.</p> <p class="text-decoration-line-through text-danger">A line runs through this text.</p> <a href="#" class="text-decoration-none">There is no text decoration on this link.</a> </body> </html> |
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۲۸ تیر ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++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
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
