Source

تایپوگرافی

مستندات و نمونه‌هایی برای تایپوگرافی بوت استرپ، از جمله تنظیمات جهانی، سرفصل‌ها، متن متن، فهرست‌ها و موارد دیگر.

تنظیمات جهانی

بوت استرپ سبک های اصلی نمایش جهانی، تایپوگرافی و پیوند را تنظیم می کند. وقتی به کنترل بیشتری نیاز است، کلاس‌های ابزار متنی را بررسی کنید .

  • از یک پشته فونت بومی استفاده کنید که بهترین ها را 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></h1>

h1. عنوان بوت استرپ

<h2></h2>

h2. عنوان بوت استرپ

<h3></h3>

h3. عنوان بوت استرپ

<h4></h4>

h4. عنوان بوت استرپ

<h5></h5>

h5. عنوان بوت استرپ

<h6></h6>

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>

تایپوگرافی پاسخگو

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

در اینجا یک نمونه از آن در عمل آورده شده است. هر font-sizeپرسش و درخواست رسانه ای را که می خواهید انتخاب کنید.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}