متن و فونت

عناوین

تمامی عناوین html موجود می باشد.

عنوان

عنوان

عنوان

عنوان

عنوان
عنوان

نمونه پاراگراف

 

<p> ... </p>

نمونه پاراگراف تاکیدی

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

<p class="lead"> ... </p>

متن هایلایت شده

بخشی از این متن با استفاده از تگ mark هایلایت شده است.

<p> <mark> ... </mark> </p>

نمونه small

بخشی از این متن با استفاده از تگ small فونت آن کوچکتر شده است.

<p> <small> ... </small> </p>

نمونه strong

بخشی از این متن با استفاده از تگ storng فونت آن بلد شده است.

<p> <strong> ... </strong> </p>

نمونه مورب

بخشی از این متن با استفاده از تگ em مورب شده است.

<p> <em> ... </em> </p>

کلاس های کمکی

کلاس های تاکیدی

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

<p class="text-muted"> ... </p>
<p class="text-primary"> ... </p>
<p class="text-success"> ... </p>
<p class="text-info"> ... </p>
<p class="text-warning"> ... </p>
<p class="text-danger"> ... </p>

زمینه های تاکیدی

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

<p class="bg-primary"> ... </p>
<p class="bg-success"> ... </p>
<p class="bg-info"> ... </p>
<p class="bg-warning"> ... </p>
<p class="bg-danger"> ... </p>

کلاس های تنظیم متون

متن چپ چین

متن وسط چین

متن راست چین

متن justify شده

<p class="text-left"> ... </p>
<p class="text-center"> ... </p>
<p class="text-right"> ... </p>
<p class="text-justify"> ... </p>

بلاک نقل قول

بلاک پیش فرض

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

<blockquote> <p> ... </p> </blockquote>

بلاک به همراه فوتر

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

در این بخش توضیحات اضافی می توان نوشت.
<blockquote>
<p> ... </p>
<footer> ... </footer>
</blockquote>

بلاک معکوس

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

<blockquote class="blockquote-reverse"> <p> ... </p> </blockquote>

جداول

نمونه اولیه جدول

توضیحات اختیاری جدول
# نام نام خانوادگی نام کاربری
1 علی علوی ali
2 احمد احمدی ahmad
3 رضا رضایی reza
<table class="table"> ... </table>

جدول با خطوط اطراف آن

توضیحات اختیاری جدول
# نام نام خانوادگی نام کاربری
1 علی علوی ali
2 احمد احمدی ahmad
3 رضا رضایی reza
<table class="table table-bordered"> ... </table>

جدول با رنگ پس زمینه

توضیحات اختیاری جدول
# نام نام خانوادگی نام کاربری
1 علی علوی ali
2 احمد احمدی ahmad
3 رضا رضایی reza
<table class="table table-striped"> ... </table>

لیست

لیست نامنظم

  • لورم ایپسوم متن ساختگی با تولید سادگی
  • لورم ایپسوم متن ساختگی با تولید سادگی
  • لورم ایپسوم متن ساختگی با تولید سادگی
  • لورم ایپسوم متن ساختگی با تولید سادگی
<ul> <li> ... <li> </ul>

لیست منظم

  1. لورم ایپسوم متن ساختگی با تولید سادگی
  2. لورم ایپسوم متن ساختگی با تولید سادگی
  3. لورم ایپسوم متن ساختگی با تولید سادگی
  4. لورم ایپسوم متن ساختگی با تولید سادگی
<ol> <li> ... <li> </ol>

لیست بدون آیکن

  • لورم ایپسوم متن ساختگی با تولید سادگی
  • لورم ایپسوم متن ساختگی با تولید سادگی
  • لورم ایپسوم متن ساختگی با تولید سادگی
  • لورم ایپسوم متن ساختگی با تولید سادگی
<ul class="list-unstyled"> <li> ... <li> </ul>

لیست خطی

  • لورم ایپسوم متن ساختگی
  • لورم ایپسوم متن ساختگی
  • لورم ایپسوم متن ساختگی
  • لورم ایپسوم متن ساختگی
<ul class="list-inline"> <li> ... <li> </ul>

لیست توضیحی

عنوان یک
توضیحی دباره عنوان یک
عنوان دو
توضیحی دباره عنوان دو
عنوان سه
توضیحی دباره عنوان سه
<dl>
<dt> ... </dt>
<dd> ... </dd>
</dl>

دکمه ها

تنطیمات دکمه ها

<button class="btn btn-default" type="button"> ... </button>
<button class="btn btn-primary" type="button"> ... </button>
<button class="btn btn-success" type="button"> ... </button>
<button class="btn btn-info" type="button"> ... </button>
<button class="btn btn-warning" type="button"> ... </button>
<button class="btn btn-danger" type="button"> ... </button>
<button class="btn btn-link" type="button"> ... </button>

نشان ها

پیشخوان 42

<a href="#"> ... <span class="badge"> 42 </span> </a>
<button type="button" class="btn btn-primary">
...
<span class="badge"> 4 </span>
</button>

هشدارها

 

بسیار عالی شما با موفقیت این هشدار را خواندید.
بسیار عالی شما با موفقیت این هشدار را خواندید.
بسیار عالی شما با موفقیت این هشدار را خواندید.
بسیار عالی شما با موفقیت این هشدار را خواندید.
<div role="alert" class="alert alert-success"> ... </div>
<div role="alert" class="alert alert-info"> ... </div>
<div role="alert" class="alert alert-warning"> ... </div>
<div role="alert" class="alert alert-danger"> ... </div>