تایپوگرافی
مثال هایی برای تایپوگرافی، از جمله تنظیمات سراسری، عنوان ها، متن بدنه، لیست ها و موارد دیگر. وقتی به کنترل بیشتری نیاز است، کلاس های کاربردی متنی را بررسی کنید.
عنوان ها
همه عنوان های HTML، از <h1> تا <h6>، در دسترس هستند.
| عنوان | مثال |
|---|---|
<h1></h1> |
h1. عنوان بوت استرپ |
<h2></h2> |
h2. عنوان بوت استرپ |
<h3></h3> |
h3. عنوان بوت استرپ |
<h4></h4> |
h4. عنوان بوت استرپ |
<h5></h5> |
h5. عنوان بوت استرپ |
<h6></h6> |
h6. عنوان بوت استرپ |
| مرجع کلاس | یادداشت |
|---|---|
<h[num]>، .h[num] |
1 | 2 | 3 | 4 | 5 | 6 |
<h4 class="title"> ... </h4> <span class="title h4"> ... </span>
سفارشی سازی کردن عنوان ها
برای سفارشی سازی کردن بیشتر متن عنوان، از کلاس های کاربردی متن استفاده کنید.
عنوان نمایشی فانتزی با متن ثانویه محو شده
<h3 class="ff-base fw-medium"> عنوان نمایشی فانتزی <small class="text-soft">با متن ثانویه محو شده</small> </h3>
عنصر درون خطی و سبک متن
با ابزارهای متن و ابزارهای رنگ ترازبندی، تبدیل، سبک، وزن و رنگ متن را تغییر دهید.
| مرجع کد | پیش نمایش |
|---|---|
<mark> |
می توانید از تگ mark برای برجسته کردن متن استفاده کنید. |
<del> |
|
<s> |
|
<ins> |
این خط متن به عنوان یک افزوده به سند در نظر گرفته می شود. |
<u> |
این خط متن به صورت زیرخط دار ارائه می شود. |
<small> |
این خط متن به عنوان چاپ ظریف در نظر گرفته می شود. |
<strong> |
این خط به صورت متن پررنگ ارائه می شود. |
<sup> |
این متن به عنوان بالانویس ارائه می شود. |
<sub> |
این متن به عنوان زیرنویس ارائه می شود. |
<abbr> |
اختصارات دارای یک زیرخط پیش فرض هستند و نشانگر ماوس کمکی دریافت می کنند. |
.lead |
این خط متن به معنای برجسته شدن متن است. |
<p>می توانید از تگ mark برای <mark>برجسته کردن</mark> متن استفاده کنید.</p> <p class="lead">این خط متن به معنای برجسته شدن متن است.</p>
بلاک نقل قول ها
برای نقل قول بلاک های محتوا از منبع دیگری در سند خود از .blockquote در <blockquote> استفاده کنید.
یک نقل قول شناخته شده، موجود در یک عنصر بلاک نقل قول.
یک نقل قول شناخته شده، موجود در یک عنصر بلاک نقل قول.
یک نقل قول شناخته شده، موجود در یک عنصر بلاک نقل قول.
مثال کد
<figure class="text-center">
<blockquote class="blockquote">
<p>یک نقل قول شناخته شده، موجود در یک عنصر بلاک نقل قول.</p>
</blockquote>
<figcaption class="blockquote-footer">
شخصی معروف در <cite title="عنوان منبع">عنوان منبع</cite>
</figcaption>
</figure>
لیست ها - سبک
از کلاس .list با عنصر <ul> برای سبک دهی به لیست پایه استفاده کنید. همچنین می توانید از .list-checked با کلاس .list برای سبک های مختلف مانند زیر استفاده کنید.
- لورم ایپسوم متن ساختگی با تولید
- سادگی نامفهوم از صنعت چاپ
-
و با استفاده از طراحان گرافیک است
- چاپگرها و متون بلکه روزنامه و مجله
- در ستون و سطرآنچنان که لازم است
- و برای شرایط فعلی تکنولوژی
- مورد نیاز و کاربردهای متنوع
- لورم ایپسوم متن ساختگی با تولید
- سادگی نامفهوم از صنعت چاپ
-
و با استفاده از طراحان گرافیک است
- چاپگرها و متون بلکه روزنامه و مجله
- در ستون و سطرآنچنان که لازم است
- و برای شرایط فعلی تکنولوژی
- مورد نیاز و کاربردهای متنوع
علاوه بر این، می توانید از .list-sm و .list-lg برای نمایش کوچک و بزرگ لیست استفاده کنید.
مثال کد
<ul class="list list-checked">
<li>لورم ایپسوم متن ساختگی با تولید</li>
<ul>
<li>چاپگرها و متون بلکه روزنامه و مجله</li>
</ul>
</li>
<li>مورد نیاز و کاربردهای متنوع</li>
</ul>
لیست ها - بدون سبک
از کلاس .list-unstyled با عنصر <ul> برای لیست بدون سبک استفاده کنید
- لورم ایپسوم متن ساختگی با تولید
- سادگی نامفهوم از صنعت چاپ
-
و با استفاده از طراحان گرافیک است
- چاپگرها و متون بلکه روزنامه و مجله
- در ستون و سطرآنچنان که لازم است
- و برای شرایط فعلی تکنولوژی
- مورد نیاز و کاربردهای متنوع
مثال کد
<ul class="list-unstyled">
<li>لورم ایپسوم متن ساختگی با تولید</li>
<ul>
<li>چاپگرها و متون بلکه روزنامه و مجله</li>
</ul>
</li>
<li>مورد نیاز و کاربردهای متنوع</li>
</ul>
لیست ها - درون خطی
نقطه های یک لیست را بردارید و مقداری margin را با ترکیبی از دو کلاس .list-inline و .list-inline-item اعمال کنید.
- لورم ایپسوم
- متن ساختگی
- با تولید سادگی
مثال کد
<ul class="list-inline"> <li class="list-inline-item">لورم ایپسوم</li> <li class="list-inline-item">متن ساختگی</li> <li class="list-inline-item">با تولید سادگی</li> </ul>
ترازبندی لیست توضیحات
با استفاده از کلاس های از پیش تعریف شده سیستم شبکه بندی ما، اصطلاحات و توضیحات را به صورت افقی ترازبندی کنید.
- لیست های توضیحات
- لیست توضیحات برای تعریف اصطلاحات عالی است.
- لورم
-
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
- لورم ایپسوم
- لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
- اصطلاح کوتاه شده کوتاه شده است
- لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
- تو در تو
-
- لیست تعریف تو در تو
- لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
مثال کد
<dl class="row">
<dt class="col-sm-3">لیست های توضیحات</dt>
<dd class="col-sm-9">لیست توضیحات برای تعریف اصطلاحات عالی است.</dd>
<dt class="col-sm-3">لورم</dt>
<dd class="col-sm-9">
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.</p>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
</dd>
<dt class="col-sm-3">لورم ایپسوم</dt>
<dd class="col-sm-9">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</dd>
<dt class="col-sm-3 text-truncate">اصطلاح کوتاه شده کوتاه شده است</dt>
<dd class="col-sm-9">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.</dd>
<dt class="col-sm-3">تو در تو</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">لیست تعریف تو در تو</dt>
<dd class="col-sm-8">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</dd>
</dl>
</dd>
</dl>
