متن/تایپوگرافی
محتویات
- ۱ تنظیمات پیش فرض بوت استرپ
- ۲ پیش فرض‌های مرورگر در مقابل بوت استرپ
- ۳ تگ های <h1> تا <h6>
- ۴ تگ <small>
- ۵ تگ <mark>
- ۶ تگ <abbr>
- ۷ تگ <blockquote>
- ۸ تگ <dl>
- ۹ تگ <code>
- ۱۰ تگ <kbd>
- ۱۱ تگ <pre>
- ۱۲ پیش زمینه‌ها و رنگ‌های متنی
- ۱۳ کلاس های تایپوگرافی بیشتر
- ۱۴ مرجع کامل تایپوگرافی بوت استرپ
- ۱۵ منابع آموزشی
تنظیمات پیش فرض بوت استرپ
پیش فرض سراسری بوت استرپ اندازه قلم ۱۴ پیکسل با ارتفاع خط ۱٫۴۲۸ است.[۱]
این پیش فرض برروی عنصر <body> و همه پاراگراف‌ها (<p>) اعمال می‌شود.
علاوه براین، همه عناصر <p> یک حاشیه پایین دارند که برابر با نصف ارتفاع خط محاسبه شده آنها است (بطور پیش فرض ۱۰ پیکسل)
پیش فرض‌های مرورگر در مقابل بوت استرپ
در این بخش، برخی از عناصر HTML را بررسی می‌کنیم که بوسیلهٔ بوت استرپ کمی متفاوت تر از پیش فرض‌های مرورگر طراحی می‌شوند.
تگ های <h1> تا <h6>
بطور پیش فرض، بوت استرپ عنوان‌های HTML (<h1> تا <h6>) را به روش زیر طراحی می‌کند:
مثال
ساخت نمونه مثال این بخش در دست اقدام است.
تگ <small>
در بوت استرپ عنصر <small> در HTML برای ایجاد متن ثانویه سبک‌تر در هر عنوانی استفاده می‌شود:
مثال
ساخت نمونه مثال این بخش در دست اقدام است.
تگ <mark>
بوت استرپ عنصر <mark> در HTML را به روش زیر طراحی می‌کند.
مثال
ساخت نمونه مثال این بخش در دست اقدام است.
تگ <abbr>
بوت استرپ عنصر <abbr> در HTML را به روش زیر طراحی می‌کند:
مثال
ساخت نمونه مثال این بخش در دست اقدام است.
تگ <blockquote>
بوت استرپ عنصر <blockquote> در HTML را به روش زیر طراحی می‌کند:
مثال
ساخت نمونه مثال این بخش در دست اقدام است.
برای نمایش نقل قول در سمت راست، از کلاس .blockquote-reverse استفاده کنید:
مثال
ساخت نمونه مثال این بخش در دست اقدام است.
تگ <dl>
بوت استرپ عنصر <dl> در HTML را به روش زیر طراحی می‌کند:
مثال
ساخت نمونه مثال این بخش در دست اقدام است.
تگ <code>
بوت استرپ عنصر <code> در HTML را به روش زیر طراحی می‌کند:
مثال
ساخت نمونه مثال این بخش در دست اقدام است.
تگ <kbd>
بوت استرپ عنصر <kbd> در HTML را به روش زیر طراحی می‌کند:
مثال
ساخت نمونه مثال این بخش در دست اقدام است.
تگ <pre>
بوت استرپ عنصر <pre> در HTML را به روش زیر طراحی می‌کند:
مثال
ساخت نمونه مثال این بخش در دست اقدام است.
پیش زمینه‌ها و رنگ‌های متنی
بوت استرپ کلاس‌های متنی نیز دارد که می‌توان از آنها برای فراهم کردن "مفاهیم از طریق رنگ‌ها " استفاده کرد.
کلاس‌های مربوط به رنگ‌های متن عبارتند از: .text-muted، .text-primary، .text-success، .text-info، .text-warning و .text-danger:
مثال
ساخت نمونه مثال این بخش در دست اقدام است.
کلاس‌های مربوط به رنگ‌های پیش زمینه عبارتند از: .bg-success، .bg-primary، .bg-warning، .bg-info و .bg-danger:
مثال
ساخت نمونه مثال این بخش در دست اقدام است.
کلاس های تایپوگرافی بیشتر
کلاس‌های بوت استرپ زیر را می‌توان برای طراحی عناصر HTML بعدی اضافه کرد:
| کلاس | تعریف | مثال |
|---|---|---|
.lead
|
پاراگراف را برجسته می‌کند | |
.small
|
متن را کوچکتر می کند (به اندازه ۸۵٪ اندازه والد تنظیم می‌شود) | |
.text-left
|
متن را چپ-چین می‌کند | |
.text-center
|
متن را وسط-چین می‌کند | |
.text-right
|
متن را راست-چین می‌کند | |
.text-justify
|
متن را Justify می‌کند | |
.text-nowrap
|
متن را بدون پوشش نشان می‌دهد | |
.text-lowercase
|
متن را با حروف کوچک نشان می‌دهد | |
.text-uppercase
|
متن را با حروف بزرگ نشان می‌دهد | |
.text-capitalize
|
حروف اول کلمات را تبدیل به حروف بزرگ می‌کند | |
.initialism
|
متن درون عنصر <abbr> را با اندازه قلم کمی کوچکتر نشان می‌دهد
|
|
.list-unstyled
|
استایل لیست پیش‌فرض و حاشیه چپ را از روی آیتم‌های لیست حذف می‌کند (بر روی هر دو تگ <ul> و <ol> عمل می‌کند). این کلاس فقط برروی فرزندان بلافاصلهٔ آیتم‌های لیست اعمال می‌شود (برای حذف استایل‌های لیست پیش فرض از هر لیست تو در تو، این کلاس را روی همه لیست‌های تو در تو اعمال کنید)
|
|
.list-inline
|
همهٔ آیتم‌های لیست را در یک خط قرار می‌دهد | |
.dl-horizontal
|
عبارات (<dt>) و توصیف‌ها (<dd>) را در عنصرهای <dl> در کنار هم به خط می کند. شبیه حالت پیش فرض <dl> شروع می‌کند، اما زمانیکه پنجره بزرگتر می‌شود، آیتم‌ها در کنار هم در یک خط قرار می‌گیرند
|
|
.pre-scrollable
|
یک عنصر <pre> را قابل پیمایش (به انگلیسی: scrollable) می‌کند
|
مرجع کامل تایپوگرافی بوت استرپ
برای دسترسی به مرجع کامل همهٔ کلاس ها/عناصر تایپوگرافی، به مرجع کامل تایپوگرافی بوت استرپ مراجعه کنید.
همچنین برای اطلاعات بیشتر در مورد کلاس‌های متنی، به مرجع کلاس‌های کمک کننده بوت استرپ (به انگلیسی: Bootstrap Helper Classes Reference) مراجعه کنید.
منابع آموزشی