مێژوو

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

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

زیاتر بخوێنەوە لە dev.twitter.com ›

پشتگیری وێبگەڕ

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

• نوێترین سەفاری
• نوێترین گووگڵ کرۆم
• فایەرفۆکس 4+
• ئینتەرنێت ئێکسپلۆرەر 7+
• ئۆپێرا 11

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

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

• هەموو فایلە ئەسڵیەکانی .less
• CSS بە تەواوی کۆکراوەتەوە و بچووک کراوە
• بەڵگەنامەکانی ڕێنمایی ستایل تەواو بکە
• نموونەی قاڵبی لاپەڕە (زیاتر بەم زووانە دێت)

تۆڕی پێشوەختە

سیستەمی تۆڕی پێشوەختە کە وەک بەشێک لە Bootstrap دابین کراوە تۆڕێکی 16 ستوونی پانەکەی 940px یە. تامێکی سیستەمی تۆڕی بەناوبانگی 960 یە، بەڵام بەبێ پەراوێز/پادکردنی زیادە لە لای چەپ و ڕاست.

نموونەی تۆڕی نیشانەدان

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

<div class = "ڕیز" > 
  <div class = "ستوونی span6" > 
    ...
  </div>
  <div class = "ستوونی span10" > 
    ...
  </div>
</div>

نەخشەی جێگیر کراوە

شێوازی پێشوەختە و سادە بە فراوانی 940px، ناوەنددار بۆ تەنها نزیکەی هەر ماڵپەڕێک یان لاپەڕەیەک کە لەلایەن تاکە لاپەڕەیەکەوە دابینکراوە <div.container>.

<جەستە>
  <div class = "دەفر" > 
    ...
  </div>
</body>

شێوازی شلە

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

<جەستە>
  <div class = "شلەی دەفر" > 
    <div class = "پەڕەی لایەنی" > 
      ...
    </div>
    <div class = "ناوەڕۆک" > 
      ...
    </div>
  </div>
</body>

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

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

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

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

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

h2. سەردێڕی ٢

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

h4. سەردێڕی ٤

h5. سەردێڕی ٥

h6. سەردێڕی ٦

نموونەی بڕگە

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

سەردێڕی نموونە سەردێڕی لاوەکی هەیە...

هەمەجۆر. توخمەکان

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

<strong> <em> <address> <abbr>

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

تاگی جەختکردنەوە ( <strong>و <em>) دەبێ بەکاربهێنرێت بۆ ئاماژەدان بە گرنگی یان جەختکردنەوەی زیاتری وشەیەک یان دەستەواژەیەک بە بەراورد بە کۆپییەکی دەوروبەری. بەکارهێنان <strong>بۆ گرنگی و <em>بۆ جەختکردنەوە لەسەر فشار .

جەختکردنەوە لە بڕگەیەکدا

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

تێبینی: هەر دێڕێک لە دێڕێکدا <address>دەبێت بە هێڵ-شکاندن ( <br />) کۆتایی بێت یان لە تاگی ئاستی بلۆکدا بپێچرێتەوە (بۆ نموونە، <p>) بۆ ئەوەی ناوەڕۆکەکە بە باشی دابڕێژرێت.

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

بۆ کورتکراوە و کورتکراوە، <abbr>تاگی ( لە HTML5<acronym> دا بەکارنەهاتووە ) بەکاربهێنە. فۆڕمی کورتکراوە لەناو تاگەکەدا دابنێ و ناونیشانێک بۆ ناوی تەواو دابنێ.

بلۆککۆتەکان

<blockquote> <p> <small>

چۆنێتی وەرگێڕان

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

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

دکتۆر جولیۆس هیبێرت

بێ فەرمان<ul>

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

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

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

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

دروستکردنی مێز

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

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

هەمیشە سەردێڕی ستوونەکانت بە شێوەیەک بپێچە <thead>کە پلەبەندی <thead>> <tr>> بێت <th>.

هاوشێوەی سەردێڕی ستوونەکان، هەموو ناوەڕۆکی جەستەی خشتەکەت دەبێت بە شێوەی پێچرابێت <tbody>بۆیە پلەبەندییەکەت <tbody>> <tr>> بێت <td>.

نموونە: شێوازەکانی خشتەی پێشوەختە

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

# .	ناوی یەکەم	ناوی کۆتایی	زمان
1. 1	هەندێک	یەک	ئینگلیزی
2. 2	جۆ	سیکسپاک	ئینگلیزی
3. 3	Stu	دێنت	کۆد

<خشتە>
  ...
</خشتەی>

نموونە: Zebra-striped

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

# .	ناوی یەکەم	ناوی کۆتایی	زمان
1. 1	هەندێک	یەک	ئینگلیزی
2. 2	جۆ	سیکسپاک	ئینگلیزی
3. 3	Stu	دێنت	کۆد

تێبینی: Zebra-striping پێشکەوتنێکی پێشکەوتووە کە بۆ وێبگەڕە کۆنەکانی وەک IE8 و خوارەوە بەردەست نییە.

<table class = "زیبرا-هێڵکاری" > 
...
</خشتەی>

نموونە: Zebra-striped w/ TableSorter.js

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

# .	ناوی یەکەم	ناوی کۆتایی	زمان
1. 1	هی تۆ	یەک	ئینگلیزی
2. 2	جۆ	سیکسپاک	ئینگلیزی
3. 3	Stu	دێنت	کۆد

<script src = "js/jquery/jquery.ڕیژەکاری خشتەکان.min.js" ></script> 
<سکریپت > 
  $ ( فەنکشن () { 
    $ ( "خشتەی#نموونەی خشتەی ڕیزکردن" ). ڕیزکردنی خشتەکان ({ ڕیزکردنی لیستی : [[ 1 , 0 ]] });  
  });
</script>
<table class = "زیبرا-هێڵکاری" > 
  ...
</خشتەی>

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

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

نموونە فۆڕمی ئەفسانە

X-Large هاتنە ژوورەوە

دەسنیاشنکردن

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

دەسنیاشنکردن

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

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

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

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

X-Large هاتنە ژوورەوە

پارچەیەکی بچووک لە دەقی یارمەتی

نموونە فۆڕمی ئەفسانە

دەقی پێشوەختە

@

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

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

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

نموونە فۆڕمی ئەفسانە

لیستی بژاردەکان

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

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

مەودای بەروار

بۆ هەموو کاتەکان بە کاتی ستانداردی زەریای هێمن (GMT -08:00) نیشان دراوە.

ناوچەی دەق

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

لیستی بژاردەکان

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

  ڕەتکردنەوە

فۆڕمی کۆکراوە

زیاد بکە .form-stackedبۆ HTML ی فۆڕمەکەت و لە سەرووی مەیدانەکانیانەوە ناوت دەبێت لەبری ئەوەی لە لای چەپیان بێت. ئەمە زۆر باش کاردەکات ئەگەر فۆڕمەکانت کورت بن یان دوو ستوونی زانیاریت هەبێت بۆ فۆڕمی قورستر.

نموونە فۆڕمی ئەفسانە

X-Large هاتنە ژوورەوە

دەسنیاشنکردن

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

نموونە فۆڕمی ئەفسانە

X-Large هاتنە ژوورەوە

پارچەیەکی بچووک لە دەقی یارمەتی

لیستی بژاردەکان

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

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

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

دوگمەکان

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

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

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

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

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

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

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

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

بەستەرەکان

دوگمەکان

ئەمە چیە

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

دەتوانرێت بە خواستی خۆت دابنرێت

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

دابەزینەکان لەخۆدەگرێت

وەک بەشێک لە گەشتە سەرەکییەکە، ئێمە توانای زیادکردنی دابەزینمان بۆ ناو گەشتەکەت داناوە. سەیری nav ی لاوەکی بکە لە سەرەوە (ڕیزبەندی ڕاست) بۆ ئەوەی بزانیت چۆن ئەنجام دەدرێت.

تاب و حەب

دروستکردنی گەشتێکی لاوەکی سادە بە <ul>. لە نێوان تابەکان یان حەبەکاندا بگۆڕە بە زیادکردنی پۆلی گونجاو.

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

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

<ul class = "تابەکان" > 
  <li class = "چالاك" ><a href = "#" > ماڵەوە </a></li>  
  <li><a href = "#" > پڕۆفایلی </a></li> 
  <li><a href = "#" > پەیامەکان </a></li> 
  <li><a href = "#" > ڕێکخستنەکان </a></li> 
  <li><a href = "#" > پەیوەندی </a></li> 
</ul>

• ماڵەوە
• پرۆفایل
• پەیامەکان
• دانانەوە
• پەیوەندی

<ul class = "حەب" > 
  <li class = "چالاك" ><a href = "#" > ماڵەوە </a></li>  
  <li><a href = "#" > پڕۆفایلی </a></li> 
  <li><a href = "#" > پەیامەکان </a></li> 
  <li><a href = "#" > ڕێکخستنەکان </a></li> 
  <li><a href = "#" > پەیوەندی </a></li> 
</ul>

لاپەڕەسازی

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

<div class = "لاپەڕەکردن" > 
  <ul>
    <li class = "پێشتر لەکارخراوە" ><a href = "#" > ← پێشوو </a></li>  
    <li class = "چالاك" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "دواتر" ><a href = "#" > دواتر → </a></li>  
  </ul>
</div>

ئاگادارکردنەوە بنەڕەتییەکان

div.alert-message

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

نامەکان بلۆک بکە

div.alert-message.block-message

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

مۆداڵەکان

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

ئامۆژگاری ئامرازەکان

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

پۆپۆڤەرز

بەکارهێنانی popovers بۆ دابینکردنی زانیاری ژێردەقی بۆ لاپەڕەیەک بەبێ ئەوەی کاریگەری لەسەر شێوازی دانان هەبێت.

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

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

چۆن ئەمە بەکار ئەهێنی

ئەم هەڵبژاردنە بەکاربهێنە بۆ ئەوەی بە تەواوی سوود لە گۆڕاوەکانی Less ی Bootstrap و mixins و هێلانەکردن لە CSS وەربگریت لە ڕێگەی javascript لە وێبگەڕەکەتدا.

<link rel = "stylesheet/less" href = "کەمتر/bootstrap.less" میدیا = "هەموو" />    
<script src = "js/کەمتر-1.1.3.min.js" ></script> 

هەست بە چارەسەری .js ناکەیت؟ ئەپی Less Mac تاقی بکەرەوە یان Node.js بەکاربهێنە بۆ کۆمپایڵ کاتێک کۆدەکەت بڵاو دەکەیتەوە.

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

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

گۆڕاوەکان

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

// بەستەرەکان
@linkColor : #8b59c2؛         
@linkColorHover :     تاریک بکەرەوە ( @linkColor , 10 ); 
 
// خۆڵەمێشیەکان
@ڕەش : #000؛             
@grayDark :           ڕووناک بکەرەوە ( @ڕەش , 25 %); 
@خۆڵەمێشی :               سووک بکە ( @ڕەش , 50 %)؛ 
@grayLight :          سووک بکە ( @ڕەش , 70 %)؛ 
@grayLighter :        سووک بکە ( @ڕەش , 90 %); 
@سپی : #fff ؛             
 
// ڕەنگەکانی لەهجە
@شین : # 08b5fb ؛              
@سەوز : # 46a546 ؛             
@سوور : # 9d261d ؛               
@زەرد : # ffc40d ؛            
@نارنج : #f89406؛            
@پەمەیی : #c3325f؛              
@وەنەوشەیی : #7a43b6;            
 
// تۆڕی بنەڕەتی
@basefont : 13px ;          
@ هێڵی بنەڕەتی : 18px ;          

کۆمێنتکردن

هەروەها کەمتر شێوازێکی تری کۆمێنتکردن دابین دەکات جگە لە /* ... */ڕستەسازی ئاسایی CSS.

// ئەمە کۆمێنتێکە
/* ئەمەش کۆمێنتێکە */

میکسین تا وەزوو

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

ستاکەکانی فۆنت

#فۆنت {
  . کورتکراوە ( @کێش : ئاسایی , @قەبارە : 14px , @lineHeight : 20px ) {     
قەبارەی     فۆنت : @size ; _ 
    فۆنت - کێش : @ کێش ; 
بەرزی     هێڵ : @lineHeight ; _ 
  }
  . sans - serif ( @کێش : ئاسایی ، @قەبارە : 14px ، @ بەرزی هێڵ : 20px ) {     
    font - family : "هێلڤێتیکا نیو" , هێلڤێتیکا , ئاریال , sans - serif ;   
قەبارەی     فۆنت : @size ; _ 
    فۆنت - کێش : @ کێش ; 
بەرزی     هێڵ : @lineHeight ; _ 
  }
  . serif ( @کێش : ئاسایی ، @قەبارە : 14px ، @ بەرزی هێڵ : 20px ) {     
    font - family : "جۆرجیا" , تایمز نیو ڕۆمان , تایمز , sans - serif ;     
قەبارەی     فۆنت : @size ; _ 
    فۆنت - کێش : @ کێش ; 
بەرزی     هێڵ : @lineHeight ; _ 
  }
  . monospace ( @کێش : ئاسایی , @ قەبارە : 12px , @lineHeight : 20px ) {     
    font - family : "مۆناکۆ" , کوریەر نوێ , monospace ;   
قەبارەی     فۆنت : @size ; _ 
    فۆنت - کێش : @ کێش ; 
بەرزی     هێڵ : @lineHeight ; _ 
  }
}

گرادێنتەکان

#گرادیێنت {
  . ئاسۆیی ( @ڕەنگی دەستپێکردن : #555، @ڕەنگی کۆتایی: #333) { 
ڕەنگی     پاشبنەما : @endColor ; _ 
    background - دووبارەکردنەوە : دووبارەکردنەوە - x ;
    background - image : - khtml - gradient ( هێڵی , سەرەوەی چەپ , سەرەوەی ڕاست , لە ( @startColor ), بۆ ( @endColor )); // کۆنکێرۆر   
    پاشبنەما - وێنە : - moz - هێڵی - گرادێنت ( چەپ , @startColor , @endColor ); // FF 3.6+    
    پاشبنەما - وێنە : - ms - هێڵی - گرادێنت ( چەپ , @startColor , @endColor ); // IE10    
    background - image : - webkit - gradient ( هێڵی , سەرەوەی چەپ , سەرەوەی ڕاست , ڕەنگ - وەستان ( 0 %, @startColor ), ڕەنگ - وەستان ( 100 %, @endColor )); // سەفاری ٤+، کرۆم ٢+    
    پاشبنەما - وێنە : - وێبکیت - هێڵی - گرادێنت ( چەپ , @startColor , @endColor ); // سەفاری 5.1+، کرۆم 10+    
    پاشبنەما - وێنە : - o - هێڵی - گرادێنت ( چەپ , @startColor , @endColor ); // ئۆپێرا 11.10    
    background - image : linear - gradient ( چەپ , @startColor , @endColor ); // لێ ستاندارد   
  }
  . ڕاست ( @ڕەنگی دەستپێکردن : #555، @ڕەنگی کۆتایی: #333) { 
ڕەنگی     پاشبنەما : @endColor ; _ 
    background - دووبارەکردنەوە : دووبارەکردنەوە - x ;
    background - image : - khtml - gradient ( هێڵی , سەرەوەی چەپ , خوارەوەی چەپ , لە ( @startColor ), بۆ ( @endColor )); // کۆنکێرۆر   
    پاشبنەما - وێنە : - moz - هێڵی - گرادێنت ( @startColor , @endColor ); // FF 3.6+   
    پاشبنەما - وێنە : - ms - هێڵی - گرادێنت ( @startColor , @endColor ); // IE10   
    background - image : - webkit - gradient ( هێڵی , سەرەوەی چەپ , خوارەوەی چەپ , ڕەنگ - وەستان ( 0 %, @startColor ), ڕەنگ - وەستان ( 100 %, @endColor )); // سەفاری ٤+، کرۆم ٢+    
    پاشبنەما - وێنە : - وێبکیت - هێڵی - گرادێنت ( @startColor , @endColor ); // سەفاری 5.1+، کرۆم 10+   
    پاشبنەما - وێنە : - o - هێڵی - گرادێنت ( @startColor , @endColor ); // ئۆپێرا 11.10   
    پاشبنەما - وێنە : هێڵی - گرادێنت ( @startColor , @endColor ); // ستانداردەکە  
  }
  . ئاراستەیی ( @ڕەنگی دەستپێکردن : #555، @ڕەنگی کۆتایی: #333، @deg: 45deg) { 
    ...
  }
  . ڕاست - سێ - ڕەنگ ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

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

فەنتازی بەدەست بهێنە و هەندێک بیرکاری ئەنجام بدە بۆ دروستکردنی میکسینی نەرم و بەهێز وەک ئەوەی خوارەوە.

// تۆڕی ڕەنگ
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @ ستوونی تۆڕ * @پانی ستوونی تۆڕ ) + ( @پانی ڕیزبەندی تۆڕ * ( @ستوونی تۆڕ - 1 ));                 
 
// سیستەمی تۆڕ
. دەفر {
  width : @پانی ماڵپەڕ ; 
  margin : 0 ئۆتۆماتیکی ;  
  . ڕوونکردنەوە ();
}
. ستوونەکان ( @columnSpan : 1 ) {  
  width : ( @پانی ستوونی تۆڕ * @پانی ستوونی ) + ( @پانی ستوونی تۆڕ * ( @پانی ستوونی - 1 ));         
}
. ئۆفسێت ( @columnOffset : 1 ) {  
  margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @کۆلۆم ئۆفسێت - 1 )) + @extraSpace ;           
}