بنەما CSS

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

سەردێڕەکان و کۆپی جەستە

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

تەواوی تۆڕی تایپۆگرافی لەسەر بنەمای دوو گۆڕاوی Less لە فایلە variables.less ی ئێمەدا دامەزراوە: @baseFontSizeو @baseLineHeight. یەکەمیان قەبارەی فۆنتی بنەڕەتییە کە بە درێژایی بەکارهاتووە و دووەمیان بەرزی هێڵی بنەڕەتییە.

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

نموونەی دەقی جەستە

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

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

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

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

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

h2. سەردێڕی ٢

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

h4. سەردێڕی ٤

h5. سەردێڕی ٥

h6. سەردێڕی ٦

جەختکردنەوە و ناونیشان و کورتکردنەوە

پێکهاتە	بەکارهێنان	ئارەزوومەندانە
`<strong>`	بۆ جەختکردنەوە لەسەر پارچەیەک لە دەق بە گرنگ	هیچ
`<em>`	بۆ جەختکردنەوە لەسەر پارچەیەک لە دەق بە سترێسەوە	هیچ
`<abbr>`	کورتکراوە و کورتکراوەکان دەپێچێتەوە بۆ پیشاندانی وەشانی فراوانکراو لەسەر هۆڤەر	`title`تایبەتمەندی هەڵبژاردە بۆ دەقی فراوانکراو لەخۆ بگرە `.initialism`بۆ کورتکراوەی گەورە پۆل بەکاربهێنە .
`<address>`	بۆ زانیاری پەیوەندی بۆ نزیکترین باپیرەی یان تەواوی جەستەی کارەکانی	پاراستنی فۆرماتکردن بە کۆتایی هێنان بە هەموو دێڕەکان بە...`<br>`

بە بەکارهێنانی جەختکردنەوە

Fusce dapibus , tellus ac cursus commodo , تۆرتۆر ماوریس کۆندیمەنتۆم نیب , ut fermentum massa justo sit amet risus. مایسێناس فاوسیبوس مۆلیس ئینتەردوم. Nulla vitae elit libero، یەکێکە لە فارێترا ئاوگەکان.

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

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

لێرەدا دوو نموونە دەخەینەڕوو کە چۆن <address>دەتوانرێت تاگەکە بەکاربهێنرێت:

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

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

نموونەی کورتکراوەکان

کورتکراوەکان کە titleتایبەتمەندییەکیان هەیە سنوورێکی خوارەوەی خاڵی سووکیان هەیە و ئاماژەیەکی یارمەتیدان لە کاتی هۆڤەردا. ئەمەش ئاماژەی زیاتر بە بەکارهێنەران دەدات کە شتێک لە کاتی هۆڤەردا پیشان دەدرێت.

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

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

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

بلۆککۆتەکان

پێکهاتە	بەکارهێنان	ئارەزوومەندانە
`<blockquote>`	توخمێکی ئاستی بلۆک بۆ هێنانەوەی ناوەڕۆک لە سەرچاوەیەکی ترەوە	تایبەتمەندی زیاد بکە `cite`بۆ URL سەرچاوە بەکارهێنان `.pull-left`و `.pull-right`پۆلەکان بۆ هەڵبژاردە هەڵدەفڕێتەکان
`<small>`	توخمێکی هەڵبژاردە بۆ زیادکردنی وەرگێڕانێکی ڕووبەڕووی بەکارهێنەر، بە شێوەیەکی گشتی نووسەرێکە بە ناونیشانی کارەکەی	لە `<cite>`دەوری ناونیشان یان ناوی سەرچاوەکە دابنێ

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

توخمێکی هەڵبژاردە لەخۆ بگرە <small>بۆ ئاماژەدان بە سەرچاوەکەت و —پێشی داشێکی em بەدەست دەهێنیت بۆ مەبەستی ستایلکردن.

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

نموونەی بلۆککۆتەکان

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

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

بۆ ئەوەی بلۆککۆتەکەت بۆ لای ڕاست هەڵبفڕێت، زیاد بکە class="pull-right":

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

لیستەکان

بێ فەرمان

<ul>

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

بێ ستایل

<ul class="unstyled">

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

فەرمان کراوە

<ol>

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

وەسف

<dl>

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

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

<dl class="dl-horizontal">

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

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

لە هێڵ

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

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

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

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

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

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

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

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

گووگڵ پریتیفای

هەمان <pre>توخم وەربگرە و دوو پۆلی هەڵبژاردە زیاد بکە بۆ بەرزکردنەوەی ڕەندەرکردن.

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

<pre class = "چاپێکی جوان." 
     هێڵەکان" >
  <p>نموونەی دەق لێرە...</p>
</pre>

google-code-prettify دابەزێنە و سەیری readme بکە بۆ چۆنیەتی بەکارهێنانی.

خشتەی نیشانەدان

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

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

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

ناو	پۆل	وەسف
بنەڕەتی	هیچ	بێ ستایل، تەنها ستوون و ڕیز
بنەڕەتی	`.table`	تەنها هێڵە ئاسۆییەکان لە نێوان ڕیزەکاندا
سنووردارە	`.table-bordered`	گۆشەکان دەوری دەکات و سنووری دەرەوە زیاد دەکات
زیبرا-هێڵکاری	`.table-striped`	ڕەنگی پاشبنەمای خۆڵەمێشی سووک زیاد دەکات بۆ ڕیزەکانی نامۆ (1، 3، 5، هتد)
چڕکراوە	`.table-condensed`	پادینگی ڕاست لە نیوە دەبڕێت، لە 8px بۆ 4px، لەناو هەموو `td`و `th`توخمەکاندا

نموونەی خشتەکان

1. شێوازەکانی خشتەی پێشوەختە

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

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

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

2. مێزی ڕەنگاوڕەنگ

کەمێک فەنتازی لەگەڵ خشتەکانت بەدەست بهێنە بە زیادکردنی زیبرا-ڕیز-تەنها .table-stripedپۆلەکە زیاد بکە.

تێبینی: خشتەکانی ڕەنگاوڕەنگ :nth-childهەڵبژێرەری CSS بەکاردەهێنن و لە IE7-IE8دا بەردەست نییە.

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

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

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

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

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

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

4. مێزی چڕکراو

خشتەکانت بچووکتر بکە بە زیادکردنی .table-condensedپۆلەکە بۆ بڕینی پادینگی خانەی خشتەکان لە نیوەدا (لە 8px بۆ 4px).

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

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

5. هەموویان تێکەڵ بکە!

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

<table class = "خشتەی خشتەی ڕەنگاوڕەنگ خشتەی سنووردار بە خشتەی چڕکراوە" > 
  ...
</خشتەی>

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

HTML و CSS ی نەرم و نیان

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

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

چوار نەخشە لەخۆدەگرێت

بووتستراپ لەگەڵ پشتگیری چوار جۆر نەخشەی فۆڕمدا دێت:

ڕاست (بەپێی پێشوەختە)
گەڕان
لە هێڵ
ئاسۆیی

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

کۆنتڕۆڵی دەوڵەتەکان و زۆر شتی تر

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

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

چوار جۆر فۆرم

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

ناو	پۆل	وەسف
ڕاست (بەپێی پێشوەختە)	`.form-vertical` (پێویست نیە)	لیبێڵە کۆکراوەکان و چەپەکان لەسەر کۆنتڕۆڵەکان
لە هێڵ	`.form-inline`	کۆنتڕۆڵەکانی ناوی چەپ بە چەپ و بلۆکەکانی ناو هێڵ بۆ شێوازی کۆمپاکت
گەڕان	`.form-search`	هاتنە ژوورەوەی دەقی زیادە-گوڵاو بۆ جوانکارییەکی گەڕانی ئاسایی
ئاسۆیی	`.form-horizontal`	لیبێڵەکانی چەپ و ڕاست لەسەر هەمان هێڵ وەک کۆنتڕۆڵەکان هەڵبفڕێنن

نموونەی فۆڕمەکان بە بەکارهێنانی تەنها کۆنتڕۆڵەکانی فۆڕم، بێ نیشانەیەکی زیادە

فۆڕمی بنەڕەتی

دیفۆڵتی زیرەک و سووک بەبێ مارکاپی زیادە.

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

فۆڕمی گەڕان

زیادکردن .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>

فۆرمەکانی ئاسۆیی

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

نووسینی دەق (دەق، وشەی نهێنی، ئیمەیڵ و هتد)
بۆکسی هەڵبژاردن
ڕادیۆ
دەسنیاشنکردن
چەندین هەڵبژاردن
داخڵکردنی پەڕگە
ناوچەی نووسین

نووسینی دەق

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

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

بژاردەی یەکەم ئەمە و ئەو- دڵنیابە بۆچی زۆر باشە

لیست هەڵبژێرە

Multicon-هەڵبژاردن

هاتنە ژوورەوەی فایل

ناوچەی دەق

نموونەی مارکاپ

بە سەرنجدان بە شێوازی فۆڕمی نموونەی سەرەوە، لێرەدا ئەو نیشانەیەی پەیوەستە بە یەکەم گروپی هاتنەژوورەوە و کۆنترۆڵەوە. پۆلەکانی .control-group, .control-label, و .controlsهەموویان پێویستن بۆ ستایلکردن.

<form class = "فۆڕم-ئاسۆیی" > 
  <کۆمەڵەی مەیدان>
    <ئەفسانە> دەقی ئەفسانە </legend>
    <div class = "گرووپی-کۆنتڕۆڵ" > 
      <label class = "control-label" بۆ = "input01" > نووسینی دەق </label>  
      <div class = "کۆنتڕۆڵەکان" > 
        < جۆری هاتنەژوورەوە = "دەق" پۆل = "هاتنەژوورەوە-xlarge" id = "هاتنەژوورەوە01" >   
        <p class = "help-block" > پشتگیریکردنی دەقی یارمەتی </p> 
      </div>
    </div>
  </fieldset>
</form>

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

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

چەسپاندنی فۆڕم

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

<کۆمەڵەی مەیدان
  class = "هەڵەی گروپی کۆنترۆڵ" >
  ...
</fieldset>

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

هاتنە ژوورەوەی دەستکاری نەکراو

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

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

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

ئەمە بۆکسێکی هەڵبژاردنی لەکارخراوە

هاتنە ژوورەوە لەگەڵ ئاگادارکردنەوە

لەوانەیە شتێک بە هەڵەدا چووبێت

هاتنە ژوورەوە بە هەڵە

تکایە هەڵەکە ڕاست بکەرەوە

هاتنە ژوورەوە لەگەڵ سەرکەوتن

وۆهوو!

بە سەرکەوتن هەڵیبژێرە

وۆهوو!

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

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

گروپەکانی هاتنەژوورەوە- بە دەقی هاوپێچ یان پێشوەختە- ڕێگەیەکی ئاسان بۆ پێدانی کۆنتێکستی زیاتر بۆ زانیارییەکانتان دابین دەکەن. نموونەی نایاب بریتین لە نیشانەی @ بۆ ناوی بەکارهێنەرانی تویتەر یان $ بۆ دارایی.

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

تا v1.4، Bootstrap پێویستی بە مارکاپی زیادە هەبوو لە دەوری بۆکسەکانی هەڵبژاردن و ڕادیۆکان بۆ ئەوەی کۆیان بکاتەوە. ئێستا، ئەوە پرسێکی سادەیە لە دووبارەکردنەوەی ئەو <label class="checkbox">کە دەپێچێتەوە <input type="checkbox">.

هەروەها بۆکسەکانی هەڵبژاردنی ناو هێڵ و ڕادیۆکان پشتگیری دەکرێن. تەنها زیاد بکە .inlineبۆ هەر .checkboxیانێک .radioو تەواو بوویت.

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

بۆ بەکارهێنانی زانیارییەکانی پێشوەختە یان زیادکردن لە فۆڕمی ناوهێڵدا، دڵنیابە کە .add-onو inputلەسەر هەمان هێڵ دابنێیت، بەبێ بۆشایی.

دەقی یارمەتی فۆڕم بکە

بۆ زیادکردنی دەقی یارمەتی بۆ زانیارییەکانی فۆڕمەکەت، دەقی یارمەتی ناو هێڵ لەگەڵ <span class="help-inline">یان بلۆکێکی دەقی یارمەتی لەگەڵ <p class="help-block">دوای توخمەکە دابنێ.

قەبارەی تۆڕەکان فۆڕم بکە

هەمان .span*پۆلەکان لە سیستەمی تۆڕەوە بەکاربهێنە بۆ قەبارەی هاتنەژوورەوە.

قەبارەی یەکتر بگۆڕە

هەروەها دەتوانیت پۆلە ئیستاتیکەکان بەکاربهێنیت کە نەخشە ناکەن بۆ تۆڕەکە، خۆیان لەگەڵ شێوازەکانی CSS وەڵامدەرەوەدا دەگونجێنن، یان حساب بۆ جۆرە جیاوازەکانی کۆنتڕۆڵەکان ناکەن (بۆ نموونە، inputبەرامبەر select).

دەقی پێشوەختە هەڵواسراو

لێرەدا چەند دەقێکی یارمەتیت بۆ دەخەینەڕوو

دەقی هاوپێچکراو

.00

لێرەدا دەقی یارمەتی زیاترە

پەیوەستکردن و پێش پەیوەستکردن

$ .00

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

دوو دوگمەی پەیوەستکردن

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

1. 1 2. 2 3. 3

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

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

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

دوگمەکانی ڕادیۆ

بژاردەی یەکەم ئەمە و ئەو- دڵنیابە بۆچی زۆر باشە بژاردەی دووەم دەتوانێت شتێکی تر بێت و هەڵبژاردنی بژاردەی یەکەم هەڵدەبژێرێت

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

دوگمەکان بۆ کردارەکان

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

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

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

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

چەندین قەبارە

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

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

بۆ دوگمە لەکارکەوتووەکان، .disabledپۆلەکە زیاد بکە بۆ بەستەرەکان و disabledتایبەتمەندییەکە بۆ <button>توخمەکان.

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

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

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

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

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

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

ئایکۆن-شووشە
ئایکۆن-مۆسیقا
ئایکۆن-گەڕان
ئایکۆن-زەرف
ئایکۆن-دڵ
ئایکۆن-ئەستێرە
ئایکۆن-ئەستێرە-بەتاڵ
ئایکۆن-بەکارهێنەر
ئایکۆن-فیلم
ئایکۆن-یەم-گەورە
ئایکۆن-th
ئایکۆن-هەم-لیستی
ئایکۆن-باشە
ئایکۆن-لابردنی
ئایکۆن-زوم-ئین
ئایکۆن-زوم-ووت
ئایکۆن-کوژاوە
ئایکۆن-سیگناڵ
ئایکۆن-کۆگ
ئایکۆن-زبڵدان
ئایکۆن-ماڵەوە
ئایکۆن-فایل
ئایکۆن-کات
ئایکۆن-رێگا
ئایکۆن-دابەزاندن-alt
ئایکۆن-دابەزاندن
ئایکۆن-بارکردن
ئایکۆن-ئینبۆکس
ئایکۆن-یاری-بازنە
ئایکۆن-دوبارەکردنەوە
ئایکۆن-نوێکردنەوە
ئایکۆن-لیستی-alt
ئایکۆن-قفڵ
ئایکۆن-ئاڵا
ئایکۆن-هێدفۆن

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

ئایکۆن-پاشکەوتوو
ئایکۆن-play
ئایکۆن-وەستان
ئایکۆن-وەستان
ئایکۆن-بۆ پێشەوە
ئایکۆن-خێرا-پێشەوە
ئایکۆن-هەنگاو-پێشەوە
ئایکۆن-دەرهێنان
ئایکۆن-شێڤرۆن-چەپ
ئایکۆن-شێڤرۆن-ڕاست
ئایکۆن-پڵەس-نیشانە
ئایکۆن-من-نیشانە
ئایکۆن-لابردنی-نیشانە
ئایکۆن-باشە-نیشانە
ئایکۆن-هێما-پرسیار
ئایکۆن-زانیاری-نیشانە
وێنەی شاشەی ئایکۆن
ئایکۆن-لابردنی-بازنە
ئایکۆن-باشە-بازنە
ئایکۆن-بان-بازنە
ئایکۆن-تیر-چەپ
ئایکۆن-تیر-ڕاست
ئایکۆن-تیر-سەرەوە
ئایکۆن-تیر-خوارەوە
ئایکۆن-بەشکردن-alt
ئایکۆن-قەبارەی-پڕ
ئایکۆن-قەبارەی-بچووک
ئایکۆن-پڵەس
ئایکۆن-کەمکردنەوە
ئایکۆن-ئەستێرە
ئایکۆن-هێمای سەرسوڕمان
ئایکۆن-دیاری
ئایکۆن-گەڵا
ئایکۆن-ئاگر
ئایکۆن-چاو-کراوە

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

وەک سپرایت دروستکراوە

لەبری ئەوەی هەموو ئایکۆنێک بکەینە داواکارییەکی زیادە، ئێمە کۆمان کردۆتەوە بۆ سپرایتێک- کۆمەڵێک وێنە لە یەک فایلدا کە CSS بەکاردەهێنێت بۆ جێگیرکردنی وێنەکان بە background-position. ئەمە هەمان شێوازە کە لە تویتەر.کۆم بەکاری دەهێنین و بە باشی کاری بۆ ئێمە کردووە.

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

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

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

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

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

هەروەها ستایلەکان بەردەستن بۆ ئایکۆنە هەڵگەڕاوەکان (سپی)، کە ئامادەکراون لەگەڵ یەک پۆلی زیادە:

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

140 پۆل هەیە کە دەتوانیت هەڵیبژێریت بۆ ئایکۆنەکانت. تەنها <i>تاگێک زیاد بکە بە پۆلە گونجاوەکان و تۆ ڕێکدەخرێت. دەتوانن لیستی تەواو لە sprites.less یان ڕاست لێرە لەم بەڵگەنامەیەدا بدۆزنەوە.

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

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

ئایکۆنەکان زۆر باشن، بەڵام مرۆڤ لە کوێ بەکاریان دەهێنێت؟ لێرەدا چەند بیرۆکەیەک دەخەینەڕوو:

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

لە بنەڕەتدا لە هەر شوێنێک بتوانیت <i>تاگێک دابنێیت، دەتوانیت ئایکۆنێک دابنێیت.

نموونە

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

نوێ بکەرەوە پشکنین سڕینەوە

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

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