تیترها

تمام تیترهای اچ‌تی‌ام‌ال از <h1> تا <h6> در دسترس هستند.

h1. تیتر ۱

h2. تیتر ۲

h3. تیتر ۳

h4. تیتر ۴

h5. تیتر ۵

h6. تیتر ۶

Body copy

اندازه فونت font-size پیش‌فرض کلی بوت‌استرپ ۱۴ پیکسل و ارتفاع بین خطوط line-height ۲۰ پیکسل است. این بر روی <body> و تمام پاراگراف‌ها اعمال می‌شود. همچنین اندازه حاشیهٔ پایینی هر پاراگراف <p> برابر نصف اندازه ارتفاع خطوط است. (که به صورت پیش‌فرض ۱۰ پیکسل است)

ما تعریف نرم‌افزار آزاد را ارائه می‌دهیم تا بطور واضح نشان دهیم که چه مواردی در مورد یک نرم‌افزار خاص باید صدق کند تا به عنوان یک نرم‌افزار آزاد تلقی شود.

آزادی برای استفاده از برنامه به معنای آزادی هر شخص و یا سازمانی برای استفاده از آن برنامه بر روی هر سیستم کامپیوتری، برای هر کاری، و بدون نیاز به هر گونه ارتباط بعدی با توسعه‌دهنده و یا هر نهاد خاصی می‌باشد.

"نرم‌افزار آزاد" به معنای "غیر تجاری" نیست. یک برنامه آزاد باید برای استفاده تجاری، توسعه تجاری، و توزیع تجاری در دسترس باشد. توسعه تجاری نرم‌افزار آزاد دیگر غیر معمول نیست، بلکه چنین نرم‌افزارهای آزاد تجاری بسیار مهم هستند.

<p>...</p>

Lead body copy

یک پاراگراف را با اضافه کردن .lead متمایز کنید.

هنگامی‌که درباره نرم‌افزار آزاد صحبت می‌شود بهتر است تا از به کار بردن عباراتی مانند "هدیه دادن" و یا "بطور رایگان" خودداری شود، زیرا این عبارات این مفهوم را می‌رسانند که موضوع در مورد قیمت می‌باشد، نه آزادی.

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

ساخته‌شده به‌وسیلهٔ Less

اندازه گرافیک قلم براساس دو متغیر تعریف‌شده در فایل variables.less است: @baseFontSize و @baseLineHeight. نخستین، اندازه فونت پایه است و دومی ارتفاع خطوط است. ما از آن متغیرها و کمی عملیات ریاضی ساده، اندازه حاشیه‌های داخلی و خارجی و ارتفاع خطوط را محاسبه می‌کنیم. آن‌ها را سفارشی کنید و از بوت‌استرپ استفاده کنید.

تاکیدها

از تگ‌های تاکید پیش‌فرض اچ‌تی‌ام‌ال برای شیوه‌های نمایش مختلف استفاده کنید.

`<small>`

برای این‌که بتوانید یک نوشته بلاکی و یا اینلاین از حالت پراهمیت و تاکید خارج کنید، از تگ small استفاده کنید.

این خط به این معنا است که کوچک چاپ شده‌است.

<p>
  <small>این خط به این معنا است که کوچک چاپ شده‌است</small>
</p>

درشت

برای تاکید این‌که یک تکه از یک متن مهم است.

تکه متنی که در ادامه می‌آید یک متن درشت و مهم است.

<strong>درشت و مهم</strong>

مورب‌ها

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

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

<em>یک متن مورب است</em>

توجه کنید! راحت باشید و از <b> و <i> می‌توانید در اچ‌تی‌ام‌ال ۵ استفاده کنید. با <b> می‌توانید کلمه و یا جملاتی را که اهمیت مضاعف ندارند را مشخص کرد و <i> بیشتر برای آواها، کلمات تخصصی و یا غیره استفاده می‌شود.

کلاس‌های همراستاسازی

به‌راحتی متون را نسبت به اجزا با استفاده از کلاس‌های همراستاسازی، همراستا کنید.

متن چپ‌چین.

متن وسطچین.

متن راست‌چین.

<p class="text-left">متن چپ‌چین.</p>
<p class="text-center">متن وسطچین.</p>
<p class="text-right">متن راست‌چین.</p>

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

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

"نرم‌افزار آزاد" به معنای "غیر تجاری" نیست.

"نرم‌افزار آزاد" درباره آزادی است، نه قیمت.

یک برنامه آزاد باید برای استفاده تجاری، توسعه تجاری و توزیع تجاری در دسترس باشد.

شما همیشه این آزادی را دارید تا نرم‌افزار را کپی کنید و تغییر دهید و یا حتی کپی‌هایی از آن را بفروشید.

اگر حق تغییر شما، محدود به چیزی باشد که دیگری آن را بهبود می‌داند، این آزادی نیست.

<p class="muted">"نرم‌افزار آزاد" به معنای "غیر تجاری" نیست.</p>
<p class="text-warning">"نرم‌افزار آزاد" درباره آزادی است، نه قیمت.</p>
<p class="text-error">یک برنامه آزاد باید برای استفاده تجاری، توسعه تجاری و توزیع تجاری در دسترس باشد.</p>
<p class="text-info">شما همیشه این آزادی را دارید تا نرم‌افزار را کپی کنید و تغییر دهید و یا حتی کپی‌هایی از آن را بفروشید.</p>
<p class="text-success">اگر حق تغییر شما، محدود به چیزی باشد که دیگری آن را بهبود می‌داند، این آزادی نیست.</p>

مخفف‌ها

پیاده‌سازی کد مخفف <abbr> اچ‌تی‌ام‌ال برای هنگامی که موس بر روی مخفف قرار می‌گیرد، اصل کلمات نمایان شوند. مخفف‌هایی که خصوصیت title را داشته باشند، بر زیر آن خط‌چینی کشیده می‌شود و وقتی موس بر روی آن قرار گرفته ‌می‌شود اصل کلمات نمایان می‌شود.

`<abbr>`

برای این‌که اصل کلمات مخفف نمایان شود، در خصوصیت title اصل کلمات را قرار دهید.

مخفف ابراهیم، ابی است.

<abbr title="ابراهیم">ابی</abbr>

`<abbr class="initialism">`

کلاس .initialism به مخفف اضافه کنید تا کمی اندازه فونت آن کوچک‌تر شود.

اچ‌تی‌ام‌ال بهترین زبان نشانه‌گذاری است.

<abbr title="HyperText Markup Language" class="initialism">اچ‌تی‌ام‌ال</abbr>

نشانی‌ها

تقریبا زیرشاخهٔ تمام کارها، اطلاعات تماس، و یکی از آن‌ها نشانی‌ها و یا آدرس‌ها است.

`<address>`

با گذاشتن تگ <br> در آخر تمام خطوط شیوهٔ نوشتن نشانی را رعایت کنید.

شرکت نقش
خیابان آزادی، آزادی ۳۶، پلاک ۱۳
ایران، مشهد
ت: ۶۰۹۹۳۹۳-۵۱۱ (۹۸)

نام و نام خانوادگی
[email protected]

<address>
  <strong>شرکت نقش</strong><br>
  خیابان آزادی، آزادی ۳۶، پلاک ۱۳<br>
  ایران، مشهد<br>
  <abbr title="تلفن">ت:</abbr> ۶۰۹۹۳۹۳-۵۱۱ (۹۸)
</address>

<address>
  <strong>نام و نام خانوادگی</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

گفتاوردها

برای قرار دادن یک گفتاورد در متن از دیگر منابع

گفتاورد پیش‌فرض

تگ <blockquote> اطرف هر HTML به عنوان گفتاورد قرار دهید. برای گفتاورد مستقیم ما پیشنهاد می‌کنیم که از تگ <p> استفاده کنید.

اگر حق تغییر شما، محدود به چیزی باشد که دیگری آن را بهبود می‌داند، این آزادی نیست.

<blockquote>
  <p>اگر حق تغییر شما، محدود به چیزی باشد که دیگری آن را بهبود می‌داند، این آزادی نیست.</p>
</blockquote>

تنظیمات گفتاورد

شیوه نمایش و محتویات برای یک گفتاورد ساده می‌تواند چندین حالت داشته‌باشد.

آوردن نام منبع

تگ <small> برای تشخیص منبع بیاورید. نام شخص یا منبع را در داخل تگ <cite> بیاورید.

شما همیشه این آزادی را دارید تا نرم‌افزار را کپی کنید و تغییر دهید و یا حتی کپی‌هایی از آن را بفروشید.
ریچارد متیو استالمن از مقالات بنیاد نرم‌افزار آزاد

<blockquote>
  <p>شما همیشه این آزادی را دارید تا نرم‌افزار را کپی کنید و تغییر دهید و یا حتی کپی‌هایی از آن را بفروشید.</p>
  <small>ریچارد متیو استالمن از <cite title="مقالات بنیاد نرم‌افزار آزاد">مقالات بنیاد نرم‌افزار آزاد</cite></small>
</blockquote>

نمایش متفاوت

از تگ .pull-left برای این‌که گفتاورد چپ‌چین شود استفاده کنید.

شما همیشه این آزادی را دارید تا نرم‌افزار را کپی کنید و تغییر دهید.
ریچارد متیو استالمن از مقالات بنیاد نرم‌افزار آزاد

<blockquote class="pull-left">
  ...
</blockquote>

فهرست‌ها

غیرترتیبی

یک فهرست از آیتم‌هایی که ترتیب آن‌ها برای ما مهم نیست.

چایی برای سربازها
پول آب را می‌دهیم برق جدا
پوتین برای سربازها به تعداد کافی
قند به مقدار کافی
پول برق را می‌دهیم
- آب جدا
- پوتین برای سربازها
- سقف اتاق نم کشیده
- چایی برای سربازها
قند به قدر کافی
به به به بله
پول آب را می‌دهیم برق جدا

<ul>
  <li>...</li>
</ul>

ترتیبی

یک فهرست از آیتم‌هایی که ترتیب آن‌ها برای ما مهم هستند.

کتری را آب می‌کنیم
آب را بر روی شعله می‌گذاریم
۱۵ تا ۲۰ دقیقه منتظر می‌شویم تا آب به جوش آید
در قوری چای خشک می‌ریزیم
آب را داخل قوی می‌ریزیم
قوری را بر روی کتری می‌گذاریم
۵ تا ۱۰ دقیقه منتظر می‌شویم که چای دم کشد
چای را داخل فنجان می‌ریزیم و میل می‌کنیم

<ol>
  <li>...</li>
</ol>

بدون نقاط و اعداد اول هر سطر

یک فهرست از آیتم‌هایی که تگ list-style را ندارد و یا حاشیه راست بیشتری دارند(فقط بعد از فرزندها).

چایی برای سربازها
پول آب را می‌دهیم برق جدا
پوتین برای سربازها به تعداد کافی
قند به مقدار کافی
پول برق را می‌دهیم
- آب جدا
- پوتین برای سربازها
- سقف اتاق نم کشیده
- چایی برای سربازها
قند به قدر کافی
به به به بله
پول آب را می‌دهیم برق جدا

<ul class="unstyled">
  <li>...</li>
</ul>

اینلاین

تمام فهرست آیتم‌ها را در یم خط با inline-block و کمی حاشیه قرار می‌دهد.

قند برای شرکت
پوتین برای سربازها
سقف اتاق نم کشیده

<ul class="inline">
  <li>...</li>
</ul>

توصیفی

یک فهرست از عناوین که دارای توصیف مختص به خود هستند.

فهرست توصیف: یک توصیف که عنوان مورد نظر به خوبی توصیف می‌کند.
نرم‌افزا آزاد: نرم‌افزاری که دارای چهار آزادی مشخص شده باشد.; نرم‌افزاری که انحصاری و اختصاصی نباشد.
نرم‌افزار متن‌باز: نرم‌افزاری که دارای ویژگی‌های مشخصی باشد.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

توصیف افقی

برای توصیفاتی که عناوین و توصیفات باید در یک ستون در کنار یکدیگر باشند.

فهرست توصیف: یک توصیف که عنوان مورد نظر به خوبی توصیف می‌کند.
نرم‌افزا آزاد: نرم‌افزاری که دارای چهار آزادی مشخص شده باشد.; نرم‌افزاری که انحصاری و اختصاصی نباشد.
نرم‌افزار متن‌باز: نرم‌افزاری که دارای ویژگی‌های مشخصی باشد.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

توجه کنید! توصیفات افقی طولانی براساس اندازه ستون، کوچک خواهند شد و این توسط تگ text-overflow انجام خواهد گرفت. در صفحه نمایش‌های کوچک‌تر آن‌ها به حالت لایه روی‌هم قرار می‌گیرند.

اینلاین

یک تکه کد را در داخل تگ <code> قرار دهید.

برای مثال تگ <section> به صورت اینلاین تبدیل خواهد شد.

برای مثال تگ, <code>&lt;section&gt;</code> به صورت اینلاین تبدیل خواهد شد.

بلاک پایه

از تگ <pre> برای چندین خط کد استفاده کنید. مطمئن شوید که علائم کوچک‌تر و بزرگ‌تر را escape کرده‌اید، تا کد شما به صورت کامل نمایش داده شود.

<p>یک نمونه متن آزمایشی...</p>

<pre>
  &lt;p&gt;یک نمونه متن آزمایشی...&lt;/p&gt;
</pre>

توجه کنید! مطمئن شوید که در داخل تگ <pre> به‌اندازه کافی به سمت چپ رفته‌اید، به خاطر این‌که تمام فاصله‌ها نمایش داده خواهد شد.

شما ممکن است از کلاس .pre-scrollable برای قرارگیری اسکرول‌بار برای متون بیش از ارتفاع ۳۵۰ پیکسل استفاده کنید.

شیوهٔ نمایش پیش‌فرض

برای شیوهٔ نمایش پایه (شامل حاشیهٔ داخلی خیلی کم و جداکننده‌های افقی) کلاس .table را برای هر جدول <table> قرار دهید.

#	نام	نام خانوادگی	نام کاربری
۱	حامد	رمضانیان	@jnaqsh
۲	مارک	اوتو	@mdo
۳	جیکوب	تورنتون	@fat

<table class="table">
  …
</table>

کلاس‌های اختیاری

کلاس‌هایی که در زیر آمده‌است را می‌توانید با کلاس .table استفاده کنید.

`.table-striped`

با اضافه کردن این کلاس به هر جدولی، ردیف‌ها در <tbody> به‌وسیله :nth-child به‌صورت یک درمیان دارای رنگ متفاوتی خواهند شد (در اینترنت اکسپلورر ۷ و ۸ پشتیبانی نمی‌شود).

#	نام	نام خانوادگی	نام کاربری
۱	حامد	رمضانیان	@jnaqsh
۲	مارک	اوتو	@mdo
۳	جیکوب	تورنتون	@fat

<table class="table table-striped">
  …
</table>

`.table-bordered`

به جدول لبه اضافه می‌کند و گوشه‌های جدول را گرد می‌کند.

#	نام	نام خانوادگی	نام کاربری
۱	حامد	رمضانیان	@jnaqsh
۲	مارک	اوتو	@mdo
۳	جیکوب	تورنتون	@fat

<table class="table table-bordered">
  …
</table>

`.table-hover`

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

#	نام	نام خانوادگی	نام کاربری
۱	حامد	رمضانیان	@jnaqsh
۲	مارک	اوتو	@mdo
۳	جیکوب	تورنتون	@fat

<table class="table table-hover">
  …
</table>

`.table-condensed`

با نصف کردن حاشیه‌ها جدول کوچک‌تر می‌شود

#	نام	نام خانوادگی	نام کاربری
۱	حامد	رمضانیان	@jnaqsh
۲	مارک	اوتو	@mdo
۳	جیکوب	تورنتون	@fat

<table class="table table-condensed">
  …
</table>

کلاس‌های اختیاری برای ردیف‌ها

برای رنگی کردن ردیف‌های جدول از کلاس‌های زیر استفاده کنید.

کلاس	توصیف
`.success`	نشان‌دهنده یک عمل موفقیت‌آمیز و یا عملی مثبت است.
`.error`	نشان‌دهنده خطر و یا عملی که نتیجه منفی دارد.
`.warning`	نشان‌دهنده هشدار که نیاز به توجه به آن است.
`.info`	به عنوان یک جایگزین برای شیوهٔ نمایش پیش‌فرض است.

#	محصول	تاریخ دریافت پرداختی	وضعیت
۱	بوت‌استرپ - ماهانه	۱۳۹۱/۰۶/۰۱	تاییدشده
۲	بوت‌استرپ - ماهانه	۱۳۹۱/۰۶/۰۲	برگشت‌خورده
۳	بوت‌استرپ - ماهانه	۱۳۹۱/۰۶/۰۳	در حال انتظار
۴	بوت‌استرپ - ماهانه	۱۳۹۱/۰۶/۰۴	تماس برای تایید

...
  <tr class="success">
    <td>۱</td>
    <td>بوت‌استرپ - ماهانه</td>
    <td>۱۳۹۱/۰۶/۰۱</td>
    <td>تاییدشده</td>
  </tr>
...

نشان‌های جدول پشتیبانی‌شده

فهرستی از نشان‌های جدول اچ‌تی‌ام‌ال پشتیبانی شده در زیر به همراه چگونگی استفاده از آن در زیر آورده شده‌است.

تگ	توصیف
`<table>`	اجزا را در یک قالب جدولی نمایش می‌دهد.
`<thead>`	نگهدارنده برای ردیف‌های تیتر جدول (`<tr>`)
`<tbody>`	نگهدارنده اجزا ردیف‌های جدول (`<tr>`) در قسمت بدنهٔ جدول
`<tr>`	نگهدارندهٔ اجزا برای مجموعه‌ای از سلول‌های جدول (`<td>` یا `<th>`) که در یک ردیف ظاهر می‌شوند.
`<td>`	سلول پیش‌فرض جدول
`<th>`	یک سلول خاص جدول برای ستون‌هایی (یا ردیف، بستگی قرارگیری و استفاده) که در داخل `<thead>` قرار گرفته‌اند.
`<caption>`	توصیف یا خلاصه‌ای از این‌که جدول چه چیزی را نگهداری می‌کند، می‌تواند برای کسی که آن را می‌خواند مفید باشد.

<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

شیوهٔ نمایش پیش‌فرض

برخی از کنترل‌کننده‌های فرم به‌صورت پیش‌فرض بدون اضافه کردن کلاسی به <form> و یا تغییر در اچ‌تی‌ام‌ال، شیوهٔ نمایش خاصی به خود می‌گیرند. نتیجهٔ آن قرارگیری کنترل‌کننده بر روی هم که برچسب‌ها راست‌چین شده‌اند.

<form>
  <legend>راهنما</legend>
  <label>نام برچسب</label>
  <input type="text" placeholder="یک چیزی بنویسید…">
  <span class="help-block">نمونه‌ای از نوشته راهنما که به‌صورت بلاکی است</span>
  <label class="checkbox">
    <input type="checkbox"> مرا تیک بزنید
  </label>
  <button type="submit" class="btn">فرستادن</button>
</form>

لایه‌های اختیاری

با استفاده از بوت‌استرپ، سه لایهٔ فرم اختیاری برای استفاده‌های رایج به شما داده می‌شود.

فرم جستجو

کلاس .form-search را به فرم اضافه کنید و برای این‌که حاشیه‌های ورودی بیشتر گرد شود از کلاس .search-query برای <input> استفاده کنید.

<form class="form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">جستجو</button>
</form>

فرم اینلاین

برای فرمی کوچک‌تر که فضای کمتری را اشغال می‌کند از .form-inline استفاده کنید.

<form class="form-inline">
  <input type="text" class="input-small" placeholder="ایمیل">
  <input type="password" class="input-small" placeholder="گذرواژه">
  <label class="checkbox">
    <input type="checkbox"> مرا به خاطر بسپار
  </label>
  <button type="submit" class="btn">ورود</button>
</form>

فرم افقی

برای چپ‌چین کردن برچسب‌ها و قرار دادن آن‌ها در یک خط با کنترل‌کننده خود نیاز دارید تغییرات زیر را در فرم پیش‌فرض بدهید:

کلاس .form-horizontal به فرم اضافه کنید
برچسب‌ها و کنترل‌کننده‌ها را در .control-group قرار دهید
کلاس .control-label برای برچسب قرار دهید
برای قرارگیری در یک ستون، هر کنترل‌کنندهٔ مرتبط را در .controls قرار دهید.

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">ایمیل</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="ایمیل">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">گذرواژه</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="گذرواژه">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> مرا به خاطر بسپار
      </label>
      <button type="submit" class="btn">ورود</button>
    </div>
  </div>
</form>

کنترل‌کننده‌های فرم قابل پشتیبانی

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

ورودی‌ها

اکثر کنترل‌کننده‌های فرم، فیلدهای ورودی متنی. که شامل پشتیبانی از انواع اچ‌تی‌ام‌ال ۵ نیز هست مانند: text، password، datetime، datetime-local، date، month، time، week، number، email، url، search، tel و color.

می‌توانید از هر نوعی type استفاده کنید.

<input type="text" placeholder="متن ورودی">

Textarea

کنترل‌کنندهٔ فرمی که از چندین خط نوشته پشتیبانی می‌کند. تعداد ردیف‌ها rows را اگر نیازی بود تغییر دهید.

<textarea rows="3"></textarea>

Checkboxها و radioها

از Checkboxها برای انتخاب یک یا چندین انتخاب از بین چندین انتخاب استفاده می‌کنیم در حالی که از radioها برای انتخاب یک انتخاب از چندین انتخاب استفاده می‌کنیم.

پیش‌فرض (پشته‌ای)

<label class="checkbox">
  <input type="checkbox" value="">
  انتخاب نخست این هست
</label>

<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  انتخاب نخست این هست
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  انتخاب دوم چیز دیگری است که با انتخاب این، انتخاب نخست از بین می‌رود
</label>

checkboxهای اینلاین

کلاس .inline را به یک سری checkboxها یا radioها اضافه کنید تا کنترل‌کننده‌ها در یک خط ظاهر شوند.

<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> ۱
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> ۲
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> ۳
</label>

انتخاب‌ها

از تنظیمات پیش‌فرض استفاده کنید و یا برای این‌که بتوان چندین انتخاب داشت کلاس multiple="multiple" به آن اضافه کنید.

<select>
  <option>۱</option>
  <option>۲</option>
  <option>۳</option>
  <option>۴</option>
  <option>۵</option>
</select>

<select multiple="multiple">
  <option>۱</option>
  <option>۲</option>
  <option>۳</option>
  <option>۴</option>
  <option>۵</option>
</select>

گسترش کنترل‌کننده‌های فرم

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

ورودی‌های تغییریافته

متن یا دکمه‌هایی قبل و یا بعد از ورودی برپایه متن می‌توانید اضافه کنید. تگ select این قابلیت را پشتیبانی نمی‌کند.

انتخاب‌های پیش‌فرض

کلاس input-prepend و یک input با یکدیگر در یکی از کلاس‌های .add-on و input-append قرار دهید.

<div class="input-prepend">
  <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="نام کاربری">
</div>
<div class="input-append">
  <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">﷼</span>
</div>

ترکیبی

از هر دو کلاس و دو نمونه از کلاس .add-on برای ایجاد یک ورودی با متن قبل و بعد استفاده کنید.

<div class="input-prepend input-append">
  <span class="add-on">٫۰۰</span>
  <input class="span2" id="appendedPrependedInput" size="16" type="text">
  <span class="add-on">﷼</span>
</div>

دکمه به‌جای متن

به‌جای استفاده از <span> با متن از یک دکمه با کلاس .btn استفاده کنید تا یک دکمه به قبل یا بعد ورودی بچسبد.

<div class="input-append">
  <input class="span2" id="appendedInputButton" type="text">
  <button class="btn" type="button">برو!</button>
</div>

<div class="input-append">
  <input class="span2" id="appendedInputButton" type="text">
  <button class="btn" type="button">جستجو</button>
  <button class="btn" type="button">تنظیمات</button>
</div>

دکمه‌های افتادنی

<div class="input-append">
  <input class="span2" id="appendedDropdownButton" type="text">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
</div>

<div class="input-prepend">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      عمل
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
  <input class="span2" id="prependedDropdownButton" type="text">
</div>

<div class="input-prepend input-append">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      عمل
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
  <input class="span2" id="appendedPrependedDropdownButton" type="text">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      عمل
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
</div>

گروه‌های افتادنی تقسیم‌شده

<form>
  <div class="input-prepend">
    <div class="btn-group">...</div>
    <input type="text">
  </div>
  <div class="input-append">
    <input type="text">
    <div class="btn-group">...</div>
  </div>
</form>

فرم جستجو

<form class="form-search">
  <div class="input-append">
    <input type="text" class="span2 search-query">
    <button type="submit" class="btn">جستجو</button>
  </div>
  <div class="input-prepend">
    <button type="submit" class="btn">جستجو</button>
    <input type="text" class="span2 search-query">
  </div>
</form>

اندازه کنترل‌ها

از اندازه‌های نسبی مانند .input-large استفاده کنید و یا اندازهٔ ورودی‌ها را مانند ستون شبکه‌ای به‌وسیلهٔ .span* مشخص کنید.

ورودی‌های سطح بلاکی

هر عنصر <input> یا <textarea> می‌تواند به‌مانند یک عنصر بلاکی شود.

<input class="input-block-level" type="text" placeholder=".input-block-level">

اندازه‌های نسبی

<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<input class="input-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

توجه کنید! در نسخه‌های آینده، وقتی شما از کلاس‌های نسبی برای اندازه استفاده کنید، اندازه ورودی با اندازه دکمه‌ها با یکدیگر متناسب می‌شوند. برای مثال اگر شما از .input-large استفاده کنید اندازه حاشیه و اندازه فونت ورودی نیز تغییر می‌کند.

اندازه شبکه‌ای

از کلاس .span1 تا .span12 برای ورودی استفاده کنید که با اندازه ستون‌های شبکه‌ای متناسب شود.

<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
<select class="span1">
  ...
</select>
<select class="span2">
  ...
</select>
<select class="span3">
  ...
</select>

برای استفاده چندین ورودی شبکه‌ای در هر خط از کلاس .controls-row استفاده کنید. با این روش فضاهای اضافه از بین می‌روند، حاشیه مناسب داده می‌شودو متحرک‌های اضافه پاک می‌شوند.

<div class="controls">
  <input class="span5" type="text" placeholder=".span5">
</div>
<div class="controls controls-row">
  <input class="span4" type="text" placeholder=".span4">
  <input class="span1" type="text" placeholder=".span1">
</div>
...

ورودی‌های فقط خواندنی

داده را در یک فرم فقط خواندنی نمایش می‌دهد و بدون نشانه‌گذاری فرم واقعی نمی‌توان داده را تغییر داد.

<span class="input-xlarge uneditable-input">یک متن غیرقابل تغییر</span>

عملیات فرم

در پایان یک فرم، یک گروه از عملیات (دکمه‌ها) وجود دارد. وقتی آن‌ها را در یک کلاس .form-horizontal قرار دهید آن‌ها در یک خط با کنترل‌کننده‌های فرم همراستا می‌شوند.

<div class="form-actions">
  <button type="submit" class="btn btn-primary">ذخیره تغییرات</button>
  <button type="button" class="btn">لغو</button>
</div>

نوشته راهنما

در حالت خطی و بلاکی نوشتهٔ راهنما در اطراف کنترل‌کننده‌ها ظاهر می‌شود.

راهنمای خطی

<input type="text"><span class="help-inline">نوشته راهنمای خطی</span>

راهنمای بلاکی

<input type="text"><span class="help-block"> یک نوشتهٔ راهنمای طولانی‌تر که ممکن است در چندین خط قرار گیرد.</span>

وضعیت‌های کنترل‌کننده فرم

وضعیت‌های مختلف را برای کاربران و یا مراجعه‌کنندگان بر روی کنترل‌کننده‌های فرم و یا برچسب‌ها نمایش می‌دهد.

Input focus

ما outline پیش‌فرض را از روی برخی از کنترل‌کننده‌های فرم حذف کردیم و یک سایه box-shadow را هنگام :focus اعمال می‌کنیم.

<input class="input-xlarge" id="focusedInput" type="text" value="این focus شده‌است...">

ورودی‌های نامعتبر

ورودی‌ها را با استفاده از ویژگی پیش‌فرض مرورگر توسط :invalid استایل می‌دهد. type را مشخص کنید، خصوصیت required را در صورتی که اختیاری نیست و (اگر قابل پیاده‌سازی بود) pattern را نیز مشخص کنید.

در نسخه‌های اینترنت اکسپلورر ۷ تا ۹ به دلیل پشتیبانی نکردن از انتخاب‌گرهای سی‌اس‌اس pseudo، وجود ندارد.

<input class="span3" type="email" required>

ورودی‌های غیرفعال

با اضافه کردن ویژگی disabled به ورودی از تغییر ورودی توسط کاربر جلوگیری کنید و کمی نمایش آن متفاوت می‌شود.

<input class="input-xlarge" id="disabledInput" type="text" placeholder="این یک ورودی غیرفعال است..." disabled>

وضعیت‌های اعتبارسنجی

بوت‌استرپ شامل شیوه‌های نمایش برای خطا، هشدار، اطلاعاتی، و پیام‌های موفقیت برای اعتبارسنجی می‌باشد. برای استفاده کلاس مناسب را در .control-group قرار دهید.

<div class="control-group warning">
  <label class="control-label" for="inputWarning">ورودی با warning</label>
  <div class="controls">
    <input type="text" id="inputWarning">
    <span class="help-inline">چیزی ممکن است اشتباه شده باشد</span>
  </div>
</div>

<div class="control-group error">
  <label class="control-label" for="inputError">ورودی با error</label>
  <div class="controls">
    <input type="text" id="inputError">
    <span class="help-inline">لطفا خطا را تصحیح کنید</span>
  </div>
</div>
<div class="control-group error">
  <label class="control-label" for="inputError">ورودی با info</label>
  <div class="controls">
    <input type="text" id="inputError">
    <span class="help-inline">نام کاربری قبلا گرفته شده‌است</span>
  </div>
</div>

<div class="control-group info">
  <label class="control-label" for="inputInfo">Input with info</label>
  <div class="controls">
    <input type="text" id="inputInfo">
    <span class="help-inline">Username is already taken</span>
  </div>
</div>

<div class="control-group success">
  <label class="control-label" for="inputSuccess">ورودی با success</label>
  <div class="controls">
    <input type="text" id="inputSuccess">
    <span class="help-inline">واوووو!</span>
  </div>
</div>

دکمه‌های پیش‌فرض

شیوه‌های نمایش دکمه می‌تواند با کلاس .btn به هرچیزی اعمال شود. اگرچه شما فقط می‌خواهید این شیوه‌ها را تگ‌های <a> و <button> برای بهترین خروجی، اعمال شود.

دکمه	class=""	توصیف
	`btn`	دکمه خاکستری استاندارد دارای گرادیانت
	`btn btn-primary`	رنگ مناسب و ویژگی‌های مناسب برای استفاده در عملیات اصلی مانند فرستادن یک فرم
	`btn btn-info`	یک جایگزین برای شیوهٔ نمایش پیش‌فرض
	`btn btn-success`	نشان‌دهندهٔ یک موفقیت و یا یک عمل مثبت
	`btn btn-warning`	نشان‌دهندهٔ هشدار برای انجام این عمل
	`btn btn-danger`	نشان‌دهندهٔ خطر و یا یک عملی که پیامدهای منفی دربر دارد
	`btn btn-inverse`	یک دکمه خاکستری تیره، که مفهوم و معنای خاصی برای انجام عملی نیست.
	`btn btn-link`	تبدیل یک دکمه به یک پیوند که شبیه یک پیوند است اما رفتار یک دکمه را دارد

سازگاری با مرورگرهای مختلف

اینترنت اکسپلورر ۹ گوشه‌های پیش‌زمینهٔ گرادیانت را گرد نمی‌کند، بنابراین ما آن را حذف کردیم. همچنین اینترنت اکسپلورر ۹ دکمه‌های غیرفعال، را با سایهٔ زشت و متن خاکستری نمایش می‌دهد که ما آن را نتوانستیم درست کنیم.

اندازه دکمه‌ها

دکمه‌های بزرگ‌تر یا کوچک‌تر؟ کلاس .btn-large، .btn-small و یا .btn-mini را برای اندازه‌های مختلف استفاده کنید.

<p>
  <button class="btn btn-large btn-primary" type="button">دکمه بزرگ</button>
  <button class="btn btn-large" type="button">دکمه بزرگ</button>
</p>
<p>
  <button class="btn btn-primary" type="button">دکمه پیش‌فرض</button>
  <button class="btn" type="button">دکمه پیش‌فرض</button>
</p>
<p>
  <button class="btn btn-small btn-primary" type="button">دکمه کوچک</button>
  <button class="btn btn-small" type="button">دکمه کوچک</button>
</p>
<p>
  <button class="btn btn-mini btn-primary" type="button">دکمه خیلی کوچک</button>
  <button class="btn btn-mini" type="button">دکمه خیلی کوچک</button>
</p>

یک دکمهٔ بلاکی را، با اضافه کردن کلاس .btn-block ایجاد کنید، اندازه دکمه برابر عنصر پدر دکمه می‌شود.

<button class="btn btn-large btn-block btn-primary" type="button">دکمه بلاکی</button>
<button class="btn btn-large btn-block" type="button">دکمه بلاکی</button>

وضعیت غیرفعال

با محو کردن ۵۰ درصد پشت دکمه‌ها، آن‌ها را شبیه دکمه‌های غیرقابل کلیک بسازید.

تگ پیوند

کلاس .disabled به تگ <a> اضافه کنید.

پیوند اصلی Link

<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">پیوند</a>

توجه کنید! ما از .disabled به عنوان یک ابزار کمکی استفاده می‌کنیم، به‌مانند کلاس رایج .active، پس هیچ پیشوندی نیازی نیست. همچنین توجه کنید که این کلاس فقط ظاهر را تغییر می‌دهد، برای این‌که پیوند را غیرفعال کنید باید از جاوااسکریپت استفاده کنید.

عنصر دکمه

ویژگی disabled را به <button> اضافه کنید.

<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">دکمه اصلی</button>
<button type="button" class="btn btn-large" disabled>دکمه</button>

یک کلاس، چندین تگ

از کلاس .btn برای تگ‌های <a>، <button> و <input> استفاده کنید.

<a class="btn" href="">پیوند</a>
<button class="btn" type="submit">دکمه</button>
<input class="btn" type="button" value="ورودی">
<input class="btn" type="submit" value="فرستادن">

به عنوان یک تمرین خوب، سعی کنید برای نمایش بهینه در تمام مرورگرها، اگر شما از input استفاده می‌کنید، پس از <input type="submit"> برای دکمه استفاده کنید.

با اضافه کردن کلاس‌های زیر به تگ <img> به راحتی شیوهٔ نمایش عکس‌ها را تغییر دهید.

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">

توجه کنید! کلاس .img-rounded و .img-circle بر روی اینترنت اکسپلورر ۷ و ۸ به دلیل پشتیبانی نکردن border-radius نمایش داده نمی‌شود.

آیکن‌های glyphs

۱۴۰ آیکن در فرم بلوکی و کوچک در رنگ‌های خاکستری تیره (پیش‌فرض) و سفید به‌وسیلهٔ Glyphicons آماده شده‌است.

icon-glass
icon-music
icon-search
icon-envelope
icon-heart
icon-star
icon-star-empty
icon-user
icon-film
icon-th-large
icon-th
icon-th-list
icon-ok
icon-remove
icon-zoom-in
icon-zoom-out
icon-off
icon-signal
icon-cog
icon-trash
icon-home
icon-file
icon-time
icon-road
icon-download-alt
icon-download
icon-upload
icon-inbox
icon-play-circle
icon-repeat
icon-refresh
icon-list-alt
icon-lock
icon-flag
icon-headphones
icon-volume-off
icon-volume-down
icon-volume-up
icon-qrcode
icon-barcode
icon-tag
icon-tags
icon-book
icon-bookmark
icon-print
icon-camera
icon-font
icon-bold
icon-italic
icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
icon-list
icon-indent-left
icon-indent-right
icon-facetime-video
icon-picture
icon-pencil
icon-map-marker
icon-adjust
icon-tint
icon-edit
icon-share
icon-check
icon-move
icon-step-backward
icon-fast-backward
icon-backward
icon-play
icon-pause
icon-stop
icon-forward
icon-fast-forward
icon-step-forward
icon-eject
icon-chevron-left
icon-chevron-right
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-question-sign
icon-info-sign
icon-screenshot
icon-remove-circle
icon-ok-circle
icon-ban-circle
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-arrow-down
icon-share-alt
icon-resize-full
icon-resize-small
icon-plus
icon-minus
icon-asterisk
icon-exclamation-sign
icon-gift
icon-leaf
icon-fire
icon-eye-open
icon-eye-close
icon-warning-sign
icon-plane
icon-calendar
icon-random
icon-comment
icon-magnet
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
icon-folder-close
icon-folder-open
icon-resize-vertical
icon-resize-horizontal
icon-hdd
icon-bullhorn
icon-bell
icon-certificate
icon-thumbs-up
icon-thumbs-down
icon-hand-right
icon-hand-left
icon-hand-up
icon-hand-down
icon-circle-arrow-right
icon-circle-arrow-left
icon-circle-arrow-up
icon-circle-arrow-down
icon-globe
icon-wrench
icon-tasks
icon-filter
icon-briefcase
icon-fullscreen

یادکرد Glyphicons

Glyphicons که مجموعه‌ای از آیکن‌ها است به‌طور معمول رایگان نیست اما با توافقی که میان ایجادکننده Glyphicons و بوت‌استرپ به وجود آمد، آن‌ها این آیکن‌ها را بدون هیچ هزینه‌ای در اختیار توسعه‌دهنده‌ها قرار دادند. به عنوان یک تشکر بهتر است در هرجایی که ممکن است پیوندی به Glyphicons در سایت خود قرار دهید.

چگونه استفاده کنیم؟

تمام آیکن‌ها نیاز به تگ <i> با یک کلاس منحصربه‌فرد و پیشوند icon- را دارند. برای استفاده، این کد را درهرجایی که نیاز است، استفاده کنید:

<i class="icon-search"></i>

همچنین شما می‌توانید از رنگ سفید متمایز استفاده کنید. ما پیشنهاد می‌کنیم که از آیکن‌های سفید در منوها و پیوندهای افتادنی استفاده کنید.

<i class="icon-search icon-white"></i>

توجه کنید! وقتی از آیکن‌ها در کنار نوشته، دکمه و پیوندهای منوها استفاده می‌کنید، مطمئن شوید که بعد از <i> یک فضای خالی یا space بگذارید.

نمونه‌هایی از آیکن

از آن‌ها در دکمه‌ها، گروه‌های دکمه برای نوار ابزار، منوهای ناوبری و یا برای ورودی‌های فرم استفاده کنید.

دکمه‌ها

گروهی از دکمه‌ها در نوار ابزار

<div class="btn-toolbar">
  <div class="btn-group">
    <a class="btn" href="#"><i class="icon-align-left"></i></a>
    <a class="btn" href="#"><i class="icon-align-center"></i></a>
    <a class="btn" href="#"><i class="icon-align-right"></i></a>
    <a class="btn" href="#"><i class="icon-align-justify"></i></a>
  </div>
</div>

در دکمه‌های افتادنی

کاربر

<div class="btn-group">
  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> کاربر</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-pencil"></i> ویرایش</a></li>
    <li><a href="#"><i class="icon-trash"></i> حذف</a></li>
    <li><a href="#"><i class="icon-ban-circle"></i> بستن</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> مدیر کردن</a></li>
  </ul>
</div>

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

ستاره ستاره ستاره

<a class="btn btn-large" href="#"><i class="icon-star"></i> ستاره</a>
<a class="btn btn-small" href="#"><i class="icon-star"></i> ستاره</a>
<a class="btn btn-mini" href="#"><i class="icon-star"></i> ستاره</a>

ناوبری

<ul class="nav nav-list">
  <li class="active"><a href="#"><i class="icon-home icon-white"></i> صفحه اصلی</a></li>
  <li><a href="#"><i class="icon-book"></i> کتابخانه</a></li>
  <li><a href="#"><i class="icon-pencil"></i> برنامه‌ها</a></li>
  <li><a href="#"><i class="i"></i> مختلف</a></li>
</ul>

ورودی‌های فرم

<div class="control-group">
  <label class="control-label" for="inputIcon">آدرس ایمیل</label>
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-envelope"></i></span>
      <input class="span2" id="inputIcon" type="text">
    </div>
  </div>
</div>

گرافیک قلم

تیترها

h1. تیتر ۱

h2. تیتر ۲

h3. تیتر ۳

h4. تیتر ۴

h5. تیتر ۵

h6. تیتر ۶

Body copy

Lead body copy

ساخته‌شده به‌وسیلهٔ Less

تاکیدها

<small>

درشت

مورب‌ها

کلاس‌های همراستاسازی

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

مخفف‌ها

<abbr>

<abbr class="initialism">

نشانی‌ها

<address>

گفتاوردها

گفتاورد پیش‌فرض

تنظیمات گفتاورد

آوردن نام منبع

نمایش متفاوت

فهرست‌ها

غیرترتیبی

ترتیبی

بدون نقاط و اعداد اول هر سطر

اینلاین

توصیفی

توصیف افقی

کد

اینلاین

بلاک پایه

جدول‌ها

شیوهٔ نمایش پیش‌فرض

کلاس‌های اختیاری

.table-striped

.table-bordered

.table-hover

.table-condensed

کلاس‌های اختیاری برای ردیف‌ها

نشان‌های جدول پشتیبانی‌شده

فرم‌ها

شیوهٔ نمایش پیش‌فرض

لایه‌های اختیاری

فرم جستجو

فرم اینلاین

فرم افقی

کنترل‌کننده‌های فرم قابل پشتیبانی

ورودی‌ها

Textarea

Checkboxها و radioها

پیش‌فرض (پشته‌ای)

checkboxهای اینلاین

انتخاب‌ها

گسترش کنترل‌کننده‌های فرم

ورودی‌های تغییریافته

انتخاب‌های پیش‌فرض

ترکیبی

دکمه به‌جای متن

دکمه‌های افتادنی

گروه‌های افتادنی تقسیم‌شده

فرم جستجو

اندازه کنترل‌ها

ورودی‌های سطح بلاکی

اندازه‌های نسبی

اندازه شبکه‌ای

ورودی‌های فقط خواندنی

عملیات فرم

نوشته راهنما

راهنمای خطی

راهنمای بلاکی

وضعیت‌های کنترل‌کننده فرم

Input focus

ورودی‌های نامعتبر

ورودی‌های غیرفعال

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`