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

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

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

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

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

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

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

لە هێڵ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بۆ ئەنکر و فۆرم

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

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

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

دوگمەی گەورەتر یان بچووکتر فەنتازی؟ هەتبێت لەسەری!

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

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

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

بۆ دوگمە لەکارخراوەکان، .btn-disabledبۆ بەستەرەکان و :disabledبۆ <button>توخمەکان بەکاری بهێنە.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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