پێکهاتەکان

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

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

گروپی دوگمەکان بەکاربهێنە بۆ یەکخستنی چەندین دوگمە بەیەکەوە وەک یەک پێکهاتەی پێکهاتەیی. بە زنجیرەیەک <a>یان <button>توخم دروستیان بکە.

باشترین پراکتیزەکان

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

  • هەمیشە هەمان توخم لە گروپی یەک دوگمەدا بەکاربهێنە، <a>یان <button>.
  • دوگمەی ڕەنگی جیاواز لە یەک گروپی دوگمە تێکەڵ مەکە.
  • جگە لە دەق یان لەبری دەق ئایکۆنەکان بەکاربهێنە، بەڵام دڵنیابە لە شوێنی گونجاودا دەقی alt و title لەخۆبگرە.

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

نموونەی پێشوەختە

لێرەدا چۆن HTML بەدوای گروپێکی دوگمەی ستاندارددا دەگەڕێت کە بە دوگمەکانی تاگی ئەنکر دروستکراوە:

  1. <div class = "گرووپی btn" >
  2. <دوگمە پۆل = "btn" > 1 </دوگمە>
  3. <دوگمە پۆل = "btn" > 2 </دوگمە>
  4. <دوگمە پۆل = "btn" > 3 </دوگمە>
  5. </div>

نموونەی Toolbar

کۆمەڵێک لە بۆ پێکهاتە ئاڵۆزترەکان تێکەڵ <div class="btn-group">بکە <div class="btn-toolbar">.

  1. <div class = "btn-تولبار" >
  2. <div class = "گرووپی btn" >
  3. ...
  4. </div>
  5. </div>

بۆکسی چێک و تامەکانی ڕادیۆ

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

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

دابەزینەکان لە گروپەکانی دوگمەکاندا

سەرەکان بەرز دەکەنەوە! ئەو دوگمانەی کە درۆپ داونیان هەیە دەبێت بە تاک بە تاک لە .btn-groupناو a .btn-toolbarبۆ ڕەندەرکردنی دروست بپێچرێنەوە.

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

تێڕوانینێکی گشتی و نموونەکان

هەر دوگمەیەک بەکاربهێنە بۆ دەستپێکردنی مینیویەکی دابەزین بە دانانی لەناو a .btn-groupو دابینکردنی نیشاندانی مینیوی دروست.

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

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

  1. <div class = "گرووپی btn" >
  2. <a class = "btn دابەزین-گۆڕین" data-toggle = "دابەزاندن" href = "#" >
  3. کردار
  4. <span class = "کارێت" </span>
  5. </a>
  6. <ul class = "مێنۆی دابەزین" >
  7. <!-- بەستەرەکانی مینیوی دابەزین -->
  8. </ul>
  9. </div>

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

درۆپداونەکانی دوگمەکان بە هەر قەبارەیەک کاردەکەن. قەبارەی دوگمەکانت بۆ .btn-large, .btn-small, یان .btn-mini.

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

دوگمەکانی دابەزین پێویستیان بە پێوەکراوەکەی Bootstrap هەیە بۆ ئەوەی کار بکات.

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


دابەزینی دوگمەی دابەشکردن

تێڕوانینێکی گشتی و نموونەکان

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

قەبارەکان

پۆلەکانی دوگمەی زیادە بەکاربهێنە .btn-mini, .btn-small, یان .btn-largeبۆ قەبارەدانان.

  1. <div class = "گرووپی btn" >
  2. ...
  3. <ul class = "مێنۆی دابەزین ڕاکێشانی ڕاست" >
  4. <!-- بەستەرەکانی مینیوی دابەزین -->
  5. </ul>
  6. </div>

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

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

  1. <div class = "گرووپی btn" >
  2. <button class = "btn" > کردار </button>
  3. <button class = "btn دابەزین-گۆڕین" data-toggle = "دابەزاندن" >
  4. <span class = "کارێت" </span>
  5. </دوگمەی>
  6. <ul class = "مێنۆی دابەزین" >
  7. <!-- بەستەرەکانی مینیوی دابەزین -->
  8. </ul>
  9. </div>

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

هەروەها دەتوانرێت مینیوەکانی دابەزین لە خوارەوە بۆ سەرەوە بگۆڕدرێت بە زیادکردنی یەک پۆل بۆ دایک و باوکی دەستبەجێی .dropdown-menu. ئاراستەی مینیوەکە دەگۆڕێت .caretو خودی مینیوەکە دەگۆڕێت بۆ ئەوەی لە خوارەوە بۆ سەرەوە بجوڵێت لەبری سەرەوە بۆ خوارەوە.

  1. <div class = "دابەزاندنی گروپی btn" >
  2. <button class = "btn" > دابەزین </button>
  3. <button class = "btn دابەزین-گۆڕین" data-toggle = "دابەزاندن" >
  4. <span class = "کارێت" </span>
  5. </دوگمەی>
  6. <ul class = "مێنۆی دابەزین" >
  7. <!-- بەستەرەکانی مینیوی دابەزین -->
  8. </ul>
  9. </div>

لاپەڕەسازی فرەکۆن

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

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

بەستەری لاپەڕەی دەوڵەتدار

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

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

یەکێک لە دوو پۆلی هەڵبژاردە زیاد بکە بۆ گۆڕینی ڕێکخستنی بەستەرەکانی لاپەڕەسازی: .pagination-centeredو .pagination-right.

نموونە

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

مارکاپ

پێچراو لە <div>, لاپەڕەسازی تەنها <ul>.

  1. <div class = "لاپەڕەکردن" >
  2. <ul>
  3. <li><a href = "#" > پێشوو </a></li>
  4. <li class = "چالاك" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > دواتر </a></li>
  11. </ul>
  12. </div>

Pager بۆ لینکی خێرای پێشوو و داهاتوو

دەربارەی pager

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

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

هەروەها بەستەرەکانی پەیجەر .disabledپۆلی گشتی لە لاپەڕەسازییەوە بەکاردەهێنن.

نموونەی پێشوەختە

بە شێوەیەكی بنەڕەتی، پەیجەرەكە بەستەرەكان ناوەند دەكات.

  1. <ul پۆل = "پەیجەر" >
  2. <li>
  3. <a href = "#" > پێشوو </a>
  4. </li>
  5. <li>
  6. <a href = "#" > دواتر </a>
  7. </li>
  8. </ul>

بەستەرەکانی ڕێکخراو

یان دەتوانیت هەر بەستەرێک بە لایەکان ڕێکبخەیت:

  1. <ul پۆل = "پەیجەر" >
  2. <li class = "پێشوو" >
  3. <a href = "#" > کۆنتر </a>
  4. </li>
  5. <li class = "دواتر" >
  6. <a href = "#" > نوێتر → </a>
  7. </li>
  8. </ul>
لیبێڵەکان مارکاپ
بنەڕەتی <span class="label">Default</span>
سەرکەوتن <span class="label label-success">Success</span>
ئاگادار کردنەوە <span class="label label-warning">Warning</span>
گرنگ <span class="label label-important">Important</span>
زانیاری <span class="label label-info">Info</span>
پێچەوانە <span class="label label-inverse">Inverse</span>

دەربارەی

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

پۆلەکانی بەردەست

ناو نموونە مارکاپ
بنەڕەتی 1. 1 <span class="badge">1</span>
سەرکەوتن 2. 2 <span class="badge badge-success">2</span>
ئاگادار کردنەوە 4. 4 <span class="badge badge-warning">4</span>
گرنگ 6. 6 <span class="badge badge-important">6</span>
زانیاری 8. 8 <span class="badge badge-info">8</span>
پێچەوانە 10. 10 <span class="badge badge-inverse">10</span>

یەکەی پاڵەوان

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

مارکاپ

ناوەڕۆکەکەت بە divلایکێک بپێچە بۆیە:

  1. <div class = "یەکە-پاڵەوان" >
  2. <h1> سەردێڕی </h1>
  3. <p> تاگلاین </p>
  4. <p>
  5. <a class = "btn btn-سەرەکی btn-گەورە" >
  6. زیاتر فێربە
  7. </a>
  8. </p>
  9. </div>

سڵاو جیهان!

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

زیاتر فێربە

سەردێڕی لاپەڕە

توێکڵێکی سادە بۆ ئەوەی h1بە شێوەیەکی گونجاو بەشەکانی ناوەڕۆک لە لاپەڕەیەکدا بۆشایی دەرببڕێت و بەشی بکات. دەتوانێت لە h1's default small, element و زۆربەی پێکهاتەکانی تر (بە شێوازی زیادە) بەکاربهێنێت.

  1. <div class = "سەردێڕی لاپەڕە" >
  2. <h1> نموونەی سەردێڕی لاپەڕە </h1>
  3. </div>

وێنە بچووکەکانی پێشوەختە

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

زۆر خۆکارانە دەکرێت

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

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

    کراس جوستۆ ئۆدیۆ، داپیبوس فاسیلیسیس لە، ئێگێستاس ئێگێت کوام. Donec id elit non mi porta gravida لە ئیگێت مێتۆس. نولم id dolor id nibh ultricies ئۆتۆمبێلەکان ut id elit.

    کردار کردار

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

    کراس جوستۆ ئۆدیۆ، داپیبوس فاسیلیسیس لە، ئێگێستاس ئێگێت کوام. Donec id elit non mi porta gravida لە ئیگێت مێتۆس. نولم id dolor id nibh ultricies ئۆتۆمبێلەکان ut id elit.

    کردار کردار

بۆچی وێنە بچووکەکان بەکاربهێنرێت

وێنە بچووکەکان (پێشتر .media-gridتا v1.4) زۆر باشن بۆ تۆڕەکانی وێنە یان ڤیدیۆ، ئەنجامی گەڕانی وێنە، بەرهەمی تاکەکەسی، پۆرتفۆلیۆ و زۆر شتی تر. دەتوانن بەستەر یان ناوەڕۆکی ئیستاتیک بن.

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

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

قەبارەی ستوونی تۆڕ بەکاردەهێنێت

لە کۆتاییدا، پێکهاتەی وێنە بچووکەکان پۆلەکانی سیستەمی تۆڕی هەبوو بەکاردەهێنێت-وەک .span2یان - .span3بۆ کۆنترۆڵکردنی ڕەهەندەکانی وێنە بچووکەکان.

مارکاپەکە

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

  1. <ul class = "وێنە بچووکەکان" >
  2. <li پۆل = "span3" >
  3. <a href = "#" class = "وێنە بچووکەکە" >
  4. <img src = "http://260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

  1. <ul class = "وێنە بچووکەکان" >
  2. <li پۆل = "span3" >
  3. <div class = "وێنەی بچووک" >
  4. <img src = "http://260x180" alt = "" >
  5. <h5> ناوی وێنە بچووکەکان </h5>
  6. <p> سەردێڕی وێنە بچووکەکان ڕاست لێرە... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

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

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

بەپێی پێشوەختە سووکەکان

پۆلی بنەڕەتی دووبارە نووسراوەتەوە

لەگەڵ Bootstrap 2، ئێمە پۆلی بنەڕەتیمان ئاسان کردووە: .alertلەبری .alert-message. هەروەها کەمترین مارکاپی پێویستمان کەم کردووەتەوە- نەخێر <p>بە شێوازی پێشوەختە پێویست نییە، تەنها دەرەوە <div>.

تاکە پەیامی ئاگادارکردنەوە

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


لەگەڵ جاڤاسکڕێپتدا زۆر باش دەڕوات

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

پێوەکراوەکە بەدەست بهێنە »

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

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

ئاگادار کردنەوە! Best check yo self، تۆ زۆر باش دەرناکەویت.
  1. <div class = "ئاگادارکردنەوە" >
  2. <button class = "داخستنی" data-dismiss = "ئاگادارکردنەوە" > × </button>
  3. <strong> ئاگادارکردنەوە! </strong> باشترین پشکنین یۆ خۆت، تۆ زۆر باش دەرناکەویت.
  4. </div>

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

بە ئاسانی پەیامی ئاگادارکردنەوەی ستاندارد درێژ بکەرەوە بە دوو پۆلی هەڵبژاردە: .alert-blockبۆ پادکردن و کۆنترۆڵی دەقی زیاتر و .alert-headingبۆ سەردێڕێکی هاوتا.

ئاگادار کردنەوە!

Best check yo self، تۆ زۆر باش دەرناکەویت. Nulla vitae elit libero، یەکێکە لە فارێترا ئاوگەکان. پرێسێنت کۆمۆدۆ کورسوس ماگنا، ڤێل سلێریسک نیسل کۆنسێکتێتور و.

  1. <div class = "ئاگادارکردنەوە-بلۆکی ئاگادارکردنەوە" >
  2. <a class = "داخستنی" data-dismiss = "ئاگادارکردنەوە" href = "#" > × </a>
  3. <h4 class = "سەردێڕی ئاگادارکردنەوە" > ئاگادارکردنەوە! </h4>
  4. باشترین پشکنین یۆ خۆت، تۆ نیت...
  5. </div>

بەدیلەکانی کۆنتێکست پۆلە هەڵ��ژاردەکان زیاد بکە بۆ گۆڕینی واتای ئاگادارکردنەوەیەک

هەڵە یان مەترسی

ئای سناپ! چەند شتێک بگۆڕە و دووبارە هەوڵبدە پێشکەشی بکەیتەوە.
  1. <div class = "هەڵەی ئاگادارکردنەوە ئاگادارکردنەوە" >
  2. ...
  3. </div>

سەرکەوتن

زۆر باشە! ئەم پەیامە گرنگەی ئاگادارکردنەوەت بە سەرکەوتوویی خوێندەوە.
  1. <div class = "ئاگادارکردنەوە-سەرکەوتن" >
  2. ...
  3. </div>

زانیاری

سەرەکان بەرز دەکەنەوە! ئەم ئاگادارکردنەوە پێویستی بە سەرنجی تۆ هەیە، بەڵام زۆر گرنگ نییە.
  1. <div class = "زانیاری ئاگادارکردنەوە" >
  2. ...
  3. </div>

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

بنەڕەتی

پێشوەختەی پێشکەوتن بار بە گرادێنتێکی ڕاست.

  1. <div class = "پێشکەوتن" >
  2. <div پۆل = "بار"
  3. style = " پانایی : 60 " ></div>
  4. </div>

ڕەنگاوڕەنگ

گرادێنت بەکاردەهێنێت بۆ دروستکردنی کاریگەرییەکی ڕەنگاوڕەنگ (بێ IE).

  1. <div class = "پێشکەوتن-ڕیزبەندی پێشکەوتن" >
  2. <div پۆل = "بار"
  3. style = " پانایی : 20 " ></div>
  4. </div>

ئەنیمەیشن

نموونەی ڕەنگاوڕەنگ وەردەگرێت و ئەنیمەیشن دەکات (بێ IE).

  1. <div class = "پێشکەوتن-ڕیزبەندی پێشکەوتن."
  2. چالاکە" >
  3. <div پۆل = "بار"
  4. style = " پانایی : 40 " ></div>
  5. </div>

هەڵبژاردەکان و پشتگیری وێبگەڕ

ڕەنگی زیادە

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

باری ڕەنگاوڕەنگ

هاوشێوەی ڕەنگە ڕەقەکان، ئێمە چەندین جۆری پێشکەوتنی ڕەنگاوڕەنگمان هەیە.

ڕەفتار

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

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

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

پێشکەوتن بارەکان گرادێنت و گواستنەوە و ئەنیمەیشنەکانی CSS3 بەکاردەهێنن بۆ بەدەستهێنانی هەموو کاریگەرییەکانیان. ئەم تایبەتمەندیانە لە IE7-9 یان وەشانی کۆنتری فایەرفۆکسدا پشتگیری ناکرێت.

ئۆپێرا و IE لەم کاتەدا پشتگیری ئەنیمەیشن ناکەن.

وێڵز

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

سەیرکە من لەناو بیرێکدام!
  1. <div class = "باشە" >
  2. ...
  3. </div>

ئایکۆنی داخستنی

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

  1. <button class = "داخستنی" > × </دوگمەی>

ئامێرەکانی iOS پێویستیان بە href="#" هەیە بۆ ڕووداوەکانی کلیک ئەگەر پێت باشە ئەنکر بەکاربهێنیت.

  1. <a class = "داخستنی" href = "#" > × </a>