تایپوگرافی
مستندات و نمونههایی برای تایپوگرافی بوت استرپ، از جمله تنظیمات جهانی، سرفصلها، متن متن، فهرستها و موارد دیگر.
تنظیمات جهانی
بوت استرپ سبک های اصلی نمایش جهانی، تایپوگرافی و پیوند را تنظیم می کند. وقتی به کنترل بیشتری نیاز است، کلاسهای ابزار متنی را بررسی کنید .
- از یک پشته فونت بومی استفاده کنید که بهترین ها را
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>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
.h1
کلاس های through .h6
نیز در دسترس هستند، برای زمانی که می خواهید سبک فونت یک عنوان را مطابقت دهید اما نمی توانید از عنصر HTML مرتبط استفاده کنید.
h1. عنوان بوت استرپ
h2. عنوان بوت استرپ
h3. عنوان بوت استرپ
h4. عنوان بوت استرپ
h5. عنوان بوت استرپ
h6. عنوان بوت استرپ
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
سفارشی کردن سرفصل ها
از کلاسهای کاربردی گنجانده شده برای بازآفرینی متن عنوان ثانویه کوچک از Bootstrap 3 استفاده کنید.
عنوان نمایش فانتزی با متن ثانویه محو شده
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
نمایش سرفصل ها
عناصر عنوان سنتی به گونهای طراحی شدهاند که بهترین عملکرد را در محتوای صفحه شما داشته باشند. هنگامی که نیاز به یک عنوان برای متمایز شدن دارید، استفاده از عنوان نمایش را در نظر بگیرید - یک سبک عنوان بزرگتر و کمی با نظر بیشتر. به خاطر داشته باشید که این سرفصل ها به طور پیش فرض پاسخگو نیستند، اما می توان اندازه فونت های پاسخگو را فعال کرد.
نمایشگر 1 |
نمایش 2 |
نمایش 3 |
نمایشگر 4 |
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
رهبری
یک پاراگراف را با اضافه کردن برجسته .lead
کنید.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis، est non commodo luctus.
<p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>
عناصر متن درون خطی
یک ظاهر طراحی برای عناصر رایج HTML5 درون خطی.
می توانید از تگ علامت گذاری استفاده کنیدبرجستهمتن
این خط متن به عنوان متن حذف شده در نظر گرفته می شود.
این خط از متن قرار است دیگر دقیق نباشد.
این خط متن قرار است به عنوان یک افزوده به سند تلقی شود.
این خط متن به صورت زیرخط دار ارائه می شود
این خط از متن به عنوان چاپ ظریف در نظر گرفته شده است.
این خط به صورت متن پررنگ ارائه می شود.
این خط به صورت متن ایتالیک ارائه شده است.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
.mark
و .small
کلاسها نیز برای اعمال همان سبکها <mark>
و <small>
در عین حال اجتناب از هرگونه پیامد معنایی ناخواستهای که تگها ایجاد میکنند در دسترس هستند.
در حالی که در بالا نشان داده نشده است، با خیال راحت از آن در HTML5 استفاده <b>
کنید . به معنای برجسته کردن کلمات یا عبارات بدون انتقال اهمیت اضافی است در حالی که بیشتر برای صدا، اصطلاحات فنی و غیره است.<i>
<b>
<i>
ابزارهای متنی
تراز متن، تبدیل، سبک، وزن و رنگ را با ابزارهای متنی و ابزارهای رنگی ما تغییر دهید .
اختصارات
اجرای تلطیف شده <abbr>
عنصر HTML برای اختصارات و کلمات اختصاری برای نشان دادن نسخه گسترش یافته در حالت شناور. اختصارات دارای یک زیر خط پیشفرض هستند و نشانگر کمکی برای ارائه زمینه اضافی در شناور و کاربران فناوریهای کمکی به دست میآورند.
.initialism
برای اندازه فونت کمی کوچکتر به مخفف اضافه کنید.
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
نقل قول های بلوکی
برای نقل قول بلوک های محتوا از منبع دیگری در سند شما. دور <blockquote class="blockquote">
هر HTML به عنوان نقل قول بپیچید.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante.
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
نام بردن از یک منبع
<footer class="blockquote-footer">
برای شناسایی منبع یک علامت اضافه کنید. نام کار منبع را در بپیچید <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante.
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
هم ترازی
در صورت نیاز از ابزارهای متنی برای تغییر تراز نقل قول خود استفاده کنید.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante.
<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante.
<blockquote class="blockquote text-right">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
لیست ها
بی استایل
حاشیه پیشفرض 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
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
درون خطی
گلوله های یک لیست را بردارید و مقداری نور margin
با ترکیب دو کلاس اعمال کنید .list-inline
و .list-inline-item
.
- لورم اپیسوم
- Phasellus iaculis
- Nulla volutpat
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
تراز فهرست توضیحات
با استفاده از کلاس های از پیش تعریف شده (یا ترکیب های معنایی) اصطلاحات و توضیحات را به صورت افقی تراز کنید. برای مدت طولانی تر، می توانید به صورت اختیاری یک .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.
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
اندازه فونت پاسخگو
از نسخه 4.3.0، Bootstrap با گزینه ای برای فعال کردن اندازه فونت های پاسخگو ارائه می شود، که به متن اجازه می دهد تا به طور طبیعی در اندازه دستگاه و درگاه نمایش مقیاس شود. RFS را می توان با تغییر $enable-responsive-font-sizes
متغیر Sass به true
Bootstrap و کامپایل مجدد آن فعال کرد.
برای پشتیبانی از RFS ، ما از Sass mixin برای جایگزینی font-size
خواص معمولی خود استفاده می کنیم. اندازه فونت های پاسخگو به calc()
توابع با ترکیبی از rem
واحدهای نمای و درگاه کامپایل می شود تا رفتار مقیاس پذیری پاسخگو را فعال کند. اطلاعات بیشتر در مورد RFS و پیکربندی آن را می توانید در مخزن GitHub آن بیابید .