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

HTML5 doctype

بوت استرپ از عناصر خاص HTML و ویژگی های CSS استفاده می کند که نیاز به استفاده از doctype HTML5 دارند. آن را در ابتدای همه پروژه های خود قرار دهید.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

اول موبایل

با بوت استرپ 2، سبک های اختیاری سازگار با موبایل را برای جنبه های کلیدی چارچوب اضافه کردیم. با بوت استرپ 3، پروژه را بازنویسی کردیم تا از همان ابتدا سازگار با موبایل باشد. به جای اضافه کردن سبک های تلفن همراه اختیاری، آنها دقیقاً در هسته قرار می گیرند. در واقع، بوت استرپ ابتدا موبایل است . سبک های اول موبایل را می توان در کل کتابخانه به جای فایل های جداگانه یافت.

برای اطمینان از رندر مناسب و بزرگنمایی لمسی، متا تگ viewport را به خود اضافه کنید <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

می‌توانید قابلیت‌های زوم را در دستگاه‌های تلفن همراه با افزودن user-scalable=noبه متا تگ viewport غیرفعال کنید. این کار زوم را غیرفعال می‌کند، به این معنی که کاربران فقط می‌توانند اسکرول کنند و باعث می‌شود سایت شما کمی بیشتر شبیه یک برنامه بومی باشد. به طور کلی، ما این را در هر سایتی توصیه نمی کنیم، بنابراین احتیاط کنید!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

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

بوت استرپ سبک های اصلی نمایش جهانی، تایپوگرافی و پیوند را تنظیم می کند. به طور خاص، ما:

تنظیم background-color: #fff;بر رویbody
از @font-family-base, @font-size-baseو @line-height-baseویژگی ها به عنوان پایه تایپوگرافی خود استفاده کنید
رنگ پیوند سراسری را از طریق تنظیم کنید @link-colorو فقط زیر خطوط پیوند را روی آن اعمال کنید:hover

این سبک ها را می توان در داخل پیدا scaffolding.lessکرد.

Normalize.css

برای بهبود رندر بین مرورگرها، از Normalize.css ، پروژه ای توسط نیکلاس گالاگر و جاناتان نیل استفاده می کنیم.

ظروف

بوت استرپ به یک عنصر حاوی برای بسته بندی محتویات سایت و قرار دادن سیستم شبکه ما نیاز دارد. می توانید یکی از دو کانتینر را برای استفاده در پروژه های خود انتخاب کنید. توجه داشته باشید که به دلیل paddingو بیشتر، هیچ یک از کانتینرها تودرتو نیستند.

برای .containerیک ظرف با عرض ثابت پاسخگو استفاده کنید.

<div class="container">
  ...
</div>

برای .container-fluidیک کانتینر با عرض کامل استفاده کنید، که تمام عرض نمای شما را در بر می گیرد.

<div class="container-fluid">
  ...
</div>

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

مقدمه

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

سطرها باید در یک .container(عرض ثابت) یا .container-fluid(با عرض کامل) برای تراز و لایه بندی مناسب قرار گیرند.
از ردیف ها برای ایجاد گروه های افقی از ستون ها استفاده کنید.
محتوا باید در ستون‌ها قرار گیرد و فقط ستون‌ها می‌توانند فرزندان مستقیم ردیف‌ها باشند.
کلاس های شبکه از پیش تعریف شده مانند .rowو .col-xs-4برای ساخت سریع طرح بندی شبکه در دسترس هستند. میکس های کمتری نیز می توانند برای چیدمان های معنایی بیشتر استفاده شوند.
ستون ها ناودان (شکاف بین محتوای ستون) را از طریق paddingایجاد می کنند. این padding در ردیف‌های ستون اول و آخر از طریق حاشیه منفی در .rows جابجا می‌شود.
حاشیه منفی به این دلیل است که مثال های زیر منسوخ شده اند. به این ترتیب که محتوای درون ستون‌های شبکه با محتوای غیرشبکه‌ای ردیف می‌شود.
ستون‌های گرید با تعیین تعداد دوازده ستون موجود که می‌خواهید در آن قرار بگیرند ایجاد می‌شوند. به عنوان مثال، سه ستون مساوی از سه استفاده می کنند .col-xs-4.
اگر بیش از 12 ستون در یک ردیف قرار گیرد، هر گروه از ستون‌های اضافی، به عنوان یک واحد، روی یک خط جدید قرار می‌گیرند.
کلاس‌های گرید برای دستگاه‌هایی با عرض صفحه بزرگتر یا مساوی اندازه‌های نقطه شکست اعمال می‌شوند و کلاس‌های شبکه‌ای را که برای دستگاه‌های کوچک‌تر هدف‌گذاری شده‌اند لغو می‌کنند. بنابراین، به عنوان مثال، اعمال هر .col-md-*کلاس برای یک عنصر نه تنها بر استایل آن در دستگاه‌های متوسط تأثیر می‌گذارد، بلکه اگر .col-lg-*کلاسی وجود نداشته باشد، روی دستگاه‌های بزرگ نیز تأثیر می‌گذارد.

به مثال هایی برای اعمال این اصول در کد خود نگاه کنید.

داستان های رسانه

ما از پرس و جوهای رسانه ای زیر در فایل های Less خود برای ایجاد نقاط شکست کلیدی در سیستم شبکه خود استفاده می کنیم.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

ما گهگاه این پرسش‌های رسانه را گسترش می‌دهیم max-widthتا CSS را به مجموعه‌ای باریک از دستگاه‌ها محدود کنیم.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

گزینه های شبکه

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

	دستگاه‌های بسیار کوچک تلفن‌ها (<768 پیکسل)	تبلت‌های دستگاه‌های کوچک (≥768 پیکسل)	دسک‌تاپ دستگاه‌های متوسط (≥992 پیکسل)	دسک‌تاپ دستگاه‌های بزرگ (≥1200 پیکسل)
رفتار شبکه	افقی در همه حال	برای شروع جمع شد، افقی بالای نقاط شکست
عرض ظرف	هیچکدام (خودکار)	750 پیکسل	970 پیکسل	1170 پیکسل
پیشوند کلاس	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# ستون	12
عرض ستون	خودکار	~ 62 پیکسل	~ 81 پیکسل	~ 97 پیکسل
عرض ناودان	30 پیکسل (15 پیکسل در هر طرف یک ستون)
تودرتو	آره
افست	آره
ترتیب ستون	آره

مثال: انباشته به افقی

با استفاده از یک مجموعه واحد از .col-md-*کلاس‌های شبکه، می‌توانید یک سیستم شبکه اصلی ایجاد کنید که قبل از اینکه در دستگاه‌های رومیزی (متوسط) افقی شود، روی دستگاه‌های تلفن همراه و تبلت‌ها (محدوده بسیار کوچک تا کوچک) انباشته شروع می‌شود. ستون های شبکه را در هر کدام قرار دهید .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

مثال: ظرف مایع

با تغییر بیرونی‌ترین طرح‌بندی شبکه‌ای با عرض ثابت، به یک طرح‌بندی با عرض کامل تبدیل .containerکنید .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

مثال: موبایل و دسکتاپ

آیا نمی خواهید ستون های شما به سادگی در دستگاه های کوچکتر جمع شوند؟ .col-xs-* .col-md-*با اضافه کردن به ستون های خود، از کلاس های شبکه دستگاه های کوچک و متوسط اضافی استفاده کنید. برای درک بهتر نحوه کارکرد آن به مثال زیر مراجعه کنید.

col-xs-12 .col-md-8

col-xs-6 .col-md-4

.col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

مثال: موبایل، تبلت، دسکتاپ

با ایجاد طرح‌بندی‌های پویاتر و قدرتمندتر با .col-sm-*کلاس‌های تبلت، از مثال قبلی استفاده کنید.

col-xs-12 .col-sm-6 .col-md-8

col-xs-6 .col-md-4

col-xs-6 .col-sm-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

مثال: پیچیدن ستون

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

.col-xs-9

.col-xs-4
از آنجایی که 9 + 4 = 13 > 12، این div 4 ستونی در یک خط جدید به عنوان یک واحد پیوسته پیچیده می شود.

.col-xs-6
ستون های بعدی در امتداد خط جدید ادامه می یابند.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

ستون پاسخگو بازنشانی می شود

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

col-xs-6 .col-sm-3
اندازه نمای خود را تغییر دهید یا به عنوان مثال آن را در تلفن خود بررسی کنید.

col-xs-6 .col-sm-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

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

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

تنظیم ستون ها

.col-md-offset-*با استفاده از کلاس ها، ستون ها را به سمت راست حرکت دهید . این کلاس ها حاشیه سمت چپ یک ستون را با *ستون افزایش می دهند. به عنوان مثال، روی چهار ستون .col-md-offset-4حرکت می کند ..col-md-4

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

همچنین می‌توانید افست‌های سطوح شبکه پایین‌تر را با .col-*-offset-0کلاس‌ها لغو کنید.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

ستون های تودرتو

برای قرار دادن محتوای خود با شبکه پیش‌فرض، یک ستون جدید .rowو مجموعه‌ای از .col-sm-*ستون‌ها را در یک ستون موجود اضافه .col-sm-*کنید. ردیف‌های تودرتو باید شامل مجموعه‌ای از ستون‌ها باشد که مجموع آنها ۱۲ یا کمتر است (الزامی نیست که از همه ۱۲ ستون موجود استفاده کنید).

سطح 1: .col-sm-9

سطح 2: .col-xs-8 .col-sm-6

سطح 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

ترتیب ستون

به راحتی ترتیب ستون های شبکه داخلی خود را با کلاس های اصلاح کننده .col-md-push-*و اصلاح کننده تغییر دهید..col-md-pull-*

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

میکس و متغیر کمتر

علاوه بر کلاس‌های شبکه‌ای از پیش ساخته شده برای طرح‌بندی‌های سریع، Bootstrap شامل متغیرها و ترکیب‌های کمتری برای تولید سریع طرح‌بندی‌های ساده و معنایی خود می‌شود.

متغیرها

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

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

مخلوط ها

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

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

مثال استفاده

می توانید متغیرها را به مقادیر سفارشی خود تغییر دهید یا فقط از میکس ها با مقادیر پیش فرض خود استفاده کنید. در اینجا نمونه ای از استفاده از تنظیمات پیش فرض برای ایجاد یک طرح بندی دو ستونی با فاصله بین آنها آورده شده است.

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

سرفصل ها

تمام عناوین HTML، <h1>از طریق <h6>، در دسترس هستند. .h1کلاس های through .h6نیز در دسترس هستند، برای زمانی که می خواهید سبک فونت یک عنوان را مطابقت دهید اما همچنان می خواهید متن شما به صورت خطی نمایش داده شود.

h1. عنوان بوت استرپ	نیمه پررنگ 36 پیکسل
h2. عنوان بوت استرپ	نیمه پررنگ 30 پیکسل
h3. عنوان بوت استرپ	نیمه پررنگ 24 پیکسل
h4. عنوان بوت استرپ	نیمه پررنگ 18 پیکسل
h5. عنوان بوت استرپ	نیمه پررنگ 14 پیکسل
h6. عنوان بوت استرپ	نیمه پررنگ 12 پیکسل

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

با یک <small>تگ عمومی یا .smallکلاس، متنی سبکتر و ثانویه در هر عنوانی ایجاد کنید.

h1. عنوان بوت استرپ متن ثانویه

h2. عنوان بوت استرپ متن ثانویه

h3. عنوان بوت استرپ متن ثانویه

h4. عنوان بوت استرپ متن ثانویه

h5. عنوان بوت استرپ متن ثانویه

h6. عنوان بوت استرپ متن ثانویه

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

کپی بدنه

پیش‌فرض جهانی بوت استرپ 14 پیکسل با 1.428font-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 : @font-size-baseو @line-height-base. اولی اندازه فونت پایه است که در سرتاسر استفاده می شود و دومی ارتفاع خط پایه است. ما از آن متغیرها و مقداری ریاضی ساده برای ایجاد حاشیه‌ها، بالشتک‌ها و ارتفاع‌های خط از همه نوع خود و موارد دیگر استفاده می‌کنیم. آنها را سفارشی کنید و Bootstrap سازگار می شود.

عناصر متن درون خطی

متن علامت گذاری شده

برای برجسته کردن یک متن به دلیل ارتباط آن در زمینه دیگر، از <mark>تگ استفاده کنید.

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

You can use the mark tag to <mark>highlight</mark> text.

متن حذف شده

برای نشان دادن بلوک های متنی که حذف شده اند از <del>تگ استفاده کنید.

~~این خط متن به عنوان متن حذف شده در نظر گرفته می شود.~~

<del>This line of text is meant to be treated as deleted text.</del>

متن خط خورده

برای نشان دادن بلوک های متنی که دیگر مرتبط نیستند از <s>تگ استفاده کنید.

~~این خط از متن قرار است دیگر دقیق نباشد.~~

<s>This line of text is meant to be treated as no longer accurate.</s>

متن درج شده

برای نشان دادن اضافات به سند از <ins>برچسب استفاده کنید.

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

<ins>This line of text is meant to be treated as an addition to the document.</ins>

متن خط دار

برای خط کشیدن زیر متن از <u>تگ استفاده کنید.

این خط متن به صورت زیرخط دار ارائه می شود

<u>This line of text will render as underlined</u>

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

متن کوچک

برای حذف تاکید درون خطی یا بلوک‌های متن، از <small>برچسب استفاده کنید تا متن را در 85% اندازه اصلی تنظیم کنید. عناصر سرفصل خود را font-sizeبرای <small>عناصر تو در تو دریافت می کنند.

می‌توانید .smallبه جای هر عنصر از یک عنصر درون خطی استفاده کنید <small>.

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

<small>This line of text is meant to be treated as fine print.</small>

پررنگ

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

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

<strong>rendered as bold text</strong>

حروف کج

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

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

<em>rendered as italicized text</em>

عناصر جایگزین

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

کلاس های تراز

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

متن تراز چپ.

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

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

متن موجه

بدون متن بسته بندی

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

کلاس های تحول

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

متن با حروف کوچک.

متن بزرگ.

متن با حروف بزرگ.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

اختصارات

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

مخفف اصلی

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

<abbr title="attribute">attr</abbr>

ابتکار گرایی

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

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

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

آدرس ها

اطلاعات تماس نزدیکترین جد یا کل مجموعه کار را ارائه دهید. حفظ قالب بندی با پایان دادن به تمام خطوط با <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

نام کامل
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</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. Integer posuere erat a ante.</p>
</blockquote>

گزینه های Blockquote

تغییر سبک و محتوا برای تغییرات ساده در یک استاندارد <blockquote>.

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

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

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

شخصی معروف در عنوان منبع

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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

.blockquote-reverseبرای یک بلوک نقل قول با محتوای راست چین اضافه کنید.

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

شخصی معروف در عنوان منبع

<blockquote class="blockquote-reverse">
  ...
</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="list-unstyled">
  <li>...</li>
</ul>

درون خطی

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

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

<ul class="list-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>کنار هم بنویسید. به صورت انباشته مانند sهای پیش فرض شروع می شود <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>باید به صورت خطی پیچیده شود.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

ورودی کاربر

برای <kbd>نشان دادن ورودی هایی که معمولاً از طریق صفحه کلید وارد می شوند از علامت استفاده کنید.

برای تغییر دایرکتوری ها، cdنام دایرکتوری را تایپ کنید.
برای ویرایش تنظیمات، فشار دهید ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

بلوک اصلی

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

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

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

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

متغیرها

برای نشان دادن متغیرها از <var>تگ استفاده کنید.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

خروجی نمونه

برای نشان دادن بلوک های خروجی نمونه از یک برنامه از <samp>تگ استفاده کنید.

این متن به عنوان خروجی نمونه از یک برنامه کامپیوتری در نظر گرفته می شود.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

مثال اساسی

برای یک ظاهر طراحی اولیه - بالشتک های سبک و فقط تقسیم کننده های افقی - کلاس پایه را .tableبه هر کدام اضافه کنید <table>. ممکن است فوق العاده زائد به نظر برسد، اما با توجه به استفاده گسترده از جداول برای سایر افزونه ها مانند تقویم و انتخابگر تاریخ، ما تصمیم گرفتیم سبک های جدول سفارشی خود را جدا کنیم.

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

<table class="table">
  ...
</table>

ردیف های راه راه

برای .table-stripedافزودن خط گورخر به هر ردیف جدول در داخل <tbody>.

سازگاری بین مرورگرها

جداول راه راه از طریق :nth-childانتخابگر CSS که در اینترنت اکسپلورر 8 موجود نیست، استایل بندی می شوند.

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

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

میز حاشیه دار

.table-borderedحاشیه ها را در همه طرف جدول و سلول ها اضافه کنید.

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

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

ردیف‌ها را شناور کنید

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

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

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

میز متراکم

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

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

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

کلاس های متنی

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

کلاس	شرح
`.active`	رنگ شناور را روی یک ردیف یا سلول خاص اعمال می کند
`.success`	نشان دهنده یک اقدام موفق یا مثبت است
`.info`	یک تغییر یا اقدام آموزنده خنثی را نشان می دهد
`.warning`	هشداری را نشان می دهد که ممکن است نیاز به توجه داشته باشد
`.danger`	یک عمل خطرناک یا بالقوه منفی را نشان می دهد

#	عنوان ستون	عنوان ستون	عنوان ستون
1	محتوای ستون	محتوای ستون	محتوای ستون
2	محتوای ستون	محتوای ستون	محتوای ستون
3	محتوای ستون	محتوای ستون	محتوای ستون
4	محتوای ستون	محتوای ستون	محتوای ستون
5	محتوای ستون	محتوای ستون	محتوای ستون
6	محتوای ستون	محتوای ستون	محتوای ستون
7	محتوای ستون	محتوای ستون	محتوای ستون
8	محتوای ستون	محتوای ستون	محتوای ستون
9	محتوای ستون	محتوای ستون	محتوای ستون

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

انتقال معنا به فناوری های کمکی

استفاده از رنگ برای افزودن معنی به یک ردیف جدول یا سلول منفرد فقط یک نشانه بصری ارائه می دهد که به کاربران فناوری های کمکی - مانند صفحه خوان ها - منتقل نمی شود. اطمینان حاصل کنید که اطلاعات مشخص شده با رنگ یا از خود محتوا واضح است (متن قابل مشاهده در ردیف/سلول جدول مربوطه)، یا از طریق ابزارهای جایگزین، مانند متن اضافی پنهان شده با .sr-onlyکلاس، گنجانده شده است.

جداول پاسخگو

جداول پاسخگو را با قرار دادن هر یک .tableدر داخل .table-responsiveآن ایجاد کنید تا آنها را به صورت افقی در دستگاه های کوچک (زیر 768 پیکسل) حرکت دهید. هنگام مشاهده هر چیزی بزرگتر از 768 پیکسل، هیچ تفاوتی در این جداول نخواهید دید.

برش عمودی / برش

جداول ریسپانسیو از استفاده overflow-y: hiddenمی‌کنند که هر محتوایی را که فراتر از لبه‌های پایین یا بالای جدول است، حذف می‌کند. به طور خاص، این می تواند منوهای کشویی و سایر ویجت های شخص ثالث را حذف کند.

فایرفاکس و مجموعه فیلدها

فایرفاکس دارای یک استایل ناخوشایند مجموعه فیلدها است widthکه با جدول پاسخگو تداخل دارد. بدون هک مخصوص فایرفاکس که در بوت استرپ ارائه نمی کنیم، نمی توان این مورد را لغو کرد:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

برای اطلاعات بیشتر، این پاسخ Stack Overflow را بخوانید .

#	عنوان جدول	عنوان جدول	عنوان جدول	عنوان جدول	عنوان جدول	عنوان جدول
1	سلول جدول	سلول جدول	سلول جدول	سلول جدول	سلول جدول	سلول جدول
2	سلول جدول	سلول جدول	سلول جدول	سلول جدول	سلول جدول	سلول جدول
3	سلول جدول	سلول جدول	سلول جدول	سلول جدول	سلول جدول	سلول جدول

#	عنوان جدول	عنوان جدول	عنوان جدول	عنوان جدول	عنوان جدول	عنوان جدول
1	سلول جدول	سلول جدول	سلول جدول	سلول جدول	سلول جدول	سلول جدول
2	سلول جدول	سلول جدول	سلول جدول	سلول جدول	سلول جدول	سلول جدول
3	سلول جدول	سلول جدول	سلول جدول	سلول جدول	سلول جدول	سلول جدول

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

مثال اساسی

کنترل های فرم فردی به طور خودکار برخی از یک ظاهر طراحی کلی را دریافت می کنند. همه متنی <input>، <textarea>و <select>عناصر با .form-controlبه width: 100%;طور پیش فرض روی تنظیم شده اند. برچسب ها و کنترل ها را .form-groupبرای فاصله بهینه در آن بپیچید.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

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

گروه های فرم را مستقیماً با گروه های ورودی مخلوط نکنید . در عوض، گروه ورودی را در داخل گروه فرم قرار دهید.

فرم درون خطی

برای کنترل‌های تراز چپ و بلوک درون خطی، به فرم خود اضافه .form-inlineکنید (که لازم نیست یک باشد ). این فقط برای فرم‌هایی که در ویوپورت‌ها هستند اعمال می‌شود که حداقل 768 پیکسل عرض دارند.<form>

ممکن است به عرض های سفارشی نیاز داشته باشد

ورودی ها و انتخاب ها width: 100%;به طور پیش فرض در Bootstrap اعمال شده اند. در فرم‌های درون خطی، آن را به طوری تنظیم می‌کنیم که width: auto;چندین کنترل در یک خط قرار گیرند. بسته به طرح شما، ممکن است به عرض های سفارشی اضافی نیاز باشد.

همیشه برچسب ها را اضافه کنید

اگر برای هر ورودی برچسبی وارد نکنید، صفحه‌خوان‌ها با فرم‌های شما مشکل خواهند داشت. برای این فرم‌های درون خطی، می‌توانید برچسب‌ها را با استفاده از .sr-onlyکلاس پنهان کنید. روش‌های جایگزین دیگری برای ارائه برچسب برای فناوری‌های کمکی، مانند aria-labelویژگی aria-labelledbyیا titleویژگی وجود دارد. اگر هیچ یک از این موارد وجود نداشته باشد، صفحه خوان ها ممکن است در صورت وجود از این placeholderویژگی استفاده کنند، اما توجه داشته باشید که استفاده از آن placeholderبه عنوان جایگزینی برای سایر روش های برچسب گذاری توصیه نمی شود.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

فرم افقی

از کلاس‌های شبکه از پیش تعریف‌شده Bootstrap برای تراز کردن برچسب‌ها و گروه‌های کنترل‌های فرم در یک طرح افقی با افزودن .form-horizontalبه فرم (که لازم نیست یک باشد <form>) استفاده کنید. با انجام این کار، .form-groupرفتار s مانند ردیف های شبکه ای تغییر می کند، بنابراین نیازی به .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

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

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

ورودی ها

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

اعلام نوع مورد نیاز است

ورودی‌ها تنها در صورتی به‌طور کامل استایل‌بندی می‌شوند که typeبه درستی اعلام شده باشند.

<input type="text" class="form-control" placeholder="Text input">

گروه های ورودی

برای افزودن متن یا دکمه‌های یکپارچه قبل و/یا بعد از هر متنی <input>، مؤلفه گروه ورودی را بررسی کنید .

Textarea

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

<textarea class="form-control" rows="3"></textarea>

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

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

چک باکس‌ها و رادیوهای غیرفعال پشتیبانی می‌شوند، اما برای ارائه مکان‌نمای «غیر مجاز» در شناور والد <label>، باید .disabledکلاس را به والد .radio، .radio-inline, .checkboxیا , اضافه کنید .checkbox-inline.

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

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

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

برای کنترل هایی که در همان خط ظاهر می شوند، از .checkbox-inlineیا کلاس ها در یک سری از چک باکس ها یا رادیوها استفاده کنید..radio-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>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

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

اگر متنی در داخل نداشته باشید <label>، ورودی همانطور که انتظار دارید قرار می گیرد. در حال حاضر فقط روی چک باکس‌ها و رادیوهای غیرخطی کار می‌کند. به یاد داشته باشید که هنوز نوعی برچسب برای فناوری های کمکی ارائه دهید (به عنوان مثال، استفاده از aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

انتخاب می کند

توجه داشته باشید که بسیاری از منوهای انتخابی بومی - یعنی در Safari و Chrome - دارای گوشه های گرد هستند که نمی توان آنها را از طریق border-radiusویژگی ها تغییر داد.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

برای <select>کنترل های دارای multipleویژگی، چندین گزینه به طور پیش فرض نشان داده می شوند.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

کنترل استاتیک

هنگامی که نیاز دارید متن ساده را در کنار برچسب فرم در یک فرم قرار دهید، از .form-control-staticکلاس در یک فرم استفاده کنید <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

حالت تمرکز

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

`:focus`حالت نمایشی

ورودی مثال بالا از سبک های سفارشی در مستندات ما برای نشان دادن :focusوضعیت در یک .form-controlاستفاده می کند.

حالت غیر فعال

disabledبرای جلوگیری از تعاملات کاربر، ویژگی بولین را در ورودی اضافه کنید. ورودی های غیرفعال سبک تر به نظر می رسند و یک not-allowedمکان نما اضافه می کنند.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

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

disabledویژگی را به a اضافه <fieldset>کنید تا همه کنترل‌های درون آن به‌طور هم‌زمان غیرفعال <fieldset>شود.

هشدار در مورد عملکرد پیوند`<a>`

به‌طور پیش‌فرض، مرورگرها تمام کنترل‌های فرم ( <input>و عناصر) داخل a را غیرفعال می‌کنند <select>و از تعاملات صفحه‌کلید و ماوس روی آن‌ها جلوگیری می‌کنند. با این حال، اگر فرم شما شامل عناصر نیز باشد، به آنها فقط سبکی از . همانطور که در بخش مربوط به وضعیت غیرفعال برای دکمه‌ها (و به طور خاص در بخش فرعی عناصر لنگر) ذکر شد، این ویژگی CSS هنوز استاندارد نشده است و در Opera 18 و پایین‌تر، یا اینترنت اکسپلورر 11 به طور کامل پشتیبانی نمی‌شود و برنده شده است. از تمرکز یا فعال کردن این پیوندها توسط کاربران صفحه کلید جلوگیری کنید. بنابراین برای ایمن بودن، از جاوا اسکریپت سفارشی برای غیرفعال کردن چنین پیوندهایی استفاده کنید.<button><fieldset disabled><a ... class="btn btn-*">pointer-events: none

سازگاری بین مرورگرها

در حالی که بوت استرپ این سبک‌ها را در همه مرورگرها اعمال می‌کند، اینترنت اکسپلورر 11 و پایین‌تر به طور کامل از disabledویژگی روی یک پشتیبانی نمی‌کند <fieldset>. از جاوا اسکریپت سفارشی برای غیرفعال کردن مجموعه فیلدها در این مرورگرها استفاده کنید.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

حالت فقط خواندنی

readonlyبرای جلوگیری از تغییر مقدار ورودی، ویژگی بولی را روی یک ورودی اضافه کنید . ورودی‌های فقط خواندنی سبک‌تر به نظر می‌رسند (درست مانند ورودی‌های غیرفعال)، اما مکان‌نمای استاندارد را حفظ می‌کنند.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

متن راهنما

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

ارتباط متن راهنما با کنترل‌های فرم

متن راهنما باید صریحاً با کنترل فرم مربوط به استفاده از aria-describedbyویژگی مرتبط باشد. این اطمینان حاصل می کند که فناوری های کمکی - مانند صفحه خوان ها - این متن راهنما را هنگامی که کاربر تمرکز می کند یا وارد کنترل می شود، اعلام می کند.

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

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

بوت استرپ شامل سبک های اعتبارسنجی برای حالت های خطا، هشدار و موفقیت در کنترل های فرم است. برای استفاده، افزودن .has-warning، .has-errorیا .has-successبه عنصر والد. هر .control-label، .form-controlو .help-blockدر آن عنصر، سبک های اعتبارسنجی را دریافت می کند.

انتقال وضعیت اعتبارسنجی به فناوری های کمکی و کاربران کوررنگ

استفاده از این سبک‌های اعتبارسنجی برای نشان دادن وضعیت کنترل فرم تنها نشانه‌ای بصری و مبتنی بر رنگ را ارائه می‌دهد که به کاربران فناوری‌های کمکی - مانند صفحه‌خوان‌ها - یا کاربران کوررنگ منتقل نمی‌شود.

اطمینان حاصل کنید که یک نشانه جایگزین از وضعیت نیز ارائه شده است. به عنوان مثال، می‌توانید یک راهنمایی در مورد وضعیت در <label>خود متن کنترل فرم قرار دهید (همانطور که در مثال کد زیر وجود دارد)، یک Glyphicon (با متن جایگزین مناسب با استفاده از .sr-onlyکلاس - به مثال‌های Glyphicon مراجعه کنید )، یا با ارائه یک بلوک متن راهنما اضافی به طور خاص برای فناوری های کمکی، به کنترل های فرم نامعتبر نیز می توان یک aria-invalid="true"ویژگی اختصاص داد.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

با آیکون های اختیاری

همچنین می توانید نمادهای بازخورد اختیاری را با اضافه کردن .has-feedbackو نماد سمت راست اضافه کنید.

نمادهای بازخورد فقط با <input class="form-control">عناصر متنی کار می کنند.

نمادها، برچسب ها و گروه های ورودی

موقعیت یابی دستی نمادهای بازخورد برای ورودی های بدون برچسب و برای گروه های ورودی با افزونه در سمت راست مورد نیاز است. شما قویاً تشویق می‌شوید به دلایل دسترسی، برچسب‌هایی را برای همه ورودی‌ها ارائه دهید. اگر می خواهید از نمایش برچسب ها جلوگیری کنید، آنها را با .sr-onlyکلاس پنهان کنید. اگر باید بدون برچسب کار کنید، topمقدار نماد بازخورد را تنظیم کنید. برای گروه های ورودی، rightبسته به عرض افزونه، مقدار را به مقدار پیکسل مناسب تنظیم کنید.

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

برای اطمینان از اینکه فناوری‌های کمکی - مانند صفحه‌خوان‌ها - به درستی معنای یک نماد را منتقل می‌کنند، متن پنهان اضافی باید با .sr-onlyکلاس اضافه شود و صریحاً با کنترل فرم مربوط به استفاده از آن مرتبط شود aria-describedby. از طرف دیگر، اطمینان حاصل کنید که معنی (به عنوان مثال، این واقعیت است که یک هشدار برای یک فیلد ورودی متن خاص وجود دارد) به شکل دیگری منتقل می شود، مانند تغییر متن واقعی <label>مرتبط با کنترل فرم.

اگرچه نمونه‌های زیر وضعیت اعتبارسنجی کنترل‌های فرم مربوطه را در <label>خود متن ذکر می‌کنند، تکنیک بالا (با استفاده از .sr-onlyمتن و aria-describedby) برای اهداف توضیحی گنجانده شده است.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

آیکون های اختیاری در فرم های افقی و درون خطی

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

آیکون های اختیاری با `.sr-only`برچسب های مخفی

اگر از .sr-onlyکلاس برای مخفی کردن یک کنترل فرم استفاده می کنید <label>(به جای استفاده از سایر گزینه های برچسب گذاری، مانند aria-labelویژگی)، بوت استرپ به صورت خودکار موقعیت نماد را پس از اضافه شدن تنظیم می کند.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

کنترل اندازه

ارتفاع ها را با استفاده از کلاس هایی مانند .input-lgتنظیم کنید و عرض ها را با استفاده از کلاس های ستون شبکه مانند تنظیم .col-lg-*کنید.

اندازه قد

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

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

اندازه های گروه فرم افقی

.form-horizontalبا افزودن .form-group-lgیا .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

اندازه ستون

ورودی ها را در ستون های شبکه یا هر عنصر والد سفارشی بپیچید تا به راحتی عرض های مورد نظر را اعمال کنید.

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

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

از کلاس های دکمه در یک <a>، <button>یا <input>عنصر استفاده کنید.

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

استفاده از زمینه خاص

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

پیوندهایی که به عنوان دکمه عمل می کنند

اگر از <a>عناصر به عنوان دکمه‌ها استفاده می‌شود - به جای پیمایش به سند یا بخش دیگری در صفحه فعلی، عملکردهای درون صفحه را فعال می‌کنند - باید به آنها یک علامت مناسب نیز داده شود role="button".

رندر بین مرورگر

به عنوان بهترین روش، ما به شدت توصیه می‌کنیم تا <button>حد امکان از عنصر برای اطمینان از تطابق رندر بین مرورگرها استفاده کنید.

در میان چیزهای دیگر، یک اشکال در فایرفاکس <30 وجود دارد که ما را از تنظیم دکمه‌های مبتنی بر جلوگیری می‌کند line-heightو <input>باعث می‌شود آنها دقیقاً با ارتفاع دکمه‌های دیگر در فایرفاکس مطابقت نداشته باشند.

گزینه ها

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

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

انتقال معنا به فناوری های کمکی

استفاده از رنگ برای افزودن معنی به یک دکمه فقط یک نشانه بصری ارائه می دهد که به کاربران فناوری های کمکی - مانند صفحه خوان ها - منتقل نمی شود. اطمینان حاصل کنید که اطلاعات مشخص شده با رنگ یا از خود محتوا واضح است (متن قابل مشاهده دکمه)، یا از طریق ابزارهای جایگزین، مانند متن اضافی پنهان شده با .sr-onlyکلاس، گنجانده شده است.

اندازه ها

دکمه های بزرگتر یا کوچکتر را دوست دارید؟ .btn-lg، .btn-smیا .btn-xsبرای اندازه های اضافی اضافه کنید .

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

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

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

حالت فعال

هنگامی که فعال است، دکمه‌ها فشار داده شده (با پس‌زمینه تیره‌تر، حاشیه تیره‌تر، و سایه داخلی) ظاهر می‌شوند. برای <button>عناصر، این کار از طریق انجام می شود :active. برای <a>عناصر، این کار با انجام می شود .active. با این حال، در صورت نیاز به تکرار حالت فعال به صورت برنامه‌ریزی ، می‌توانید از .activeروی <button>s استفاده کنید (و ویژگی را در آن لحاظ کنید).aria-pressed="true"

عنصر دکمه

نیازی به اضافه کردن :activeنیست، زیرا یک کلاس شبه است، اما اگر نیاز به اعمال همان ظاهر دارید، ادامه دهید و اضافه کنید .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

عنصر لنگر

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

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

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

حالت غیر فعال

دکمه‌ها را با محو کردن آنها غیرقابل کلیک جلوه دهید opacity.

عنصر دکمه

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

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

سازگاری بین مرورگرها

اگر disabledویژگی را به a اضافه کنید <button>، اینترنت اکسپلورر 9 و پایین تر، متن را خاکستری با سایه متنی بد نشان می دهد که ما نمی توانیم آن را برطرف کنیم.

عنصر لنگر

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

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

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

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

هشدار عملکرد پیوند

این کلاس pointer-events: noneبرای غیرفعال کردن عملکرد پیوند <a>s استفاده می کند، اما این ویژگی CSS هنوز استاندارد نشده است و به طور کامل در Opera 18 و پایین تر یا اینترنت اکسپلورر 11 پشتیبانی نمی شود. علاوه بر این، حتی در مرورگرهایی که پشتیبانی می کنند pointer-events: none، صفحه کلید ناوبری بی‌تأثیر باقی می‌ماند، به این معنی که کاربران صفحه‌کلید بینا و کاربران فناوری‌های کمکی همچنان می‌توانند این پیوندها را فعال کنند. بنابراین برای ایمن بودن، از جاوا اسکریپت سفارشی برای غیرفعال کردن چنین پیوندهایی استفاده کنید.

تصاویر واکنش گرا

تصاویر موجود در Bootstrap 3 را می‌توان با افزودن .img-responsiveکلاس به صورت واکنش‌گرا درآورد. این و برای تصویر اعمال max-width: 100%;می شود تا به خوبی به عنصر والد مقیاس شود.height: auto;display: block;

برای وسط تصاویری که از .img-responsiveکلاس استفاده می کنند، .center-blockبه جای .text-center. برای جزئیات بیشتر در مورد استفاده، به بخش کلاس های کمکی مراجعه کنید ..center-block

تصاویر SVG و IE 8-10

در اینترنت اکسپلورر 8-10، تصاویر SVG دارای .img-responsiveاندازه نامتناسب هستند. برای رفع این مشکل، width: 100% \9;جایی که لازم است اضافه کنید. بوت استرپ این را به طور خودکار اعمال نمی کند زیرا باعث ایجاد عوارض در سایر فرمت های تصویر می شود.

<img src="..." class="img-responsive" alt="Responsive image">

اشکال تصویر

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

سازگاری بین مرورگرها

به خاطر داشته باشید که اینترنت اکسپلورر 8 از گوشه های گرد پشتیبانی نمی کند.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

رنگ های متنی

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

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

Nullam id dolor id nibh ultrices vehicula ut id elit.

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

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

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

گاهی اوقات به دلیل ویژگی انتخابگر دیگری نمی توان کلاس های تاکیدی را اعمال کرد. در بیشتر موارد، یک راه حل کافی این است که متن خود را در یک <span>کلاس قرار دهید.

انتقال معنا به فناوری های کمکی

استفاده از رنگ برای افزودن معنی فقط یک نشانه بصری ارائه می دهد که به کاربران فناوری های کمکی - مانند صفحه خوان ها - منتقل نمی شود. اطمینان حاصل کنید که اطلاعات مشخص شده با رنگ یا از خود محتوا واضح است (رنگ های متنی فقط برای تقویت معنایی استفاده می شوند که قبلاً در متن/نشانه گذاری وجود دارد)، یا از طریق ابزارهای جایگزین، مانند متن اضافی پنهان شده با .sr-onlyکلاس ، گنجانده شده است. .

پس زمینه های متنی

مشابه کلاس های رنگ متن متنی، به راحتی پس زمینه یک عنصر را روی هر کلاس متنی تنظیم کنید. اجزای Anchor در حالت شناور مانند کلاس‌های متن تیره می‌شوند.

Nullam id dolor id nibh ultrices vehicula ut id elit.

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

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

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

گاهی اوقات کلاس‌های پس‌زمینه متنی به دلیل ویژگی انتخابگر دیگری قابل اعمال نیستند. در برخی موارد، یک راه حل کافی این است که محتوای عنصر خود را در یک <div>با کلاس قرار دهید.

انتقال معنا به فناوری های کمکی

مانند رنگ‌های متنی ، اطمینان حاصل کنید که هر معنایی که از طریق رنگ منتقل می‌شود در قالبی نیز منتقل شود که صرفاً نمایشی نباشد.

نماد بستن

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

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

کارتس

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

<span class="caret"></span>

شناورهای سریع

یک عنصر را با یک کلاس به چپ یا راست شناور کنید. !importantبرای جلوگیری از مسائل اختصاصی گنجانده شده است. از کلاس ها می توان به عنوان میکسین نیز استفاده کرد.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

بلوک های محتوا را در مرکز قرار دهید

یک عنصر را روی display: blockو مرکز از طریق تنظیم کنید margin. به صورت میکس و کلاس موجود است.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

روشن کنید

floatبا افزودن .clearfix به عنصر والد، s را به راحتی پاک کنید . از micro clearfix که توسط Nicolas Gallagher رایج شده است، استفاده می کند. به عنوان میکسن نیز قابل استفاده است.

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

نمایش و پنهان کردن مطالب

با استفاده از و کلاس‌ها ، یک عنصر را مجبور کنید که نشان داده یا پنهان شود ( از جمله برای صفحه‌خوان‌ها ). این کلاس‌ها برای جلوگیری از تضادهای اختصاصی استفاده می‌کنند، درست مانند شناورهای سریع . آنها فقط برای تغییر سطح بلوک در دسترس هستند. آنها همچنین می توانند به عنوان مخلوط استفاده شوند..show.hidden!important

.hideدر دسترس است، اما همیشه بر روی صفحه‌خوان‌ها تأثیر نمی‌گذارد و از نسخه 3.0.1 منسوخ شده است . استفاده کنید .hiddenیا .sr-onlyبه جای آن.

علاوه بر این، .invisibleمی‌توان از آن برای displayتغییر حالت دید یک عنصر استفاده کرد، به این معنی که تغییری در آن صورت نگرفته و عنصر همچنان می‌تواند بر جریان سند تأثیر بگذارد.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

صفحه خوان و محتوای ناوبری صفحه کلید

پنهان کردن یک عنصر در همه دستگاه‌ها به جز صفحه‌خوان‌های با .sr-only. .sr-onlyبا ترکیب .sr-only-focusableکنید تا وقتی عنصر فوکوس می‌شود، دوباره نشان داده شود (مثلاً توسط یک کاربر فقط صفحه‌کلید). برای دنبال کردن بهترین شیوه های دسترسی ضروری است . همچنین می تواند به عنوان میکسین استفاده شود.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

جایگزینی تصویر

از .text-hideکلاس یا میکسین برای کمک به جایگزینی محتوای متنی یک عنصر با تصویر پس‌زمینه استفاده کنید.

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

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

سعی کنید از این موارد به صورت محدود استفاده کنید و از ایجاد نسخه های کاملاً متفاوت از یک سایت خودداری کنید. در عوض، از آنها برای تکمیل نمایش هر دستگاه استفاده کنید.

کلاس های موجود

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

	دستگاه های بسیار کوچکتلفن‌ها (<768 پیکسل)	دستگاه های کوچکرایانه لوحی (≥768 پیکسل)	دستگاه های متوسطدسکتاپ (≥992px)	دستگاه های بزرگرومیزی (≥1200 پیکسل)
`.visible-xs-*`	قابل رویت	پنهان شده است	پنهان شده است	پنهان شده است
`.visible-sm-*`	پنهان شده است	قابل رویت	پنهان شده است	پنهان شده است
`.visible-md-*`	پنهان شده است	پنهان شده است	قابل رویت	پنهان شده است
`.visible-lg-*`	پنهان شده است	پنهان شده است	پنهان شده است	قابل رویت
`.hidden-xs`	پنهان شده است	قابل رویت	قابل رویت	قابل رویت
`.hidden-sm`	قابل رویت	پنهان شده است	قابل رویت	قابل رویت
`.hidden-md`	قابل رویت	قابل رویت	پنهان شده است	قابل رویت
`.hidden-lg`	قابل رویت	قابل رویت	قابل رویت	پنهان شده است

از نسخه 3.2.0، .visible-*-*کلاس‌های هر نقطه شکست در سه تغییر وجود دارد، یکی برای هر displayمقدار ویژگی CSS که در زیر فهرست شده است.

گروه کلاس ها	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

بنابراین، برای xsصفحات بسیار کوچک ( ) برای مثال، .visible-*-*کلاس های موجود عبارتند از: .visible-xs-block, .visible-xs-inlineو .visible-xs-inline-block.

کلاس های .visible-xs, .visible-sm, .visible-mdو .visible-lgنیز وجود دارند، اما از نسخه 3.2.0 منسوخ شده اند . آنها تقریباً معادل هستند .visible-*-block، به جز موارد خاص اضافی برای <table>جابجایی عناصر مرتبط.

کلاس های چاپ

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

کلاس ها	مرورگر	چاپ
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	پنهان شده است	قابل رویت
`.hidden-print`	قابل رویت	پنهان شده است

کلاس .visible-printنیز وجود دارد اما از نسخه 3.2.0 منسوخ شده است . تقریباً معادل است .visible-print-block، به جز موارد خاص اضافی برای <table>عناصر مرتبط.

موارد آزمون

اندازه مرورگر خود را تغییر دهید یا در دستگاه های مختلف بارگذاری کنید تا کلاس های ابزار پاسخگو را آزمایش کنید.

قابل مشاهده در ...

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

بسیار کوچک ✔ قابل مشاهده در x-small

کم اهمیت ✔ روی کوچک قابل مشاهده است

متوسط ✔ روی متوسط قابل مشاهده است

بزرگ ✔ قابل مشاهده در ابعاد بزرگ

فوق العاده کوچک و کوچک ✔ قابل مشاهده در x-small و small

متوسط و بزرگ ✔ قابل مشاهده در متوسط و بزرگ

فوق العاده کوچک و متوسط ✔ قابل مشاهده در x-small و medium

کوچک و بزرگ ✔ قابل مشاهده در کوچک و بزرگ

فوق العاده کوچک و بزرگ ✔ قابل مشاهده در x-small و large

کوچک و متوسط ✔ قابل مشاهده در کوچک و متوسط

پنهان شده روی ...

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

بسیار کوچک ✔ پنهان در x-small

کم اهمیت ✔ پنهان روی کوچک

متوسط ✔ پنهان بر روی متوسط

بزرگ ✔ پنهان در بزرگ

فوق العاده کوچک و کوچک ✔ پنهان روی x-small و small

متوسط و بزرگ ✔ پنهان روی متوسط و بزرگ

فوق العاده کوچک و متوسط ✔ پنهان در x-small و medium

کوچک و بزرگ ✔ پنهان روی کوچک و بزرگ

فوق العاده کوچک و بزرگ ✔ پنهان در x-small و large

کوچک و متوسط ✔ پنهان در کوچک و متوسط

CSS بوت استرپ بر روی Less ساخته شده است، یک پیش پردازنده با عملکردهای اضافی مانند متغیرها، میکسین ها و توابع برای کامپایل CSS. کسانی که به دنبال استفاده از فایل‌های منبع Less به جای فایل‌های CSS کامپایل‌شده ما هستند، می‌توانند از متغیرها و ترکیب‌های متعددی که ما در سراسر چارچوب استفاده می‌کنیم استفاده کنند.

متغیرهای گرید و میکسین ها در بخش Grid system پوشش داده شده اند .

کامپایل بوت استرپ

بوت استرپ را می توان حداقل به دو صورت استفاده کرد: با CSS کامپایل شده یا با فایل های منبع Less. برای کامپایل کردن فایل‌های Less، به بخش Getting Started درباره نحوه تنظیم محیط توسعه خود برای اجرای دستورات لازم مراجعه کنید.

ابزارهای کامپایل شخص ثالث ممکن است با Bootstrap کار کنند، اما توسط تیم اصلی ما پشتیبانی نمی شوند.

متغیرها

متغیرها در کل پروژه به عنوان راهی برای متمرکز کردن و به اشتراک گذاشتن مقادیر رایج استفاده شده مانند رنگ‌ها، فاصله‌ها یا پشته‌های قلم استفاده می‌شوند. برای تفکیک کامل، لطفاً به Customizer مراجعه کنید .

رنگ ها

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

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

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

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

داربست

تعداد انگشت شماری از متغیرها برای سفارشی سازی سریع عناصر کلیدی اسکلت سایت شما.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

پیوندها

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

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

توجه داشته باشید که @link-hover-colorاز یک تابع، ابزار عالی دیگر Less برای ایجاد خودکار رنگ شناور مناسب استفاده می کند. می توانید از darken, lighten, saturate, و استفاده کنید desaturate.

تایپوگرافی

با چند متغیر سریع به راحتی حروف، اندازه متن، پیشرو و موارد دیگر را تنظیم کنید. بوت استرپ از اینها نیز برای ارائه میکس های تایپوگرافیک آسان استفاده می کند.

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

نمادها

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

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

اجزاء

کامپوننت ها در سراسر بوت استرپ از برخی متغیرهای پیش فرض برای تنظیم مقادیر مشترک استفاده می کنند. در اینجا متداول ترین موارد استفاده شده است.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

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

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

اندازه جعبه

مدل جعبه اجزای خود را با یک میکس بازنشانی کنید. برای زمینه، این مقاله مفید از موزیلا را ببینید.

mixin از نسخه 3.2.0 با معرفی Autoprefixer منسوخ شده است . برای حفظ سازگاری با عقب، بوت استرپ تا زمانی که نسخه 4 Bootstrap استفاده می کند، به استفاده از میکسین در داخل ادامه می دهد.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

گوشه های گرد

امروزه تمام مرورگرهای مدرن از غیر پیشوند پشتیبانی می کنندborder-radius کنند. به این ترتیب، هیچ .border-radius()میکسی وجود ندارد، اما Bootstrap شامل میانبرهایی برای گرد کردن سریع دو گوشه در یک طرف خاص از یک شی است.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

سایه های باکس (افتاده).

اگر مخاطبان هدف شما از جدیدترین و بهترین مرورگرها و دستگاه‌ها استفاده می‌کنند، حتماً فقط از آن استفاده کنیدbox-shadow ویژگی به تنهایی استفاده می‌کنید. اگر برای دستگاه‌های Android قدیمی (قبل از نسخه 4) و iOS (پیش از iOS 5) به پشتیبانی نیاز دارید، از mixin منسوخ شده برای انتخاب -webkitپیشوند مورد نیاز استفاده کنید.

میکسین از نسخه 3.1.0 منسوخ شده است ، زیرا بوت استرپ به طور رسمی از پلتفرم های قدیمی که ویژگی استاندارد را پشتیبانی نمی کنند، پشتیبانی نمی کند. برای حفظ سازگاری با عقب، بوت استرپ تا زمانی که نسخه 4 Bootstrap استفاده می کند، به استفاده از میکسین در داخل ادامه می دهد.

مطمئن شوید که از rgba()رنگ‌ها در سایه‌های جعبه خود استفاده کنید تا تا حد امکان یکپارچه با پس‌زمینه ترکیب شوند.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

انتقال ها

مخلوط های متعدد برای انعطاف پذیری. تمام اطلاعات انتقال را با یک تنظیم کنید یا در صورت نیاز یک تاخیر و مدت زمان جداگانه مشخص کنید.

میکسین ها از نسخه 3.2.0 با معرفی Autoprefixer منسوخ شده اند . برای حفظ سازگاری با عقب، بوت استرپ تا زمان نسخه 4 بوت استرپ به استفاده از میکسین ها به صورت داخلی ادامه می دهد.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

تحولات

چرخش، مقیاس، ترجمه (حرکت)، یا انحراف هر شی.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

تصاوير متحرك

یک ترکیب واحد برای استفاده از تمام ویژگی‌های انیمیشن CSS3 در یک اعلان و میکس‌های دیگر برای ویژگی‌های فردی.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

کدورت

Opacity را برای همه مرورگرها تنظیم کنید و یک نسخه filterبازگشتی برای IE8 ارائه دهید.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

متن جای جای

زمینه را برای کنترل های فرم در هر فیلد فراهم کنید.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

ستون ها

ایجاد ستون ها از طریق CSS در یک عنصر واحد.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

گرادیان ها

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

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

همچنین می توانید زاویه یک گرادیان خطی دو رنگ استاندارد را مشخص کنید:

#gradient > .directional(#333; #000; 45deg);

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

#gradient > .striped(#333; 45deg);

سطح را بالا ببرید و به جای آن از سه رنگ استفاده کنید. رنگ اول، رنگ دوم، توقف رنگ دوم (مقدار درصدی مانند 25%) و رنگ سوم را با این ترکیب ها تنظیم کنید:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

سر بالا! اگر زمانی نیاز به حذف یک گرادیان داشتید، مطمئن شوید که هر IE را filterکه ممکن است اضافه کرده باشید حذف کنید. می توانید این کار را با استفاده از .reset-filter()میکسین در کنار آن انجام دهید background-image: none;.

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

میکس‌های کاربردی، میکس‌هایی هستند که ویژگی‌های CSS غیرمرتبط را برای دستیابی به یک هدف یا وظیفه خاص ترکیب می‌کنند.

روشن کنید

افزودن class="clearfix"به هر عنصری را فراموش کنید و به جای آن .clearfix()میکسین را در صورت لزوم اضافه کنید. از میکرو شفاف فیکس نیکلاس گالاگر استفاده می کند.

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

مرکز افقی

هر عنصری را به سرعت در والد آن مرکز قرار دهید. نیاز دارد widthیا max-widthباید تنظیم شود.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

کمک کننده های اندازه گیری

ابعاد یک شی را راحت تر مشخص کنید.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

مناطق بافت قابل تغییر اندازه

به راحتی گزینه های تغییر اندازه را برای هر ناحیه متنی یا هر عنصر دیگری پیکربندی کنید. پیش‌فرض به رفتار عادی مرورگر ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

کوتاه کردن متن

به راحتی متن را با بیضی با یک میکس کوتاه کوتاه کنید. به عنصر blockیا inline-blockسطح نیاز دارد.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

تصاویر شبکیه چشم

دو مسیر تصویر و ابعاد تصویر @1x را مشخص کنید و Bootstrap یک درخواست رسانه @2x ارائه می‌کند. اگر تصاویر زیادی برای ارائه دارید، CSS تصویر شبکیه چشم خود را به صورت دستی در یک درخواست رسانه ای بنویسید.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

در حالی که Bootstrap بر روی Less ساخته شده است، یک پورت رسمی Sass نیز دارد . ما آن را در یک مخزن جداگانه GitHub نگهداری می کنیم و به روز رسانی ها را با یک اسکریپت تبدیل مدیریت می کنیم.

چه چیزی گنجانده شده است

از آنجایی که پورت Sass یک مخزن جداگانه دارد و به مخاطبان کمی متفاوت خدمت می کند، محتویات پروژه با پروژه اصلی بوت استرپ تفاوت زیادی دارد. این تضمین می کند که پورت Sass تا حد امکان با بسیاری از سیستم های مبتنی بر Sass سازگار است.

مسیر	شرح
`lib/`	کد سنگ روبی (پیکربندی Sass، ادغام Rails و Compass)
`tasks/`	اسکریپت‌های مبدل (تبدیل در بالادست Less به Sass)
`test/`	تست های تالیفی
`templates/`	مانیفست بسته قطب نما
`vendor/assets/`	فایل های Sass، جاوا اسکریپت و فونت
`Rakefile`	وظایف داخلی، مانند رنک کردن و تبدیل

برای مشاهده عملکرد این فایل ها از مخزن GitHub پورت Sass دیدن کنید.

نصب و راه اندازی

برای اطلاعات در مورد نحوه نصب و استفاده از Bootstrap برای Sass، به مخزن GitHub readme مراجعه کنید . این به روزترین منبع است و شامل اطلاعاتی برای استفاده با پروژه های Rails، Compass و استاندارد Sass است.

بوت استرپ برای Sass

CSS

بررسی اجمالی

HTML5 doctype

اول موبایل

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

Normalize.css

ظروف

سیستم شبکه ای

مقدمه

داستان های رسانه

گزینه های شبکه

مثال: انباشته به افقی

مثال: ظرف مایع

مثال: موبایل و دسکتاپ

مثال: موبایل، تبلت، دسکتاپ

مثال: پیچیدن ستون

ستون پاسخگو بازنشانی می شود

تنظیم ستون ها

ستون های تودرتو

ترتیب ستون

میکس و متغیر کمتر

متغیرها

مخلوط ها

مثال استفاده

تایپوگرافی

سرفصل ها

h1. عنوان بوت استرپ

h2. عنوان بوت استرپ

h3. عنوان بوت استرپ

h4. عنوان بوت استرپ

h5. عنوان بوت استرپ

h6. عنوان بوت استرپ

h1. عنوان بوت استرپ متن ثانویه

h2. عنوان بوت استرپ متن ثانویه

h3. عنوان بوت استرپ متن ثانویه

h4. عنوان بوت استرپ متن ثانویه

h5. عنوان بوت استرپ متن ثانویه

h6. عنوان بوت استرپ متن ثانویه

کپی بدنه

کپی بدنه سرب

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

عناصر متن درون خطی

متن علامت گذاری شده

متن حذف شده

متن خط خورده

متن درج شده

متن خط دار

متن کوچک

پررنگ

حروف کج

عناصر جایگزین

کلاس های تراز

کلاس های تحول

اختصارات

مخفف اصلی

ابتکار گرایی

آدرس ها

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

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

گزینه های Blockquote

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

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

لیست ها

بدون سفارش

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

بی استایل

درون خطی

شرح

توضیحات افقی

کوتاه کردن خودکار

کد

درون خطی

ورودی کاربر

بلوک اصلی

متغیرها

خروجی نمونه

جداول

مثال اساسی

ردیف های راه راه

سازگاری بین مرورگرها

`:focus`حالت نمایشی

هشدار در مورد عملکرد پیوند`<a>`

آیکون های اختیاری با `.sr-only`برچسب های مخفی