هێماکانی بەردەست
زیاتر لە ٢٥٠ گلیف بە شێوەی فۆنت لە کۆمەڵەی Glyphicon Halflings لەخۆدەگرێت. Glyphicons Halflings بە شێوەیەکی ئاسایی بە خۆڕایی بەردەست نین، بەڵام دروستکەرەکەیان بە خۆڕایی بۆ Bootstrap بەردەستی کردووە. وەک سوپاسێک تەنها داوا دەکەین کە هەرکاتێک بتوانیت لینکی گەڕانەوە بۆ Glyphicons دابنێیت .
چۆن بەكار دەهێنرێت
لەبەر هۆکاری کارایی، هەموو ئایکۆنەکان پێویستیان بە پۆلێکی بنەڕەتی و پۆلی ئایکۆنی تاکەکەسی هەیە. بۆ بەکارهێنان ئەم کۆدەی خوارەوە لە هەر شوێنێک دابنێ. دڵنیابە بۆشایییەک لە نێوان ئایکۆن و دەقەکەدا بەجێبهێڵە بۆ ئەوەی بە باشی پاد بکرێت.
تێکەڵ بە پێکهاتەکانی تر مەکە
پۆلەکانی ئایکۆن ناتوانرێت ڕاستەوخۆ لەگەڵ پێکهاتەکانی تردا تێکەڵ بکرێن. نابێت لەگەڵ پۆلەکانی تر لەسەر هەمان توخم بەکاربهێنرێن. لەبری ئەوە، هێلانەیەک زیاد بکە <span>
و پۆلەکانی ئایکۆنەکان بەکاربهێنە بۆ <span>
.
تەنها بۆ بەکارهێنان لەسەر توخمە بەتاڵەکان
پۆلەکانی ئایکۆن تەنها لەسەر ئەو توخمانە بەکاربهێنرێت کە هیچ ناوەڕۆکێکی دەقیان تێدا نییە و هیچ توخمێکی منداڵیان نییە.
گۆڕینی شوێنی فۆنتەکەی ئایکۆنەکە
بووتستراپ گریمانە دەکات کە فایلە فۆنتەکانی ئایکۆن لە ../fonts/
ناوەڕۆکەکەدا جێگیر دەبن، بە بەراورد بە فایلە CSS کۆکراوەکان. گواستنەوە یان گۆڕینی ناوی ئەو فایلە فۆنتانە واتە نوێکردنەوەی CSS بە یەکێک لە سێ ڕێگە:
@icon-font-path
و/یان @icon-font-name
گۆڕاوەکان لە فایلەکانی سەرچاوە کەمتر بگۆڕە .
بژاردەی URLs ڕێژەییەکان بەکاربهێنە کە لەلایەن کۆمپایەری کەمترەوە دابینکراوە.
url()
ڕێڕەوەکان لە CSS ی کۆکراوەدا بگۆڕە .
هەر بژاردەیەک کە بە باشترین شێوە لەگەڵ ڕێکخستنی تایبەتی گەشەپێدانەکەتدا بگونجێت بەکاربهێنە.
ئایکۆنە دەستڕاگەیشتنەکان
وەشانی مۆدێرن لە تەکنەلۆژیا یارمەتیدەرەکان ناوەڕۆکی دروستکراوی CSS ڕادەگەیەنن، هەروەها پیتە تایبەتەکانی یونیکۆد. aria-hidden="true"
بۆ ئەوەی دەرچوونی نەخوازراو و سەرلێشێواو لە خوێنەری شاشەدا ڕوونەدات (بەتایبەت کاتێک ئایکۆنەکان تەنها بۆ ڕازاندنەوە بەکاردەهێنرێن)، ئێمە بە تایبەتمەندییەکە دەیانشارینەوە .
ئەگەر ئایکۆنێک بەکاردەهێنیت بۆ گەیاندنی مانا (نەک تەنها وەک توخمێکی دیکۆرات)، دڵنیابە لەوەی کە ئەم مانایە بۆ تەکنەلۆژیا یارمەتیدەرەکانیش دەگەیەنرێت – بۆ نموونە، ناوەڕۆکی زیادە لەخۆ بگرە، کە بە شێوەیەکی بینراو لەگەڵ .sr-only
پۆلەکەدا شاراوەن.
ئەگەر کۆنتڕۆڵەکان دروست دەکەیت کە هیچ دەقێکی تریان نییە (وەک a <button>
کە تەنها ئایکۆنێکی تێدایە)، پێویستە هەمیشە ناوەڕۆکی بەدیل دابین بکەیت بۆ دیاریکردنی ئامانجی کۆنتڕۆڵەکە، بۆ ئەوەی بۆ بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان مانای هەبێت. لەم حاڵەتەدا دەتوانیت aria-label
تایبەتمەندییەک لەسەر خودی کۆنتڕۆڵەکە زیاد بکەیت.
<span class= "glyphicon glyphicon-search" aria-hidden= "true" ></span>
نموونە
لە دوگمەکان، گروپەکانی دوگمەکان بۆ ئامرازەکان، گەشتکردن، یان چوونەژوورەوەی فۆڕمی پێشوەختە بەکاریان بهێنە.
ئەستێرە
ئەستێرە
ئەستێرە
ئەستێرە
<button type= "button" class= "btn btn-default" aria-label= "Left Align" >
<span class= "glyphicon glyphicon-align-left" aria-hidden= "true" ></span>
</button>
<button type= "button" class= "btn btn-default btn-lg" >
<span class= "glyphicon glyphicon-star" aria-hidden= "true" ></span> Star
</button>
ئایکۆنێک کە لە ئاگادارکردنەوەیەکدا بەکاردێت بۆ گەیاندنی ئەوەی کە پەیامێکی هەڵەیە، لەگەڵ .sr-only
دەقی زیادە بۆ گەیاندنی ئەم ئاماژەیە بە بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان.
<div class= "alert alert-danger" role= "alert" >
<span class= "glyphicon glyphicon-exclamation-sign" aria-hidden= "true" ></span>
<span class= "sr-only" > Error:</span>
Enter a valid email address
</div>
مێنۆی کۆنتێکست کە دەتوانرێت بگۆڕدرێت بۆ پیشاندانی لیستەکانی بەستەرەکان. بە پێوەکراوەکەی جاڤاسکڕێپتی دابەزین کارلێککارانە کراوە .
نموونە
تریگەری دابەزینەکە و مینیوی دابەزینەکە لەناو .dropdown
, یان توخمێکی تردا بپێچە کە ڕایدەگەیەنێت position: relative;
. پاشان HTML ی مینیوەکە زیاد بکە.
<div class= "dropdown" >
<button class= "btn btn-default dropdown-toggle" type= "button" id= "dropdownMenu1" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "true" >
Dropdown
<span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" aria-labelledby= "dropdownMenu1" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div>
دەتوانرێت مینیوەکانی دابەزین بگۆڕدرێت بۆ فراوانکردن بەرەو سەرەوە (لەبری بەرەو خوارەوە) بە زیادکردن .dropup
بۆ دایک و باوک.
<div class= "dropup" >
<button class= "btn btn-default dropdown-toggle" type= "button" id= "dropdownMenu2" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropup
<span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" aria-labelledby= "dropdownMenu2" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div>
ڕێکخستن
بە شێوازی پێشوەختە، مینیویەکی دابەزین بە شێوەیەکی ئۆتۆماتیکی لە سەرەوە و بە درێژایی لای چەپی دایک و باوکەکەی 100% دادەنرێت. زیادکردن .dropdown-menu-right
بۆ a .dropdown-menu
بۆ ڕاست ڕێکخستنی مینیوی دابەزین.
لەوانەیە پێویستی بە جێگیرکردنی زیاتر بێت
درۆپداونەکان بە شێوەیەکی ئۆتۆماتیکی لە ڕێگەی CSS لەناو ڕەوتی ئاسایی بەڵگەنامەکەدا دادەنرێت. ئەمەش واتە ڕەنگە دابەزینەکان لەلایەن دایک و باوکەوە بڕۆن کە هەندێک overflow
تایبەتمەندییان هەیە یان لە دەرەوەی سنووری دەرچەی بینین دەربکەون. لەگەڵ سەرهەڵدانی ئەم پرسانەدا لەسەر خۆت چارەسەر بکە.
.pull-right
ڕێکخستنی بەکارنەهاتوو
لە v3.1.0ەوە، ئێمە .pull-right
لە مینیوەکانی دابەزین بەکارمان نەهێناوە. بۆ ڕێکخستنی مینیویەک بە ڕاست، .dropdown-menu-right
. پێکهاتەکانی nav کە بە ڕاست ڕیزکراون لە navbar دا وەشانی mixin ی ئەم پۆلە بەکاردەهێنن بۆ ئەوەی بە شێوەیەکی ئۆتۆماتیکی مینیوەکە ڕێکبخەن. بۆ جێبەجێکردنی، .dropdown-menu-left
.
<ul class= "dropdown-menu dropdown-menu-right" aria-labelledby= "dLabel" >
...
</ul>
سەردێڕێک زیاد بکە بۆ ناونانی بەشەکانی کردارەکان لە هەر مینیویەکی دابەزین.
<ul class= "dropdown-menu" aria-labelledby= "dropdownMenu3" >
...
<li class= "dropdown-header" > Dropdown header</li>
...
</ul>
دابەشکەر
دابەشکەرێک زیاد بکە بۆ جیاوازی زنجیرە بەستەرەکان لە مینیویەکی دابەزین.
<ul class= "dropdown-menu" aria-labelledby= "dropdownMenuDivider" >
...
<li role= "separator" class= "divider" ></li>
...
</ul>
بابەتە مینیوەکان لەکارخراوە
زیاد بکە .disabled
بۆ a <li>
لە درۆپ داونەکەدا بۆ لەکارخستنی بەستەرەکە.
<ul class= "dropdown-menu" aria-labelledby= "dropdownMenu4" >
<li><a href= "#" > Regular link</a></li>
<li class= "disabled" ><a href= "#" > Disabled link</a></li>
<li><a href= "#" > Another link</a></li>
</ul>
زنجیرەیەک دوگمە بەیەکەوە لەسەر یەک دێڕ لەگەڵ گروپی دوگمەکان گروپ بکە. زیاد بکە لەسەر ڕادیۆی جاڤاسکڕێپتی ئیختیاری و هەڵسوکەوتی شێوازی بۆکسی هەڵبژاردن بە پێوەکراوەکەی دوگمەکانمان .
دڵنیابە لە دروستی role
و لیبێڵێک دابین بکە
بۆ ئەوەی تەکنەلۆژیا یارمەتیدەرەکان – وەک خوێنەری شاشە – بگەیەنن کە زنجیرەیەک دوگمە گرووپ کراون، role
پێویستە تایبەتمەندییەکی گونجاو دابین بکرێت. بۆ گروپەکانی دوگمەکان، ئەمە دەبێتە role="group"
, لە کاتێکدا ئامرازەکان دەبێت role="toolbar"
.
یەکێک لە ئیستسنایەکان ئەو گروپانەن کە تەنها یەک کۆنتڕۆڵ لەخۆدەگرن (بۆ نموونە گروپەکانی دوگمەی ڕەوا لەگەڵ <button>
توخمەکان) یان دابەزینێک.
سەرەڕای ئەوە، پێویستە گروپ و توولبارەکان ناوێکی ڕوونیان پێ بدرێت، چونکە زۆربەی تەکنەلۆژیا یارمەتیدەرەکان ئەگەرنا ڕایان ناگەیەنن، سەرەڕای بوونی role
تایبەتمەندی دروست. لەم نموونانەی لێرەدا هاتووە، ئێمە , بەکاردەهێنین aria-label
، بەڵام بەدیلەکانی وەک aria-labelledby
دەتوانرێت بەکاربهێنرێت.
نموونەی بنەڕەتی
زنجیرەیەک دوگمە بە .btn
in بپێچە .btn-group
.
<div class= "btn-group" role= "group" aria-label= "..." >
<button type= "button" class= "btn btn-default" > Left</button>
<button type= "button" class= "btn btn-default" > Middle</button>
<button type= "button" class= "btn btn-default" > Right</button>
</div>
کۆمەڵێک لە بۆ پێکهاتە ئاڵۆزترەکان تێکەڵ <div class="btn-group">
بکە <div class="btn-toolbar">
.
<div class= "btn-toolbar" role= "toolbar" aria-label= "..." >
<div class= "btn-group" role= "group" aria-label= "..." > ...</div>
<div class= "btn-group" role= "group" aria-label= "..." > ...</div>
<div class= "btn-group" role= "group" aria-label= "..." > ...</div>
</div>
قەبارەدانان
لەبری ئەوەی پۆلەکانی قەبارەدانانی دوگمەکان بۆ هەموو دوگمەیەک لە گروپێکدا بەکاربهێنیت، تەنها زیاد بکە .btn-group-*
بۆ هەریەکێک .btn-group
، لەوانەش لەکاتی هێلانەکردنی چەند گروپێکدا.
چەپ
ناوەڕاست
ڕاست
چەپ
ناوەڕاست
ڕاست
چەپ
ناوەڕاست
ڕاست
چەپ
ناوەڕاست
ڕاست
<div class= "btn-group btn-group-lg" role= "group" aria-label= "..." > ...</div>
<div class= "btn-group" role= "group" aria-label= "..." > ...</div>
<div class= "btn-group btn-group-sm" role= "group" aria-label= "..." > ...</div>
<div class= "btn-group btn-group-xs" role= "group" aria-label= "..." > ...</div>
هێلانەکردن
کاتێک دەتەوێت مینیوی دابەزین تێکەڵ بە زنجیرەیەک دوگمە بکرێت، یەکێک لە .btn-group
ناو یەکێکی تردا دابنێ ..btn-group
<div class= "btn-group" role= "group" aria-label= "..." >
<button type= "button" class= "btn btn-default" > 1</button>
<button type= "button" class= "btn btn-default" > 2</button>
<div class= "btn-group" role= "group" >
<button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropdown
<span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" >
<li><a href= "#" > Dropdown link</a></li>
<li><a href= "#" > Dropdown link</a></li>
</ul>
</div>
</div>
گۆڕانی ڕاست
وا بکە کۆمەڵێک دوگمە بە شێوەی ڕاست لەسەر یەک دەرکەون نەک بە شێوەی ئاسۆیی. لێرەدا پشتگیری لە دوگمەی دابەشکردن ناکرێت.
دوگمه
دوگمه
فرێدان
دوگمه
دوگمه
فرێدان
فرێدان
فرێدان
<div class= "btn-group-vertical" role= "group" aria-label= "..." >
...
</div>
گروپی دوگمەی ڕەوا
کۆمەڵێک دوگمە بکە بە قەبارەی یەکسان درێژ ببنەوە بۆ ئەوەی تەواوی پانایی دایک و باوکی ببڕن. هەروەها لەگەڵ درۆپداونەکانی دوگمەکان لەناو گروپی دوگمەکاندا کاردەکات.
مامەڵەکردن لەگەڵ سنوورەکان
بەهۆی ئەو HTML و CSS تایبەتەی کە بۆ ڕەوایەتیدان بە دوگمەکان بەکاردەهێنرێت (واتە display: table-cell
)، سنوورەکانی نێوانیان دوو هێندە دەبن. لە گروپەکانی دوگمەی ئاساییدا، margin-left: -1px
بەکاردێت بۆ کۆکردنەوەی سنوورەکان لەبری لابردنی. بەڵام margin
لەگەڵ display: table-cell
. لە ئەنجامدا، بەپێی خۆکارکردنەکانت بۆ Bootstrap، لەوانەیە بتەوێت سنوورەکان لاببەیت یان دووبارە ڕەنگیان بکەیتەوە.
IE8 و سنوورەکان
ئینتەرنێت ئێکسپلۆرەر ٨ سنوور لەسەر دوگمەکان لە گروپێکی دوگمەی ڕەوادا ڕەندەر ناکات، جا چ چالاک بێت <a>
یان <button>
توخمەکان. بۆ ئەوەی لەوە دەربچیت، هەر دوگمەیەک لە دوگمەیەکی تردا بپێچە .btn-group
.
بۆ زانیاری زیاتر سەیری #12476 بکە.
لەگەڵ <a>
توخمەکان
تەنها زنجیرەیەک .btn
s لە .btn-group.btn-group-justified
.
<div class= "btn-group btn-group-justified" role= "group" aria-label= "..." >
...
</div>
بەستەرەکان کە وەک دوگمە کاردەکەن
ئەگەر <a>
توخمەکان بەکاربهێنرێن بۆ کارکردن وەک دوگمە – دەستپێکردنی کارایی ناو لاپەڕە، نەک گەشتکردن بۆ بەڵگەنامە یان بەشێکی تر لە ناو لاپەڕەی ئێستادا – هەروەها پێویستە role="button"
.
بۆ بەکارهێنانی گروپی دوگمەی ڕەوا لەگەڵ <button>
توخمەکان، پێویستە هەر دوگمەیەک لە گروپێکی دوگمەدا بپێچیتەوە . زۆربەی وێبگەڕەکان بە باشی CSS ـمان بۆ ڕەوایەتیدان بە <button>
توخمەکان بەکارناهێنن، بەڵام بەو پێیەی ئێمە پشتگیری لە دابەزینی دوگمەکان دەکەین، دەتوانین کار لەسەر ئەوە بکەین.
<div class= "btn-group btn-group-justified" role= "group" aria-label= "..." >
<div class= "btn-group" role= "group" >
<button type= "button" class= "btn btn-default" > Left</button>
</div>
<div class= "btn-group" role= "group" >
<button type= "button" class= "btn btn-default" > Middle</button>
</div>
<div class= "btn-group" role= "group" >
<button type= "button" class= "btn btn-default" > Right</button>
</div>
</div>
هەر دوگمەیەک بەکاربهێنە بۆ دەستپێکردنی مینیویەکی دابەزین بە دانانی لەناو a .btn-group
و دابینکردنی نیشاندانی مینیوی دروست.
وابەستەیی بە پێوەکراو
درۆپ داونەکانی دوگمەکان پێویستیان بەوەیە کە پێوەکراوەکە لە وەشانی Bootstrap ـەکەتدا هەبێت.
دابەزینی تاکە دوگمە
دوگمەیەک بگۆڕە بۆ وەرچەرخانێکی دابەزین لەگەڵ هەندێک گۆڕانکاری بنەڕەتی لە نیشانەدان.
بنەڕەتی
سەرەکی
سەرکەوتن
زانیاری
ئاگادار کردنەوە
مەترسی
<!-- Single button -->
<div class= "btn-group" >
<button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Action <span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div>
دابەزینی دوگمەی دابەشکردن
بە هەمان شێوە، درۆپداونی دوگمەی دابەشکراو دروست بکە بە هەمان گۆڕانکارییەکانی مارکاپ، تەنها بە دوگمەی جیاواز.
بنەڕەتی
درۆپداون بگۆڕە
سەرەکی
درۆپداون بگۆڕە
سەرکەوتن
درۆپداون بگۆڕە
زانیاری
درۆپداون بگۆڕە
ئاگادار کردنەوە
درۆپداون بگۆڕە
مەترسی
درۆپداون بگۆڕە
<!-- Split button -->
<div class= "btn-group" >
<button type= "button" class= "btn btn-danger" > Action</button>
<button type= "button" class= "btn btn-danger dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "caret" ></span>
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<ul class= "dropdown-menu" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div>
قەبارەدانان
درۆپداونەکانی دوگمەکان بە دوگمەکانی هەموو قەبارەکان کاردەکەن.
<!-- Large button group -->
<div class= "btn-group" >
<button class= "btn btn-default btn-lg dropdown-toggle" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Large button <span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" >
...
</ul>
</div>
<!-- Small button group -->
<div class= "btn-group" >
<button class= "btn btn-default btn-sm dropdown-toggle" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Small button <span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" >
...
</ul>
</div>
<!-- Extra small button group -->
<div class= "btn-group" >
<button class= "btn btn-default btn-xs dropdown-toggle" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Extra small button <span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" >
...
</ul>
</div>
گۆڕانی وازهێنان
مینیوەکانی سەرەوەی توخمەکان بە زیادکردن .dropup
بۆ دایک و باوکەکە دەستپێبکە.
<div class= "btn-group dropup" >
<button type= "button" class= "btn btn-default" > Dropup</button>
<button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "caret" ></span>
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<ul class= "dropdown-menu" >
<!-- Dropdown menu links -->
</ul>
</div>
کۆنتڕۆڵەکانی فۆڕم درێژ بکەرەوە بە زیادکردنی دەق یان دوگمە پێش، دوای، یان لە هەردوو لای هەر دەقێک کە لەسەر بنەمای دەق بێت <input>
. بەکارهێنان .input-group
لەگەڵ .input-group-addon
یان .input-group-btn
بۆ پێش پەیوەستکردن یان پەیوەستکردنی توخمەکان بە تاکە .form-control
.
<input>
تەنها s دەقی
لێرەدا خۆت بەدوور بگرە لە بەکارهێنانی <select>
توخمەکان چونکە ناتوانرێت لە وێبگەڕەکانی وێبکیتدا بە تەواوی ستایلیان بۆ دابنرێت.
لێرەدا خۆت بەدوور بگرە لە بەکارهێنانی <textarea>
توخمەکان چونکە rows
لە هەندێک حاڵەتدا ڕێز لە سیفاتەکەیان ناگیرێت.
Tooltips & popovers لە گروپەکانی هاتنە ژوورەوەدا پێویستیان بە ڕێکخستنی تایبەت هەیە
لەکاتی بەکارهێنانی ئامرازەکان یان پۆپۆڤەرەکان لەسەر توخمەکانی ناو an .input-group
، دەبێت بژاردەکە دیاری بکەیت container: 'body'
بۆ دوورکەوتنەوە لە کاریگەرییە لاوەکییە نەخوازراوەکان (وەک ئەوەی توخمەکە فراوانتر دەبێت و/یان گۆشە گوڵاوەکانی لەدەست دەدات کاتێک ئامرازەکە یان پۆپۆڤەرەکە دەستپێدەکات).
یەک زیادکردن یان دوگمە لە هەردوو لای ئینپوتێک دابنێ. هەروەها دەتوانیت یەکێکیان لە هەردوو لای ئینپوتێک دابنێیت.
ئێمە پشتگیری لە چەندین زیادکراو ( .input-group-addon
یان .input-group-btn
) لە یەک لایەنەوە ناکەین.
ئێمە پشتگیری لە چەندین فۆڕم-کۆنتڕۆڵ ناکەین لە یەک گروپی هاتنەژوورەوەدا.
<div class= "input-group" >
<span class= "input-group-addon" id= "basic-addon1" > @</span>
<input type= "text" class= "form-control" placeholder= "Username" aria-describedby= "basic-addon1" >
</div>
<div class= "input-group" >
<input type= "text" class= "form-control" placeholder= "Recipient's username" aria-describedby= "basic-addon2" >
<span class= "input-group-addon" id= "basic-addon2" > @example.com</span>
</div>
<div class= "input-group" >
<span class= "input-group-addon" > $</span>
<input type= "text" class= "form-control" aria-label= "Amount (to the nearest dollar)" >
<span class= "input-group-addon" > .00</span>
</div>
<label for= "basic-url" > Your vanity URL</label>
<div class= "input-group" >
<span class= "input-group-addon" id= "basic-addon3" > https://example.com/users/</span>
<input type= "text" class= "form-control" id= "basic-url" aria-describedby= "basic-addon3" >
</div>
پۆلەکانی قەبارەدانانی فۆڕمی ڕێژەیی زیاد بکە بۆ .input-group
خۆی و ناوەڕۆکەکانی ناوەوە بە شێوەیەکی ئۆتۆماتیکی قەبارەیان دەگۆڕێت- پێویست بە دووبارەکردنەوەی پۆلەکانی قەبارەی کۆنترۆڵی فۆڕم لەسەر هەر توخمێک ناکات.
<div class= "input-group input-group-lg" >
<span class= "input-group-addon" id= "sizing-addon1" > @</span>
<input type= "text" class= "form-control" placeholder= "Username" aria-describedby= "sizing-addon1" >
</div>
<div class= "input-group" >
<span class= "input-group-addon" id= "sizing-addon2" > @</span>
<input type= "text" class= "form-control" placeholder= "Username" aria-describedby= "sizing-addon2" >
</div>
<div class= "input-group input-group-sm" >
<span class= "input-group-addon" id= "sizing-addon3" > @</span>
<input type= "text" class= "form-control" placeholder= "Username" aria-describedby= "sizing-addon3" >
</div>
هەر سندوقێکی هەڵبژاردن یان هەڵبژاردەیەکی ڕادیۆیی لەناو زیادکردنی گروپێکی چوونەژوورەوەدا دابنێ لەبری دەق.
<div class= "row" >
<div class= "col-lg-6" >
<div class= "input-group" >
<span class= "input-group-addon" >
<input type= "checkbox" aria-label= "..." >
</span>
<input type= "text" class= "form-control" aria-label= "..." >
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
<div class= "col-lg-6" >
<div class= "input-group" >
<span class= "input-group-addon" >
<input type= "radio" aria-label= "..." >
</span>
<input type= "text" class= "form-control" aria-label= "..." >
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
</div> <!-- /.row -->
دوگمەکان لە گروپەکانی هاتنە ژوورەوەدا کەمێک جیاوازن و پێویستیان بە یەک ئاستی زیادەی هێلانەکردن هەیە. لەبری .input-group-addon
, پێویستە بەکاری بهێنیت .input-group-btn
بۆ پێچانی دوگمەکان. ئەمەش پێویستە بەهۆی شێوازە پێشوەختەکانی وێبگەڕ کە ناتوانرێت سەرپێچی بکرێت.
<div class= "row" >
<div class= "col-lg-6" >
<div class= "input-group" >
<span class= "input-group-btn" >
<button class= "btn btn-default" type= "button" > Go!</button>
</span>
<input type= "text" class= "form-control" placeholder= "Search for..." >
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
<div class= "col-lg-6" >
<div class= "input-group" >
<input type= "text" class= "form-control" placeholder= "Search for..." >
<span class= "input-group-btn" >
<button class= "btn btn-default" type= "button" > Go!</button>
</span>
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
</div> <!-- /.row -->
<div class= "row" >
<div class= "col-lg-6" >
<div class= "input-group" >
<div class= "input-group-btn" >
<button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" > Action <span class= "caret" ></span></button>
<ul class= "dropdown-menu" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div> <!-- /btn-group -->
<input type= "text" class= "form-control" aria-label= "..." >
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
<div class= "col-lg-6" >
<div class= "input-group" >
<input type= "text" class= "form-control" aria-label= "..." >
<div class= "input-group-btn" >
<button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" > Action <span class= "caret" ></span></button>
<ul class= "dropdown-menu dropdown-menu-right" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div> <!-- /btn-group -->
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
</div> <!-- /.row -->
<div class= "input-group" >
<div class= "input-group-btn" >
<!-- Button and dropdown menu -->
</div>
<input type= "text" class= "form-control" aria-label= "..." >
</div>
<div class= "input-group" >
<input type= "text" class= "form-control" aria-label= "..." >
<div class= "input-group-btn" >
<!-- Button and dropdown menu -->
</div>
</div>
لە کاتێکدا دەتوانیت تەنها یەک زیادکردنت هەبێت بۆ هەر لایەک، دەتوانیت چەند دوگمەیەک لە ناو یەک .input-group-btn
.
<div class= "input-group" >
<div class= "input-group-btn" >
<!-- Buttons -->
</div>
<input type= "text" class= "form-control" aria-label= "..." >
</div>
<div class= "input-group" >
<input type= "text" class= "form-control" aria-label= "..." >
<div class= "input-group-btn" >
<!-- Buttons -->
</div>
</div>
Navs کە لە Bootstrap بەردەستە مارکاپی هاوبەشیان هەیە، لە .nav
پۆلی بنەڕەتی دەست پێدەکات، هەروەها باری هاوبەش. پۆلەکانی دەستکاریکەر بگۆڕە بۆ گۆڕینی نێوان هەر ستایلێک.
وا بکە کە navs کە وەکو گەشتکردن بەکاردەهێنرێن دەستڕاگەیشتنیان پێ بکرێت
ئەگەر navs بەکاردەهێنیت بۆ دابینکردنی پەتی گەشتکردن، دڵنیابە کە a زیاد دەکەیت role="navigation"
بۆ لۆژیکیترین کۆنتێنەری باوکی <ul>
, یان <nav>
توخمێک بە دەوری تەواوی گەشتەکەدا بپێچە. ڕۆڵەکە زیاد مەکە بۆ <ul>
خۆی، چونکە ئەمە ڕێگری دەکات لەوەی وەک لیستێکی ڕاستەقینە لەلایەن تەکنەلۆژیا یارمەتیدەرەکانەوە ڕابگەیەنرێت.
تابەکان
تێبینی .nav-tabs
پۆلەکە پێویستی بە .nav
پۆلی بنەڕەتی هەیە.
<ul class= "nav nav-tabs" >
<li role= "presentation" class= "active" ><a href= "#" > Home</a></li>
<li role= "presentation" ><a href= "#" > Profile</a></li>
<li role= "presentation" ><a href= "#" > Messages</a></li>
</ul>
حەبەکان
هەمان HTML وەربگرە، بەڵام .nav-pills
لەبری ئەوە بەکاربهێنە:
<ul class= "nav nav-pills" >
<li role= "presentation" class= "active" ><a href= "#" > Home</a></li>
<li role= "presentation" ><a href= "#" > Profile</a></li>
<li role= "presentation" ><a href= "#" > Messages</a></li>
</ul>
هەروەها حەبەکان بە شێوەی ڕاست لەسەر یەک کۆدەکرێنەوە. تەنها زیاد بکە .nav-stacked
.
<ul class= "nav nav-pills nav-stacked" >
...
</ul>
ڕەوایە
بە ئاسانی تاب یان حەبەکان یەکسان بکەن بە پانایی دایک و باوکیان لە شاشەکانی فراوانتر لە 768px لەگەڵ .nav-justified
. لە شاشە بچووکەکاندا بەستەرەکانی nav لەسەر یەک کۆدەکرێنەوە.
بەستەرەکانی navbar nav ی ڕەوا لە ئێستادا پشتگیری ناکرێت.
سەفاری و وەڵامدەرەوە پاساو navs
لە v9.1.2ەوە، سەفاری هەڵەیەک پیشان دەدات کە تێیدا گۆڕینی قەبارەی وێبگەڕەکەت بە شێوەی ئاسۆیی دەبێتە هۆی هەڵەی ڕەندەرکردن لە nav ی ڕەوا کە لە کاتی نوێکردنەوەدا پاک دەکرێتەوە. ئەم هەڵەیە لە نموونەی nav ی ڕەواشدا نیشان دراوە .
<ul class= "nav nav-tabs nav-justified" >
...
</ul>
<ul class= "nav nav-pills nav-justified" >
...
</ul>
بەستەرەکان لەکارخراون
بۆ هەر پێکهاتەیەکی nav (تاب یان حەب)، زیاد بکە .disabled
بۆ بەستەری خۆڵەمێشی و هیچ کاریگەرییەکی hover .
کارایی بەستەر کاریگەری لەسەر نییە
ئەم پۆلە تەنها <a>
دەرکەوتنی 's دەگۆڕێت نەک کاراییەکانی. بۆ لەکارخستنی بەستەرەکان لێرەدا جاڤاسکڕێپتی تایبەت بەکاربهێنە.
<ul class= "nav nav-pills" >
...
<li role= "presentation" class= "disabled" ><a href= "#" > Disabled link</a></li>
...
</ul>
بەکارهێنانی درۆپداونەکان
زیادکردنی مینیوی دابەزین بە کەمێک HTML زیادە و پێوەکراوەکانی JavaScript .
تابەکان بە درۆپ داون
<ul class= "nav nav-tabs" >
...
<li role= "presentation" class= "dropdown" >
<a class= "dropdown-toggle" data-toggle= "dropdown" href= "#" role= "button" aria-haspopup= "true" aria-expanded= "false" >
Dropdown <span class= "caret" ></span>
</a>
<ul class= "dropdown-menu" >
...
</ul>
</li>
...
</ul>
حەبەکان بە درۆپداون
<ul class= "nav nav-pills" >
...
<li role= "presentation" class= "dropdown" >
<a class= "dropdown-toggle" data-toggle= "dropdown" href= "#" role= "button" aria-haspopup= "true" aria-expanded= "false" >
Dropdown <span class= "caret" ></span>
</a>
<ul class= "dropdown-menu" >
...
</ul>
</li>
...
</ul>
پێشوەختە navbar
ناوبارەکان پێکهاتەی مێتا وەڵامدەرەوەن کە وەک سەردێڕی گەشتکردن بۆ بەرنامەکەت یان ماڵپەڕەکەت کاردەکەن. لە دیمەنەکانی مۆبایلدا بە داڕمان دەست پێدەکەن (و دەتوانرێت بگۆڕدرێن) و لەگەڵ زیادبوونی پانایی دەرچەی بینینی بەردەستدا دەبنە ئاسۆیی.
بەستەرەکانی navbar nav ی ڕەوا لە ئێستادا پشتگیری ناکرێت.
ناوەڕۆکی ڕژاو
بەو پێیەی Bootstrap نازانێت کە ناوەڕۆک لە ناوبارەکەتدا چەندە پێویستی بە شوێنی هەیە، لەوانەیە تووشی کێشە بیت لەگەڵ پێچانی ناوەڕۆک لە ڕیزی دووەمدا. بۆ چارەسەرکردنی ئەمە دەتوانن:
بڕی یان پانایی شتەکانی navbar کەم بکەرەوە.
هەندێک بابەتی ناوبار لە هەندێک قەبارەی شاشەدا بشارەوە بە بەکارهێنانی پۆلەکانی سوودمەندی وەڵامدەرەوە .
ئەو خاڵە بگۆڕە کە ناوبارەکەت لە نێوان دۆخی داڕووخاو و ئاسۆیی دەگۆڕێت. گۆڕاوەکە بەپێی خواستی خۆت @grid-float-breakpoint
دروست بکە یان پرسیاری میدیایی خۆت زیاد بکە.
پێویستی بە پێوەکراوەکەی جاڤاسکڕێپت هەیە
ئەگەر جاڤاسکڕێپت لەکاربخرێت و دەرگای بینینەکە ئەوەندە تەسک بێت کە ناوبارەکە داڕمێت، ئەوا مەحاڵ دەبێت ناوبارەکە فراوان بکرێت و ناوەڕۆکەکە لەناو .navbar-collapse
.
ناوباری وەڵامدەرەوە پێویستی بەوەیە کە پێوەکراوەکەی داڕمان لە وەشانی Bootstrap ی تۆدا هەبێت.
گۆڕینی خاڵی شکاندنی ناوباری مۆبایل کە داڕماوە
ناوبارەکە دەڕوخێتە ناو دیمەنی مۆبایلە ڕاستەکەیەوە کاتێک دەرچەی بینینەکە تەسکتر بێت لە @grid-float-breakpoint
, و فراوان دەبێت بۆ دیمەنە نامۆبایلە ئاسۆییەکانی خۆی کاتێک دەرچەی بینینەکە لانیکەم @grid-float-breakpoint
لە پاناییدا بێت. ئەم گۆڕاوە لە سەرچاوەی Less ڕێکبخە بۆ ئەوەی کۆنتڕۆڵی کەی navbar داڕمێت/فراوان دەبێت. بەهای پێشوەختە بریتییە 768px
لە (بچووکترین شاشەی "بچووک" یان "تابلێت").
navbars بکە بە دەستڕاگەیشتن
دڵنیابە لە بەکارهێنانی <nav>
توخمێک یان، ئەگەر توخمێکی گشتیتر وەک a بەکاردەهێنیت <div>
، a زیاد بکە role="navigation"
بۆ هەموو ناوبارێک بۆ ئەوەی بە ڕوونی وەک ناوچەیەکی هێما بۆ بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان دەستنیشان بکەیت.
<nav class= "navbar navbar-default" >
<div class= "container-fluid" >
<!-- Brand and toggle get grouped for better mobile display -->
<div class= "navbar-header" >
<button type= "button" class= "navbar-toggle collapsed" data-toggle= "collapse" data-target= "#bs-example-navbar-collapse-1" aria-expanded= "false" >
<span class= "sr-only" > Toggle navigation</span>
<span class= "icon-bar" ></span>
<span class= "icon-bar" ></span>
<span class= "icon-bar" ></span>
</button>
<a class= "navbar-brand" href= "#" > Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class= "collapse navbar-collapse" id= "bs-example-navbar-collapse-1" >
<ul class= "nav navbar-nav" >
<li class= "active" ><a href= "#" > Link <span class= "sr-only" > (current)</span></a></li>
<li><a href= "#" > Link</a></li>
<li class= "dropdown" >
<a href= "#" class= "dropdown-toggle" data-toggle= "dropdown" role= "button" aria-haspopup= "true" aria-expanded= "false" > Dropdown <span class= "caret" ></span></a>
<ul class= "dropdown-menu" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > One more separated link</a></li>
</ul>
</li>
</ul>
<form class= "navbar-form navbar-left" >
<div class= "form-group" >
<input type= "text" class= "form-control" placeholder= "Search" >
</div>
<button type= "submit" class= "btn btn-default" > Submit</button>
</form>
<ul class= "nav navbar-nav navbar-right" >
<li><a href= "#" > Link</a></li>
<li class= "dropdown" >
<a href= "#" class= "dropdown-toggle" data-toggle= "dropdown" role= "button" aria-haspopup= "true" aria-expanded= "false" > Dropdown <span class= "caret" ></span></a>
<ul class= "dropdown-menu" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container-fluid -->
</nav>
وێنەی براند
مارکەی navbar بگۆڕە بە وێنەی خۆت بە گۆڕینەوەی دەقەکە بە <img>
. بەو پێیەی کە .navbar-brand
پادکردن و بەرزی تایبەتی خۆی هەیە، لەوانەیە پێویستت بە سەرپێچی هەندێک CSS بێت بەپێی وێنەکەت.
<nav class= "navbar navbar-default" >
<div class= "container-fluid" >
<div class= "navbar-header" >
<a class= "navbar-brand" href= "#" >
<img alt= "Brand" src= "..." >
</a>
</div>
</div>
</nav>
ناوەڕۆکی فۆڕم لە ناوەوە دابنێ .navbar-form
بۆ ڕێکخستنی ڕاست و هەڵسوکەوتی داڕووخاو لە دەرچەی بینینی تەسکدا. هەڵبژاردەکانی ڕێکخستن بەکاربهێنە بۆ بڕیاردان لەسەر ئەوەی لە کوێ لەناو ناوەڕۆکی ناوبارەکەدا نیشتەجێیە.
وەک سەری بەرز، .navbar-form
زۆربەی کۆدەکانی لەگەڵ .form-inline
لە ڕێگەی mixin هاوبەش دەکات. هەندێک لە کۆنتڕۆڵەکانی فۆڕم، وەک گروپەکانی چوونەژوورەوە، لەوانەیە پێویستیان بە پانایی جێگیر هەبێت بۆ ئەوەی بە باشی لەناو ناوبارێکدا پیشان بدرێت.
<form class= "navbar-form navbar-left" role= "search" >
<div class= "form-group" >
<input type= "text" class= "form-control" placeholder= "Search" >
</div>
<button type= "submit" class= "btn btn-default" > Submit</button>
</form>
.navbar-btn
پۆلەکە زیاد بکە بۆ ئەو <button>
توخمانەی کە لە a نیشتەجێ نین <form>
بۆ ئەوەی بە شێوەیەکی ڕاست لە ناو بارەکەدا ناوەندیان بکەیت.
<button type= "button" class= "btn btn-default navbar-btn" > Sign in</button>
بەکارهێنانی تایبەت بە کۆنتێکست
وەک پۆلەکانی دوگمەی ستاندارد , .navbar-btn
دەتوانرێت لەسەر <a>
و <input>
توخمەکان بەکاربهێنرێت. بەڵام، نە .navbar-btn
پۆلەکانی دوگمەی ستاندارد نابێت لەسەر <a>
توخمەکانی ناو .navbar-nav
.
دەق
ڕیزەکانی دەق لە توخمێکدا بە پێچە .navbar-text
، بەزۆری لەسەر <p>
تاگێک بۆ پێشەنگی و ڕەنگی دروست.
بە ناوی مارک ئۆتۆ واژۆ کراوە
<p class= "navbar-text" > Signed in as Mark Otto</p>
بەستەری نا-nav
بۆ ئەو کەسانەی کە بەستەری ستاندارد بەکاردەهێنن کە لە پێکهاتەی گەشتکردنی ناوباری ئاساییدا نین، .navbar-link
پۆلەکە بەکاربهێنە بۆ زیادکردنی ڕەنگی گونجاو بۆ هەڵبژاردەکانی ناوباری پێشوەختە و پێچەوانە.
<p class= "navbar-text navbar-right" > Signed in as <a href= "#" class= "navbar-link" > Mark Otto</a></p>
ڕێکخستنی پێکهاتەکان
بەستەرەکانی nav، فۆڕمەکان، دوگمەکان، یان دەقەکان ڕێکبخە، بە بەکارهێنانی پۆلەکانی .navbar-left
یان .navbar-right
سوودمەند. هەردوو پۆلەکە فلۆتێکی CSS بە ئاراستەی دیاریکراو زیاد دەکەن. بۆ نموونە بۆ ڕێکخستنی بەستەرەکانی nav، لە شوێنێکی جیاوازدا دابنێ <ul>
لەگەڵ پۆلی سوودمەندی تایبەت بە جێبەجێکردن.
ئەم پۆلانە وەشانی mixin-ed ی .pull-left
و .pull-right
، بەڵام ئەوان مەودایان بۆ پرسیارەکانی میدیا هەیە بۆ مامەڵەکردنی ئاسانتر لەگەڵ پێکهاتەکانی navbar لە سەرانسەری قەبارەی ئامێرەکاندا.
ڕێکخستنی ڕاستی چەندین پێکهاتە
لە ئێستادا ناوبارەکان سنوورێکیان هەیە لەگەڵ چەندین .navbar-right
پۆل. بۆ ئەوەی ناوەڕۆک بە شێوەیەکی دروست فەزایی دروست بکەین، ئێمە پەراوێزی نەرێنی لەسەر دوا .navbar-right
توخم بەکاردەهێنین. کاتێک چەندین توخم هەن کە ئەو پۆلە بەکاردەهێنن، ئەم پەراوێزانە وەک مەبەست کار ناکەن.
ئێمە سەردانی ئەمە دەکەینەوە کاتێک دەتوانین ئەو پێکهاتەیە لە v4 بنووسینەوە.
جێگیر کراوە بۆ سەرەوە
ناوەڕۆکی ناوبار زیاد بکە .navbar-fixed-top
و بۆ ناوەند .container
و .container-fluid
پاد بکە.
<nav class= "navbar navbar-default navbar-fixed-top" >
<div class= "container" >
...
</div>
</nav>
پادکردنی جەستە پێویستە
ناوەڕۆکی جێگیر ناوەڕۆکەکەی ترت دادەپۆشێت، مەگەر زیاد بکەیت padding
بۆ سەرەوەی <body>
. بەهاکانی خۆت تاقی بکەرەوە یان پارچەی خوارەوەمان بەکاربهێنە. ئامۆژگاری: بە شێوازی پێشوەختە، navbar 50px بەرزە.
body { padding-top : 70px ; }
دڵنیابە کە ئەمە دوای ناوەکی Bootstrap CSS ی تێدایە.
جێگیر کراوە بۆ خوارەوە
ناوەڕۆکی ناوبار زیاد بکە .navbar-fixed-bottom
و بۆ ناوەند .container
و .container-fluid
پاد بکە.
<nav class= "navbar navbar-default navbar-fixed-bottom" >
<div class= "container" >
...
</div>
</nav>
پادکردنی جەستە پێویستە
ناوەڕۆکی جێگیر ناوەڕۆکەکەی ترت دادەپۆشێت، مەگەر زیاد بکەیت padding
بۆ خوارەوەی <body>
. بەهاکانی خۆت تاقی بکەرەوە یان پارچەی خوارەوەمان بەکاربهێنە. ئامۆژگاری: بە شێوازی پێشوەختە، navbar 50px بەرزە.
body { padding-bottom : 70px ; }
دڵنیابە کە ئەمە دوای ناوەکی Bootstrap CSS ی تێدایە.
سەرەوەی ئیستاتیک
ناوبارێکی تەواو پان دروست بکە کە لەگەڵ لاپەڕەکەدا دەڕوات بە زیادکردن .navbar-static-top
و لەخۆگرتنی .container
یان .container-fluid
بۆ ناوەڕاست و ناوەڕۆکی ناوباری پاد.
بە پێچەوانەی .navbar-fixed-*
پۆلەکان، پێویست ناکات هیچ پادکردنێک لەسەر body
.
<nav class= "navbar navbar-default navbar-static-top" >
<div class= "container" >
...
</div>
</nav>
ناوبار هەڵگەڕاوە
دەستکاری دیمەنی navbar بکە بە زیادکردنی .navbar-inverse
.
<nav class= "navbar navbar-inverse" >
...
</nav>
شوێنی لاپەڕەی ئێستا لە ناو پلەبەندییەکی گەشتکردندا نیشان بدە.
جیاکەرەوەکان بە شێوەیەکی ئۆتۆماتیکی لە CSS لە ڕێگەی :before
و content
.
<ol class= "breadcrumb" >
<li><a href= "#" > Home</a></li>
<li><a href= "#" > Library</a></li>
<li class= "active" > Data</li>
</ol>
بەستەری لاپەڕەسازی بۆ ماڵپەڕەکەت یان ئەپەکەت بە پێکهاتەی لاپەڕەسازی فرە لاپەڕەیی، یان بەدیلێکی سادەتری لاپەڕەسازی دابین بکە .
لاپەڕەسازی سادە کە ئیلهام لە Rdio وەرگیراوە، زۆر باشە بۆ ئەپەکان و ئەنجامی گەڕان. بلۆکە گەورەکە سەختە لەدەست بدرێت، بە ئاسانی دەتوانرێت گەورە بکرێت، هەروەها شوێنی کلیککردنی گەورە دابین دەکات.
<nav aria-label= "Page navigation" >
<ul class= "pagination" >
<li>
<a href= "#" aria-label= "Previous" >
<span aria-hidden= "true" > « </span>
</a>
</li>
<li><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>
<a href= "#" aria-label= "Next" >
<span aria-hidden= "true" > » </span>
</a>
</li>
</ul>
</nav>
باری کەمئەندام و چالاک
لینکەکان بۆ بارودۆخی جیاواز دەتوانرێت خۆکارانە دابنرێت. .disabled
بۆ ئەو بەستەرانەی کە کلیکیان لەسەر نەکرێت و .active
بۆ ئاماژەدان بە لاپەڕەی ئێستا بەکاربهێنە .
<nav aria-label= "..." >
<ul class= "pagination" >
<li class= "disabled" ><a href= "#" aria-label= "Previous" ><span aria-hidden= "true" > « </span></a></li>
<li class= "active" ><a href= "#" > 1 <span class= "sr-only" > (current)</span></a></li>
...
</ul>
</nav>
پێشنیار دەکەین کە ئەنکرە چالاکەکان یان لەکارخراوەکان بگۆڕیتەوە بۆ <span>
, یان ئەنکرەکە لە حاڵەتی تیرەکانی پێشوو/دواتردا نەهێڵیت، بۆ لابردنی کارایی کلیککردن لەکاتێکدا ستایلە مەبەستدارەکان دەهێڵیتەوە.
<nav aria-label= "..." >
<ul class= "pagination" >
<li class= "disabled" >
<span>
<span aria-hidden= "true" > « </span>
</span>
</li>
<li class= "active" >
<span> 1 <span class= "sr-only" > (current)</span></span>
</li>
...
</ul>
</nav>
قەبارەدانان
فەنتازی گەورەتر یان بچووکتر لاپەڕەسازی؟ زیاد بکە .pagination-lg
یان .pagination-sm
بۆ قەبارەی زیادە.
<nav aria-label= "..." ><ul class= "pagination pagination-lg" > ...</ul></nav>
<nav aria-label= "..." ><ul class= "pagination" > ...</ul></nav>
<nav aria-label= "..." ><ul class= "pagination pagination-sm" > ...</ul></nav>
بەستەری خێرا پێشوو و داهاتوو بۆ جێبەجێکردنی لاپەڕەسازی سادە بە نیشانە و ستایلەکانی ڕووناکی. زۆر باشە بۆ سایتە سادەکان وەک بلۆگ یان گۆڤار.
نموونەی پێشوەختە
بە شێوەیەكی بنەڕەتی، پەیجەرەكە بەستەرەكان ناوەند دەكات.
<nav aria-label= "..." >
<ul class= "pager" >
<li><a href= "#" > Previous</a></li>
<li><a href= "#" > Next</a></li>
</ul>
</nav>
بەستەرەکانی ڕێکخراو
یان دەتوانیت هەر بەستەرێک بە لایەکان ڕێکبخەیت:
<nav aria-label= "..." >
<ul class= "pager" >
<li class= "previous" ><a href= "#" ><span aria-hidden= "true" > ← </span> Older</a></li>
<li class= "next" ><a href= "#" > Newer <span aria-hidden= "true" > → </span></a></li>
</ul>
</nav>
دۆخی لەکارخراوی ئیختیاری
هەروەها بەستەرەکانی پەیجەر .disabled
پۆلی سوودمەندی گشتی لە لاپەڕەسازییەوە بەکاردەهێنن.
<nav aria-label= "..." >
<ul class= "pager" >
<li class= "previous disabled" ><a href= "#" ><span aria-hidden= "true" > ← </span> Older</a></li>
<li class= "next" ><a href= "#" > Newer <span aria-hidden= "true" > → </span></a></li>
</ul>
</nav>
نموونە
نموونەی سەردێڕی نوێ
نموونەی سەردێڕی نوێ
نموونەی سەردێڕی نوێ
نموونەی سەردێڕی نوێ
نموونەی سەردێڕی نوێ
نموونەی سەردێڕی نوێ
<h3> Example heading <span class= "label label-default" > New</span></h3>
جۆرەکانی بەردەست
هەریەکێک لەم پۆلە دەستکاریکەرانەی خوارەوە زیاد بکە بۆ گۆڕینی دەرکەوتنی ناوێک.
پێشوەختە
زانیاری سەرکەوتنی سەرەتایی
مەترسی ئاگادارکردنەوە
<span class= "label label-default" > Default</span>
<span class= "label label-primary" > Primary</span>
<span class= "label label-success" > Success</span>
<span class= "label label-info" > Info</span>
<span class= "label label-warning" > Warning</span>
<span class= "label label-danger" > Danger</span>
تۆنێک لیبێڵت هەیە؟
کێشەی ڕەندەرکردن دەتوانێت کاتێک سەرهەڵبدات کە دەیان ناوی ناو هێڵت لەناو دەفرێکی تەسکدا هەبێت، هەریەکەیان inline-block
توخمێکی تایبەتی خۆی لەخۆدەگرێت (وەک ئایکۆنێک). ڕێگای چارەسەرکردنی ئەمە ڕێکخستنە display: inline-block;
. بۆ کۆنتێکست و نموونەیەک، سەیری #13219 بکە .
بە ئاسانی شتە نوێیەکان یان نەخوێندراوەکان تیشک بخەرە سەر بە زیادکردنی a <span class="badge">
بۆ بەستەرەکان، Bootstrap navs و زۆر شتی تر.
<a href= "#" > Inbox <span class= "badge" > 42</span></a>
<button class= "btn btn-primary" type= "button" >
Messages <span class= "badge" > 4</span>
</button>
خۆ داڕمان
کاتێک هیچ شتێکی نوێ یان نەخوێندراوەتەوە نییە، نیشانەکان بە سادەیی دەڕووخێن (لە ڕێگەی :empty
هەڵبژێرەری CSS) بە مەرجێک هیچ ناوەڕۆکێک لە ناوەوەدا نەبێت.
گونجاوی نێوان وێبگەڕەکان
نیشانەکان لە ئینتەرنێت ئێکسپلۆرەر ٨دا خۆیان ناڕووخێن چونکە پشتگیری بۆ :empty
هەڵبژێرەرەکە نییە.
خۆی لەگەڵ حاڵەتە چالاکەکانی nav دەگونجێنێت
ستایلە بنیات نراوەکان بۆ دانانی نیشانەکان لە حاڵەتە چالاکەکان لە گەشتەکانی حەبدا لەخۆدەگرێت.
<ul class= "nav nav-pills" role= "tablist" >
<li role= "presentation" class= "active" ><a href= "#" > Home <span class= "badge" > 42</span></a></li>
<li role= "presentation" ><a href= "#" > Profile</a></li>
<li role= "presentation" ><a href= "#" > Messages <span class= "badge" > 3</span></a></li>
</ul>
پێکهاتەیەکی سووک و نەرم و نیان کە دەتوانێت بە ئیختیاری تەواوی دەرچەی بینین درێژ بکاتەوە بۆ پیشاندانی ناوەڕۆکی سەرەکی لە ماڵپەڕەکەتدا.
سڵاو جیهان!
ئەمە یەکەیەکی پاڵەوانی سادەیە، پێکهاتەیەکی سادەی شێوازی جامبۆتڕۆنە بۆ بانگهێشتکردنی سەرنجی زیاتر بە ناوەڕۆک یان زانیارییە تایبەتمەندەکان.
زیاتر فێربە
<div class= "jumbotron" >
<h1> Hello, world!</h1>
<p> ...</p>
<p><a class= "btn btn-primary btn-lg" href= "#" role= "button" > Learn more</a></p>
</div>
بۆ ئەوەی جامبۆترۆنەکە تەواو پان بێت، و بەبێ گۆشەی گوڵاو، لە دەرەوەی هەموو .container
s دایبنێ و لەبری ئەوە .container
لەناوەوە زیاد بکە.
<div class= "jumbotron" >
<div class= "container" >
...
</div>
</div>
توێکڵێکی سادە بۆ یەکێک بۆ ئەوەی h1
بە شێوەیەکی گونجاو بۆشایی دەربهێنرێت و بەشەکانی ناوەڕۆک لە لاپەڕەیەکدا دابەش بکات. دەتوانێت توخمە h1
پێشوەختەکەی 's بەکاربهێنێت small
، هەروەها زۆربەی پێکهاتەکانی تر (بە شێوازی زیادە).
<div class= "page-header" >
<h1> Example page header <small> Subtext for header</small></h1>
</div>
سیستەمی تۆڕی Bootstrap درێژ بکەرەوە بە پێکهاتەی وێنە بچووکەکان بۆ ئەوەی بە ئاسانی تۆڕەکانی وێنە و ڤیدیۆ و دەق و زۆر شتی تر پیشان بدەیت.
ئەگەر بەدوای پێشکەشکردنی هاوشێوەی Pinterest دەگەڕێیت بۆ وێنە بچووکەکان بە بەرزی و/یان پانی جیاواز، پێویستە پێوەکراوێکی لایەنی سێیەم وەک Masonry , Isotope , یان Salvattore بەکاربهێنیت .
نموونەی پێشوەختە
بە شێوازی پێشوەختە، وێنە بچووکەکانی Bootstrap بۆ پیشاندانی وێنە بەستراوەکان بە کەمترین نیشانەکردنی پێویست دیزاین کراون.
<div class= "row" >
<div class= "col-xs-6 col-md-3" >
<a href= "#" class= "thumbnail" >
<img src= "..." alt= "..." >
</a>
</div>
...
</div>
ناوەڕۆکی تایبەت بەخۆت
بە کەمێک مارکاپی زیادە، دەتوانرێت هەر جۆرە ناوەڕۆکێکی 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.
دوگمه دوگمه
ناوی وێنە بچووکەکان
کراس جوستۆ ئۆدیۆ، داپیبوس فاسیلیسیس لە، ئێگێستاس ئێگێت کوام. Donec id elit non mi porta gravida لە ئیگێت مێتۆس. نولم id dolor id nibh ultricies ئۆتۆمبێلەکان ut id elit.
دوگمه دوگمه
<div class= "row" >
<div class= "col-sm-6 col-md-4" >
<div class= "thumbnail" >
<img src= "..." alt= "..." >
<div class= "caption" >
<h3> Thumbnail label</h3>
<p> ...</p>
<p><a href= "#" class= "btn btn-primary" role= "button" > Button</a> <a href= "#" class= "btn btn-default" role= "button" > Button</a></p>
</div>
</div>
</div>
</div>
پەیامی فیدباکەکانی ناوەڕۆک بۆ کردارە ئاساییەکانی بەکارهێنەر لەگەڵ مشتێک پەیامی ئاگادارکردنەوەی بەردەست و نەرم دابین بکە.
نموونە
هەر دەقێک و دوگمەی ڕەتکردنەوەی هەڵبژاردە لە .alert
و یەکێک لە چوار پۆلی کۆنتێکست (بۆ نموونە، .alert-success
) بۆ پەیامی ئاگادارکردنەوەی بنەڕەتی بپێچەرەوە.
هیچ پۆلێکی پێشوەختە نییە
ئاگادارکردنەوەکان پۆلی پێشوەختەیان نییە، تەنها پۆلی بنەڕەتی و دەستکاریکەریان هەیە. ئاگادارکردنەوەی خۆڵەمێشی پێشوەختە زۆر مانای نییە، بۆیە پێویستە جۆرێک لە ڕێگەی پۆلی کۆنتێکستەوە دیاری بکەیت. لە سەرکەوتن، زانیاری، ئاگادارکردنەوە، یان مەترسی هەڵبژێرە.
زۆر باشە! ئەم پەیامە گرنگەی ئاگادارکردنەوەت بە سەرکەوتوویی خوێندەوە.
سەرەکان بەرز دەکەنەوە! ئەم ئاگادارکردنەوە پێویستی بە سەرنجی تۆ هەیە، بەڵام زۆر گرنگ نییە.
ئاگادار کردنەوە! باشترە خۆت بپشکنیت، زۆر باش دەرناکەویت.
ئای سناپ! چەند شتێک بگۆڕە و دووبارە هەوڵبدە پێشکەشی بکەیتەوە.
<div class= "alert alert-success" role= "alert" > ...</div>
<div class= "alert alert-info" role= "alert" > ...</div>
<div class= "alert alert-warning" role= "alert" > ...</div>
<div class= "alert alert-danger" role= "alert" > ...</div>
ئاگادارکردنەوە ڕەتکراوەکان
لەسەر هەر ئاگادارکردنەوەیەک دروست بکە بە زیادکردنی دوگمەی ئیختیاری .alert-dismissible
و داخستنی.
×
ئاگادار کردنەوە! باشترە خۆت بپشکنیت، زۆر باش دەرناکەویت.
<div class= "alert alert-warning alert-dismissible" role= "alert" >
<button type= "button" class= "close" data-dismiss= "alert" aria-label= "Close" ><span aria-hidden= "true" > × </span></button>
<strong> Warning!</strong> Better check yourself, you're not looking too good.
</div>
بەستەرەکان لە ئاگادارکردنەوەکاندا
پۆلی سوودمەندی بەکاربهێنە .alert-link
بۆ ئەوەی بە خێرایی بەستەری ڕەنگاوڕەنگی هاوتا لەناو هەر ئاگادارکردنەوەیەکدا دابین بکەیت.
<div class= "alert alert-success" role= "alert" >
<a href= "#" class= "alert-link" > ...</a>
</div>
<div class= "alert alert-info" role= "alert" >
<a href= "#" class= "alert-link" > ...</a>
</div>
<div class= "alert alert-warning" role= "alert" >
<a href= "#" class= "alert-link" > ...</a>
</div>
<div class= "alert alert-danger" role= "alert" >
<a href= "#" class= "alert-link" > ...</a>
</div>
پێشکەشکردنی فیدباکێکی نوێ لەسەر پێشکەوتنی کاری یان کردارێک بە هێڵەکانی پێشکەوتنی سادە و لە هەمان کاتدا نەرم و نیان.
گونجاوی نێوان وێبگەڕەکان
پێشکەوتن بارەکان گواستنەوە و ئەنیمەیشنەکانی CSS3 بەکاردەهێنن بۆ بەدەستهێنانی هەندێک لە کاریگەرییەکانیان. ئەم تایبەتمەندیانە لە ئینتەرنێت ئێکسپلۆرەر ٩ و خوارەوە یان وەشانی کۆنتری فایەرفۆکس پشتگیری ناکرێت. ئۆپێرا ١٢ پشتگیری لە ئەنیمەیشن ناکات.
گونجاوی سیاسەتی ئاسایشی ناوەڕۆک (CSP).
ئەگەر ماڵپەڕەکەت سیاسەتی ئاسایشی ناوەڕۆکی (CSP)ی هەیە کە ڕێگە نادات style-src 'unsafe-inline'
، ئەوا ناتوانیت style
تایبەتمەندییەکانی ناو هێڵ بەکاربهێنیت بۆ دانانی پاناییەکانی باری پێشکەوتن وەک لە نموونەکانی خوارەوەماندا نیشان دراوە. شێوازە جێگرەوەکان بۆ ڕێکخستنی پاناییەکان کە لەگەڵ CSP توندەکاندا دەگونجێن بریتین لە بەکارهێنانی کەمێک جاڤاسکڕێپتی تایبەتمەند (کە دادەنێت element.style.width
) یان بەکارهێنانی پۆلەکانی CSS تایبەتمەند.
نموونەی بنەڕەتی
پەتی پێشکەوتنی پێشوەختە.
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" >
<span class= "sr-only" > 60% Complete</span>
</div>
</div>
بە لیبێڵەوە
<span>
پۆلی with لە ناو پەتی پێشکەوتن دەربهێنە .sr-only
بۆ ئەوەی ڕێژەیەکی دیار پیشان بدەیت.
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" >
60%
</div>
</div>
بۆ دڵنیابوون لەوەی کە دەقی ناوەکە تەنانەت بۆ ڕێژەی سەدی نزمیش بە خوێنەرەوە دەمێنێتەوە، بیر لە زیادکردنی a بکەرەوە min-width
بۆ پەتی پێشکەوتن.
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" aria-valuenow= "0" aria-valuemin= "0" aria-valuemax= "100" style= "min-width: 2em;" >
0%
</div>
</div>
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" aria-valuenow= "2" aria-valuemin= "0" aria-valuemax= "100" style= "min-width: 2em; width: 2%;" >
2%
</div>
</div>
بەدیلەکانی کۆنتێکست
پێشکەوتنەکان هەندێک لە هەمان دوگمە و پۆلەکانی ئاگادارکردنەوە بەکاردەهێنن بۆ ستایلە بەردەوامەکان.
60% تەواو (ئاگادارکردنەوە)
<div class= "progress" >
<div class= "progress-bar progress-bar-success" role= "progressbar" aria-valuenow= "40" aria-valuemin= "0" aria-valuemax= "100" style= "width: 40%" >
<span class= "sr-only" > 40% Complete (success)</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-info" role= "progressbar" aria-valuenow= "20" aria-valuemin= "0" aria-valuemax= "100" style= "width: 20%" >
<span class= "sr-only" > 20% Complete</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-warning" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%" >
<span class= "sr-only" > 60% Complete (warning)</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-danger" role= "progressbar" aria-valuenow= "80" aria-valuemin= "0" aria-valuemax= "100" style= "width: 80%" >
<span class= "sr-only" > 80% Complete (danger)</span>
</div>
</div>
ڕەنگاوڕەنگ
گرادێنت بەکاردەهێنێت بۆ دروستکردنی کاریگەرییەکی ڕەنگاوڕەنگ. لە IE9 و خوارەوەدا بەردەست نییە.
60% تەواو (ئاگادارکردنەوە)
<div class= "progress" >
<div class= "progress-bar progress-bar-success progress-bar-striped" role= "progressbar" aria-valuenow= "40" aria-valuemin= "0" aria-valuemax= "100" style= "width: 40%" >
<span class= "sr-only" > 40% Complete (success)</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-info progress-bar-striped" role= "progressbar" aria-valuenow= "20" aria-valuemin= "0" aria-valuemax= "100" style= "width: 20%" >
<span class= "sr-only" > 20% Complete</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-warning progress-bar-striped" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%" >
<span class= "sr-only" > 60% Complete (warning)</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-danger progress-bar-striped" role= "progressbar" aria-valuenow= "80" aria-valuemin= "0" aria-valuemax= "100" style= "width: 80%" >
<span class= "sr-only" > 80% Complete (danger)</span>
</div>
</div>
ئەنیمەیشن
زیاد بکە .active
بۆ .progress-bar-striped
بۆ ئەنیمەیشنکردنی هێڵەکان لە ڕاستەوە بۆ چەپ. لە IE9 و خوارەوەدا بەردەست نییە.
<div class= "progress" >
<div class= "progress-bar progress-bar-striped active" role= "progressbar" aria-valuenow= "45" aria-valuemin= "0" aria-valuemax= "100" style= "width: 45%" >
<span class= "sr-only" > 45% Complete</span>
</div>
</div>
کۆکراوە
چەندین بار بخەرە ناو یەکەوە بۆ ئەوەی لەسەر یەک .progress
کۆبکەینەوە.
35% تەواو (سەرکەوتوو)
20% تەواو (ئاگادارکردنەوە)
10% تەواو (مەترسی)
<div class= "progress" >
<div class= "progress-bar progress-bar-success" style= "width: 35%" >
<span class= "sr-only" > 35% Complete (success)</span>
</div>
<div class= "progress-bar progress-bar-warning progress-bar-striped" style= "width: 20%" >
<span class= "sr-only" > 20% Complete (warning)</span>
</div>
<div class= "progress-bar progress-bar-danger" style= "width: 10%" >
<span class= "sr-only" > 10% Complete (danger)</span>
</div>
</div>
شێوازی شتە ئەبستراکتەکان بۆ دروستکردنی جۆرە جیاوازەکانی پێکهاتە (وەک سەرنجەکانی بلۆگ، تویتەکان و هتد) کە وێنەیەکی چەپ یان ڕاست ڕێکخراو شانبەشانی ناوەڕۆکی دەقییان تێدایە.
میدیای پێشوەختە شتێکی میدیایی (وێنە، ڤیدیۆ، دەنگ) لە لای چەپ یان ڕاستی بلۆکێکی ناوەڕۆک پیشان دەدات.
<div class= "media" >
<div class= "media-left" >
<a href= "#" >
<img class= "media-object" src= "..." alt= "..." >
</a>
</div>
<div class= "media-body" >
<h4 class= "media-heading" > Media heading</h4>
...
</div>
</div>
پۆلەکان .pull-left
و .pull-right
هەروەها هەن و پێشتر وەک بەشێک لە پێکهاتەی میدیا بەکاردەهێنران، بەڵام بۆ ئەو بەکارهێنانە لە v3.3.0 بەکارنەهێنراون. ئەوان بە نزیکەیی یەکسانن بە .media-left
و .media-right
, تەنها ئەوە نەبێت کە .media-right
پێویستە لە دوای .media-body
لە html دابنرێت.
دەتوانرێت وێنەکان یان میدیای تر لە سەرەوە، ناوەڕاست، یان خوارەوە ڕێکبخرێن. بەپێی پێشوەختە لە سەرەوە ڕێکخراوە.
<div class= "media" >
<div class= "media-left media-middle" >
<a href= "#" >
<img class= "media-object" src= "..." alt= "..." >
</a>
</div>
<div class= "media-body" >
<h4 class= "media-heading" > Middle aligned media</h4>
...
</div>
</div>
بە کەمێک مارکاپی زیادە، دەتوانیت میدیا لەناو لیستەکەدا بەکاربهێنیت (بەسوودە بۆ بابەتەکانی کۆمێنت یان لیستی بابەتەکان).
<ul class= "media-list" >
<li class= "media" >
<div class= "media-left" >
<a href= "#" >
<img class= "media-object" src= "..." alt= "..." >
</a>
</div>
<div class= "media-body" >
<h4 class= "media-heading" > Media heading</h4>
...
</div>
</li>
</ul>
گروپەکانی لیست پێکهاتەیەکی نەرم و بەهێزن بۆ پیشاندانی نەک تەنها لیستە سادەکانی توخمەکان، بەڵکو ئاڵۆزەکان بە ناوەڕۆکی تایبەتمەند.
نموونەی بنەڕەتی
بنەڕەتیترین گروپی لیست بە سادەیی لیستێکی بێ ڕێکخستنە کە بابەتە لیستەکانی تێدایە، و پۆلە گونجاوەکان. لەسەری بنیات بنێ بەو بژاردانەی کە لە دوای ئەوە دێن، یان CSS ی خۆت بەپێی پێویست.
کراس جوستۆ ئۆدیۆ
داپیبوس ac facilisis لە
مۆربی لیۆ ریسوس
پۆرتا ئەی سی کۆنسێکتێتور ئەی سی
ڤێستیبولوم لە ئیرۆس
<ul class= "list-group" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
نیشانەکان
پێکهاتەی نیشانەکان زیاد بکە بۆ هەر بابەتێکی گروپی لیست و بە شێوەیەکی ئۆتۆماتیکی لە لای ڕاستەوە دادەنرێت.
14. 14 کراس جوستۆ ئۆدیۆ
2. 2 داپیبوس ac facilisis لە
1. 1 مۆربی لیۆ ریسوس
<ul class= "list-group" >
<li class= "list-group-item" >
<span class= "badge" > 14</span>
Cras justo odio
</li>
</ul>
بابەتە بەستراوەکان
بابەتە گروپەکانی لیست بەیەکەوە ببەستە بە بەکارهێنانی تاگی ئەنکر لەبری بابەتە لیستەکان (کە هەروەها بە واتای دایک و باوک دێت <div>
لەبری یەک <ul>
). پێویست بە تاکی دایک و باوک ناکات لە دەوری هەر توخمێک.
<div class= "list-group" >
<a href= "#" class= "list-group-item active" >
Cras justo odio
</a>
<a href= "#" class= "list-group-item" > Dapibus ac facilisis in</a>
<a href= "#" class= "list-group-item" > Morbi leo risus</a>
<a href= "#" class= "list-group-item" > Porta ac consectetur ac</a>
<a href= "#" class= "list-group-item" > Vestibulum at eros</a>
</div>
ڕەنگە بابەتە گروپەکانی لیست دوگمە بن لەبری بابەتە لیستەکان (کە هەروەها بە واتای دایک و باوک دێت <div>
لەبری ئەوەی <ul>
). پێویست بە تاکی دایک و باوک ناکات لە دەوری هەر توخمێک. لێرەدا پۆلە ستانداردەکان بەکارمەهێنە ..btn
کراس جوستۆ ئۆدیۆ
داپیبوس ac facilisis لە
مۆربی لیۆ ریسوس
پۆرتا ئەی سی کۆنسێکتێتور ئەی سی
ڤێستیبولوم لە ئیرۆس
<div class= "list-group" >
<button type= "button" class= "list-group-item" > Cras justo odio</button>
<button type= "button" class= "list-group-item" > Dapibus ac facilisis in</button>
<button type= "button" class= "list-group-item" > Morbi leo risus</button>
<button type= "button" class= "list-group-item" > Porta ac consectetur ac</button>
<button type= "button" class= "list-group-item" > Vestibulum at eros</button>
</div>
بابەتە لەکارخراوەکان
زیاد بکە .disabled
بۆ a .list-group-item
بۆ ئەوەی خۆڵەمێشی بکەیت بۆ ئەوەی لەکارکەوتوو دەربکەوێت.
<div class= "list-group" >
<a href= "#" class= "list-group-item disabled" >
Cras justo odio
</a>
<a href= "#" class= "list-group-item" > Dapibus ac facilisis in</a>
<a href= "#" class= "list-group-item" > Morbi leo risus</a>
<a href= "#" class= "list-group-item" > Porta ac consectetur ac</a>
<a href= "#" class= "list-group-item" > Vestibulum at eros</a>
</div>
پۆلە کۆنتێکستەکان
پۆلەکانی کۆنتێکست بەکاربهێنە بۆ ستایلکردنی بابەتە لیستەکان، بە پێشوەختە یان بەستراو. هەروەها .active
دەوڵەتیش دەگرێتەوە.
داپیبوس ac facilisis لە
کراس دانیشتن amet nibh libero
پۆرتا ئەی سی کۆنسێکتێتور ئەی سی
ڤێستیبولوم لە ئیرۆس
<ul class= "list-group" >
<li class= "list-group-item list-group-item-success" > Dapibus ac facilisis in</li>
<li class= "list-group-item list-group-item-info" > Cras sit amet nibh libero</li>
<li class= "list-group-item list-group-item-warning" > Porta ac consectetur ac</li>
<li class= "list-group-item list-group-item-danger" > Vestibulum at eros</li>
</ul>
<div class= "list-group" >
<a href= "#" class= "list-group-item list-group-item-success" > Dapibus ac facilisis in</a>
<a href= "#" class= "list-group-item list-group-item-info" > Cras sit amet nibh libero</a>
<a href= "#" class= "list-group-item list-group-item-warning" > Porta ac consectetur ac</a>
<a href= "#" class= "list-group-item list-group-item-danger" > Vestibulum at eros</a>
</div>
ناوەڕۆکی تایبەت بەخۆت
نزیکەی هەر HTMLێک لە ناوەوە زیاد بکە، تەنانەت بۆ گروپەکانی لیستی بەستراو وەک ئەوەی خوارەوە.
<div class= "list-group" >
<a href= "#" class= "list-group-item active" >
<h4 class= "list-group-item-heading" > List group item heading</h4>
<p class= "list-group-item-text" > ...</p>
</a>
</div>
لە کاتێکدا هەمیشە پێویست نییە، هەندێک جار پێویستە DOM ـەکەت بخەیتە ناو سندوقێکەوە. بۆ ئەو بارودۆخانە پێکهاتەی پانێڵەکە تاقی بکەرەوە.
نموونەی بنەڕەتی
بە شێوەیەكی بنەڕەتی، هەموو ئەو كارانەی .panel
دەیكات ئەوەیە كە هەندێک سنوور و پادکردنی بنەڕەتی جێبەجێ بکەیت بۆ ئەوەی هەندێک ناوەڕۆک لەخۆ بگرێت.
<div class= "panel panel-default" >
<div class= "panel-body" >
Basic panel example
</div>
</div>
پانێڵێک بە سەردێڕەوە
بە ئاسانی دەفرێکی سەردێڕ زیاد بکە بۆ پانێڵەکەت بە .panel-heading
. هەروەها دەتوانیت هەر <h1>
- <h6>
لەگەڵ .panel-title
پۆلێک دابنێیت بۆ زیادکردنی سەردێڕێکی پێشوەختە ستایلکراو. بەڵام قەبارەی فۆنتەکانی <h1>
- <h6>
بە .panel-heading
.
بۆ ڕەنگکردنی دروستی بەستەرەکان، دڵنیابە کە بەستەرەکان لە سەردێڕەکاندا لە ناو .panel-title
.
سەردێڕی پانێڵ بەبێ ناونیشان
ناوەڕۆکی پانێڵ
ناونیشانی پانێڵ
ناوەڕۆکی پانێڵ
<div class= "panel panel-default" >
<div class= "panel-heading" > Panel heading without title</div>
<div class= "panel-body" >
Panel content
</div>
</div>
<div class= "panel panel-default" >
<div class= "panel-heading" >
<h3 class= "panel-title" > Panel title</h3>
</div>
<div class= "panel-body" >
Panel content
</div>
</div>
دوگمەکان یان دەقی لاوەکی لە .panel-footer
. سەرنج بدە کە ژێرەوەی پانێڵەکان ڕەنگ و سنوورەکان بە میرات ناگرن لە کاتی بەکارهێنانی گۆڕانکارییەکانی ناوەڕۆکدا چونکە مەبەست لێی ئەوە نییە کە لە پێشەوە بن.
<div class= "panel panel-default" >
<div class= "panel-body" >
Panel content
</div>
<div class= "panel-footer" > Panel footer</div>
</div>
بەدیلەکانی کۆنتێکست
وەک پێکهاتەکانی تر، بە ئاسانی پانێڵێک مانادارتر بکە بۆ کۆنتێکستێکی دیاریکراو بە زیادکردنی هەریەکێک لە پۆلەکانی باری کۆنتێکست.
ناونیشانی پانێڵ
ناوەڕۆکی پانێڵ
ناونیشانی پانێڵ
ناوەڕۆکی پانێڵ
ناونیشانی پانێڵ
ناوەڕۆکی پانێڵ
ناونیشانی پانێڵ
ناوەڕۆکی پانێڵ
ناونیشانی پانێڵ
ناوەڕۆکی پانێڵ
<div class= "panel panel-primary" > ...</div>
<div class= "panel panel-success" > ...</div>
<div class= "panel panel-info" > ...</div>
<div class= "panel panel-warning" > ...</div>
<div class= "panel panel-danger" > ...</div>
لەگەڵ مێزەکاندا
هەر شتێکی بێ سنوور .table
لەناو پانێڵێکدا زیاد بکە بۆ دیزاینێکی بێ درز. ئەگەر ، هەبێت .panel-body
، ئێمە سنوورێکی زیادە زیاد دەکەین بۆ سەرەوەی خشتەکە بۆ جیاکردنەوە.
سەردێڕی پانێڵ
هەندێک ناوەڕۆکی پانێڵی پێشوەختە لێرەدا. Nulla vitae elit libero، یەکێکە لە فارێترا ئاوگەکان. Aenean lacinia bibendum nulla sed consectetur. Aenean eu لیۆ کوام. پێلێنتێسک رازاوە sem lacinia quam venenatis vestibulum. نولم id dolor id nibh ultricies ئۆتۆمبێلەکان ut id elit.
# .
ناوی یەکەم
ناوی کۆتایی
ناوی بەکارهێنەر
1. 1
مارک
ئۆتۆ
@mdo
2. 2
یاقوب
تۆرنتن
@قەڵەو
3. 3
لاری
باڵندەکە
لە @twitter
<div class= "panel panel-default" >
<!-- Default panel contents -->
<div class= "panel-heading" > Panel heading</div>
<div class= "panel-body" >
<p> ...</p>
</div>
<!-- Table -->
<table class= "table" >
...
</table>
</div>
ئەگەر جەستەی پانێڵ نەبێت، پێکهاتەکە لە سەردێڕی پانێڵەوە بۆ خشتەی تر دەڕوات بەبێ پچڕان.
سەردێڕی پانێڵ
# .
ناوی یەکەم
ناوی کۆتایی
ناوی بەکارهێنەر
1. 1
مارک
ئۆتۆ
@mdo
2. 2
یاقوب
تۆرنتن
@قەڵەو
3. 3
لاری
باڵندەکە
لە @twitter
<div class= "panel panel-default" >
<!-- Default panel contents -->
<div class= "panel-heading" > Panel heading</div>
<!-- Table -->
<table class= "table" >
...
</table>
</div>
لەگەڵ گروپەکانی لیست
بە ئاسانی گروپەکانی لیستی تەواو پان لەناو هەر پانێڵێکدا دابنێ.
سەردێڕی پانێڵ
هەندێک ناوەڕۆکی پانێڵی پێشوەختە لێرەدا. Nulla vitae elit libero، یەکێکە لە فارێترا ئاوگەکان. Aenean lacinia bibendum nulla sed consectetur. Aenean eu لیۆ کوام. پێلێنتێسک رازاوە sem lacinia quam venenatis vestibulum. نولم id dolor id nibh ultricies ئۆتۆمبێلەکان ut id elit.
کراس جوستۆ ئۆدیۆ
داپیبوس ac facilisis لە
مۆربی لیۆ ریسوس
پۆرتا ئەی سی کۆنسێکتێتور ئەی سی
ڤێستیبولوم لە ئیرۆس
<div class= "panel panel-default" >
<!-- Default panel contents -->
<div class= "panel-heading" > Panel heading</div>
<div class= "panel-body" >
<p> ...</p>
</div>
<!-- List group -->
<ul class= "list-group" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
</div>
ڕێگە بە وێبگەڕەکان بدە کە ڕەهەندەکانی ڤیدیۆ یان نمایشی سلاید دیاری بکەن بە پشتبەستن بە پانایی بلۆکی تێدایە بە دروستکردنی ڕێژەیەکی ناوەکی کە بە شێوەیەکی دروست لەسەر هەر ئامێرێک قەبارە دەکات.
یاساکان ڕاستەوخۆ بۆ <iframe>
, <embed>
, <video>
, و <object>
توخمەکان بەکاردەهێنرێن؛ بە ئیختیاری پۆلێکی نەوەی ڕوون بەکاربهێنە .embed-responsive-item
کاتێک دەتەوێت ستایلەکە بۆ تایبەتمەندیەکانی تر بگونجێنی.
پرۆ-تیپ! پێویست ناکات frameborder="0"
لە <iframe>
s ـەکەتدا جێی بکەیتەوە چونکە ئێمە ئەوە بۆ تۆ سەرپێچی دەکەین.
<!-- 16:9 aspect ratio -->
<div class= "embed-responsive embed-responsive-16by9" >
<iframe class= "embed-responsive-item" src= "..." ></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class= "embed-responsive embed-responsive-4by3" >
<iframe class= "embed-responsive-item" src= "..." ></iframe>
</div>
بەپێی پێشوەختە بە باشی
بیرەکە وەک کاریگەرییەکی سادە لەسەر توخمێک بەکاربهێنە بۆ ئەوەی کاریگەرییەکی ئینسێتی پێ بدەیت.
سەیرکە من لەناو بیرێکدام!
<div class= "well" > ...</div>
پۆلە ئیختیارییەکان
کۆنترۆڵی پادکردن و گۆشە گوڵاوەکان بە دوو پۆلی دەستکاریکەری ئیختیاری.
سەیرکە من لەناو بیرێکی گەورەدام!
<div class= "well well-lg" > ...</div>
سەیرکە من لە بیرێکی بچوکدام!
<div class= "well well-sm" > ...</div>