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

پێویستت بە چەند قاڵبێکی خێرا هەیە؟ سەیری ئەم نموونە بنەڕەتیانە بکەن کە پێکەوەمان داناوە:

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

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

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

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

<div class = "ڕیز" > 
  <div پۆل = "span6" > 
    ...
  </div>
  <div پۆل = "span10" > 
    ...
  </div>
</div>

ستوونی هێلانەکردن

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

نموونەی ستوونی هێلانەکراو

<div class = "ڕیز" > 
  <div پۆل = "span12" > 
    ئاستی یەکەمی ستوونی
    <div class = "ڕیز" > 
      <div پۆل = "span6" > 
        ئاستی دووەم
      </div>
      <div پۆل = "span6" > 
        ئاستی دووەم
      </div>
    </div>
  </div>
</div>

تۆڕی خۆت ڕۆڵ بکە

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

لەناو تۆڕەکەدا

ئەو گۆڕاوانەی کە پێویستن بۆ دەستکاریکردنی سیستەمی تۆڕەکە لە ئێستادا هەموویان لە variables.less.

ئێستا بۆ خۆکارکردن

دەستکاریکردنی تۆڕەکە واتە گۆڕینی سێ @grid-*گۆڕاوەکە و دووبارە کۆکردنەوەی فایلەکانی Less.

بووتستراپ بە تەیارەوە دێت بۆ مامەڵەکردن لەگەڵ سیستەمێکی تۆڕ کە تا ٢٤ ستوونی هەبێت؛ پێشوەختە تەنها 16. لێرەدا چۆن گۆڕاوە تۆڕەکانت دەردەکەون کە بەپێی خواستی تۆڕێکی 24 ستوونی بێت.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

کاتێک دووبارە کۆمپایڵ کرایەوە، تۆ ڕێکدەخرێت!

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

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

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

شێوازی شلە

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

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

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

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

تەواوی تۆڕی تایپۆگرافی لەسەر بنەمای دوو گۆڕاوی Less لە فایلە variables.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>زانیاری پەیوەندیکردن بۆ نزیکترین باپیرەی، یان تەواوی جەستەی کارەکە بەکاردێت. لێرەدا دوو نموونە دەخەینەڕوو کە چۆن دەتوانرێت بەکاربهێنرێت:

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

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

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

بلۆککۆتەکان

<blockquote> <p> <small>

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

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

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

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

<blockquote>
  <p> لۆرێم ئیپسوم دۆلۆر سیت ئامێت، کۆنسێکتێتور ئەدیپیسینگ ئێلیت. ژمارەیەکی تەواو پۆزوێری ئێرات ئانتی ڤێنێناتیس داپیبوس پۆسۆرێ ڤێلیت ئەلیکێت. </p>
  <small> دکتۆر جولیۆس هیبێرت </small>
</blockquote>

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

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

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

کۆد

<code> <pre>

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

پێشکەشکردنی کۆد

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

<div>
  <h1>سەردێڕ</h1>
  <p>شتێک ڕاست لێرە...</p>
</div>

<div> <h1> سەردێڕ </h1> <p> شتێک ڕاست لێرە... </p> </div>
  
  

ناوی ناو هێڵ

<span class="label">

سەرنج ڕابکێشە بۆ هەر دەستەواژەیەک لە دەقی جەستەتدا یان ئاڵای لەسەر دابنێ.

هەر شتێک ناوی لێبنێ

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

تۆڕی میدیا

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

نموونەی وێنە بچووکەکان

وێنە بچووکەکان لە .media-gridدەتوانن هەر قەبارەیەک بن، بەڵام باشترین کار دەکەن کاتێک ڕاستەوخۆ نەخشەیان بۆ دەکرێت بۆ سیستەمی تۆڕی Bootstrap ی ناوەکی. پانایی وێنەکانی وەک 90 و 210 و 330 لەگەڵ چەند پێکسڵێک لە پادکردن یەکدەگرن بۆ یەکسانکردنی قەبارەی .span2, .span4, و .span6ستوونەکان.

گەورە

ناوەند

بچووک

کۆدکردنیان

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

<ul class = "تۆڕی میدیا" > 
  <li>
    <a href = "#" > 
      <img class = "وێنەی بچووک" src = "https://www.s.com/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "وێنەی بچووک" src = "https://www.s.com/330x230" alt = "" >   
    </a>
  </li>
</ul>

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

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

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

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

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

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

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

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

نموونە: خشتەی چڕکراوە

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

نموونە: خشتەی سنووردار

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

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

نموونە: Zebra-striped

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

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

<table class = "زیبرا-ڕیزدار" > 
  ...
</خشتەی>

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

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

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

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

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

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

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

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

هەر فۆڕمێک input, select, یان textareaپانایییەک بەپێی خواستی خۆت بکە بە زیادکردنی تەنها چەند پۆلێک بۆ مارکاپەکەت.

لە v1.3.0ەوە، ئێمە پۆلەکانی قەبارەدانان لەسەر بنەمای تۆڕمان بۆ توخمەکانی فۆرم زیاد کردووە. تکایە ئەمانە بەکاربهێنە لەسەر پۆلەکانی ئێستا .mini, .small, هتد.

دوگمەکان

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

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

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

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

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

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

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

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

بەستەرەکان

دوگمەکان

ئەمە چیە

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

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

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

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

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

تاب و حەب

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

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

نموونەی تابە بنەڕەتییەکان

دەتوانرێت تابەکان وەک گەشتێکی ئاسایی (بارکردنی لاپەڕە دەرەکییەکان لە هەمان تابدا) یان وەک ناوچەی ناوەڕۆکی تابکراو بۆ گۆڕینەوەی دەرەوەی پەنجەرەی ناوەڕۆک بەکاربهێنرێت. ئێمە پێوەکراوێکی tabs مان هەیە کە دەتوانرێت بەکاربهێنرێت بۆ یەکخستنی ئەم دووەمیان.

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

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

نانە وردکراوەکان

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

• ماڵەوە

• ماڵەوە /
• لاپەڕەی ناوەڕاست

• ماڵەوە /
• لاپەڕەی ناوەڕاست /
• کەسێکی کە

• ماڵەوە /
• لاپەڕەی ناوەڕاست /
• یەکێکی تر / .
• تۆ لێرەیت

<ul class = "نانە وردکراوەکان" > 
  <li><a href = "#" > ماڵەوە </a> <span class = "دابەشکەر" > / </span></li>   
  <li><a href = "#" > لاپەڕەی ناوەڕاست </a> <span class = "دابەشکەر" > / </span></li>   
  <li><a href = "#" > یەکێکی تر </a> <span class = "دابەشکەر" > / </span></li>   
  <li class = "active" > تۆ لێرەیت </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>

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

.alert-message

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

جاڤاسکڕێپتەکە بەدەست بهێنە »

نموونەی کۆد

<div class = "ئاگادارکردنەوەی پەیامی ئاگادارکردنەوە" > 
  <a class = "داخستنی" href = "#" > × </a>  
  <p><strong> گواکامۆلی پیرۆز! </strong> باشترین پشکنین یۆ خۆت، تۆ زۆر باش دەرناکەویت. </p>
</div>

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

.alert-message.block-message

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

جاڤاسکڕێپتەکە بەدەست بهێنە »

نموونەی کۆد

<div class = "ئاگادارکردنەوەی پەیامی بلۆکی ئاگادارکردنەوە" > 
  <a class = "داخستنی" href = "#" > × </a>  
  <p><strong> گواکامۆلی پیرۆز! ئەمە هۆشدارییە! </strong> باشترین پشکنین یۆ خۆت، تۆ زۆر باش دەرناکەویت. Nulla vitae elit libero، یەکێکە لە فارێترا ئاوگەکان. پرێسێنت کۆمۆدۆ کورسوس ماگنا، ڤێل سلێریسک نیسل کۆنسێکتێتور و. </p>
  <div class = "کردەوەکانی ئاگادارکردنەوە" > 
    <a class = "btn small" href = "#" > ئەم کردارە ئەنجام بدە </a> <a class = "btn small" href = "#" > یان ئەمە بکە </a>     
  </div>
</div>

مۆداڵەکان

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

جاڤاسکڕێپتەکە بەدەست بهێنە »

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

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

جاڤاسکڕێپتەکە بەدەست بهێنە »

پۆپۆڤەرز

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

جاڤاسکڕێپتەکە بەدەست بهێنە »

دەستی پێکرد

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

بینینی بەڵگەنامەکانی جاڤاسکڕێپت »

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

هەندێک لە پێکهاتە سەرەکییەکانی Bootstrap بهێنە ژیانەوە بە پێوەکراوەکانی نوێی تایبەت کە لەگەڵ jQuery و Ender کاردەکەن . ئێمە هانتان دەدەین درێژیان بکەنەوە و دەستکارییان بکەن بۆ ئەوەی لەگەڵ پێداویستییە تایبەتەکانی گەشەپێدانتان بگونجێت.

ئایا جاڤاسکڕێپت پێویستە؟

نەخێر! Bootstrap سەرەتا و پێش هەموو شتێک دیزاین کراوە کە کتێبخانەی CSS بێت. ئەم جاڤاسکڕێپتە چینێکی کارلێککاری بنەڕەتی لە سەرەوەی ستایلەکانی لەگەڵدایە دابین دەکات.

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

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