سرفصل ها

تمام عناوین HTML <h1>از طریق <h6>در دسترس هستند.

h1. سرفصل 1

h2. سرفصل 2

h3. سرفصل 3

h4. سرفصل 4

h5. سرفصل 5

h6. سرفصل 6

کپی بدنه

پیش‌فرض جهانی بوت استرپ 14 پیکسل و 20 پیکسلfont-size است . این در مورد و همه پاراگراف ها اعمال می شود. علاوه بر این، (پاراگراف ها) حاشیه پایینی نصف ارتفاع خط خود (به طور پیش فرض 10 پیکسل) دریافت می کنند.line-height<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parurient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultrices vehicula.

Cum sociis natoque penatibus et magnis dis parurient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis، est non commodo luctus، nisi erat porttitor ligula، eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis، est non commodo luctus، nisi erat porttitor ligula، eget lacinia odio sem nec elit.

<p> ... </p>

کپی بدنه سرب

یک پاراگراف را با اضافه کردن برجسته .leadکنید.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis، est non commodo luctus.

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

ساخته شده با کمتر

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

تاکید

از تگ های تاکیدی پیش فرض HTML با سبک های سبک استفاده کنید.

`<small>`

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

این خط از متن به عنوان چاپ ظریف در نظر گرفته شده است.

<p> <small> این خط از متن به عنوان چاپ ظریف در نظر گرفته شده است. </small> </p>

پررنگ

برای تاکید بر قطعه ای از متن با وزن فونت سنگین تر.

قطعه متن زیر به صورت متن پررنگ ارائه می شود .

<strong> به صورت متن پررنگ ارائه شده است </strong>

حروف کج

برای تاکید بر یک متن با حروف کج.

قطعه متن زیر به صورت متن ایتالیک ارائه می شود .

<em> به صورت متن ایتالیک </em> ارائه شده است

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

کلاس های تراز

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

متن تراز چپ.

متن تراز شده در مرکز

متن تراز شده سمت راست.

<p class = "text-left" > متن تراز چپ. </p> 
<p class = "text-center" > متن تراز شده در مرکز. </p> 
<p class = "text-right" > متن تراز شده راست. </p>

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

با چند کلاس کاربردی تاکیدی معنا را از طریق رنگ منتقل کنید.

Fusce dapibus، telus ac cursus commodo، tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis، est non commodo luctus، nisi erat porttitor ligula.

<p class = "muted" > Fusce dapibus، tellus ac cursus commodo، tortor mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis، est non commodo luctus، nisi erat porttitor ligula. </p>

اختصارات

اجرای تلطیف شده <abbr>عنصر HTML برای اختصارات و کلمات اختصاری برای نشان دادن نسخه گسترش یافته در حالت شناور. اختصارات دارای یک titleویژگی دارای یک حاشیه پایین نقطه‌دار روشن و یک مکان‌نمای کمکی در شناور هستند که زمینه اضافی را در شناور ارائه می‌دهند.

`<abbr>`

برای متن گسترده در حالت شناور طولانی یک مخفف، این titleویژگی را اضافه کنید.

مخفف کلمه ویژگی attr است .

<abbr title = "ویژگی" > attr </abbr>

`<abbr class="initialism">`

.initialismبرای اندازه فونت کمی کوچکتر به مخفف اضافه کنید.

HTML بهترین چیز از زمان برش نان است.

<abbr title = "HyperText Markup Language" class = "Initialism" > HTML </abbr>

آدرس ها

اطلاعات تماس نزدیکترین جد یا کل مجموعه کار را ارائه دهید.

`<address>`

حفظ قالب بندی با پایان دادن به تمام خطوط با <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

نام کامل
[email protected]

<آدرس>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  سانفرانسیسکو، CA 94107 <br>
  <abbr title = "Phone" > P: </abbr> (123) 456-7890 
</address>
 
<آدرس>
  <strong> نام کامل </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</address>

نقل قول های بلوکی

برای نقل قول بلوک های محتوا از منبع دیگری در سند شما.

بلوک نقل قول پیش فرض

دور <blockquote>هر HTML به عنوان نقل قول بپیچید. برای نقل قول های مستقیم، ما یک <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante. </p>
</blockquote>

گزینه های Blockquote

تغییر سبک و محتوا برای تغییرات ساده در یک بلوک نقل قول استاندارد.

نام بردن از یک منبع

<small>برای شناسایی منبع برچسب اضافه کنید. نام کار منبع را در بپیچید <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante.
شخصی معروف در عنوان منبع

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante. </p>
  <small> شخص مشهور <cite title = "Source Title" > عنوان منبع </cite></small> 
</blockquote>

نمایشگرهای جایگزین

برای .pull-rightیک بلوک نقل قول شناور و تراز راست استفاده کنید.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante.
شخصی معروف در عنوان منبع

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

لیست ها

بدون سفارش

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
عدد صحیح molestie lorem at massa
تسهیل در پرتیوم نیسل aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- زخم های پوروس سودال
- Sem porttitor وستیبولوم laoreet
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

سفارش داده شده

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
عدد صحیح molestie lorem at massa
تسهیل در پرتیوم نیسل aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

بی استایل

بالشتک پیش‌فرض list-styleو سمت چپ را در موارد فهرست حذف کنید (فقط کودکان فوری).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
عدد صحیح molestie lorem at massa
تسهیل در پرتیوم نیسل aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- زخم های پوروس سودال
- Sem porttitor وستیبولوم laoreet
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

درون خطی

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

لورم اپیسوم
Phasellus iaculis
Nulla volutpat

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

شرح

فهرستی از اصطلاحات به همراه توضیحات مرتبط آنها.

لیست های توضیحات: لیست توضیحات برای تعریف اصطلاحات عالی است.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

توضیحات افقی

اصطلاحات و توضیحات را در <dl>کنار هم بنویسید.

لیست های توضیحات: لیست توضیحات برای تعریف اصطلاحات عالی است.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus، telus ac cursus commodo، Tortor Mauris Condimentum nibh، ut fermentum massa justo sit amet risus.

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

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

درون خطی

قطعات درون خطی کد را با <code>.

به عنوان مثال، <section>باید به صورت خطی پیچیده شود.

به عنوان مثال ، <code> & lt ; بخش & gt ;</ code > باید به صورت درون خطی پیچیده شود .

بلوک اصلی

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

<p>متن نمونه در اینجا...</p>

<پیش>
  <p>نمونه متن در اینجا...</p>
</pre>

سر بالا!مطمئن شوید که کد را در <pre>برچسب ها تا حد امکان نزدیک به سمت چپ نگه دارید. همه برگه ها را ارائه می دهد.

می‌توانید به صورت اختیاری .pre-scrollableکلاسی را اضافه کنید که حداکثر ارتفاع آن 350 پیکسل باشد و یک نوار اسکرول محور y ارائه شود.

سبک های پیش فرض

برای یک ظاهر طراحی اولیه - بالشتک های سبک و فقط تقسیم کننده های افقی - کلاس پایه را .tableبه هر کدام اضافه کنید <table>.

#	نام کوچک	نام خانوادگی	نام کاربری
1	علامت گذاری	اتو	@mdo
2	یعقوب	تورنتون	@چربی
3	لری	پرنده	@توییتر

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

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

هر یک از کلاس های زیر را به .tableکلاس پایه اضافه کنید.

`.table-striped`

خط زبرا را به هر ردیف جدول در <tbody>انتخابگر :nth-childCSS اضافه می کند (در IE7-8 موجود نیست).

#	نام کوچک	نام خانوادگی	نام کاربری
1	علامت گذاری	اتو	@mdo
2	یعقوب	تورنتون	@چربی
3	لری	پرنده	@توییتر

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

`.table-bordered`

حاشیه ها و گوشه های گرد را به میز اضافه کنید.

#	نام کوچک	نام خانوادگی	نام کاربری
1	علامت گذاری	اتو	@mdo
1	علامت گذاری	اتو	@getbootstrap
2	یعقوب	تورنتون	@چربی
3	لری پرنده		@توییتر

<table class = "جدول با حاشیه" > 
  …
</table>

`.table-hover`

حالت شناور را در ردیف‌های جدول در یک فعال <tbody>کنید.

#	نام کوچک	نام خانوادگی	نام کاربری
1	علامت گذاری	اتو	@mdo
2	یعقوب	تورنتون	@چربی
3	لری پرنده		@توییتر

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

`.table-condensed`

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

#	نام کوچک	نام خانوادگی	نام کاربری
1	علامت گذاری	اتو	@mdo
2	یعقوب	تورنتون	@چربی
3	لری پرنده		@توییتر

<table class = "جدول فشرده" > 
  …
</table>

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

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

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

#	تولید - محصول	پرداخت گرفته شده است	وضعیت
1	سل - ماهانه	01/04/2012	تایید شده
2	سل - ماهانه	02/04/2012	نپذیرفتن
3	سل - ماهانه	03/04/2012	در انتظار
4	سل - ماهانه	04/04/2012	برای تایید تماس بگیرید

...
  < tr class = "موفقیت" >
    <td> 1 < /td>
    <td>TB - ماهانه</ td >
    < td > 01/04/2012 < / td >
    <td>تأیید شد</ td >
  </ tr >
...

پشتیبانی از نشانه گذاری جدول

فهرست عناصر HTML جدول پشتیبانی شده و نحوه استفاده از آنها.

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

<جدول>
  <caption> ... </caption>
  <thead>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

سبک های پیش فرض

کنترل‌های فرم فردی یک ظاهر طراحی را دریافت می‌کنند، اما بدون هیچ گونه کلاس پایه مورد نیاز در مورد <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>  
  </fieldset>
</form>

طرح بندی های اختیاری

همراه با Bootstrap سه طرح بندی فرم اختیاری برای موارد استفاده رایج وجود دارد.

فرم جستجو

برای ورودی متنی بیشتر .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 = "کنترل ها" > 
      <input type = "text" id = "inputEmail" placeholder = "Email" >   
    </div>
  </div>
  <div class = "control-group" > 
    <label class = "control-label" for = "inputPassword" > رمز عبور </label>  
    <div class = "کنترل ها" > 
      <input type = "password" id = "inputPassword" placeholder = "Password" >   
    </div>
  </div>
  <div class = "control-group" > 
    <div class = "کنترل ها" > 
      <label class = "checkbox" > 
        <input type = "checkbox" > مرا به خاطر بسپار 
      </label>
      <button type = "submit" class = "btn" > ورود به سیستم </button>  
    </div>
  </div>
</form>

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

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

ورودی ها

رایج ترین کنترل فرم، فیلدهای ورودی مبتنی بر متن. شامل پشتیبانی از انواع HTML5: متن، رمز عبور، تاریخ، تاریخ-محلی، تاریخ، ماه، زمان، هفته، شماره، ایمیل، آدرس اینترنتی، جستجو، تلفن و رنگ.

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

<input type = "text" placeholder = "Text input" >

Textarea

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

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

چک باکس ها و رادیوها

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

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

<label class = "checkbox" > 
  <input type = "checkbox" value = "" >  
  گزینه یک این و آن است - مطمئن شوید که چرا عالی است
</label>
 
<label class = "رادیو" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" بررسی شد >     
  گزینه یک این و آن است - مطمئن شوید که چرا عالی است
</label>
<label class = "رادیو" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  گزینه دو می تواند چیز دیگری باشد و با انتخاب آن گزینه یک لغو انتخاب می شود
</label>

چک باکس های درون خطی

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

<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
</label>

انتخاب می کند

از گزینه پیش فرض استفاده کنید یا a multiple="multiple"را برای نمایش چندین گزینه به طور همزمان مشخص کنید.

<انتخاب>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
<select multiple = "multiple" > 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>

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

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

ورودی های اضافه شده و اضافه شده

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

گزینه های پیش فرض

an .add-onو an را inputبا یکی از دو کلاس بپیچید تا متنی را به ورودی اضافه کنید.

<div class = "input-prepend" > 
  <span class = "افزونه" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" placeholder = "Username" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput " type = "text" >   
  <span class = "افزونه" > 0.00 </span> 
</div>

ترکیب شده

از هر دو کلاس و دو نمونه از .add-onبرای prepend و اضافه کردن یک ورودی استفاده کنید.

<div class = "input-prepend input-append" > 
  <span class = "افزونه" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  <span class = "افزونه" > 0.00 </span> 
</div>

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

به جای یک <span>متن، از a .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 = "appendedInputButtons " 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" >  
      عمل
      <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>

گروه های کشویی تقسیم بندی شده

<فرم>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    < نوع ورودی = "متن" > 
  </div>
  <div class = "input-append" > 
    < نوع ورودی = "متن" > 
    <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-largepadding و اندازه فونت یک ورودی را افزایش می دهد.

اندازه شبکه

برای ورودی هایی که با اندازه های مشابه ستون های شبکه مطابقت دارند از .span1to استفاده کنید ..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 = "کنترل ها" > 
  <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-actionsدکمه ها در یک قرار می گیرند، به طور خودکار تورفتگی می کنند تا با کنترل های فرم هماهنگ شوند.

<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>

حالت های کنترل فرم

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

فوکوس ورودی

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

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "این متمرکز است..." >

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

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

به دلیل عدم پشتیبانی از انتخابگرهای شبه CSS، این مورد در نسخه های Internet Explorer 7-9 موجود نیست.

<input class = "span3" type = "ایمیل" مورد نیاز >

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

disabledبرای جلوگیری از ورود کاربر و ایجاد ظاهری کمی متفاوت، ویژگی را به ورودی اضافه کنید.

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

حالات اعتبارسنجی

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

<div class = "اخطار گروه کنترل" > 
  <label class = "control-label" for = "inputWarning" > ورودی با هشدار </label>  
  <div class = "کنترل ها" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > ممکن است مشکلی پیش آمده باشد </span> 
  </div>
</div>
 
<div class = "خطای گروه کنترل" > 
  <label class = "control-label" for = "inputError" > ورودی با خطا </label>  
  <div class = "کنترل ها" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > لطفاً خطا را تصحیح کنید </span> 
  </div>
</div>
 
<div class = "اطلاعات گروه کنترل" > 
  <label class = "control-label" for = "inputInfo" > ورودی با اطلاعات </label>  
  <div class = "کنترل ها" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > نام کاربری قبلاً گرفته شده است </span> 
  </div>
</div>
 
<div class = "موفقیت گروه کنترل" > 
  <label class = "control-label" for = "inputSuccess" > ورودی با موفقیت </label>  
  <div class = "کنترل ها" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > وووو! </span> 
  </div>
</div>

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

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

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

سازگاری متقابل مرورگر

IE9 شیب پس‌زمینه را در گوشه‌های گرد برش نمی‌دهد، بنابراین آن را حذف می‌کنیم. موارد مرتبط، IE9 عناصر غیرفعال را jankifi buttonمی کند، و متن را با سایه متنی ناخوشایند به رنگ خاکستری تبدیل می کند که ما نمی توانیم آن را برطرف کنیم.

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

دکمه های بزرگتر یا کوچکتر را دوست دارید؟ .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>

حالت غیر فعال

با محو کردن 50 درصد دکمه ها غیرقابل کلیک به نظر برسند.

عنصر لنگر

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

پیوند اولیه ارتباط دادن

<a href = "#" class = "btn btn-large btn-primary disabled" > پیوند اصلی </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" >   
<input class = "btn" type = "submit" value = "Submit" >

به عنوان بهترین روش، سعی کنید عنصر را با زمینه خود مطابقت دهید تا از تطبیق رندر بین مرورگر اطمینان حاصل کنید. اگر دارید input، از یک <input type="submit">برای دکمه خود استفاده کنید.

کلاس هایی را به یک <img>عنصر اضافه کنید تا به راحتی به تصاویر در هر پروژه ای سبک دهید.

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

سر بالا! .img-roundedو به دلیل عدم پشتیبانی .img-circleدر IE7-8 کار نمی کنند .border-radius

گلیف نمادها

140 نماد به صورت اسپرایت، موجود در خاکستری تیره (پیش‌فرض) و سفید، ارائه شده توسط Glyphicons .

آیکون شیشه ای
آیکون-موسیقی
جستجوی نماد
پاکت نماد
نماد قلب
نماد ستاره
نماد-ستاره-خالی
کاربر آیکون
آیکون-فیلم
نماد بزرگ
نماد-ام
نماد-امین لیست
نماد-ok
حذف نماد
نماد بزرگنمایی
نماد بزرگنمایی
نماد خاموش
نماد-سیگنال
نماد-دنده
نماد سطل زباله
نماد-خانه
نماد-فایل
نماد زمان
نماد جاده
icon-download-alt
آیکون-دانلود
آپلود نماد
نماد-صندوق ورودی
نماد-بازی-دایره
نماد-تکرار
بازخوانی نماد
icon-list-alt
قفل نماد
نماد-پرچم
آیکون هدفون
نماد کاهش صدا
نماد کاهش حجم
نماد افزایش حجم
icon-qrcode
آیکون-بارکد
نماد-تگ
نماد-تگ ها
کتاب نماد
نماد-نشانک
چاپ آیکون
آیکون دوربین
نماد-فونت
نمادهای پررنگ
نماد-مورب
نماد-متن-ارتفاع
نماد-متن-عرض
icon-align-left
icon-align-center
نماد-تراز کردن-راست
icon-align-justify
فهرست نمادها
icon-indent-left
icon-indent-right
نماد-facetime-ویدئو
نماد-تصویر
آیکون مداد
نماد-نقشه-نشانگر
نماد تنظیم
نماد رنگ
ویرایش آیکون
اشتراک گذاری نماد
بررسی نماد
نماد حرکت
icon-step-backward
icon-fast-backward
نماد به عقب
نماد بازی
نماد مکث
نماد توقف
نماد به جلو
icon-fast-forward
نماد-گام به جلو
نماد بیرون انداختن
نماد-شورون-چپ
نماد-شورون-راست
icon-plus-sign
نماد-منهای-نشانه
icon-remove-sign
نماد-ok-sign
نماد-سوال-نشانه
نماد - اطلاعات - علامت
نماد-اسکرین شات
نماد-حذف-دایره
نماد-ok-circle
نماد-بان-دایره
نماد-پیکان-چپ
نماد-پیکان-راست
نماد پیکان به بالا
نماد-پیکان-پایین
icon-share-alt
icon-resize-full
icon-resize-small
نماد پلاس
نماد-منهای
نماد ستاره
نماد-تعجب-علامت
نماد-هدیه
آیکون برگ
نماد آتش
نماد چشم باز
نماد چشم بسته
نماد-علامت هشدار
آیکون هواپیما
نماد-تقویم
نماد تصادفی
نماد-نظر
نماد آهنربا
نماد-شورون آپ
نماد-شورون-پایین
نماد-ریتوییت
نماد-سبد خرید
نماد-پوشه-بستن
نماد-پوشه-باز کردن
نماد-تغییر اندازه-عمودی
نماد-تغییر اندازه-افقی
icon-hdd
نماد-bullhorn
آیکون زنگ
نماد-گواهینامه
نماد-شست بالا
نماد-شست-پایین
نماد-دست-راست
نماد-دست-چپ
نماد دست بالا
نماد دست پایین
نماد-دایره-پیکان-راست
نماد-دایره-پیکان-چپ
نماد-دایره-پیکان-بالا
نماد-دایره-پیکان-پایین
نماد-کره
آچار آچار
آیکون وظایف
نماد-فیلتر
آیکون کیف
نماد تمام صفحه

انتساب Glyphicons

Glyphicons Halflings به طور معمول به صورت رایگان در دسترس نیست، اما هماهنگی بین Bootstrap و سازندگان Glyphicons این امکان را بدون هیچ هزینه ای برای شما به عنوان توسعه دهندگان فراهم کرده است. به عنوان تشکر، از شما می‌خواهیم که در صورت امکان، پیوند اختیاری را به Glyphicons اضافه کنید.

نحوه استفاده

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

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

همچنین سبک‌هایی برای نمادهای معکوس (سفید) وجود دارد که با یک کلاس اضافی آماده شده‌اند. ما به طور خاص این کلاس را در حالت های شناور و فعال برای پیوندهای پیمایش و کشویی اعمال خواهیم کرد.

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

سر بالا!هنگام استفاده از کنار رشته‌های متن، مانند دکمه‌ها یا پیوندهای ناوبری، حتماً یک فاصله بعد از <i>برچسب برای فاصله‌گذاری مناسب بگذارید.

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

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

دکمه ها

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

<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 = "تقسیم کننده" </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 = "کنترل ها" > 
    <div class = "input-prepend" > 
      <span class = "افزونه" ><i class = "icon-envelope" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

تایپوگرافی

سرفصل ها

h1. سرفصل 1

h2. سرفصل 2

h3. سرفصل 3

h4. سرفصل 4

h5. سرفصل 5

h6. سرفصل 6

کپی بدنه

کپی بدنه سرب

ساخته شده با کمتر

تاکید

<small>

پررنگ

حروف کج

کلاس های تراز

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

اختصارات

<abbr>

<abbr class="initialism">

آدرس ها

<address>

نقل قول های بلوکی

بلوک نقل قول پیش فرض

گزینه های Blockquote

نام بردن از یک منبع

نمایشگرهای جایگزین

لیست ها

بدون سفارش

سفارش داده شده

بی استایل

درون خطی

شرح

توضیحات افقی

کد

درون خطی

بلوک اصلی

جداول

سبک های پیش فرض

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

.table-striped

.table-bordered

.table-hover

.table-condensed

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

پشتیبانی از نشانه گذاری جدول

تشکیل می دهد

سبک های پیش فرض

طرح بندی های اختیاری

فرم جستجو

فرم درون خطی

فرم افقی

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

ورودی ها

Textarea

چک باکس ها و رادیوها

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

چک باکس های درون خطی

انتخاب می کند

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

ورودی های اضافه شده و اضافه شده

گزینه های پیش فرض

ترکیب شده

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

کشویی دکمه

گروه های کشویی تقسیم بندی شده

فرم جستجو

کنترل اندازه

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

اندازه نسبی

اندازه شبکه

ورودی های غیر قابل ویرایش

اقدامات را شکل دهید

متن راهنما

کمک درون خطی

راهنما را مسدود کنید

حالت های کنترل فرم

فوکوس ورودی

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

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

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`