تایپوگرافی

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

تایپوگرافی در بوت استرپ
خانواده فونت

شما سه کلاس کمکی خانواده فونت برای استفاده در دسترس دارید.

پاپینز
Sans را باز کنید
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>
وزن فونت
وزن قلم 300
وزن فونت 400
وزن فونت 500
وزن فونت 600
وزن قلم 700
وزن قلم 800
وزن قلم 900
<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>

ممنون که با فالکون خلق کردید

نسخه 3.4.0

تنظیمات

سبک سفارشی خود را تنظیم کنید

طرح رنگ بندی

حالت رنگ مناسب را برای برنامه خود انتخاب کنید.


RTL حالت

جهت زبان خود را تغییر دهید

RTL راهنما

چیدمان سیال

سیستم چیدمان کانتینر را تغییر دهید

راهنما سیال

موقعیت ناوبری

یک سیستم ناوبری مناسب برای برنامه وب خود انتخاب کنید


سبک نوار ناوبری عمودی

برای نوار ناوبری عمودی خود بین سبک ها جابه جا شوید

دیدن راهنما

چیزی که میبینی را دوست داری؟

برای خرید قالب فالکون از راستچین اقدام کنید.

خرید
شخصی سازی