متن/تایپوگرافی
محتویات
تنظیمات پیش فرض بوت استرپ ۴
پیش‌فرض سراسری بوت استرپ ۴ اندازه خط ۱۶ پیکسل با ارتفاع خط ۱٫۵ است.[۱]
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 بوت استرپ ۴
منابع آموزشی