تایپوگرافی
مستندات و نمونههایی برای تایپوگرافی بوت استرپ، از جمله تنظیمات جهانی، سرفصلها، متن متن، فهرستها و موارد دیگر.
تنظیمات جهانی
بوت استرپ سبک های اصلی نمایش جهانی، تایپوگرافی و پیوند را تنظیم می کند. وقتی به کنترل بیشتری نیاز است، کلاسهای ابزار متنی را بررسی کنید .
- از یک پشته فونت بومی استفاده کنید که بهترین ها را
font-family
برای هر سیستم عامل و دستگاه انتخاب می کند. - برای یک مقیاس نوع جامع تر و قابل دسترس تر، ما ریشه پیش فرض مرورگر را
font-size
(معمولاً 16 پیکسل) فرض می کنیم تا بازدیدکنندگان بتوانند پیش فرض های مرورگر خود را در صورت نیاز سفارشی کنند. - از صفات
$font-family-base
,$font-size-base
و$line-height-base
به عنوان پایه تایپوگرافی ما برای اعمال استفاده کنید<body>
. - رنگ پیوند سراسری را از طریق تنظیم کنید
$link-color
و فقط زیر خطوط پیوند را روی:hover
. - برای
$body-bg
تنظیم یکbackground-color
روی<body>
(#fff
به طور پیش فرض) استفاده کنید.
این سبک ها را می توان در داخل پیدا _reboot.scss
کرد و متغیرهای سراسری در تعریف شده اند _variables.scss
. حتما وارد $font-size-base
شوید rem
.
سرفصل ها
تمام عناوین HTML، <h1>
از طریق <h6>
، در دسترس هستند.
سرفصل | مثال |
---|---|
|
h1. عنوان بوت استرپ |
|
h2. عنوان بوت استرپ |
|
h3. عنوان بوت استرپ |
|
h4. عنوان بوت استرپ |
|
h5. عنوان بوت استرپ |
|
h6. عنوان بوت استرپ |
.h1
کلاس های through .h6
نیز در دسترس هستند، برای زمانی که می خواهید سبک فونت یک عنوان را مطابقت دهید اما نمی توانید از عنصر HTML مرتبط استفاده کنید.
h1. عنوان بوت استرپ
h2. عنوان بوت استرپ
h3. عنوان بوت استرپ
h4. عنوان بوت استرپ
h5. عنوان بوت استرپ
h6. عنوان بوت استرپ
سفارشی کردن سرفصل ها
از کلاسهای کاربردی گنجانده شده برای بازآفرینی متن عنوان ثانویه کوچک از Bootstrap 3 استفاده کنید.
عنوان نمایش فانتزی با متن ثانویه محو شده
نمایش سرفصل ها
عناصر عنوان سنتی به گونهای طراحی شدهاند که بهترین عملکرد را در محتوای صفحه شما داشته باشند. هنگامی که نیاز به یک عنوان برای متمایز شدن دارید، استفاده از عنوان نمایش را در نظر بگیرید - یک سبک عنوان بزرگتر و کمی با نظر بیشتر. به خاطر داشته باشید که این سرفصل ها به طور پیش فرض پاسخگو نیستند، اما می توان اندازه فونت های پاسخگو را فعال کرد.
نمایشگر 1 |
نمایشگر 2 |
نمایش 3 |
نمایشگر 4 |
رهبری
یک پاراگراف را با اضافه کردن برجسته .lead
کنید.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis، est non commodo luctus.
عناصر متن درون خطی
یک ظاهر طراحی برای عناصر رایج HTML5 درون خطی.
می توانید از تگ علامت گذاری استفاده کنیدبرجستهمتن
این خط متن به عنوان متن حذف شده در نظر گرفته می شود.
این خط از متن قرار است دیگر دقیق نباشد.
این خط متن قرار است به عنوان یک افزوده به سند تلقی شود.
این خط متن به صورت زیرخط دار ارائه می شود
این خط از متن به عنوان چاپ ظریف در نظر گرفته شده است.
این خط به صورت متن پررنگ ارائه می شود.
این خط به صورت متن ایتالیک ارائه شده است.
.mark
و .small
کلاسها نیز برای اعمال همان سبکها <mark>
و <small>
در عین حال اجتناب از هرگونه پیامد معنایی ناخواستهای که تگها ایجاد میکنند در دسترس هستند.
در حالی که در بالا نشان داده نشده است، با خیال راحت از آن در HTML5 استفاده <b>
کنید . به معنای برجسته کردن کلمات یا عبارات بدون انتقال اهمیت اضافی است در حالی که بیشتر برای صدا، اصطلاحات فنی و غیره است.<i>
<b>
<i>
ابزارهای متنی
تراز متن، تبدیل، سبک، وزن و رنگ را با ابزارهای متنی و ابزارهای رنگی ما تغییر دهید .
اختصارات
اجرای تلطیف شده <abbr>
عنصر HTML برای اختصارات و کلمات اختصاری برای نشان دادن نسخه گسترش یافته در حالت شناور. اختصارات دارای یک زیر خط پیشفرض هستند و نشانگر کمکی برای ارائه زمینه اضافی در شناور و کاربران فناوریهای کمکی به دست میآورند.
.initialism
برای اندازه فونت کمی کوچکتر به مخفف اضافه کنید.
attr
HTML
نقل قول های بلوکی
برای نقل قول بلوک های محتوا از منبع دیگری در سند شما. دور <blockquote class="blockquote">
هر HTML به عنوان نقل قول بپیچید.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante.
نام بردن از یک منبع
<footer class="blockquote-footer">
برای شناسایی منبع یک علامت اضافه کنید. نام کار منبع را در بپیچید <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante.
هم ترازی
در صورت نیاز از ابزارهای متنی برای تغییر تراز نقل قول خود استفاده کنید.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante.
لیست ها
بی استایل
حاشیه پیشفرض list-style
و حاشیه چپ را در موارد فهرست حذف کنید (فقط کودکان فوری). این فقط برای آیتمهای فهرست کودکان فوری اعمال میشود ، به این معنی که باید کلاس را برای لیستهای تودرتو نیز اضافه کنید.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- عدد صحیح molestie lorem at massa
- تسهیل در پرتیوم نیسل aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- زخم های پوروس سودال
- Sem porttitor وستیبولوم laoreet
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
درون خطی
گلوله های یک لیست را بردارید و مقداری نور margin
با ترکیب دو کلاس اعمال کنید .list-inline
و .list-inline-item
.
- لورم اپیسوم
- Phasellus iaculis
- Nulla volutpat
تراز فهرست توضیحات
با استفاده از کلاس های از پیش تعریف شده (یا ترکیب های معنایی) اصطلاحات و توضیحات را به صورت افقی تراز کنید. برای مدت طولانی تر، می توانید به صورت اختیاری یک .text-truncate
کلاس برای کوتاه کردن متن با بیضی اضافه کنید.
- لیست های توضیحات
- لیست توضیحات برای تعریف اصطلاحات عالی است.
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- اصطلاح کوتاه شده کوتاه شده است
- Fusce dapibus، telus ac cursus commodo، Tortor Mauris Condimentum nibh، ut fermentum massa justo sit amet risus.
- لانه سازی
-
- لیست تعریف تو در تو
- Aenean posuere, Tortor sed cursus feugiat, nunc augue blandit nunc.
اندازه فونت پاسخگو
Bootstrap نسخه 4.3 با گزینه ای برای فعال کردن اندازه فونت پاسخگو ارائه می شود، که به متن اجازه می دهد تا به طور طبیعی در اندازه دستگاه و درگاه نمایش مقیاس شود. RFS را می توان با تغییر $enable-responsive-font-sizes
متغیر Sass به true
Bootstrap و کامپایل مجدد آن فعال کرد.
برای پشتیبانی از RFS ، ما از Sass mixin برای جایگزینی font-size
خواص معمولی خود استفاده می کنیم. اندازه فونت های پاسخگو به calc()
توابع با ترکیبی از rem
واحدهای نمای و درگاه کامپایل می شود تا رفتار مقیاس پذیری پاسخگو را فعال کند. اطلاعات بیشتر در مورد RFS و پیکربندی آن را می توانید در مخزن GitHub آن بیابید .