تایپوگرافی
مستندات و نمونههایی برای تایپوگرافی بوت استرپ، از جمله تنظیمات جهانی، سرفصلها، متن متن، فهرستها و موارد دیگر.
تایپوگرافی در بوت استرپخانواده فونت
شما سه کلاس کمکی خانواده فونت برای استفاده در دسترس دارید.
Monospace
<div class="font-sans-serif">Poppins</div>
<div class="font-base">Open Sans</div>
<code class="text-monospace">Monospace</code>
سرفصل ها
تمام عناوین HTML، h1
از طریق h6
، در دسترس هستند.
h1. سرفصل
h2. سرفصل
h3. سرفصل
h4. سرفصل
h5. سرفصل
h6. سرفصل
<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>
سرفصل ها با کلاس ها
.h1
کلاس های through .h6
نیز در دسترس هستند، برای زمانی که می خواهید سبک فونت یک عنوان را مطابقت دهید اما نمی توانید از عنصر HTML مرتبط استفاده کنید.
h1. سرفصل
h2. سرفصل
h3. سرفصل
h4. سرفصل
h5. سرفصل
h6. سرفصل
<p class="h1">h1. Heading</p>
<p class="h2">h2. Heading</p>
<p class="h3">h3. Heading</p>
<p class="h4">h4. Heading</p>
<p class="h5">h5. Heading</p>
<p class="h6">h6. Heading</p>
سفارشی کردن سرفصل ها
از کلاسهای کاربردی گنجانده شده برای بازآفرینی متن عنوان ثانویه کوچک از Bootstrap 3 استفاده کنید.
عنوان نمایش فانتزی با متن ثانویه محو شده
<h3>Fancy display heading<small class="text-muted"> With faded secondary text</small></h3>
وزن فونت
<div class="fw-light">Font weight 300</div>
<div class="fw-normal">Font weight 400</div>
<div class="fw-medium">Font weight 500</div>
<div class="fw-semi-bold">Font weight 600</div>
<div class="fw-bold">Font weight 700</div>
<div class="fw-bolder">Font weight 800</div>
<div class="fw-black">Font weight 900</div>
نمایش سرفصل ها
عناصر عنوان سنتی به گونهای طراحی شدهاند که بهترین عملکرد را در محتوای صفحه شما داشته باشند. هنگامی که نیاز به یک عنوان برای متمایز شدن دارید، استفاده از عنوان نمایش را در نظر بگیرید - یک سبک عنوان بزرگتر و کمی با نظر بیشتر.
نمایشگر 1
نمایشگر 2
نمایش 3
نمایشگر 4
نمایشگر 5
نمایشگر 6
<h1 class="display-1 mb-3">Display 1</h1>
<h1 class="display-2 mb-3">Display 2</h1>
<h1 class="display-3 mb-3">Display 3</h1>
<h1 class="display-4 mb-3">Display 4</h1>
<h1 class="display-5 mb-3">Display 5</h1>
<h1 class="display-6 mb-3">Display 6</h1>
رنگ ها
برای تغییر رنگ متن از رنگ های زیر استفاده کنید
.text-primary
متن-اطلاعات
.text-موفقیت
متن هشدار
.متن خطر
.text-black
.text-dark
.text-1000
.text-900
.text-800
.text-700
.text-600
.text-500
.text-400
.text-300
.text-200
.text-light
متن-سفید
<h5 class="text-primary">.text-primary</h5>
<h5 class="text-info">.text-info</h5>
<h5 class="text-success">.text-success</h5>
<h5 class="text-warning">.text-warning</h5>
<h5 class="text-danger">.text-danger</h5>
<h5 class="text-black">.text-black</h5>
<h5 class="text-dark">.text-dark</h5>
<h5 class="text-1000">.text-1000</h5>
<h5 class="text-900">.text-900</h5>
<h5 class="text-800">.text-800</h5>
<h5 class="text-700">.text-700</h5>
<h5 class="text-600">.text-600</h5>
<h5 class="text-500">.text-500</h5>
<h5 class="text-400">.text-400</h5>
<h5 class="text-300"><span class="bg-black">.text-300</span></h5>
<h5 class="text-200"><span class="bg-dark">.text-200</span></h5>
<h5 class="text-light"><span class="bg-1000">.text-light</span></h5>
<h5 class="text-white"><span class="bg-900">.text-white</span></h5>
اندازه ها
اگر اندازه های مختلف فونت می خواهید، می توانید از کلاس های زیر استفاده کنید.
.fs--2
.fs--1
.fs-0
fs-1
fs-2
fs-3
fs-4
fs-5
fs-6
fs-7
fs-8
<h6 class="fs--2">.fs--2</h6>
<h6 class="fs--1">.fs--1</h6>
<h6 class="fs-0">.fs-0</h6>
<h6 class="fs-1">.fs-1</h6>
<h6 class="fs-2">.fs-2</h6>
<h6 class="fs-3">.fs-3</h6>
<h6 class="fs-4">.fs-4</h6>
<h6 class="fs-5">.fs-5</h6>
<h6 class="fs-6">.fs-6</h6>
<h6 class="fs-7">.fs-7</h6>
<h6 class="fs-8">.fs-8</h6>
تبدیل متن
تبدیل متن در اجزاء با کلاس های حروف بزرگ متن.
متن با حروف کوچک.
متن بزرگ.
متن با حروف بزرگ
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
رهبری
با اضافه کردن، یک پاراگراف را متمایز کنید .lead
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک چاپگر لازم است
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
Dropcap
.dropcap
با اضافه کردن کلاس ، یک پاراگراف را متمایز کنید.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
<p class="dropcap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius porro hic ex. Earum similique laudantium esse nostrum sed corporis. Libero omnis quos deleniti amet aliquam nam. Natus voluptas reiciendis eligendi reprehenderit, facere tenetur distinctio sunt officia, temporibus aperiam voluptatum quo ducimus illum incidunt adipisci doloremque rem est magnam in, molestiae excepturi odit. Reprehenderit ullam.</p>