سەردێڕەکان

هەموو سەردێڕەکانی HTML، لە <h1>ڕێگەیەوە <h6>بەردەستە.

h1. سەردێڕی یەکەم

h2. سەردێڕی ٢

h3. سەردێڕی سێیەم

h4. سەردێڕی ٤

h5. سەردێڕی ٥

h6. سەردێڕی ٦

کۆپی جەستە

پێشوەختەی جیهانی Bootstrap 14pxfont-size یە ، لەگەڵ 20px . ئەمەش بۆ و هەموو بڕگەکان جێبەجێ دەکرێت. سەرەڕای ئەوە، (بڕگەکان) پەراوێزی خوارەوەی نیوەی بەرزی هێڵەکەیان وەردەگرن (بە شێوازی پێشوەختە 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 = "سەرکردە" > ... </p>

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

پێوەرەکەی تایپۆگرافی لەسەر بنەمای دوو گۆڕاوەی LESS لە گۆڕاوەکاندا دامەزراوە.less : @baseFontSizeand @baseLineHeight. یەکەمیان قەبارەی فۆنتی بنەڕەتییە کە بە درێژایی بەکارهاتووە و دووەمیان بەرزی هێڵی بنەڕەتییە. ئێمە ئەو گۆڕاوانە و هەندێک بیرکاری سادە بەکاردەهێنین بۆ دروستکردنی پەراوێز و پادکردن و بەرزی هێڵەکانی هەموو جۆرەکانمان و زۆر شتی تر. بە خواستی خۆت دروستیان بکە و Bootstrap خۆی لەگەڵیدا دەگونجێنێت.

دووپات کردنەوە

سوود لە تاگەکانی جەختکردنەوە پێشوەختەی HTML وەربگرە بە ستایلە سووکەکان.

`<small>`

بۆ جەختکردنەوە لە ناو هێڵ یان بلۆکی دەق، تاگی بچووک بەکاربهێنە.

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

<p> <small> ئەم دێڕە دەقە بۆ ئەوەیە کە وەک چاپی ورد مامەڵەی لەگەڵدا بکرێت. </small> </p>

تۆخ

بۆ جەختکردنەوە لەسەر پارچەیەک لە دەق بە فۆنت-کێشێکی قورستر.

ئەم پارچە دەقەی خوارەوە وەک دەقی قەڵەمی ڕەندەر دەکرێت .

<strong> وەک دەقی قەڵەمی ڕەندەر کراوە </strong>

ئیتاڵیک

بۆ جەختکردنەوە لەسەر پارچەیەک لە دەق بە ئیتاڵیک.

ئەم پارچە دەقەی خوارەوە وەک دەقی ئیتاڵیک ڕەندەر دەکرێت .

<em> وەک دەقی ئیتاڵیک ڕەندەر کراوە </em>

سەرەکان بەرز دەکەنەوە!ئازادانە بەکارهێنان <b>و <i>بە HTML5. <b>مەبەست لێی تیشک خستنە سەر وشە یان دەستەواژەیە بەبێ ئەوەی گرنگییەکی زیاتر بگەیەنێت <i>لە کاتێکدا زیاتر بۆ دەنگ، زاراوە تەکنیکیەکان و هتد.

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

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

دەقی چەپ ڕێکخراو.

دەقی ڕێکخراو لە ناوەند.

دەقی ڕاست ڕیز کراوە.

<p class = "text-left" > دەقی چەپ ڕێکخراو. </p> 
<p class = "text-center" > دەقی ڕێکخراو لە ناوەند. </p> 
<p class = "text-right" > دەقی ڕاست ڕێکخراو. </p>

پۆلەکانی جەختکردنەوە

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

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

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

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

Aenean eu لیۆ کوام. Pellentesque ornare sem lacinia quam venenatis.

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

<p class = "muted" > فۆس داپیبوس، تێلۆس ac cursus commodo، تۆرتۆر ماوریس nibh. </p> 
<p class = "دەق-ئاگادارکردنەوە" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla نا مێتۆس فرێنجیڵ. </p> 
<p class = "دەق-زانیاری" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "سەرکەوتنی دەق" > Duis mollis، est non commodo luctus، nisi erat porttitor ligula. </p>

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

جێبەجێکردنی ستایلدارانەی <abbr>توخمەکەی HTML بۆ کورتکراوە و کورتکراوەکان بۆ پیشاندانی وەشانی فراوانکراو لەسەر هۆڤەر. کورتکراوەکان کە titleتایبەتمەندییەکیان هەیە سنوورێکی خوارەوەی خاڵی سووک و ئاماژەیەکی یارمەتییان هەیە لە کاتی جێگیرکردندا، کە کۆنتێکستی زیادە لە کاتی جێگیرکردندا دابین دەکات.

`<abbr>`

بۆ دەقی فراوانکراو لەسەر هێڵی درێژی کورتکراوەیەک، titleتایبەتمەندییەکە بخەرە ناوەوە.

کورتکراوەی وشەی تایبەتمەندی بریتییە لە attr .

<abbr title = "تایبەتمەندی" > attr </abbr>

`<abbr class="initialism">`

زیاد بکە .initialismبۆ کورتکراوەیەک بۆ قەبارەی فۆنتێکی کەمێک بچووکتر.

HTML باشترین شتە لە دوای نانی پارچە پارچەکراوەوە.

<abbr title = "زمانی نیشاندانی دەقی زیادە" class = "initialism" > HTML </abbr>

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

پێشکەشکردنی زانیاری پەیوەندی بۆ نزیکترین باپیر یان تەواوی جەستەی کارەکە.

`<address>`

پاراستنی فۆرماتکردن بە کۆتایی هێنان بە هەموو دێڕەکان بە <br>.

تویتەر، ئینکۆ
795 فۆڵسۆم ئەڤێ، سویت 600
سان فرانسیسکۆ، سی ئەی 94107
پ: (123) 456-7890

ناوی تەواو
[email protected]

<ناونیشان>
  <strong> تویتەر، ئینکۆ </strong><br>
  795 فۆلسۆم ئەڤێ، سویت 600 <br>
  سان فرانسیسکۆ، سی ئەی 94107 <br>
  <abbr title = "تەلەفۆن" > پ: </abbr> (123) 456-7890 
</ناونیشان>
 
<ناونیشان>
  <strong> ناوی تەواو </strong><br>
  <a href = "mailto:#" > یەکەم.کۆتا@نموونە .com </a> 
</ناونیشان>

بلۆککۆتەکان

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

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

<blockquote>هەر HTMLێک وەک وەرگێڕانەکە بە دەوریدا بپێچە . بۆ وەرگێڕانی ڕاست پێشنیار دەکەین کە <p>.

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

<blockquote>
  <p> لۆرێم ئیپسوم دۆلۆر دانیشتن ئەمێت، کۆنسێکتێتور ئەدیپیسینگ ئێلیت. ژمارەیەکی تەواو posuere erat a ante. </p>
</blockquote>

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

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

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

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

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

<blockquote>
  <p> لۆرێم ئیپسوم دۆلۆر دانیشتن ئەمێت، کۆنسێکتێتور ئەدیپیسینگ ئێلیت. ژمارەیەکی تەواو posuere erat a ante. </p>
  <small> کەسێکی بەناوبانگ <cite title = "ناونیشانی سەرچاوە" > ناونیشانی سەرچاوە </cite></small> 
</blockquote>

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

بۆ بلۆککۆتی .pull-rightهەڵدەفڕێت و بە ڕاست ڕیزکراو بەکاربهێنە.

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

<blockquote class = "ڕاکێشانی ڕاست" > 
  ...
</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 = "بێ ستایل" > 
  <li> ... </li>
</ul>

لە هێڵ

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

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

<ul class = "ناو هێڵ" > 
  <li> ... </li>
</ul>

وەسف

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

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

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

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

زاراوە و وەسفەکان لە <dl>ڕیزدا شان بە شانی یەکتر دروست بکە.

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

<dl class = "dl-ئاسۆیی" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

سەرەکان بەرز دەکەنەوە!لیستە وەسف ئاسۆییەکان ئەو زاراوانە کورت دەکەنەوە کە زۆر درێژن بۆ ئەوەی لە چاککردنی ستوونی چەپدا جێیان ببێتەوە text-overflow. لە دەرچەی بینینی تەسکتردا، دەگۆڕدرێن بۆ شێوازی پێشوەختەی کۆکراوە.

لە هێڵ

پارچە کۆدەکانی ناو هێڵ بە پێچەوە <code>.

بۆ نموونە <section>پێویستە وەک ئینلاین بپێچرێتەوە.

بۆ نموونە < code> & lt ; section & gt ;</ code > دەبێ وەک ناو هێڵ بپێچرێتەوە .

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

<pre>بۆ چەندین دێڕی کۆد بەکاری بهێنە . دڵنیابە لە هەر بڕاکێتێکی گۆشەیی لە کۆدەکەدا ڕزگارت بێت بۆ ڕەندەرکردنی دروست.

<p>نموونەی دەق لێرە...</p>

<پێش>
  <p>نموونەی دەق لێرە...</p>
</pre>

سەرەکان بەرز دەکەنەوە!دڵنیابە کۆدەکان لەناو <pre>تاگەکاندا تا دەتوانیت لە لای چەپەوە نزیک بکەرەوە؛ هەموو تابەکان ڕەندەر دەکات.

دەتوانیت بە ئیختیاری .pre-scrollableپۆلەکە زیاد بکەیت کە بەرزترین بەرزی 350px دادەنێت و سکڕۆڵباری میحوەر y دابین دەکات.

شێوازە پێشوەختەکان

بۆ ستایلی بنەڕەتی- پادکردنی ڕووناکی و تەنها دابەشکەری ئاسۆیی- پۆلی بنەڕەتی زیاد بکە .tableبۆ هەر <table>.

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

< پۆلی خشتەی = "خشتەی" > 
  ...
</خشتەی>

پۆلە ئیختیارییەکان

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

`.table-striped`

زیاد دەکات زیبرا-ڕیز بۆ هەر ڕیزێکی خشتەی ناو لە <tbody>ڕێگەی :nth-childهەڵبژێرەری CSS (لە IE7-8 بەردەست نییە).

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

<table class = "خشتەی خشتەی ڕەنگاوڕەنگ" > 
  ...
</خشتەی>

`.table-bordered`

سنوور و گۆشەی گوڵاو زیاد بکە بۆ سەر مێزەکە.

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

<table class = "خشتەی سنووردارە" > 
  ...
</خشتەی>

`.table-hover`

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

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

<table class = "خشتەی خشتە-hover" > 
  ...
</خشتەی>

`.table-condensed`

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

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

<table class = "خشتەی خشتەی چڕکراوە" > 
  ...
</خشتەی>

پۆلەکانی ڕیز هەڵبژاردە

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

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

# .	بەرهەم	پارەدان وەرگیراوە	دۆخ
1. 1	سیل - مانگانە	01/04/2012	پەسەندکراو
2. 2	سیل - مانگانە	02/04/2012	ڕەتکرایەوە
3. 3	سیل - مانگانە	03/04/2012	هەڵپەسێردراو
4. 4	سیل - مانگانە	04/04/2012	بۆ پشتڕاستکردنەوە پەیوەندی بکە

...
  < tr class = "سەرکەوتن" >
    <td> 1 < /td>
    <td>TB - مانگانە</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>پەسەند کراوە</ td >
  </ tr >
...

پشتگیری لە نیشاندانی خشتەکان دەکرێت

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

نیشانە	وەسف
`<table>`	توخمێکی پێچان بۆ پیشاندانی داتاکان بە شێوەی خشتەیی
`<thead>`	توخمێکی کۆنتێنەر بۆ ڕیزەکانی سەردێڕی خشتەکان ( `<tr>`) بۆ ناونانی ستوونەکانی خشتەکان
`<tbody>`	توخمێکی دەفر بۆ ڕیزەکانی خشتەکە ( `<tr>`) لە جەستەی خشتەکەدا
`<tr>`	توخمێکی دەفر بۆ کۆمەڵێک خانەی خشتەی ( `<td>`یان `<th>`) کە لەسەر یەک ڕیز دەردەکەوێت
`<td>`	خانەی خشتەی پێشوەختە
`<th>`	خانەی خشتەی تایبەت بۆ ناوەکانی ستوونی (یان ڕیز، بەپێی مەودا و شوێن).
`<caption>`	وەسف یان پوختەی ئەوەی کە خشتەکە چی لەخۆدەگرێت، بە تایبەتی بۆ خوێنەری شاشە بەسوودە

<خشتە>
  <caption> ... </caption>
  <سەر>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</خشتەی>

شێوازە پێشوەختەکان

کۆنتڕۆڵەکانی فۆڕمی تاکەکەسی ستایل وەردەگرن، بەڵام بەبێ هیچ پۆلێکی بنەڕەتی پێویست لەسەر <form>یان گۆڕانکاری گەورە لە مارکاپدا. لە ئەنجامدا لیبێڵە کۆکراوەکان و چەپەکان لەسەرەوەی کۆنتڕۆڵەکانی فۆڕم دروست دەکات.

<فۆڕم>
  <کۆمەڵەی مەیدان>
    <ئەفسانە> ئەفسانە </legend>
    <label> ناوی ناو </label>
    <input type = "text" placeholder = "شتێک بنووسە..." >  
    <span class = "help-block" > نموونەی دەقی یارمەتی ئاستی بلۆک لێرەدا. </span> 
    <label class = "بۆکسی هەڵبژاردن" > 
      <input type = "checkbox" > پشکنینم بکە 
    </label>
    < جۆری دوگمە = "ناردن" class = "btn" > ناردن </button>  
  </fieldset>
</form>

نەخشە ئیختیارییەکان

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

فۆڕمی گەڕان

زیاد بکە .form-searchبۆ فۆڕمەکە و .search-queryبۆ فۆڕمەکە <input>بۆ نووسینی دەقی زیادە-گوڵاو.

<form class = "فۆڕم-گەڕان" > 
  < جۆری هاتنەژوورەوە = "دەق" پۆل = "پرسیاری گەڕان-ناوەندی هاتنەژوورەوە" >  
  < جۆری دوگمە = "submit" class = "btn" > گەڕان </button>  
</form>

فۆڕمی ناو هێڵ

زیادکردن .form-inlineبۆ ناوە چەپەکان و کۆنتڕۆڵەکانی بلۆکی ناو هێڵ بۆ نەخشەیەکی بچووک.

<form class = "فۆڕم-ئینلاین" > 
  <input type = "text" class = "input-small" شوێنگرەوە = "ئیمەیڵ" >   
  <input type = "password" class = "input-small" شوێنگرەوە = "وشەی نهێنی" >   
  <label class = "بۆکسی هەڵبژاردن" > 
    <input type = "checkbox" > لەبیرم بکە 
  </label>
  < جۆری دوگمە = "submit" class = "btn" > چوونەژوورەوە </button>  
</form>

فۆڕمی ئاسۆیی

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

زیاد بکە .form-horizontalبۆ فۆڕمەکە
لیبێڵ و کۆنتڕۆڵەکان لەناودا بپێچە.control-group
زیاد بکە .control-labelبۆ ناو لیبێڵەکە
هەر کۆنتڕۆڵێکی پەیوەندیدار بپێچەرەوە .controlsبۆ ڕێکخستنی دروست

<form class = "فۆڕم-ئاسۆیی" > 
  <div class = "گرووپی-کۆنتڕۆڵ" > 
    <label class = "control-label" بۆ = "inputEmail" > ئیمەیڵ </label>  
    <div class = "کۆنتڕۆڵەکان" > 
      < جۆری چوونەژوورەوە = "دەق" id = "ئیمەیڵی چوونەژوورەوە" شوێنگرەوە = "ئیمەیڵ" >   
    </div>
  </div>
  <div class = "گرووپی-کۆنتڕۆڵ" > 
    <label class = "control-label" بۆ = "inputPassword" > وشەی نهێنی </label>  
    <div class = "کۆنتڕۆڵەکان" > 
      < جۆری چوونەژوورەوە = "وشەی نهێنی" id = "وشەی نهێنی چوونەژوورەوە" شوێنگرەوە = "وشەی نهێنی" >   
    </div>
  </div>
  <div class = "گرووپی-کۆنتڕۆڵ" > 
    <div class = "کۆنتڕۆڵەکان" > 
      <label class = "بۆکسی هەڵبژاردن" > 
        <input type = "checkbox" > لەبیرم بکە 
      </label>
      < جۆری دوگمە = "submit" class = "btn" > چوونەژوورەوە </button>  
    </div>
  </div>
</form>

کۆنتڕۆڵەکانی فۆڕمی پشتگیریکراو

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

زانیارییەکانی ناوەوە

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

پێویستی بە بەکارهێنانی دیاریکراو هەیە typeلە هەموو کاتێکدا.

< جۆری چوونەژوورەوە = "دەق" شوێنگرەوە = "چوونەژوورەوەی دەق" >

ناوچەی دەق

کۆنترۆڵی فۆرم کە پشتگیری لە چەندین دێڕی دەق دەکات. rowsبەپێی پێویست تایبەتمەندی بگۆڕە .

<textarea ڕیزەکان = "3" ></textarea>

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

بۆکسەکانی هەڵبژاردن بۆ هەڵبژاردنی یەک یان چەند بژاردەیەک لە لیستێکدا لە کاتێکدا ڕادیۆکان بۆ هەڵبژاردنی یەک بژاردەیە لە زۆرێک.

پێشوەختە (کۆکراوە)

<label class = "بۆکسی هەڵبژاردن" > 
  < جۆری چوونەژوورەوە = "بۆکسی هەڵبژاردن" بەها = "" >  
  بژاردەی یەکەم ئەمە و ئەو- دڵنیابە بۆچی زۆر باشە
</label>
 
<label class = "ڕادیۆ" > 
  < جۆری هاتنەژوورەوە = "ڕادیۆ" ناو = "optionsRadios" id = "optionsRadios1" بەها = "option1" پشکنین کراوە >     
  بژاردەی یەکەم ئەمە و ئەو- دڵنیابە بۆچی زۆر باشە
</label>
<label class = "ڕادیۆ" > 
  < جۆری هاتنەژوورەوە = "ڕادیۆ" ناو = "بژاردەکانڕادیۆکان" id = "بژاردەکانڕادیۆکان2" بەها = "بژاردە2" >    
  بژاردەی دووەم دەتوانێت شتێکی تر بێت و هەڵبژاردنی بژاردەی یەکەم هەڵدەبژێرێت
</label>

بۆکسەکانی هەڵبژاردنی ناو هێڵ

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

<label class = "بۆکسی هەڵبژاردن لە هێڵدا" > 
  < جۆری هاتنەژوورەوە = "بۆکسی هەڵبژاردن" id = "بۆکسی پشکنینی ناو هێڵ1" بەها = "بژاردەی 1" > 1   
</label>
<label class = "بۆکسی هەڵبژاردن لە هێڵدا" > 
  < جۆری هاتنەژوورەوە = "بۆکسی هەڵبژاردن" id = "بۆکسی پشکنینی ناو هێڵ2" بەها = "بژاردەی2" > 2   
</label>
<label class = "بۆکسی هەڵبژاردن لە هێڵدا" > 
  < جۆری هاتنەژوورەوە = "بۆکسی هەڵبژاردن" id = "inlineCheckbox3" بەها = "بژاردەی3" > 3   
</label>

هەڵدەبژێرێت

هەڵبژاردەی پێشوەختە بەکاربهێنە یان a دیاری بکە multiple="multiple"بۆ پیشاندانی چەندین بژاردە بە یەکجار.

<هەڵبژێرە>
  <بژاردە> 1 </بژاردە>
  <بژاردە> 2 </بژاردە>
  <بژاردە> 3 </بژاردە>
  <بژاردە> 4 </بژاردە>
  <بژاردە> 5 </بژاردە>
</هەڵبژێرە>
 
< چەند هەڵبژێرە = "چەند" > 
  <بژاردە> 1 </بژاردە>
  <بژاردە> 2 </بژاردە>
  <بژاردە> 3 </بژاردە>
  <بژاردە> 4 </بژاردە>
  <بژاردە> 5 </بژاردە>
</هەڵبژێرە>

درێژکردنەوەی کۆنتڕۆڵەکانی فۆڕم

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

زانیارییەکانی پێشوەختە و هاوپێچکراو

زیادکردنی دەق یان دوگمە پێش یان دوای هەر نووسینێک لەسەر بنەمای دەق. تێبینی بکە کە selectلێرەدا توخمەکان پشتگیری ناکرێت.

هەڵبژاردەکانی پێشوەختە

an .add-onو an inputبە یەکێک لە دوو پۆل بپێچە بۆ پێشوەختە بەستن یان بەستنەوەی دەق بە ئینپوتێکەوە.

<div class = "پێشخستنی هاتنەژوورەوە" > 
  <span class = "زیادکردن" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "دەق" شوێنگرەوە = "ناوی بەکارهێنەر" >    
</div>
<div class = "هاتنەژوورەوە-هاوپێچ" > 
  < پۆلی هاتنەژوورەوە = "span2" id = "هاتنەژوورەوەی هاوپێچ" جۆر = "دەق" >   
  <span class = "زیادکردن" > .00 </span> 
</div>

تێکەڵاو

هەردوو پۆل و دوو نموونەی بەکاربهێنە .add-onبۆ پێشبڕکێ و زیادکردنی زانیارییەک.

<div class = "input-prepend هاتنەژوورەوە-هاوپێچ" > 
  <span class = "زیادکردن" > $ </span> 
  < پۆلی هاتنەژوورەوە = "span2" id = "appendedPrependedInput" جۆر = "دەق" >   
  <span class = "زیادکردن" > .00 </span> 
</div>

دوگمە لەبری دەق

لەبری a <span>لەگەڵ دەق، a بەکاربهێنە .btnبۆ لکاندنی دوگمەیەک (یان دوو) بە ئینپوتێکەوە.

<div class = "هاتنەژوورەوە-هاوپێچ" > 
  < پۆلی هاتنەژوورەوە = "span2" id = "دوگمەی هاتنەژوورەوەی زیادکراوە " جۆر = "دەق" >   
  <دوگمە پۆل = "btn" جۆری = "دوگمە" > بڕۆ! </دوگمەی>  
</div>

<div class = "هاتنەژوورەوە-هاوپێچ" > 
  < پۆلی هاتنەژوورەوە = "span2" id = "دوگمەی هاتنەژوورەوەی زیادکراو " جۆر = "دەق" >   
  <button class = "btn" type = "دوگمە" > گەڕان </button>  
  <button class = "btn" type = "دوگمە" > هەڵبژاردنەکان </button>  
</div>

دابەزینی دوگمەکان

<div class = "هاتنەژوورەوە-هاوپێچ" > 
  < پۆلی هاتنە ژوورەوە = "span2" id = "appendedDropdownButton" جۆر = "دەق" >   
  <div class = "گرووپی btn" > 
    <button class = "btn دابەزین-گۆڕین" data-toggle = "دابەزاندن" >  
      کردار
      <span class = "کارێت" </span> 
    </دوگمەی>
    <ul class = "مێنۆی دابەزین" > 
      ...
    </ul>
  </div>
</div>

<div class = "پێشخستنی هاتنەژوورەوە" > 
  <div class = "گرووپی btn" > 
    <button class = "btn دابەزین-گۆڕین" data-toggle = "دابەزاندن" >  
      کردار
      <span class = "کارێت" </span> 
    </دوگمەی>
    <ul class = "مێنۆی دابەزین" > 
      ...
    </ul>
  </div>
  < پۆلی هاتنەژوورەوە = "span2" id = "پێشەوە دوگمەی دابەزین " جۆر = "دەق" >   
</div>

<div class = "input-prepend هاتنەژوورەوە-هاوپێچ" > 
  <div class = "گرووپی btn" > 
    <button class = "btn دابەزین-گۆڕین" data-toggle = "دابەزاندن" >  
      کردار
      <span class = "کارێت" </span> 
    </دوگمەی>
    <ul class = "مێنۆی دابەزین" > 
      ...
    </ul>
  </div>
  < پۆلی هاتنەژوورەوە = "span2" id = "دوگمەی دابەزینی پێشوەختە زیادکراوە " جۆر = "دەق" >   
  <div class = "گرووپی btn" > 
    <button class = "btn دابەزین-گۆڕین" data-toggle = "دابەزاندن" >  
      کردار
      <span class = "کارێت" </span> 
    </دوگمەی>
    <ul class = "مێنۆی دابەزین" > 
      ...
    </ul>
  </div>
</div>

گروپە دابەزینە بەش بەشەکان

<فۆڕم>
  <div class = "پێشخستنی هاتنەژوورەوە" > 
    <div پۆل = "گرووپی btn" > ... </div> 
    < جۆری چوونەژوورەوە = "دەق" > 
  </div>
  <div class = "هاتنەژوورەوە-هاوپێچ" > 
    < جۆری چوونەژوورەوە = "دەق" > 
    <div پۆل = "گرووپی btn" > ... </div> 
  </div>
</form>

فۆڕمی گەڕان

<form class = "فۆڕم-گەڕان" > 
  <div class = "هاتنەژوورەوە-هاوپێچ" > 
    < جۆری هاتنەژوورەوە = "دەق" پۆل = "پرسیاری گەڕانی span2" >  
    < جۆری دوگمە = "submit" class = "btn" > گەڕان </button>  
  </div>
  <div class = "پێشخستنی هاتنەژوورەوە" > 
    < جۆری دوگمە = "submit" class = "btn" > گەڕان </button>  
    < جۆری هاتنەژوورەوە = "دەق" پۆل = "پرسیاری گەڕانی span2" >  
  </div>
</form>

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

پۆلەکانی قەبارەدانانی ڕێژەیی وەک .input-largeیان هاوتاکردنی زانیارییەکانتان لەگەڵ قەبارەی ستوونی تۆڕەکان بە بەکارهێنانی .span*پۆلەکان بەکاربهێنە.

هاتنە ژوورەوەی ئاستی بلۆک

وا لە هەر یەکێک <input>یان <textarea>توخمێک بکە وەک توخمێکی ئاستی بلۆک ڕەفتار بکات.

< پۆلی هاتنەژوورەوە = "ئاستی بلۆکی هاتنەژوورەوە" جۆر = "دەق" شوێنگرەوە = ".ئاستی بلۆکی هاتنەژوورەوە" >

قەبارەدانانی ڕێژەیی

<input class = "input-mini" type = "دەق" شوێنگرەوە = ".input-mini" >   
<input class = "input-small" type = "دەق" شوێنگرەوە = ".input-small" >   
<input class = "input-medium" type = "دەق" شوێنگرەوە = ".input-medium" >   
<input class = "input-large" جۆر = "دەق" شوێنگرەوە = ".input-large" >   
<input class = "input-xlarge" جۆر = "دەق" شوێنگرەوە = ".input-xlarge" >   
<input class = "input-xxlarge" جۆر = "دەق" شوێنگرەوە = ".input-xxlarge" >

سەرەکان بەرز دەکەنەوە!لە وەشانی داهاتوودا، ئێمە بەکارهێنانی ئەم پۆلانەی هاتنەژوورەوەی ڕێژەیی دەگۆڕین بۆ ئەوەی لەگەڵ قەبارەی دوگمەکانمان بگونجێت. بۆ نموونە .input-largeپادکردن و قەبارەی فۆنتەکانی ئینپوتێک زیاد دەکات.

قەبارەدانانی تۆڕ

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

< پۆلی هاتنەژوورەوە = "span1" جۆر = "دەق" شوێنگرەوە = ".span1" >   
< پۆلی چوونەژوورەوە = "span2" جۆر = "دەق" شوێنگرەوە = ".span2" >   
< پۆلی هاتنەژوورەوە = "span3" جۆر = "دەق" شوێنگرەوە = ".span3" >   
< پۆل هەڵبژێرە = "span1" > 
  ...
</هەڵبژێرە>
< پۆل هەڵبژێرە = "span2" > 
  ...
</هەڵبژێرە>
< پۆل هەڵبژێرە = "span3" > 
  ...
</هەڵبژێرە>

بۆ چەندین زانیاری تۆڕ بۆ هەر دێڕێک، پۆلی دەستکاریکەر بەکاربهێنە.controls-row بۆ دوورییەکی دروست . ئینپوتەکان دەفڕێنێت بۆ داڕمانی white-space، پەراوێزی دروست دادەنێت و فلۆتەکە پاک دەکاتەوە.

<div class = "کۆنتڕۆڵەکان" > 
  < پۆلی هاتنەژوورەوە = "span5" جۆر = "دەق" شوێنگرەوە = ".span5" >   
</div>
<div class = "کۆنتڕۆڵەکان-ڕیزەکان" > 
  < پۆلی هاتنەژوورەوە = "span4" جۆر = "دەق" شوێنگرەوە = ".span4" >   
  < پۆلی هاتنەژوورەوە = "span1" جۆر = "دەق" شوێنگرەوە = ".span1" >   
</div>
...

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

داتاکان بە فۆڕمێک پێشکەش بکە کە دەستکاری نەکرێت بەبێ بەکارهێنانی نیشاندانی فۆڕمی ڕاستەقینە.

<span class = "input-xlarge uneditable-input" > هەندێک بەها لێرەدا </span>

کردارەکان پێکبهێنن

فۆڕمێک بە کۆمەڵێک کردار (دوگمە) کۆتایی پێبهێنە. کاتێک لەناو a دا دادەنرێت .form-actions، دوگمەکان بە شێوەیەکی ئۆتۆماتیکی دەچنە ژوورەوە بۆ ئەوەی لەگەڵ کۆنتڕۆڵەکانی فۆڕمەکەدا ڕیز ببن.

<div class = "فۆڕم-کردارەکان" > 
  <button type = "submit" class = "btn btn-primary" > گۆڕانکارییەکان هەڵبگرە </button>  
  < جۆری دوگمە = "دوگمە" پۆل = "btn" > هەڵوەشاندنەوە </button>  
</div>

دەقی یارمەتی

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

یارمەتی ناو هێڵ

<input type = "text" ><span class = "یارمەتی-inline" > دەقی یارمەتی ناو هێڵ </span>

یارمەتی بلۆک بکە

<input type = "text" ><span class = "help-block" > بلۆکێکی درێژتر لە دەقی یارمەتی کە دەشکێت لەسەر دێڕێکی نوێ و لەوانەیە لە یەک دێڕ زیاتر درێژ بێتەوە. </span>

باری کۆنترۆڵکردنی فۆرم

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

فۆکۆسی هاتنە ژوورەوە

ئێمە ستایلە پێشوەختەکان outlineلەسەر هەندێک لە کۆنتڕۆڵەکانی فۆڕم لادەبەین و a box-shadowلە شوێنی خۆی بۆ :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" بەها = "ئەمە فۆکەس کراوە..." >

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

ستایلەکان لە ڕێگەی کارایی وێبگەڕی پێشوەختەوە لەگەڵ :invalid. a دیاری بکە type، تایبەتمەندییەکە زیاد بکە requiredئەگەر مەیدانەکە هەڵبژاردە نەبێت، و (ئەگەر گونجاو بێت) a دیاری بکە pattern.

ئەمە لە وەشانی ئینتەرنێت ئێکسپلۆرەر ٧-٩ بەردەست نییە بەهۆی نەبوونی پشتگیری بۆ هەڵبژێرەری ساختەی CSS.

<input class = "span3" type = "ئیمەیڵ" پێویستە >

هاتنە ژوورەوەی لەکارخراو

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

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "هاتنەژوورەوەی لێرە لەکارخراوە..." لەکارخراوە >

باری چەسپاندن دەڵێت

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

<div class = "ئاگادارکردنەوەی گروپی کۆنترۆڵ" > 
  <label class = "control-label" for = "inputWarning" > نووسین بە ئاگادارکردنەوە </label>  
  <div class = "کۆنتڕۆڵەکان" > 
    < جۆری هاتنەژوورەوە = "دەق" id = "ئاگادارکردنەوەی هاتنەژوورەوە" >  
    <span class = "help-inline" > لەوانەیە شتێک بە هەڵەدا چووبێت </span> 
  </div>
</div>
 
<div class = "هەڵەی گروپی کۆنترۆڵ" > 
  <label class = "control-label" بۆ = "inputError" > نووسین بە هەڵە </label>  
  <div class = "کۆنتڕۆڵەکان" > 
    < جۆری چوونەژوورەوە = "دەق" id = "هەڵەی چوونەژوورەوە" >  
    <span class = "help-inline" > تکایە هەڵەکە ڕاست بکەرەوە </span> 
  </div>
</div>
 
<div class = "زانیاری گروپی کۆنترۆڵ" > 
  <label class = "control-label" بۆ = "inputInfo" > نووسین بە زانیاری </label>  
  <div class = "کۆنتڕۆڵەکان" > 
    < جۆری هاتنەژوورەوە = "دەق" id = "زانیاری هاتنەژوورەوە" >  
    <span class = "help-inline" > ناوی بەکارهێنەر پێشتر وەرگیراوە </span> 
  </div>
</div>
 
<div class = "سەرکەوتنی گروپی کۆنترۆڵ" > 
  <label class = "control-label" for = "inputSuccess" > هاتنە ژوورەوە بە سەرکەوتن </label>  
  <div class = "کۆنتڕۆڵەکان" > 
    < جۆری چوونەژوورەوە = "دەق" id = "سەرکەوتنی چوونەژوورەوە" >  
    <span class = "یارمەتی-ئینلاین" > Woohoo! </span> 
  </div>
</div>

دوگمەکانی پێشوەختە

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

دوگمه‌	class=""	وەسف
	`btn`	دوگمەی خۆڵەمێشی ستاندارد بە گرادێنت
	`btn btn-primary`	کێشی بینراوی زیادە دابین دەکات و کردارە سەرەتاییەکە لە کۆمەڵێک دوگمەدا دیاری دەکات
	`btn btn-info`	وەک بەدیلێک بۆ ستایلە پێشوەختەکان بەکاردێت
	`btn btn-success`	ئاماژەیە بۆ کردارێکی سەرکەوتوو یان ئەرێنی
	`btn btn-warning`	ئاماژە بەوە دەکات کە پێویستە وریایی لەم کارەدا بگیرێتەبەر
	`btn btn-danger`	ئاماژەیە بۆ کردارێکی مەترسیدار یان ئەگەری نەرێنی
	`btn btn-inverse`	دوگمەی خۆڵەمێشی تۆخ بە یەکەوە بگۆڕە، نەک بەستراوەتەوە بە کردارێکی مانادار یان بەکارهێنان
	`btn btn-link`	جەختکردنەوە لەسەر دوگمەیەک کەم بکەرەوە بە کردنی وەک بەستەرێک لە هەمان کاتدا هەڵسوکەوتی دوگمەکان بپارێزیت

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

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

قەبارەی دوگمەکان

دوگمەی گەورەتر یان بچووکتر فەنتازی؟ زیاد بکە .btn-large, .btn-small, یان .btn-miniبۆ قەبارەی زیادە.

<p>
  <button class = "btn btn-گەورە btn-primary" type = "دوگمە" > دوگمەی گەورە </button>  
  <button class = "btn btn-large" type = "دوگمە" > دوگمەی گەورە </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "دوگمە" > دوگمەی پێشوەختە </button>  
  <button class = "btn" type = "button" > دوگمەی پێشوەختە </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "دوگمە" > دوگمەی بچووک </button>  
  <button class = "btn btn-small" type = "دوگمە" > دوگمەی بچووک </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" جۆر = "دوگمە" > دوگمەی مینی </button>  
  <button class = "btn btn-mini" type = "دوگمە" > دوگمەی مینی </button>  
</p>

دوگمەی ئاستی بلۆک دروست بکە-ئەوانەی کە تەواوی پانایی دایک و باوکێک دەگرێتەوە- بە زیادکردنی .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "دوگمە" > دوگمەی ئاستی بلۆک </button>  
<button class = "btn btn-large btn-block" type = "دوگمە" > دوگمەی ئاستی بلۆک </button>

دۆخی لەکارخراو

وا لە دوگمەکان بکە بە کاڵکردنەوەیان بە ڕێژەی 50% کلیک نەکراو دەرکەون.

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

.disabledپۆلەکە زیاد بکە بۆ <a>دوگمەکان.

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

<a href = "#" class = "btn btn-گەورە btn-primary لەکارخراوە" > بەستەری سەرەتایی </a>  
<a href = "#" class = "btn btn-large لەکارخراوە" > بەستەر </a>

سەرەکان بەرز دەکەنەوە!ئێمە لێرەدا .disabledوەک پۆلێکی سوودبەخش بەکاری دەهێنین، هاوشێوەی .activeپۆلی باو، بۆیە پێویست بە پێشگر نییە. هەروەها ئەم پۆلە تەنها بۆ جوانیناسییە؛ پێویستە جاڤاسکڕێپتی تایبەت بەکاربهێنیت بۆ لەکارخستنی بەستەرەکان لێرە.

توخمێکی دوگمە

disabledتایبەتمەندییەکە زیاد بکە بۆ <button>دوگمەکان.

< جۆری دوگمە = "دوگمە" پۆل = "btn btn-گەورە btn-primary لەکارخراوە" disabled = "ناچالاککراوە" > دوگمەی سەرەتایی </button>   
< جۆری دوگمە = "دوگمە" پۆل = "btn btn-large" لەکارخراوە > دوگمە </دوگمە>

یەک پۆل، چەندین تاگ

.btnپۆلەکە لەسەر <a>, <button>, یان <input>توخمێک بەکاربهێنە .

<a class = "btn" href = "" > بەستەر </a>  
<button class = "btn" type = "submit" > دوگمەی </button>  
< پۆلی هاتنەژوورەوە = "btn" جۆری = "دوگمە" بەها = "هاتنەژوورەوە" >   
<input class = "btn" type = "پێشکەشکردن" بەها = "ناردن" >

وەک باشترین پراکتیزە، هەوڵبدە توخمەکە بۆ کۆنتێکستەکەت هاوتا بکەیت بۆ دڵنیابوون لە هاوتاکردنی ڕەندەری وێبگەڕی بڕاو. ئەگەر input, <input type="submit">بۆ دوگمەکەت بەکاربهێنە.

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

<img src = "..." پۆل = "img-گوڵاو" >  
<img src = "..." پۆل = "بازنە-img" >  
<img src = "..." پۆل = "img-پۆلارۆید" >

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

هێماکانی ئایکۆن

140 ئایکۆن بە شێوەی سپرایت، بە ڕەنگی خۆڵەمێشی تۆخ (بەپێی پێشوەختە) و سپی بەردەستە، لەلایەن Glyphicons دابینکراوە .

ئایکۆن-شووشە
ئایکۆن-مۆسیقا
ئایکۆن-گەڕان
ئایکۆن-زەرف
ئایکۆن-دڵ
ئایکۆن-ئەستێرە
ئایکۆن-ئەستێرە-بەتاڵ
ئایکۆن-بەکارهێنەر
ئایکۆن-فیلم
ئایکۆن-یەم-گەورە
ئایکۆن-th
ئایکۆن-هەم-لیستی
ئایکۆن-باشە
ئایکۆن-لابردنی
ئایکۆن-زوم-ئین
ئایکۆن-زوم-ووت
ئایکۆن-کوژاوە
ئایکۆن-سیگناڵ
ئایکۆن-کۆگ
ئایکۆن-زبڵدان
ئایکۆن-ماڵەوە
ئایکۆن-فایل
ئایکۆن-کات
ئایکۆن-رێگا
ئایکۆن-دابەزاندن-alt
ئایکۆن-دابەزاندن
ئایکۆن-بارکردن
ئایکۆن-ئینبۆکس
ئایکۆن-یاری-بازنە
ئایکۆن-دوبارەکردنەوە
ئایکۆن-نوێکردنەوە
ئایکۆن-لیستی-alt
ئایکۆن-قفڵ
ئایکۆن-ئاڵا
ئایکۆن-هێدفۆن
ئایکۆن-دەنگ-کوژاندنەوە
ئایکۆن-دەنگی-دابەزاندن
ئایکۆن-دەنگی بەرزکردنەوە
ئایکۆن-qrcode
ئایکۆن-بارکۆد
ئایکۆن-تاگ
ئایکۆن-تاگەکان
ئایکۆن-کتێب
ئایکۆن-نیشانەی نیشانە
ئایکۆن-چاپکردن
ئایکۆن-کامێرا
ئایکۆن-فۆنت
ئایکۆن-بۆڵد
ئایکۆن-ئیتاڵیک
ئایکۆن-دەق-بەرزی
ئایکۆن-دەق-پانی
ئایکۆن-ڕێکخستنی-چەپ
ئایکۆن-ڕێکخستنی-سەنتەر
ئایکۆن-ڕێکخستنی-ڕاست
ئایکۆن-ڕێکخستنی-ڕەوایەتیدان
ئایکۆن-لیستی
ئایکۆن-indent-چەپ
ئایکۆن-indent-ڕاست
ئایکۆن-facetime-ڤیدیۆ
ئایکۆن-وێنە
ئایکۆن-قەڵەم
ئایکۆن-نەخشە-نیشاندەر
ئایکۆن-ڕێکخستنی
ئایکۆن-ڕەنگ
ئایکۆن-دەستکاری
ئایکۆن-بەشکردن
ئایکۆن-پشکنین
ئایکۆن-جوڵەکردن
ئایکۆن-هەنگاو-پاشەوە
ئایکۆن-خێرا-پاشکەوتوو
ئایکۆن-پاشکەوتوو
ئایکۆن-play
ئایکۆن-وەستان
ئایکۆن-وەستان
ئایکۆن-بۆ پێشەوە
ئایکۆن-خێرا-پێشەوە
ئایکۆن-هەنگاو-پێشەوە
ئایکۆن-دەرهێنان
ئایکۆن-شێڤرۆن-چەپ
ئایکۆن-شێڤرۆن-ڕاست
ئایکۆن-پڵەس-نیشانە
ئایکۆن-من-نیشانە
ئایکۆن-لابردنی-نیشانە
ئایکۆن-باشە-نیشانە
ئایکۆن-هێما-پرسیار
ئایکۆن-زانیاری-نیشانە
وێنەی شاشەی ئایکۆن
ئایکۆن-لابردنی-بازنە
ئایکۆن-باشە-بازنە
ئایکۆن-بان-بازنە
ئایکۆن-تیر-چەپ
ئایکۆن-تیر-ڕاست
ئایکۆن-تیر-سەرەوە
ئایکۆن-تیر-خوارەوە
ئایکۆن-بەشکردن-alt
ئایکۆن-قەبارەی-پڕ
ئایکۆن-قەبارەی-بچووک
ئایکۆن-پڵەس
ئایکۆن-کەمکردنەوە
ئایکۆن-ئەستێرە
ئایکۆن-هێمای سەرسوڕمان
ئایکۆن-دیاری
ئایکۆن-گەڵا
ئایکۆن-ئاگر
ئایکۆن-چاو-کراوە
ئایکۆن-چاو-داخستنی
ئایکۆن-ئاگادارکردنەوە-نیشانە
ئایکۆن-فڕۆکە
ئایکۆن-ڕۆژژمێر
ئایکۆن-هەڕەمەکی
ئایکۆن-کۆمێنت
ئایکۆن-موگناتیسی
ئایکۆن-شێڤرۆن-ئەپ
ئایکۆن-شێڤرۆن-داون
ئایکۆن-ریتویت
ئایکۆن-سەبەتەی کڕین
ئایکۆن-فۆڵدەر-داخستنی
ئایکۆن-فۆڵدەر-کراوە
ئایکۆن-قەبارەی-ڕاستەوخۆ
ئایکۆن-قەبارەی-ئاسۆیی
ئایکۆن-hdd
ئایکۆن-بولهۆرن
ئایکۆن-زەنگ
ئایکۆن-بڕوانامە
ئایکۆن-پەنجە گەورە
ئایکۆن-پەنجە گەورە بۆ خوارەوە
ئایکۆن-دەست-ڕاست
ئایکۆن-دەست-چەپ
ئایکۆن-دەست-سەرەوە
ئایکۆن-دەست-خوارەوە
ئایکۆن-بازنە-تیر-ڕاست
ئایکۆن-بازنە-تیر-چەپ
ئایکۆن-بازنە-تیر-سەرەوە
ئایکۆن-بازنە-تیر-خوارەوە
ئایکۆن-گڵۆب
ئایکۆن-کلیل
ئایکۆن-ئەرکەکان
ئایکۆن-فلتەر
ئایکۆن-جانتایە
ئایکۆن-تەواو شاشە

ئیسباتکردنی گلیفیکۆنەکان

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

چۆن بەكار دەهێنرێت

هەموو ئایکۆنەکان پێویستیان بە <i>تاگێک هەیە کە پۆلێکی تایبەتی هەبێت، پێشگرەکەی بە icon-. بۆ بەکارهێنان ئەم کۆدەی خوارەوە لە هەر شوێنێک دابنێ:

<i class = "ئایکۆن-گەڕان" </i>

هەروەها ستایلەکان بەردەستن بۆ ئایکۆنە هەڵگەڕاوەکان (سپی)، کە ئامادەکراون لەگەڵ یەک پۆلی زیادە. ئێمە بە تایبەتی ئەم پۆلە لەسەر hover و active states بۆ nav و dropdown links جێبەجێ دەکەین.

<i class = "ئایکۆن-گەڕان ئایکۆن-سپی" ></i>

سەرەکان بەرز دەکەنەوە!لە کاتی بەکارهێنانی لە تەنیشت ڕیزەکانی دەق، وەک لە دوگمەکان یان بەستەری nav، دڵنیابە بۆشایییەک لە دوای <i>تاگەکە بەجێبهێڵە بۆ دوورییەکی دروست.

نموونەی ئایکۆنەکان

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

دوگمەکان

گروپی دوگمەکان لە توولبارێکی دوگمەدا

<div class = "btn-تولبار" > 
  <div class = "گرووپی btn" > 
    <a class = "btn" href = "#" ><i class = "ئایکۆن-ڕێکخستنی-چەپ" ></i></a>   
    <a class = "btn" href = "#" ><i class = "ناوەندی-ڕێکخستنی ئایکۆن" ></i></a>   
    <a class = "btn" href = "#" ><i class = "ئایکۆن-ڕێکخستنی-ڕاست" ></i></a>   
    <a class = "btn" href = "#" ><i class = "ئایکۆن-ڕێکخستنی-ڕەوایەتیدان" ></i></a>   
  </div>
</div>

دابەزین لە گروپێکی دوگمەدا

بەکارهێنەر

<div class = "گرووپی btn" > 
  <a class = "btn btn-primary" href = "#" ><i class = "ئایکۆن-بەکارهێنەری ئایکۆن-سپی" ></i> بەکارهێنەر </a>   
  <a class = "btn btn-primary دابەزین-گۆڕین" data-toggle = "دابەزاندن" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "مێنۆی دابەزین" > 
    <li><a href = "#" ><i class = "قەڵەم-ئایکۆن" </i> دەستکاری بکە </a></li>  
    <li><a href = "#" ><i class = "ئایکۆن-زبڵدان" </i> بسڕەوە </a></li>  
    <li><a href = "#" ><i class = "بازنەی قەدەغەکردنی ئایکۆن" ></i> قەدەغەکردن </a></li>  
    <li class = "دابەشکەر" </li> 
    <li><a href = "#" ><i class = "i" ></i> بەڕێوەبەر دروست بکە </a></li>  
  </ul>
</div>

قەبارەی دوگمەکان

ئەستێرە ئەستێرە ئەستێرە

<a class = "btn btn-large" href = "#" ><i class = "ئایکۆن-ئەستێرە" ></i> ئەستێرە </a>   
<a class = "btn btn-small" href = "#" ><i class = "ئایکۆن-ئەستێرە" ></i> ئەستێرە </a>   
<a class = "btn btn-mini" href = "#" ><i class = "ئایکۆن-ئەستێرە" ></i> ئەستێرە </a>

گەشتکردن

<ul class = "nav nav-list" > 
  <li class = "چالاك" ><a href = "#" ><i class = "ئایکۆن-ماڵەوە ئایکۆن-سپی" </i> ماڵەوە </a></li>   
  <li><a href = "#" ><i class = "کتێبی ئایکۆن" </i> کتێبخانە </a></li>  
  <li><a href = "#" ><i class = "قەڵەم-ئایکۆن" </i> بەرنامەکان </a></li>  
  <li><a href = "#" ><i پۆل = "من" </i> هەمەجۆر </a></li>  
</ul>

مەیدانەکانی فۆڕم

<div class = "گرووپی-کۆنتڕۆڵ" > 
  <label class = "control-label" بۆ = "inputIcon" > ناونیشانی ئیمەیڵ </label>  
  <div class = "کۆنتڕۆڵەکان" > 
    <div class = "پێشخستنی هاتنەژوورەوە" > 
      <span class = "زیادکردن" ><i class = "ئایکۆن-زەرف" ></i></span>  
      < پۆلی هاتنەژوورەوە = "span2" id = "inputIcon" جۆر = "دەق" >   
    </div>
  </div>
</div>

تایپۆگرافی

سەردێڕەکان

h1. سەردێڕی یەکەم

h2. سەردێڕی ٢

h3. سەردێڕی سێیەم

h4. سەردێڕی ٤

h5. سەردێڕی ٥

h6. سەردێڕی ٦

کۆپی جەستە

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

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

دووپات کردنەوە

<small>

تۆخ

ئیتاڵیک

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

پۆلەکانی جەختکردنەوە

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

<abbr>

<abbr class="initialism">

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

<address>

بلۆککۆتەکان

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

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

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

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

لیستەکان

بێ فەرمان

فەرمان کراوە

بێ ستایل

لە هێڵ

وەسف

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

کۆد

لە هێڵ

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

خشتەکان

شێوازە پێشوەختەکان

پۆلە ئیختیارییەکان

.table-striped

.table-bordered

.table-hover

.table-condensed

پۆلەکانی ڕیز هەڵبژاردە

پشتگیری لە نیشاندانی خشتەکان دەکرێت

فۆڕمەکان

شێوازە پێشوەختەکان

نەخشە ئیختیارییەکان

فۆڕمی گەڕان

فۆڕمی ناو هێڵ

فۆڕمی ئاسۆیی

کۆنتڕۆڵەکانی فۆڕمی پشتگیریکراو

زانیارییەکانی ناوەوە

ناوچەی دەق

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

پێشوەختە (کۆکراوە)

بۆکسەکانی هەڵبژاردنی ناو هێڵ

هەڵدەبژێرێت

درێژکردنەوەی کۆنتڕۆڵەکانی فۆڕم

زانیارییەکانی پێشوەختە و هاوپێچکراو

هەڵبژاردەکانی پێشوەختە

تێکەڵاو

دوگمە لەبری دەق

دابەزینی دوگمەکان

گروپە دابەزینە بەش بەشەکان

فۆڕمی گەڕان

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

هاتنە ژوورەوەی ئاستی بلۆک

قەبارەدانانی ڕێژەیی

قەبارەدانانی تۆڕ

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

کردارەکان پێکبهێنن

دەقی یارمەتی

یارمەتی ناو هێڵ

یارمەتی بلۆک بکە

باری کۆنترۆڵکردنی فۆرم

فۆکۆسی هاتنە ژوورەوە

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

هاتنە ژوورەوەی لەکارخراو

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`