تایپوگرافی
مستندات و نمونههایی برای تایپوگرافی بوت استرپ، از جمله تنظیمات جهانی، سرفصلها، متن متن، فهرستها و موارد دیگر.
بوت استرپ سبک های اصلی نمایش جهانی، تایپوگرافی و پیوند را تنظیم می کند. وقتی به کنترل بیشتری نیاز است، کلاسهای ابزار متنی را بررسی کنید .
- از یک پشته فونت بومی استفاده کنید که بهترین ها را
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.
تایپوگرافی پاسخگو به مقیاس بندی متن و مولفه ها به سادگی با تنظیم عنصر ریشه font-size
در یک سری از پرسش های رسانه ای اشاره دارد. بوت استرپ این کار را برای شما انجام نمی دهد، اما اضافه کردن آن در صورت نیاز بسیار آسان است.
در اینجا یک نمونه از آن در عمل آورده شده است. هر font-size
پرسش و درخواست رسانه ای را که می خواهید انتخاب کنید.