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

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

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

پیش‌فرض سراسری بوت استرپ ۴ اندازه خط ۱۶ پیکسل با ارتفاع خط ۱٫۵ است.[۱]

font-family پیش‌فرض Helvetica ,Arial ,sans-serif، "Helvetica Neue" است.

علاوه براین همه عنصرهای <p> margin-top: 0 و margin-bottom: 1rem دارند. (بطور پیش‌فرض ۱۶ پیکسل).

تگ های <h1> تا <h6>

بوت استرپ ۴ عنوان بندی‌های اچ‌تی‌ام‌ال (<h1> تا <h6>) با پهنای قلم (به انگلیسی: font-weight) پررنگ‌تر و اندازه-خط بزرگتر استایل‌دهی می‌کند:

مثال


مشاهدهٔ نتیجه


عنوان های نمایشی (به انگلیسی: Display)

عنوان‌های نمایشی کمی متفاوت تر از عنوان‌های عادی هستند (اندازه خط بزرگتر و پهنای قلم (به انگلیسی: font-weight) کمتر) و چهار کلاس برای آنها وجود دارد: .display-1 ،.display-2 ،.display-3 و .display-4.

مثال


مشاهدهٔ نتیجه


تگ <small>

در بوت استرپ ۴ عنصر <small> متن ثانویه سبک‌تر در هر عنوانی استفاده می‌شود:

مثال


مشاهدهٔ نتیجه


تگ <mark>

بوت استرپ ۴ عنصر اچ‌تی‌ام‌ال <mark> را با رنگ پیش زمینهٔ زرد و کمی حاشیه (به انگلیسی: padding) طراحی می‌کند:

مثال


مشاهدهٔ نتیجه


تگ <abbr>

بوت استرپ ۴ عنصر <abbr> را با کادر پایینی نقطه چین نمایش می‌دهد:

مثال


مشاهدهٔ نتیجه


تگ <blockgoute>

زمانی که بلوکی از محتوا را از منبع دیگری نقل قول می‌کنید، کلاس .blockquote را به یک تگ blockquote> اضافه کنید:

مثال


مشاهدهٔ نتیجه


تگ <dl>

بوت استرپ ۴ عنصر <dl> در HTML را به روش زیر طراحی می‌کند:

مثال


مشاهدهٔ نتیجه


تگ <code>

بوت استرپ ۴ عنصر <code> در HTML را به روش زیر طراحی می‌کند:

مثال


مشاهدهٔ نتیجه


تگ<kbd>

بوت استرپ ۴ عنصر <kbd> در HTML را به روش زیر طراحی می‌کند:

مثال


مشاهدهٔ نتیجه


تگ <pre>

بوت استرپ ۴ عنصر <pre> در HTML را به روش زیر طراحی می‌کند:

مثال


مشاهدهٔ نتیجه


کلاس های تایپوگرافی بیشتر

کلاس‌های بوت استرپ ۴ زیر را می‌توان برای طراحی بعدی عناصر HTML اضافه کرد:

کلاس توضیح مثال
.font-weight-bold متن پررنگ (به انگلیسی: Bold) مشاهدهٔ نتیجه
.font-weight-bolder متن پررنگ (به انگلیسی: Bold) مشاهدهٔ نتیجه
.font-italic متن کج (به انگلیسی: Italic) مشاهدهٔ نتیجه
.font-weight-light متن با پهنای قلم کمتر (به انگلیسی: Light Weight) مشاهدهٔ نتیجه
.font-weight-lighter متن با پهنای قلم کمتر (به انگلیسی: Light Weight) مشاهدهٔ نتیجه
.font-weight-normal متن معمولی مشاهدهٔ نتیجه
.lead پاراگراف را برجسته می‌کند مشاهدهٔ نتیجه
.small متن را کوچکتر می‌کند (به اندازه ۸۰٪ اندازه والد تنظیم می‌شود) مشاهدهٔ نتیجه
.text-left متن را چپ‌چین می‌کند مشاهدهٔ نتیجه
.text-*-left متن را در صفحه نمایش‌های کوچک، متوسط، بزرگ و خیلی بزرگ بصورت چپ‌چین نمایش می‌دهد مشاهدهٔ نتیجه
.text-break از شکسته شدن چیدمان متن طولانی جلوگیری می‌کند مشاهدهٔ نتیجه
.text-center متن را وسط‌چین نشان می‌دهد مشاهدهٔ نتیجه
.text-*-center متن را در صفحه نمایش‌های کوچک، متوسط، بزرگ و خیلی بزرگ بصورت وسط‌چین نمایش می‌دهد مشاهدهٔ نتیجه
.text-decoration-none خط زیرین را لینک‌ها حدف می‌کند مشاهدهٔ نتیجه
.text-right متن را راست-چین نشان می‌دهد مشاهدهٔ نتیجه
.text-*-right متن را در صفحه نمایش‌های کوچک، متوسط، بزرگ و خیلی بزرگ بصورت راست-چین نمایش می‌دهد مشاهدهٔ نتیجه
.text-justify متن را بصورت justify شده نشان می‌دهد مشاهدهٔ نتیجه
.text-monospace متن Monospace شده مشاهدهٔ نتیجه
.text-nowrap متن را بدون پوشش نشان می‌دهد مشاهدهٔ نتیجه
.text-lowercase متن را با حروف کوچک نشان می‌دهد مشاهدهٔ نتیجه
.text-reset رنگ متن یا یک لینک را Reset می‌کند (رنگ عنصر والد را به ارث می‌برد) مشاهدهٔ نتیجه
.text-uppercase متن را با حروف بزرگ نشان می‌دهد مشاهدهٔ نتیجه
.text-capitalize حروف اول کلمات را تبدیل به حروف بزرگ می‌کند مشاهدهٔ نتیجه
.initialism متن درون عنصر <abbr> را با اندازه خط کمی کوچک‌تر نشان می‌دهد مشاهدهٔ نتیجه
.list-unstyled استایل لیست پیش‌فرض و حاشیه چپ را از روی آیتم‌های لیست حذف می‌کند (بر روی هر دو تگ <ul> و <ol> عمل می‌کند). این کلاس فقط برروی فرزندان بلافاصلهٔ آیتم‌های لیست اعمال می‌شود (برای حذف استایل‌های لیست پیش‌فرض از هر لیست تو در تو، این کلاس را روی همه لیست‌های تودرتو اعمال کنید) مشاهدهٔ نتیجه
.list-inline همهٔ آیتم‌های لیست را در یک خط قرار می‌دهد (با .list-inline-item در هر عنصر <li> با هم استفاده می‌شوند) مشاهدهٔ نتیجه
.pre-scrollable یک عنصر <pre> را قابل پیمایش می‌کند مشاهدهٔ نتیجه

مرجع کامل CSS بوت استرپ ۴

برای دسترسی به مرجع کامل همهٔ کلاس‌های CSS موجود در بوت استرپ ۴، به مرجع کلاس‌های بوت استرپ ۴ مراجعه کنید.


منابع آموزشی