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