متن/تایپوگرافی

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp3-menu.png
موارد آموزشی
۱خانه
۲شروع
۳شبکه‌بندی ساده
۴تایپوگرافی
۵جدول‌ها
۶تصویر‌ها
۷Jumbotron
۸Well‌ها
۹هشدارها
۱۰کلیدها
۱۱گروه‌های کلید
۱۲گلیف آیکون‌ها
۱۳نشان‌ها/برچسب‌ها
۱۴نوار پیشرفت
۱۵صفحه‌بندی
۱۶Pager
۱۷گروه‌های لیست
۱۸پنل‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱تب‌ها/Pillها
۲۲نوار راهبری
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵ورودی‌ها ۲
۲۶سایزدهی ورودی
۲۷Media Objectها
۲۸Carousel
۲۹Modal
۳۰راهنمای ابزار
۳۱Popover
۳۲Scrollspy
۳۳Affix
۳۴فیلترها
شبکه‌بندی
زمینه‌ها
مثال‌ها
مرجع JavaScrpit در بوت‌استرپ ۳
مرجع CSS در بوت‌استرپ ۳

تنظیمات پیش فرض بوت استرپ

پیش فرض سراسری بوت استرپ اندازه قلم ۱۴ پیکسل با ارتفاع خط ۱٫۴۲۸ است.[۱]

این پیش فرض برروی عنصر <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) مراجعه کنید.


منابع آموزشی