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

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

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

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

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

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

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

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>هەر 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>

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

وەسف

<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 لە ئیگێت مێتۆس.

مالێسوادا پۆرتا

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

لە هێڵ

پارچە کۆدەکانی ناو هێڵ بە <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>
</خشتەی>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ناوی ناو دەقی یارمەتی پەیوەندیدار!

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

سەیرم بکەن پێشکەشکردن

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

فۆڕمی گەڕان

ڕەنگدانەوەی شێوازە پێشوەختەکانی وێبکیت، تەنها زیاد بکە .form-searchبۆ بواری گەڕانی گوڵاوی زیادە.

گەڕان

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

فۆڕمی ناو هێڵ

ئینپوتەکان ئاستی بلۆکن بۆ دەستپێکردن. بۆ .form-inlineو .form-horizontal, ئێمە inline-block بەکاردەهێنین.

منت لە بیر بێت چوونە ژوورەوە

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

کۆنتڕۆڵی پشتگیری Bootstrap دەکات

نووسینی دەق

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

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

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

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

شتێک 2. 2 3. 3 4. 4 5. 5

Multicon-هەڵبژاردن

1. 1 2. 2 3. 3 4. 4 5. 5

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

ناوچەی دەق

باقییەکەی هەڵگرە ڕەتکردنەوە

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

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

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

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

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

---

پێشوەختەی نوێ لەگەڵ v2.0

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

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

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

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

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

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

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

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

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

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

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

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

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

وۆهوو!

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

1. 1 2. 2 3. 3 4. 4 5. 5 وۆهوو!

باقییەکەی هەڵگرە ڕەتکردنەوە

دووبارە دیزاین کراوەتەوە لە وێبگەڕەکان

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

---

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

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

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

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

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

1. 1 2. 2 3. 3 4. 4 5. 5 1. 1 2. 2 3. 3 4. 4 5. 5 1. 1 2. 2 3. 3 4. 4 5. 5

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

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

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

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

@

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

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

.00

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

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

$ .00

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

بڕۆ!

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

1. 1 2. 2 3. 3

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

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

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

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

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

باقییەکەی هەڵگرە ڕەتکردنەوە

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

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

---

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

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

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

---

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

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ناونیشانی پۆستی ئەلکترۆنی