نوشتار/چیدمان Bootstrap 5
- صفحه قبلی اساس‌های شبکه BS5
- صفحه بعدی رنگ‌های BS5
تنظیمات پیش‌فرض Bootstrap 5
Bootstrap 5 به صورت پیش‌فرض font-size به 1rem (默认 16px)،line-height به 1.5 تنظیم شده‌اند.
علاوه بر این، همه <p> عنصرها تنظیم شده‌اند margin-top: 0 و margin-bottom: 1rem )(默认 16px) را تنظیم می‌کند.
<h1> - <h6>
Bootstrap 5 عنوان‌های HTML (<h1> تا <h6>) با سبک‌های font-weight ضخیم‌تر و font-size پویا استفاده کنید.
مثال
اگر نیاز باشد، می‌توانید از .h1 تا .h6 کلاس‌هایی که آنها را به عنوان عنوان نمایش می‌دهند:
مثال
<p class="h1">عنوان h1 Bootstrap</p> <p class="h2">عنوان h2 Bootstrap</p> <p class="h3">عنوان h3 Bootstrap</p> <p class="h4">عنوان h4 Bootstrap</p> <p class="h5">عنوان h5 Bootstrap</p> <p class="h6">عنوان h6 Bootstrap</p>
عنوان‌های نمایشی display
عنوان‌های نمایشی display برای برجسته‌تر کردن (بزرگ‌تر font-size و سبک‌تر font-weight) از شش کلاس قابل انتخاب وجود دارد:.display-1 تا .display-6:
مثال
<small>
در Bootstrap 5، HTML <small> عنصر (و .small برای ایجاد متن کمکی کوچک در هر عنوان استفاده می‌شود:
مثال
<mark>
Bootstrap 5 از رنگ پس‌زمینه زرد و برخی از حاشیه‌های داخلی برای تنظیم استفاده می‌کند. <mark> و .mark استایل:
مثال
<abbr>
Bootstrap 5 HTML را به صورت زیر تنظیم می‌کند: <abbr> استایل عناصر را به صورت زیر تنظیم کنید: حاشیه پایینی با خط‌های افقی، موس‌ور با نشان سوال؟
مثال
<blockquote>
وقتی محتوای منبع دیگر را نقل قول می‌کنید، .blockquote کلاس به <blockquote>وقتی نام منبع را نام می‌برید، به عنوان مثال "وب‌سایت جهان طبیعی"، از .blockquote-footer کلاس:
مثال
کلاس‌های بیشتر برای چیدمان
کلاس‌های زیر Bootstrap 5 می‌توانند به استایل‌های عناصر HTML اضافه شوند:
| کلاس | توضیح | مثال |
|---|---|---|
.lead |
پاراگراف‌ها را برجسته کنید. | آزمایش کنید |
.text-left |
تекст را چپ چین کنید. | آزمایش کنید |
.text-break |
از خراب شدن چیدمان متون طولانی جلوگیری کنید. | آزمایش کنید |
.text-center |
تекст را در وسط چین کنید. | آزمایش کنید |
.text-decoration-none |
خط زیر لینک‌ها را حذف کنید. | آزمایش کنید |
.text-end |
تекст را راست چین کنید. | آزمایش کنید |
.text-nowrap |
تغییر خطوط متن را مشخص کنید. | آزمایش کنید |
.text-lowercase |
تекст کوچک‌نوشته را مشخص کنید. | آزمایش کنید |
.text-uppercase |
تекст بزرگ‌نوشته را مشخص کنید. | آزمایش کنید |
.text-capitalize |
تекст بزرگ‌نوشته را مشخص کنید. | آزمایش کنید |
.initialism |
تекст داخل <abbr> را با فونت کوچک‌تر نمایش دهید. | آزمایش کنید |
.list-unstyled |
سبک لیست پیش‌فرض و حاشیه چپ آیتم‌های لیست را حذف کنید (برای <ul> و <ol> مناسب است). این سبک تنها برای آیتم‌های مستقیم لیست‌های فرعی مناسب است. برای حذف سبک لیست پیش‌فرض از هر لیست فرعی، لطفاً این سبک را به لیست‌های فرعی نیز اعمال کنید. |
آزمایش کنید |
.list-inline |
تمام موارد لیست را در یک خط قرار دهید. لطفاً با هر <li> به عنوان .list-inline-item استفاده کنید. |
آزمایش کنید |
- صفحه قبلی اساس‌های شبکه BS5
- صفحه بعدی رنگ‌های BS5
