lowdown لەسەر پارچە سەرەکییەکانی ژێرخانی Bootstrap بەدەستبهێنە، لەوانەش رێبازی ئێمە بۆ پەرەپێدانی وێبی باشتر، خێراتر، بەهێزتر.

جۆری دۆکیۆمێنتی HTML5

بووتستراپ سوود لە هەندێک توخمەکانی HTML و تایبەتمەندی CSS وەردەگرێت کە پێویستیان بە بەکارهێنانی doctype HTML5 هەیە. لە سەرەتای هەموو پڕۆژەکانتدا بیخە ناوەوە.

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

یەکەم مۆبایل

لەگەڵ Bootstrap 2، ئێمە ستایلە دۆستەکانی مۆبایلی ئیختیاریمان زیاد کرد بۆ لایەنە سەرەکییەکانی چوارچێوەکە. لەگەڵ Bootstrap 3 پڕۆژەکەمان نووسیوەتەوە بۆ ئەوەی هەر لە سەرەتاوە دۆستی مۆبایل بێت. لەبری زیادکردنی لەسەر ستایلە مۆبایلە ئیختیارییەکان، ئەوان ڕاست لەناو ناوەکیدا دەکوڵێنرێن. لە ڕاستیدا Bootstrap یەکەم مۆبایلە . دەتوانرێت ستایلەکانی یەکەمی مۆبایل لە سەرانسەری کتێبخانەکەدا بدۆزرێتەوە لەبری ئەوەی لە فایلە جیاوازەکاندا بدۆزرێتەوە.

بۆ دڵنیابوون لە ڕەندەرکردنی دروست و زوومکردنی دەست لێدان، تاگی مێتای دەرچەی بینین زیاد بکە بۆ <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">

تایپۆگرافی و بەستەرەکان

Bootstrap پیشاندانی بنەڕەتی جیهانی، تایپۆگرافی و شێوازی بەستەرەکان دادەنێت. بە تایبەتی، ئێمە:

دانراوە background-color: #fff;لەسەر...body
@font-family-baseتایبەتمەندیەکانی , @font-size-base, و @line-height-baseوەک بنەمای تایپۆگرافیمان بەکاربهێنە
ڕەنگی بەستەری جیهانی لە ڕێگەی @link-colorو جێبەجێکردنی ژێر هێڵەکانی بەستەر تەنها لەسەر:hover

ئەم ستایلانە دەتوانرێت لەناو scaffolding.less.

ئاساییکردنەوە.css

بۆ باشترکردنی ڕەندەری وێبگەڕی یەکتر، ئێمە Normalize.css بەکاردەهێنین ، پڕۆژەیەک لەلایەن Nicolas Gallagher و Jonathan Neal .

دەفرەکان

بووتستراپ پێویستی بە توخمێکی تێدایە بۆ پێچانی ناوەڕۆکی ماڵپەڕەکە و جێگیرکردنی سیستەمی تۆڕەکەمان. دەتوانیت یەکێک لە دوو کۆنتێنەر هەڵبژێریت بۆ بەکارهێنان لە پڕۆژەکانتدا. تێبینی بکە کە، بەهۆی paddingو زیاتر، هیچ کام لە دەفرەکان هێلانە نین.

.containerبۆ دەفرێکی پانایی جێگیر وەڵامدەرەوە بەکاربهێنە .

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

.container-fluidبۆ دەفرێکی تەواو پان بەکاری بهێنە ، کە تەواوی پانایی دەرگای بینینەکەت دەگرێتەوە.

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

بووتستراپ سیستەمێکی تۆڕی شلەی یەکەمی وەڵامدەرەوە و مۆبایل لەخۆدەگرێت کە بە شێوەیەکی گونجاو تا ١٢ ستوون قەبارە دەکات لەگەڵ زیادبوونی قەبارەی ئامێرەکە یان دەرچەی بینین. پۆلی پێشوەختە پێناسەکراو لەخۆدەگرێت بۆ هەڵبژاردەی ئاسانی نەخشە، هەروەها میکسینی بەهێز بۆ دروستکردنی نەخشەی مانادارتر .

پێشەکی

سیستەمی تۆڕ بەکاردێت بۆ دروستکردنی نەخشەی لاپەڕەکان لە ڕێگەی زنجیرەیەک ڕیز و ستوونەوە کە ناوەڕۆکەکەت لەخۆدەگرێت. لێرەدا چۆنیەتی کارکردنی سیستەمی تۆڕی Bootstrap دەبینین:

دەبێت ڕیزەکان لەناو .container(پانی جێگیر) یان .container-fluid(پانی تەواو) دابنرێن بۆ ڕێکخستن و پادکردنی دروست.
بۆ دروستکردنی گروپی ئاسۆیی ستوونەکان ڕیزەکان بەکاربهێنە.
ناوەڕۆک دەبێ لە ناو ستوونەکاندا دابنرێت، و تەنیا ستوونەکان دەتوانن منداڵی دەستبەجێی ڕیزەکان بن.
پۆلەکانی تۆڕی پێشوەختە پێناسەکراو وەک .rowو .col-xs-4بەردەستن بۆ دروستکردنی خێرا نەخشەی تۆڕ. هەروەها دەتوانرێت میکسینەکانی کەمتر بۆ نەخشەی مانادارتر بەکاربهێنرێت.
ستوونەکان کانیاو دروست دەکەن (بۆشایی نێوان ناوەڕۆکی ستوونەکان) لە ڕێگەی padding. ئەو پادکردنە بە ڕیزەکان بۆ ستوونی یەکەم و کۆتا لە ڕێگەی پەراوێزی نەرێنی لەسەر .rows جێگیر دەکرێت.
پەراوێزی نەرێنی ئەوەیە کە بۆچی نموونەکانی خوارەوە دەرچوون. بۆ ئەوەیە کە ناوەڕۆکی ناو ستوونی تۆڕەکان بە ناوەڕۆکی نا تۆڕ ڕیز بکرێت.
ستوونی تۆڕ بە دیاریکردنی ژمارەی دوانزە ستوونی بەردەست دروست دەکرێت کە دەتەوێت span بکەیت. بۆ نموونە سێ ستوونی یەکسان سێ ستوون بەکاردەهێنن .col-xs-4.
ئەگەر زیاتر لە ١٢ ستوون لەناو یەک ڕیزدا دابنرێت، هەر گروپێکی ستوونی زیادە وەک یەک یەکە دەپێچرێتەوە لەسەر هێڵێکی نوێ.
پۆلەکانی تۆڕ بۆ ئەو ئامێرانە دەگونجێت کە پانایی شاشەکانیان زیاترە یان یەکسانە بە قەبارەی خاڵەکانی شکاندن، و پۆلەکانی تۆڕ کە ئامێرە بچووکەکان دەکرێنە ئامانج دەسڕنەوە. بۆیە بۆ نموونە بەکارهێنانی هەر .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) { ... }

ئێمە ناوبەناو ئەم پرسیارە میدیایانە فراوانتر دەکەین بۆ ئەوەی a لەخۆ بگرین 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) { ... }

هەڵبژاردەکانی تۆڕ

بزانە چۆن لایەنەکانی سیستەمی تۆڕی Bootstrap لە سەرانسەری چەندین ئامێردا کاردەکەن بە خشتەی دەستی.

	ئامێری بچووکی زیادە مۆبایلەکان (<768px)	ئامێری بچووک تابلێت (≥768px)	ئامێرە مامناوەندەکان دەسکتۆپەکان (≥992px)	ئامێرە گەورەکان دەسکتۆپ (≥1200px)
ڕەفتاری تۆڕ	ئاسۆیی لە هەموو کاتێکدا	داڕماوە بۆ دەستپێکردن، ئاسۆیی لە سەرووی خاڵەکانی شکاندنەوە
پانایی دەفرەکە	هیچ (ئۆتۆ)	750px	970px	1170px
پێشگرى پۆل	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# لە ستوونەکان	12. 12
پانایی ستوونەکە	ئۆتۆماتیکی	~62px	~81px	~97px
پانایی کانیاو	30px (15px لە هەر لایەکی ستوونێک)
هێلانە	بەڵێ
ئۆفسێتەکان	بەڵێ
داواکردنی ستوون	بەڵێ

نموونە: کۆکراوە-بۆ-ئاسۆیی

بە بەکارهێنانی یەک کۆمەڵە .col-md-*پۆلی تۆڕ، دەتوانیت سیستەمێکی تۆڕی بنەڕەتی دروست بکەیت کە لەسەر ئامێرە مۆبایلەکان و ئامێرە تابلێتەکان (مەودای بچووک تا بچووکی زیادە) بە کۆ دەست پێدەکات پێش ئەوەی ببێتە ئاسۆیی لەسەر ئامێرەکانی سەر مێز (مامناوەند). ستوونی تۆڕ لە هەر .row.

.کۆل-مد-١

.کۆل-مد-8

.کۆل-مد-4

.کۆل-مد-٦

<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-*بۆ ستوونەکانت. بۆ بیرۆکەیەکی باشتر کە هەموو ئەمانە چۆن کاردەکەن سەیری نموونەی خوارەوە بکە.

.کۆل-xs-12 .کۆل-مد-8

.کۆل-xs-6 .کۆل-مد-٤

.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-*پۆلەکانی تابلێت.

.کۆل-xs-12 .کۆل-sm-6 .کۆڵ-md-8

.کۆل-xs-6 .کۆل-مد-٤

.کۆل-xs-6 .کۆل-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>

نموونە: پێچانی ستوون

ئەگەر زیاتر لە ١٢ ستوون لەناو یەک ڕیزدا دابنرێت، هەر گروپێکی ستوونی زیادە وەک یەک یەکە دەپێچرێتەوە لەسەر هێڵێکی نوێ.

.col-xs-9

.col-xs-4
بەو پێیەی 9 + 4 = 13 > 12، ئەم دیڤە 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
قەبارەی ڤیوپۆرتەکەت بگۆڕە یان بۆ نموونە لە مۆبایلەکەتدا سەیری بکە.

.کۆل-xs-6 .��ۆل-sm-3

.کۆل-xs-6 .کۆل-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

.کۆل-مد-4

.col-md-4 .col-md-ئۆفسێت-4

.col-md-3 .col-md-ئۆفسێت-3

.col-md-6 .col-md-ئۆفسێت-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-*ڕیزەکانی هێلانەکراو دەبێت کۆمەڵێک ستوونی تێدابێت کە کۆدەبنەوە تا ١٢ یان کەمتر (پێویست ناکات هەر ١٢ ستوونی بەردەست بەکاربهێنیت).

ئاستی یەکەم: .col-sm-9

ئاستی دووەم: .col-xs-8 .col-sm-6

ئاستی دووەم: .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-پاڵدان-3

.کۆل-مد-٣ .کۆل-مد-کێشان-٩

<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 گۆڕاوەکانی Less و mixins لەخۆدەگرێت بۆ دروستکردنی خێرا نەخشە سادە و مانادارەکانی خۆت.

گۆڕاوەکان

گۆڕاوەکان ژمارەی ستوونەکان، پانایی کانیاو و خاڵی پرسیاری میدیا دیاری دەکەن کە تێیدا دەست بە ستوونی هەڵدەفڕێت دەکرێت. ئێمە ئەمانە بەکاردەهێنین بۆ دروستکردنی پۆلەکانی تۆڕی پێشوەختە پێناسەکراو کە لە سەرەوە بەڵگەیان لەسەر کراوە، هەروەها بۆ ئەو میکسینە تایبەتانەی کە لە خوارەوە ئاماژەیان پێکراوە.

@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لە ڕێگەی .h6پۆلەکانەوە هەروەها بەردەستە، بۆ کاتێک کە دەتەوێت لەگەڵ شێوازی فۆنتەکانی سەردێڕێکدا بگونجێت بەڵام هێشتا دەتەوێت دەقەکەت لەناو هێڵدا پیشان بدرێت.

h1. سەردێڕی بووتستراپ	نیمچە قەڵەم 36px
h2. سەردێڕی بووتستراپ	نیمچە قەڵەم 30px
h3. سەردێڕی بووتستراپ	نیمچە قەڵەم 24px
h4. سەردێڕی بووتستراپ	نیمچە قەڵەم 18px
h5. سەردێڕی بووتستراپ	نیمچە قەڵەم 14px
h6. سەردێڕی بووتستراپ	نیمچە قەڵەم 12px

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

کۆپی جەستە

پێشوەختەی جیهانی بووتستراپ 14pxfont-size یە ، بە 1.428 . ئەمەش بۆ و هەموو بڕگەکان جێبەجێ دەکرێت. سەرەڕای ئەوە، (بڕگەکان) پەراوێزی خوارەوەی نیوەی بەرزی هێڵی حیسابکراویان وەردەگرن (بە شێوازی پێشوەختە 10px).line-height<body><p>

Nullam quis risus eget ئورنا مۆلیس ئۆرنارێ ڤێل ئیو لیۆ. Cum sociis natoque پێناتیبوس و مەگنیس دیس پارتوریێنت مۆنتێس، ناسێکتۆر ڕیدیکولۆس موس. Nullam id dolor id nibh ultricies ئۆتۆمبێل.

Cum sociis natoque پێناتیبوس و مەگنیس دیس پارتوریێنت مۆنتێس، ناسێکتۆر ڕیدیکولۆس موس. Donec ullamcorper nulla non metus ئاکتۆر فرینجیلا. دویس مۆلیس، ئیست نۆن کۆمۆدۆ لوکتوس، نیسی ئێرات پۆرتیتۆر لیگولا، ئیگێت لاسینیا ئۆدیۆ سێم ئێلیت. Donec ullamcorper nulla non metus ئاکتۆر فرینجیلا.

Maecenas sed diam eget risus varius blandit دانیشتن ئەمێت نا ماگنا. Donec id elit non mi porta gravida لە ئیگێت مێتۆس. دویس مۆلیس، ئیست نۆن کۆمۆدۆ لوکتوس، نیسی ئێرات پۆرتیتۆر لیگولا، ئیگێت لاسینیا ئۆدیۆ سێم ئێلیت.

<p>...</p>

کۆپی جەستەی سرب

بڕگەیەک بە زیادکردنی .lead.

Vivamus sagittis lacus vel augue laoreet ڕوترۆم فاوسیبوس دۆلۆر ئۆکتۆر. دویس مۆلیس، ئێست نا کۆمۆدۆ لوکتوس.

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

بە کەمتر دروستکراوە

پێوەرەکەی تایپۆگرافی لەسەر بنەمای دوو گۆڕاوەی کەمتر لە گۆڕاوەکاندا دامەزراوە.less : @font-size-baseand @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>

توخمە جێگرەوەکان

ئازادانە بەکارهێنان <b>و <i>بە HTML5. <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>.

تویتەر، ئینکۆ
1355 مارکێت ستریت، سویت 900
سان فرانسیسکۆ، سی ئەی 94103
ل: (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>.

لۆرێم ئیپسوم دۆلۆر دانیشتن ئەمێت، کۆنسێکتێتور چەوری نوخبە. ژمارەیەکی تەواو posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

هەڵبژاردەکانی بلۆککۆت

گۆڕانی ستایل و ناوەڕۆک بۆ گۆڕانکارییە سادەکان لەسەر ستانداردێک <blockquote>.

ناونانی سەرچاوەیەک

زیاد بکە <footer>بۆ ناسینەوەی سەرچاوە. ناوی کارە سەرچاوەکە لە <cite>.

لۆرێم ئیپسوم دۆلۆر دانیشتن ئەمێت، کۆنسێکتێتور چەوری نوخبە. ژمارەیەکی تەواو 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بۆ بلۆککۆتێک کە ناوەڕۆکی ڕاست ڕیزکراوە.

لۆرێم ئیپسوم دۆلۆر دانیشتن ئەمێت، کۆنسێکتێتور چەوری نوخبە. ژمارەیەکی تەواو posuere erat a ante.

کەسێکی بەناوبانگ لە ناونیشانی سەرچاوە

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

لیستەکان

بێ فەرمان

لیستی ئەو شتانەی کە تێیدا ڕێکخستنەکە بە ڕوونی گرنگ نییە .

لۆرێم ئیپسوم دۆلۆر دانیشتن ئەمێت
Consectetur چەوری elit
ژمارەیەکی تەواو molestie lorem لە massa
ئاسانکاری لە پریتیۆم nisl aliquet
نولا ڤۆڵوتپات ئەلیکوام ڤێلیت
- فاسێلۆس ئیاکولیس نێکێ
- پوروس سۆدالێس ultricies
- Vestibulum laoreet پۆرتیتۆر سێم
- Ac tristique لیبێرۆ ڤۆڵوتپات لە
فاوسیبوس پۆرتا لاکوس فرینجیلا ڤێل
Aenean دانیشتن amet erat nunc
ئیگێت پۆرتیتۆر لۆرێم

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

فەرمان کراوە

لیستی ئەو شتانەی کە تێیدا فەرمانەکە بە ڕوونی گرنگە.

لۆرێم ئیپسوم دۆلۆر دانیشتن ئەمێت
Consectetur چەوری elit
ژمارەیەکی تەواو molestie lorem لە massa
ئاسانکاری لە پریتیۆم nisl aliquet
نولا ڤۆڵوتپات ئەلیکوام ڤێلیت
فاوسیبوس پۆرتا لاکوس فرینجیلا ڤێل
Aenean دانیشتن amet erat nunc
ئیگێت پۆرتیتۆر لۆرێم

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

بێ ستایل

list-styleپەراوێزی پێشوەختە و چەپ لەسەر بابەتە لیستەکان لاببە (تەنها منداڵانی دەستبەجێ). ئەمە تەنها بۆ شتەکانی لیستی منداڵانی دەستبەجێ دەگونجێت , واتە پێویستە پۆلەکە زیاد بکەیت بۆ هەر لیستێکی هێلانەکراو بە هەمان شێوە.

لۆرێم ئیپسوم دۆلۆر دانیشتن ئەمێت
Consectetur چەوری elit
ژمارەیەکی تەواو molestie lorem لە massa
ئاسانکاری لە پریتیۆم nisl aliquet
نولا ڤۆڵوتپات ئەلیکوام ڤێلیت
- فاسێلۆس ئیاکولیس نێکێ
- پوروس سۆدالێس ultricies
- Vestibulum laoreet پۆرتیتۆر سێم
- Ac tristique لیبێرۆ ڤۆڵوتپات لە
فاوسیبوس پۆرتا لاکوس فرینجیلا ڤێل
Aenean دانیشتن amet erat nunc
ئیگێت پۆرتیتۆر لۆرێم

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

لە هێڵ

هەموو شتەکانی لیستەکە لەسەر یەک دێڕ دابنێ لەگەڵ display: inline-block;و هەندێک پادکردنی سووک.

لۆرێم ئیپسوم
فاسێلۆس ئیاکولیس
نولا ڤۆڵوتپات

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

وەسف

لیستی زاراوەکان لەگەڵ وەسفە پەیوەندیدارەکانیان.

لیستەکانی وەسف: لیستی وەسفەکان تەواو گونجاوە بۆ پێناسەکردنی زاراوەکان.
یۆیسمۆد: ڤێستیبولوم id لیگولا پۆرتا فێلیس یۆیسمۆد سێمپێر ئیگێت لاسینیا ئۆدیۆ سێم nec elit.; Donec id elit non mi porta gravida لە ئیگێت مێتۆس.
مالێسوادا پۆرتا: ئیتیام پۆرتا سێم مالێسوادا ماگنا مۆلیس ئیویسمۆد.

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

وەسفێکی ئاسۆیی

زاراوە و وەسفەکان لە <dl>ڕیزدا شان بە شانی یەکتر دروست بکە. وەک s ی پێشوەختە بە کۆی دەست پێدەکات <dl>، بەڵام کاتێک navbar فراوان دەبێت، بەم شێوەیە ئەمانە بکە.

لیستەکانی وەسف: لیستی وەسفەکان تەواو گونجاوە بۆ پێناسەکردنی زاراوەکان.
یۆیسمۆد: ڤێستیبولوم id لیگولا پۆرتا فێلیس یۆیسمۆد سێمپێر ئیگێت لاسینیا ئۆدیۆ سێم nec elit.; Donec id elit non mi porta gravida لە ئیگێت مێتۆس.
مالێسوادا پۆرتا: ئیتیام پۆرتا سێم مالێسوادا ماگنا مۆلیس ئیویسمۆد.
فێلیس ئیویسمۆد سێمپێر ئیگێت لاسینیا: فوس داپیبوس، تێلۆس ئەی کورسوس کۆمۆدۆ، تۆرتۆر ماوریس کۆندیمەنتۆم نیب، ئوت فێرمەنتۆم ماسا جوستۆ سیت ئەمێت ریسوس.

<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پۆلەکە زیاد بکەیت، کە بەرزترین بەرزی 350px دادەنێت و سکڕۆڵباری میحوەر y دابین دەکات.

گۆڕاوەکان

بۆ ئاماژەدان بە گۆڕاوەکان <var>تاگەکە بەکاربهێنە.

y = m x + ب

<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. 1	مارک	ئۆتۆ	@mdo
2. 2	یاقوب	تۆرنتن	@قەڵەو
3. 3	لاری	باڵندەکە	لە @twitter

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

ڕیزەکانی ڕەنگاوڕەنگ

بەکاری بهێنە .table-stripedبۆ زیادکردنی زیبرا-ڕیز بۆ هەر ڕیزێکی خشتەکە لەناو <tbody>.

گونجاوی نێوان وێبگەڕەکان

خشتە ڕەنگاوڕەنگەکان لە ڕێگەی :nth-childهەڵبژێرەری CSS ستایل دەکرێن، کە لە ئینتەرنێت ئێکسپلۆرەر ٨ بەردەست نییە.

# .	ناوی یەکەم	ناوی کۆتایی	ناوی بەکارهێنەر
1. 1	مارک	ئۆتۆ	@mdo
2. 2	یاقوب	تۆرنتن	@قەڵەو
3. 3	لاری	باڵندەکە	لە @twitter

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

مێزی سنووردار

زیاد بکە .table-borderedبۆ سنوورەکان لە هەموو لاکانی خشتەکە و خانەکان.

# .	ناوی یەکەم	ناوی کۆتایی	ناوی بەکارهێنەر
1. 1	مارک	ئۆتۆ	@mdo
2. 2	یاقوب	تۆرنتن	@قەڵەو
3. 3	لاری	باڵندەکە	لە @twitter

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

ڕیزەکانی پەلەوەری

زیادکردن .table-hoverبۆ چالاککردنی دۆخی هۆڤەر لەسەر ڕیزەکانی خشتەکان لەناو <tbody>.

# .	ناوی یەکەم	ناوی کۆتایی	ناوی بەکارهێنەر
1. 1	مارک	ئۆتۆ	@mdo
2. 2	یاقوب	تۆرنتن	@قەڵەو
3. 3	لاری	باڵندەکە	لە @twitter

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

مێزی چڕکراوە

زیاد بکە .table-condensedبۆ ئەوەی مێزەکان کۆنکرێتتر بن بە بڕینی پادینگی خانەکان لە نیوە.

# .	ناوی یەکەم	ناوی کۆتایی	ناوی بەکارهێنەر
1. 1	مارک	ئۆتۆ	@mdo
2. 2	یاقوب	تۆرنتن	@قەڵەو
3. 3	لاری باڵندە		لە @twitter

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

پۆلە کۆنتێکستەکان

پۆلەکانی کۆنتێکست بەکاربهێنە بۆ ڕەنگکردنی ڕیزەکانی خشتەکان یان خانە تاکەکەسییەکان.

پۆل	وەسف
`.active`	ڕەنگی هۆڤەرەکە دەخاتە سەر ڕیزێک یان خانەیەکی دیاریکراو
`.success`	ئاماژەیە بۆ کردارێکی سەرکەوتوو یان ئەرێنی
`.info`	ئاماژەیە بۆ گۆڕانکاری یان کردارێکی زانیاری بێلایەن
`.warning`	ئاماژەیە بۆ ئاگادارکردنەوەیەک کە ڕەنگە پێویستی بە گرنگیدان هەبێت
`.danger`	ئاماژەیە بۆ کردارێکی مەترسیدار یان ئەگەری نەرێنی

# .	سەردێڕی ستوون	سەردێڕی ستوون	سەردێڕی ستوون
1. 1	ناوەڕۆکی ستوون	ناوەڕۆکی ستوون	ناوەڕۆکی ستوون
2. 2	ناوەڕۆکی ستوون	ناوەڕۆکی ستوون	ناوەڕۆکی ستوون
3. 3	ناوەڕۆکی ستوون	ناوەڕۆکی ستوون	ناوەڕۆکی ستوون
4. 4	ناوەڕۆکی ستوون	ناوەڕۆکی ستوون	ناوەڕۆکی ستوون
5. 5	ناوەڕۆکی ستوون	ناوەڕۆکی ستوون	ناوەڕۆکی ستوون
6. 6	ناوەڕۆکی ستوون	ناوەڕۆکی ستوون	ناوەڕۆکی ستوون
7. 7	ناوەڕۆکی ستوون	ناوەڕۆکی ستوون	ناوەڕۆکی ستوون
8. 8	ناوەڕۆکی ستوون	ناوەڕۆکی ستوون	ناوەڕۆکی ستوون
9. 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ئەوەی بە شێوەی ئاسۆیی لەسەر ئامێرە بچووکەکان (لە ژێر 768px) بڕوات. لە کاتی بینین لەسەر هەر شتێکی گەورەتر لە 768px پان، هیچ جیاوازییەک لەم خشتانەدا نابینیت.

بڕین/بڕینی ڕاست

خشتەکانی وەڵامدەرەوە سوود لە overflow-y: hidden، وەردەگرن، کە هەر ناوەڕۆکێک کە لە لێوارەکانی خوارەوە یان سەرەوەی خشتەکە تێپەڕێت، دەبڕێت. بە تایبەتی ئەمە دەتوانێت مینیوەکانی دابەزین و ویجتەکانی تری لایەنی سێیەم ببڕێت.

فایەرفۆکس و فیڵدسێتەکان

فایەرفۆکس هەندێک ستایلی مەیدانی نائاسایی هەیە کە بەشدارە widthکە دەستوەردان لە خشتەی وەڵامدەرەوە دەکات. ئەمە بەبێ هاکێکی تایبەت بە فایەرفۆکس کە ئێمە لە بووتستراپدا دابینی ناکەین ، ناتوانرێت سەرپێچی بکرێت:

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

بۆ زانیاری زیاتر، ئەم وەڵامەی Stack Overflow بخوێنەرەوە .

# .	سەردێڕی خشتەکە	سەردێڕی خشتەکە	سەردێڕی خشتەکە	سەردێڕی خشتەکە	سەردێڕی خشتەکە	سەردێڕی خشتەکە
1. 1	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە
2. 2	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە
3. 3	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە

# .	سەردێڕی خشتەکە	سەردێڕی خشتەکە	سەردێڕی خشتەکە	سەردێڕی خشتەکە	سەردێڕی خشتەکە	سەردێڕی خشتەکە
1. 1	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە
2. 2	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە	خانەی خشتەکە
3. 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بۆ فۆڕمەکەت (کە مەرج نییە <form>) بۆ کۆنتڕۆڵەکانی چەپ-ڕێکخراو و بلۆککردنی ناو هێڵ. ئەمە تەنها بۆ ئەو فۆڕمانە دەگرێتەوە کە لەناو ئەو ڤیوپۆرتانەدا هەیە کە لانیکەم 768px پانیان هەیە.

لەوانەیە پێویستی بە پانایی تایبەت هەبێت

Inputs و selects 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بۆ فۆڕمەکە (کە مەرج نییە a <form>). بەم شێوەیە .form-groups دەگۆڕێت بۆ ئەوەی وەک ڕیزەکانی تۆڕ ڕەفتار بکات، بۆیە پێویست بە .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>، سەیری پێکهاتەی گروپی چوونەژوورەوە بکە .

ناوچەی دەق

کۆنترۆڵی فۆرم کە پشتگیری چەندین دێڕی دەق دەکات. 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>

هەڵدەبژێرێت

تێبینی بکە کە زۆرێک لە مینیوەکانی هەڵبژێردراوی ڕەسەن- واتە لە سەفاری و کرۆم- گۆشەی گوڵاویان هەیە کە ناتوانرێت لە ڕێگەی 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تایبەتمەندی boolean لەسەر زانیارییەک زیاد بکە بۆ ڕێگریکردن لە کارلێکەکانی بەکارهێنەر. ئینپوتەکانی لەکارخراو سووکتر دەردەکەون و ئاماژەیەک زیاد دەکەن not-allowed.

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

کۆمەڵە مەیدانەکان لەکارخراون

disabledتایبەتمەندیەکە زیاد بکە بۆ a <fieldset>بۆ لەکارخستنی هەموو کۆنتڕۆڵەکانی ناو بە <fieldset>یەکجار.

ئاگادارکردنەوە دەربارەی کارایی لینکی...`<a>`

بە شێوازی پێشوەختە، وێبگەڕەکان هەموو کۆنتڕۆڵەکانی فۆڕمی ڕەسەن ( <input>, <select>و <button>توخمەکان) لە ناو a <fieldset disabled>وەک ناکارامە مامەڵە دەکەن، ڕێگری لە هەردوو کارلێکی کیبۆرد و ماوس لەسەریان دەکات. بەڵام ئەگەر فۆڕمەکەت <a ... class="btn btn-*">توخمەکانیش لەخۆ بگرێت، ئەمانە تەنها ستایلێکی pointer-events: none. وەک لە بەشی سەبارەت بە دۆخی لەکارخراو بۆ دوگمەکان ئاماژەی پێکراوە (و بە تایبەتی لە بەشی لاوەکی بۆ توخمەکانی ئەنکر)، ئەم تایبەتمەندییە CSS هێشتا ستاندارد نەکراوە و بە تەواوی پشتگیری نەکراوە لە ئۆپێرا ١٨ و خوارەوە، یان لە ئینتەرنێت ئێکسپلۆرەر ١١، و سەرکەوتوو بووە 't ڕێگری لە بەکارهێنەرانی کیبۆرد نەکات کە بتوانن فۆکەس یان چالاککردنی ئەم بەستەرانە بکەن. بۆیە بۆ ئەوەی سەلامەت بیت، جاڤاسکڕێپتی تایبەت بەکاربهێنە بۆ لەکارخستنی ئەو جۆرە بەستەرانە.

گونجاوی نێوان وێبگەڕەکان

لە کاتێکدا Bootstrap ئەم ستایلانە لە هەموو وێبگەڕەکاندا بەکاردەهێنێت، ئینتەرنێت ئێکسپلۆرەر 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>

تەنها خوێندنەوە بنووسە

تایبەتمەندی boolean لەسەر ئینپوتێک زیاد بکە 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>خودی دەقی کۆنترۆڵی فۆڕمەکەدا دابنێیت (وەک لە نموونەی کۆدی خوارەوەدا ڕوودەدات)، گلیفیکۆنێک دابنێیت (بە دەقی بەدیلێکی گونجاو بە بەکارهێنانی .sr-onlyپۆلەکە - سەیری نموونەکانی گلیفیکۆن بکە )، یان بە دابینکردنی ... یارمەتی زیادە بلۆکی دەقی . بە تایبەتی بۆ تەکنەلۆژیا یارمەتیدەرەکان، دەتوانرێت کۆنتڕۆڵەکانی فۆڕمی نادروستیش تایبەتمەندییەکیان بۆ دیاری بکرێت 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تایبەتمەندی)، Bootstrap بە شێوەیەکی ئۆتۆماتیکی شوێنی ئایکۆنەکە ڕێکدەخات کاتێک زیاد دەکرێت.

<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>توخمەکان لەناو پێکهاتەکانی nav و navbar ی ئێمەدا پشتگیری دەکرێن.

بەستەرەکان کە وەک دوگمە کاردەکەن

ئەگەر <a>توخمەکان بەکاربهێنرێن بۆ کارکردن وەک دوگمە – دەستپێکردنی کارایی ناو لاپەڕە، نەک گەشتکردن بۆ بەڵگەنامە یان بەشێکی تر لە ناو لاپەڕەی ئێستادا – هەروەها پێویستە role="button".

ڕەندەری وێبگەڕی بڕبڕەیی

وەک باشترین پراکتیزە، ئێمە زۆر پێشنیار دەکەین کە <button>توخمەکە بەکاربهێنیت هەرکاتێک کە دەتوانرێت بۆ دڵنیابوون لە هاوتاکردنی ڕەندەری وێبگەڕی بڕاو.

لەنێو شتەکانی تردا، هەڵەیەک لە فایەرفۆکس <30دا هەیە کە ڕێگریمان لێدەکات لە ڕێکخستنی دوگمەکانی line-heightof <input>-based، دەبێتە هۆی ئەوەی کە بە تەواوی لەگەڵ بەرزی دوگمەکانی تری فایەرفۆکسدا نەگونجێت.

بژاردەکان

هەریەکێک لە پۆلەکانی دوگمەی بەردەست بەکاربهێنە بۆ ئەوەی بە خێرایی دوگمەیەکی ستایلدار دروست بکەیت.

<!-- 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>، ئینتەرنێت ئێکسپلۆرەر ٩ و خوارەوە دەقەکە خۆڵەمێشی دەکات بە سێبەرێکی دەقێکی ناشرین کە ناتوانین چاکی بکەینەوە.

توخمێکی ئەنکر

.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 هێشتا ستاندارد نەکراوە و بە تەواوی پشتگیری نەکراوە لە ئۆپێرا 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

لە ئینتەرنێت ئێکسپلۆرەر ٨-١٠، وێنەکانی SVG لەگەڵ .img-responsiveقەبارەی ناڕێژەیییان هەیە. بۆ چاککردنی ئەمە لە width: 100% \9;شوێنێک کە پێویست بوو زیاد بکە. بووتستراپ ئەمە بە شێوەیەکی ئۆتۆماتیکی جێبەجێ ناکات چونکە دەبێتە هۆی ئاڵۆزی بۆ فۆرماتەکانی تری وێنە.

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

شێوەی وێنە

زیادکردنی پۆلەکان بۆ <img>توخمێک بۆ ئەوەی بە ئاسانی وێنەکان لە هەر پرۆژەیەکدا ستایل بکەیت.

گونجاوی نێوان وێبگەڕەکان

لەبیرت بێت کە ئینتەرنێت ئێکسپلۆرەر ٨ پشتگیری بۆ گۆشە گوڵاوەکان نییە.

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

ڕەنگەکانی کۆنتێکست

گەیاندنی مانا لە ڕێگەی ڕەنگەوە لەگەڵ مشتێک پۆلی سوودمەندی جەختکردنەوە. هەروەها لەوانەیە ئەمانە بۆ بەستەرەکان جێبەجێ بکرێن و لە کاتی هۆڤەردا تاریک دەبن هەروەک چۆن ستایلە بەستەرەکانی پێشوەختەمان.

فوسسە داپیبوس، تێلۆس ئەی سی کورسوس کۆمۆدۆ، تۆرتۆر ماوریس نیب.

نولم id dolor id nibh ultricies ئۆتۆمبێلەکان ut id elit.

دویس مۆلیس، ئێست نا کۆمۆدۆ لوکتوس، نیسی ئێرات پۆرتیتۆر لیگولا.

Maecenas sed diam eget risus varius blandit دانیشتن ئەمێت نا ماگنا.

ئیتیام پۆرتا سێم مالێسوادا ماگنا مۆلیس ئیویسمۆد.

Donec ullamcorper nulla non metus ئاکتۆر فرینجیلا.

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

مامەڵەکردن لەگەڵ تایبەتمەندی

هەندێک جار بەهۆی تایبەتمەندی هەڵبژێرەرێکی ترەوە ناتوانرێت پۆلەکانی جەختکردنەوە بەکاربهێنرێن. لە زۆربەی حاڵەتەکاندا، چارەسەرێکی بەس ئەوەیە کە دەقەکەت بە شێوەی a <span>لەگەڵ پۆلەکەدا بپێچیتەوە.

گەیاندنی مانا بۆ تەکنەلۆژیا یارمەتیدەرەکان

بەکارهێنانی ڕەنگ بۆ زیادکردنی مانا تەنیا ئاماژەیەکی بینراو دەدات، کە ناگەیەنرێتە بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان – وەک خوێنەری شاشە. دڵنیابە لەوەی کە ئەو زانیاریانەی کە بە ڕەنگەکە دیاری دەکرێن یان لە خودی ناوەڕۆکەکەوە دیارن (ڕەنگە کۆنتێکستەکان تەنها بۆ بەهێزکردنی مانایەک بەکاردەهێنرێن کە پێشتر لە دەق/نیشانەکەدا هەیە)، یان لە ڕێگەی ئامرازی بەدیلەوە جێگیر دەکرێن، وەک دەقی زیادە کە لەگەڵ .sr-onlyپۆلەکەدا شاراوەتەوە .

پاشخانی کۆنتێکست

هاوشێوەی پۆلەکانی ڕەنگی دەقی کۆنتێکست، بە ئاسانی پاشبنەمای توخمێک بۆ هەر پۆلێکی کۆنتێکست دابنێ. پێکهاتەکانی ئەنکر لە کاتی هۆڤەردا تاریک دەبن، هەروەک پۆلەکانی دەق.

نولم id dolor id nibh ultricies ئۆتۆمبێلەکان ut id elit.

دویس مۆلیس، ئێست نا کۆمۆدۆ لوکتوس، نیسی ئێرات پۆرتیتۆر لیگولا.

Maecenas sed diam eget risus varius blandit دانیشتن ئەمێت نا ماگنا.

ئیتیام پۆرتا سێم مالێسوادا ماگنا مۆلیس ئیویسمۆد.

Donec ullamcorper nulla non metus ئاکتۆر فرینجیلا.

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

مامەڵەکردن لەگەڵ تایبەتمەندی

هەندێک جار ناتوانرێت پۆلەکانی پاشخانی کۆنتێکست بەکاربهێنرێت بەهۆی تایبەتمەندی هەڵبژێرەرێکی ترەوە. لە هەندێک حاڵەتدا، چارەسەرێکی بەس ئەوەیە کە ناوەڕۆکی توخمەکەت لە a <div>لەگەڵ پۆلەکەدا بپێچیتەوە.

گەیاندنی مانا بۆ تەکنەلۆژیا یارمەتیدەرەکان

وەک ڕەنگەکانی کۆنتێکست ، دڵنیابە لەوەی کە هەر مانایەک کە لە ڕێگەی ڕەنگەوە دەگەیەنرێت، بە شێوەیەکیش دەگەیەنرێت کە تەنها پێشکەشکردن نەبێت.

ئایکۆنی داخستنی

ئایکۆنی داخستنی گشتی بەکاربهێنە بۆ ڕەتکردنەوەی ناوەڕۆک وەک مۆداڵەکان و ئاگادارکردنەوەکان.

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

کارێتەکان

بەکارهێنانی carets بۆ ئاماژەدان بە کارایی و ئاراستەی دابەزین. تێبینی بکە کە caret ی پێشوەختە بە شێوەیەکی ئۆتۆماتیکی لە مینیوەکانی دابەزین پێچەوانە دەبێتەوە .

<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();
}

ڕوونکردنەوە

بە ئاسانی s پاک floatبکەرەوە بە زیادکردنی .clearfix بۆ توخمە باوکەکە . مایکرۆ کلیرفیکس بەکاردەهێنێت وەک لەلایەن نیکۆلاس گالاگەرەوە بەناوبانگ کراوە. هەروەها دەتوانرێت وەک میکسین بەکاربهێنرێت.

<!-- 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بەردەستە، بەڵام هەمیشە کاریگەری لەسەر خوێنەری شاشە نییە و لە v3.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();
}

بۆ پەرەپێدانی خێراتری دۆستی مۆبایل، ئەم پۆلە سوودبەخشانە بەکاربهێنە بۆ پیشاندان و شاردنەوەی ناوەڕۆک بەپێی ئامێر لە ڕێگەی پرسیاری میدیاوە. هەروەها پۆلەکانی سوودبەخش بۆ گۆڕینی ناوەڕۆک لە کاتی چاپکردندا لەخۆدەگرێت.

هەوڵبدە ئەمانە لەسەر بنەمایەکی سنووردار بەکاربهێنیت و دوور بکەوەرەوە لە دروستکردنی وەشانی تەواو جیاوازی هەمان ماڵپەڕ. بەڵکو بەکاریان بهێنە بۆ تەواوکردنی پێشکەشکردنی هەر ئامێرێک.

پۆلەکانی بەردەست

یەک یان تێکەڵەیەک لە پۆلە بەردەستەکان بەکاربهێنە بۆ گۆڕینی ناوەڕۆک لە سەرانسەری خاڵەکانی شکاندنی دەرچەی بینین.

	ئامێری بچووکی زیادەمۆبایلەکان (<768px)	ئامێری بچووکتابلێتەکان (≥768px)	ئامێری مامناوەنددەسکتۆپەکان (≥992px)	ئامێری گەورەدەسکتۆپەکان (≥1200px)
`.visible-xs-*`	دیارە	شاراوە	شاراوە	شاراوە
`.visible-sm-*`	شاراوە	دیارە	شاراوە	شاراوە
`.visible-md-*`	شاراوە	شاراوە	دیارە	شاراوە
`.visible-lg-*`	شاراوە	شاراوە	شاراوە	دیارە
`.hidden-xs`	شاراوە	دیارە	دیارە	دیارە
`.hidden-sm`	دیارە	شاراوە	دیارە	دیارە
`.hidden-md`	دیارە	دیارە	شاراوە	دیارە
`.hidden-lg`	دیارە	دیارە	دیارە	شاراوە

لە v3.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هەروەها هەن، بەڵام لە v3.2.0 ەوە بەکارنەهێنراون . ئەوان بە نزیکەیی یەکسانن بە .visible-*-block، جگە لە حاڵەتی تایبەتی زیادە بۆ <table>توخمەکانی پەیوەست بە گۆڕینی -.

پۆلەکانی چاپکردن

هاوشێوەی پۆلە وەڵامدەرەوە ئاساییەکان، ئەمانە بەکاربهێنە بۆ گۆڕینی ناوەڕۆک بۆ چاپکردن.

پۆلەکان	وێبگەڕ	چاپکردن
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	شاراوە	دیارە
`.hidden-print`	دیارە	شاراوە

هەروەها پۆلەکە .visible-printبوونی هەیە بەڵام لە v3.2.0 ەوە بەکارنەهاتووە . بە نزیکەیی هاوتایە لەگەڵ .visible-print-block، تەنها لەگەڵ حاڵەتە تایبەتەکانی زیادە نەبێت بۆ <table>توخمە پەیوەندیدارەکان.

حاڵەتەکانی تاقیکردنەوە

قەبارەی وێبگەڕەکەت بگۆڕە یان لەسەر ئامێرە جیاوازەکان باری بکە بۆ تاقیکردنەوەی پۆلەکانی سوودمەندی وەڵامدەرەوە.

لە سەر...

هێما سەوزەکان ئاماژە بەوە دەکەن کە توخمەکە لە دەرچەی بینینی ئێستاتدا دیارە .

زۆر بچوک ✔ لەسەر x-small دیارە

بچووک ✔ لەسەر بچووک دیارە

ناوەند ✔ لەسەر میدیۆم دیارە

گەورە ✔ لەسەر گەورە دیارە

بچووک و بچووکی زیادە ✔ لەسەر x-بچووک و بچووک دیارە

مامناوەند و گەورە ✔ لەسەر مامناوەند و گەورە دیارە

زیادە بچووک و مامناوەند ✔ لەسەر x-بچووک و مامناوەند دیارە

بچووک و گەورە ✔ لەسەر بچوک و گەورە دیارە

بچووک و گەورەی زیادە ✔ لەسەر x-بچووک و گەورە دیارە

بچووک و مامناوەند ✔ لەسەر بچوک و مامناوەند دیارە

شاراوە لەسەر...

لێرەدا، نیشانە سەوزەکان هەروەها ئاماژە بەوە دەکەن کە توخمەکە لە دەرچەی بینینی ئێستاتدا شاراوەتەوە .

زۆر بچوک ✔ لەسەر x-small شاراوەتەوە

بچووک ✔ شاراوە لەسەر بچوک

ناوەند ✔ لەسەر میدیۆم شاراوەتەوە

گەورە ✔ لەسەر گەورە شاراوە

بچووک و بچووکی زیادە ✔ شاراوە لەسەر x-بچووک و بچوک

مامناوەند و گەورە ✔ لەسەر مامناوەند و گەورە شاراوە

زیادە بچووک و مامناوەند ✔ لەسەر x-بچووک و مامناوەند شاراوە

بچووک و گەورە ✔ لەسەر بچوک و گەورە شاراوەتەوە

بچووک و گەورەی زیادە ✔ شاراوە لەسەر x-بچووک و گەورە

بچووک و مامناوەند ✔ لەسەر بچوک و مامناوەند دەشاردرێتەوە

CSS ی Bootstrap لەسەر Less دروستکراوە کە پێش پرۆسێسەرێکە کە کارایی زیادەی هەیە وەک گۆڕاوەکان و میکسینەکان و فەنکشنەکان بۆ کۆکردنەوەی CSS. ئەوانەی دەیانەوێت فایلە سەرچاوەی Less بەکاربهێنن لەبری فایلە CSS کۆکراوەکانمان دەتوانن سوود لەو گۆڕاو و میکسینە زۆرانە وەربگرن کە لە سەرتاسەری چوارچێوەکەدا بەکاریدەهێنین.

گۆڕاوەکانی تۆڕ و میکسینەکان لە ناو بەشی سیستەمی تۆڕدا داپۆشراون .

کۆکردنەوەی Bootstrap

دەتوانرێت Bootstrap بەلایەنی کەمەوە بە دوو شێوە بەکاربهێنرێت: بە CSS ی کۆکراوە یان لەگەڵ فایلە سەرچاوەی Less. بۆ کۆکردنەوەی پەڕگەکانی Less، سەردانی بەشی دەستپێکردن بکە بۆ چۆنیەتی ڕێکخستنی ژینگەی پەرەپێدانەکەت بۆ جێبەجێکردنی فەرمانە پێویستەکان.

ئامرازەکانی کۆکردنەوەی لایەنی سێیەم لەوانەیە لەگەڵ 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";

پێکهاتەکان

پێکهاتەکان لە سەرتاسەری Bootstrap سوود لە هەندێک گۆڕاوە پێشوەختە وەردەگرن بۆ دانانی بەها باوەکان. لێرەدا زۆرترین بەکارهێنانیان دەخەینەڕوو.

@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 ی کۆکراوەتدا.

قەبارەی سندوق

مۆدێلی سندوقی پێکهاتەکانت بە یەک میکسین ڕێست بکەرەوە. بۆ کۆنتێکست، سەیری ئەم بابەتە یارمەتیدەرە بکە لە مۆزیلا .

میکسینەکە لە v3.2.0 ەوە بەکارنەهاتووە ، لەگەڵ ناساندنی Autoprefixer. بۆ پاراستنی گونجاوی پاشەکشە، Bootstrap بەردەوام دەبێت لە بەکارهێنانی mixin لە ناوەوە تا Bootstrap v4.

.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;
}

سێبەری بۆکس (Drop).

ئەگەر ئامانجەکەت نوێترین و گەورەترین وێبگەڕ و ئامێرەکان بەکاردەهێنن، دڵنیابە تەنها box-shadowتایبەتمەندییەکە بە تەنیا بەکاردەهێنیت. ئەگەر پێویستت بە پشتگیرییە بۆ ئامێرە کۆنەکانی ئەندرۆید (پێش v4) و ئای ئۆ ئێس (پێش ئای ئۆ ئێس ٥)، ئەوا میکسینی بەکارنەهاتوو بەکاربهێنە بۆ وەرگرتنی پێویست-webkit پێشگرە پێویستەکە.

میکسینەکە لە v3.1.0ەوە بەکارنەهاتووە ، بەو پێیەی Bootstrap بە فەرمی پشتگیری لەو پلاتفۆرمە بەسەرچووانە ناکات کە پشتگیری لە تایبەتمەندی ستاندارد ناکەن. بۆ پاراستنی گونجاوی پاشەکشە، Bootstrap بەردەوام دەبێت لە بەکارهێنانی mixin لە ناوەوە تا Bootstrap v4.

دڵنیابە لە بەکارهێنانی 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;
}

گواستنەوەکان

چەندین میکسین بۆ نەرمی. هەموو زانیارییەکانی گواستنەوە بە یەکێک دابنێ، یان دواکەوتن و ماوەی جیاواز بەپێی پێویست دیاری بکە.

میکسینەکان لە v3.2.0ەوە بەکارنەهێنراون ، لەگەڵ ناساندنی Autoprefixer. بۆ پاراستنی گونجاوی پاشەکشە، Bootstrap بەردەوام دەبێت لە بەکارهێنانی میکسینەکان لە ناوەوە تا Bootstrap v4.

.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;
}

ناڕوونی

ناڕوونی بۆ هەموو وێبگەڕەکان دابنێ و filterfallback بۆ 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دا دەیپارێزین و بە سکریپتی گۆڕین مامەڵە لەگەڵ نوێکارییەکان دەکەین.

ئەوەی لەخۆدەگرێت

بەو پێیەی دەروازەی ساس ڕیپۆیەکی جیاوازی هەیە و خزمەت بە بینەرێکی کەمێک جیاواز دەکات، ناوەڕۆکی پڕۆژەکە جیاوازییەکی زۆری لەگەڵ پڕۆژەی سەرەکی بووتستراپ هەیە. ئەمەش دڵنیای دەدات لەوەی کە دەرچەی ساس لەگەڵ زۆرترین سیستەمی بنەمادار بە ساسدا دەگونجێت.

ڕێڕەو	وەسف
`lib/`	کۆدی گەوهەری روبی (ڕێکخستنی ساس، یەکخستنی Rails و Compass)
`tasks/`	سکریپتەکانی گۆڕین (گۆڕینی سەرەوەی کەمتر بۆ Sass)
`test/`	تاقیکردنەوەکانی کۆکردنەوە
`templates/`	مانیفێستی پاکێجی کۆمپاس
`vendor/assets/`	فایلە ساس و جاڤاسکڕێپت و فۆنتەکان
`Rakefile`	ئەرکە ناوخۆییەکان، وەک rake و convert

سەردانی کۆگای GitHub ی دەروازەی Sass بکە بۆ بینینی ئەم فایلانە بە کردار.

دامەزراندن

بۆ زانیاری لەسەر چۆنیەتی دامەزراندنی و بەکارهێنانی Bootstrap بۆ Sass، راوێژ بە کۆگای GitHub بکە readme . نوێترین سەرچاوەیە و زانیاری لەخۆدەگرێت بۆ بەکارهێنان لەگەڵ پڕۆژەکانی Rails و Compass و Sass ستاندارد.

بووتستراپ بۆ ساس

CSS

تێڕوانینێکی گشتی

جۆری دۆکیۆمێنتی HTML5

یەکەم مۆبایل

تایپۆگرافی و بەستەرەکان

ئاساییکردنەوە.css

دەفرەکان

سیستەمی تۆڕ

پێشەکی

پرسیارەکانی میدیا

هەڵبژاردەکانی تۆڕ

نموونە: کۆکراوە-بۆ-ئاسۆیی

نموونە: دەفری شلە

نموونە: مۆبایل و دەسکتۆپ

نموونە: مۆبایل، تابلێت، دەسکتۆپ

نموونە: پێچانی ستوون

ستوونی وەڵامدەرەوە ڕێست دەکرێتەوە

ئۆفسێتی ستوونەکان

ستوونی هێلانەکردن

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

کەمتر میکسین و گۆڕاوەکان

گۆڕاوەکان

میکسینەکان

نموونەی بەکارهێنان

تایپۆگرافی

سەردێڕەکان

h1. سەردێڕی بووتستراپ

h2. سەردێڕی بووتستراپ

h3. سەردێڕی بووتستراپ

h4. سەردێڕی بووتستراپ

h5. سەردێڕی بووتستراپ

h6. سەردێڕی بووتستراپ

h1. سەردێڕی بووتستراپ دەقی لاوەکی

h2. سەردێڕی بووتستراپ دەقی لاوەکی

h3. سەردێڕی بووتستراپ دەقی لاوەکی

h4. سەردێڕی بووتستراپ دەقی لاوەکی

h5. سەردێڕی بووتستراپ دەقی لاوەکی

h6. سەردێڕی بووتستراپ دەقی لاوەکی

کۆپی جەستە

کۆپی جەستەی سرب

بە کەمتر دروستکراوە

توخمەکانی دەقی ناو هێڵ

دەقی نیشانەکراو

دەقی سڕاوە

لێدان لە ڕێگەی دەقەوە

دەقی دانراوە

دەقی ژێر هێڵکراو

دەقی بچووک

تۆخ

ئیتاڵیک

توخمە جێگرەوەکان

پۆلەکانی ڕێکخستن

پۆلەکانی گۆڕانکاری

کورتکراوەکان

کورتکراوەی بنەڕەتی

دەستپێشخەری

ناونیشانەکان

بلۆککۆتەکان

بلۆککۆتی پێشوەختە

هەڵبژاردەکانی بلۆککۆت

ناونانی سەرچاوەیەک

نمایشی جێگرەوە

لیستەکان

بێ فەرمان

فەرمان کراوە

بێ ستایل

لە هێڵ

وەسف

وەسفێکی ئاسۆیی

کورتکردنەوەی ئۆتۆماتیکی

کۆد

لە هێڵ

زانیارییەکانی بەکارهێنەر

بلۆکی بنەڕەتی

گۆڕاوەکان

دەرچوونی نمونەیی

خشتەکان

نموونەی بنەڕەتی

ڕیزەکانی ڕەنگاوڕەنگ

گونجاوی نێوان وێبگەڕەکان

`:focus`دۆخی دیمۆ

ئاگادارکردنەوە دەربارەی کارایی لینکی...`<a>`

ئایکۆنە ئیختیارییەکان بە `.sr-only`ناوی شاراوە