بېلګه

د بدلولو وړ، د لینکونو لیست ښودلو لپاره متناسب مینو. د ډراپ ډاون جاواسکریپټ پلگ ان سره متقابل جوړ شوی .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > عمل </a></li>  
  <li><a tabindex = "-1" href = "#" > بل عمل </a></li>  
  <li><a tabindex = "-1" href = "#" > دلته یو څه </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#" > جلا شوی لینک </a></li>  
</ul>

مارک اپ

یوازې د ښکته کولو مینو ته په کتلو سره، دلته اړین HTML دی. تاسو اړتیا لرئ د ډراپ ډاون محرک او د ډراپ ډاون مینو دننه وتړئ .dropdown، یا بل عنصر چې اعلان کوي position: relative;. بیا یوازې مینو جوړ کړئ.

<div class = " dropdown" > 
  -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > عمل </a></li>  
    <li><a tabindex = "-1" href = "#" > بل عمل </a></li>  
    <li><a tabindex = "-1" href = "#" > دلته یو څه </a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" > جلا شوی لینک </a></li>  
  </ul>
</div>

اختیارونه

مینو ښي خوا ته تنظیم کړئ او اضافه کړئ د ډراپ ډاون اضافي کچې شامل کړئ.

د مینو ترتیب کول

په ښي خوا کې د ډراپ ډاون مینو سره سمون کې .pull-rightاضافه کړئ ..dropdown-menu

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

غیر فعال مینو اختیارونه

د لینک غیر فعالولو لپاره په ډراپ ډاون کې .disabledاضافه کړئ .<li>

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > منظم لینک </a></li>  
  <li class = "غیر فعال" ><a tabindex = "-1" href = "#" > غیر فعاله لینک </a></li>   
  <li><a tabindex = "-1" href = "#" > بله لینک </a></li>  
</ul>

په ښکته کولو کې فرعي مینو

د ډراپ ډاون مینو اضافي کچې اضافه کړئ ، د OS X په څیر په هور کې څرګندیږي ، د ځینې ساده مارک اپ اضافو سره. د اتوماتیک سټایل کولو لپاره په موجوده ډراپ ډاون مینو کې .dropdown-submenuهر یو ته اضافه کړئ .li

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > نور انتخابونه </a>  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

مثالونه

دوه بنسټیز اختیارونه، د دوو نورو ځانګړو توپیرونو سره.

د واحد تڼۍ ډله

د تڼیو یو لړ لړۍ د دننه سره .btnوتړئ .btn-group.

<div class = "btn-group" > 
  <بټن کلاس = "btn" > چپ </ تڼۍ> 
  <button class = "btn" > منځنی </ تڼۍ> 
  <بټن کلاس = "btn" > ښی  </ تڼۍ>
</div>

څو تڼۍ ډلې

د ډیرو پیچلو اجزاوو لپاره <div class="btn-group">په a کې سیټونه یوځای کړئ.<div class="btn-toolbar">

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

عمودی تڼۍ ډلې

د تڼیو یو سیټ جوړ کړئ چې په افقی توګه په عمودی توګه ځای پرځای شوی وی.

<div class = "btn-group btn-group-vertical" > 
  ...
</div>

چک بکس او د راډیو خوندونه

د تڼۍ ګروپونه هم کولی شي د راډیو په توګه کار وکړي، چیرې چې یوازې یو تڼۍ فعاله وي، یا د چک بکسونه، چیرې چې هر شمیر بټن فعال وي. د دې لپاره جاواسکریپټ اسناد وګورئ .

په تڼۍ ګروپونو کې ښکته کول

پورته شه!د ډراپ ډاونونو سره تڼۍ باید په انفرادي ډول د سمې رینډرینګ لپاره په خپل ځان .btn-groupکې وتړل شي..btn-toolbar

لنډیز او مثالونه

د ډراپ ډاون مینو د متحرک کولو لپاره هره تڼۍ وکاروئ دا په دننه کې ځای په ځای .btn-groupکولو او مناسب مینو مارک اپ چمتو کولو سره.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    عمل
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- د ښکته کولو مینو لینکونه -->
  </ul>
</div>

د ټولو تڼیو اندازو سره کار کوي

د تڼۍ ښکته کول په هره اندازه کار کوي: .btn-large, .btn-smallیا .btn-mini.

جاواسکریپټ ته اړتیا لري

د بټن ډراپ ډاونونه د فعالیت لپاره د بوټسټریپ ډراپ ډاون پلگ ان ته اړتیا لري.

په ځینو حاالتو کې - لکه ګرځنده - ډراپ ډاون مینو به د لید پورټ څخه بهر وغځوي. تاسو اړتیا لرئ په لاسي ډول یا د دودیز جاواسکریپټ سره سمون حل کړئ.

د ویشلو تڼۍ ډراپ ډاون

د تڼۍ ګروپ سټایلونو او مارک اپ باندې رامینځته کول ، موږ کولی شو په اسانۍ سره د سپلایټ تڼۍ رامینځته کړو. د سپلایټ بټن په ښي خوا کې یو معیاري عمل او په ښي خوا کې د متناسب لینکونو سره یو ډراپ ډاون ټګل وړاندې کوي.

<div class = "btn-group" > 
  <بټن کلاس = "btn" > عمل </ تڼۍ> 
  <بټن کلاس = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </ تڼۍ>
  <ul class = "dropdown-menu" > 
    <!-- د ښکته کولو مینو لینکونه -->
  </ul>
</div>

اندازه

د اضافي تڼۍ ټولګي وکاروئ .btn-mini، .btn-smallیا .btn-largeد اندازه کولو لپاره.

<div class = "btn-group" > 
  <بټن کلاس = "btn btn-mini" > عمل </ تڼۍ> 
  <بټن کلاس = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </ تڼۍ>
  <ul class = "dropdown-menu" > 
    <!-- د ښکته کولو مینو لینکونه -->
  </ul>
</div>

ډراپ اپ مینو

د ډراپ ډاون مینو هم د سمدستي والدینو لپاره د یو واحد ټولګي په اضافه کولو سره له لاندې څخه پورته کیدی شي .dropdown-menu. دا به د لور لور .caretته واړوي او پخپله مینو کې ځای په ځای کړي ترڅو د پورته ښکته پرځای له لاندې څخه پورته حرکت وکړي.

<div class = "btn-group dropup" > 
  <بټن کلاس = " btn " > ډراپ اپ </ تڼۍ> 
  <بټن کلاس = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </ تڼۍ>
  <ul class = "dropdown-menu" > 
    <!-- د ښکته کولو مینو لینکونه -->
  </ul>
</div>

د سپک وزن ډیفالټ ورته مارک اپ، مختلف ټولګي

دلته د نیوی ټول برخې - ټبونه، ګولۍ، او لیستونه - د ټولګي له لارې ورته اساس مارک اپ او سټایلونه شریکوي ..nav

بنسټیز ټبونه

<ul>منظم لینکونه واخلئ او اضافه کړئ .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "فعال" > 
    <a href="#" > کور </a> _ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

اساسي ګولۍ

ورته HTML واخلئ، مګر .nav-pillsپرځای یې وکاروئ:

<ul class = "nav nav-pills" > 
  <li class = "فعال" > 
    <a href="#" > کور </a> _ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

د معلولیت ریاست

د هرې نیوی برخې لپاره (ټبونه، ګولۍ، یا لیست)، د خړ لینکونو.disabled لپاره اضافه کړئ او هیڅ هوور اغیزې نلري . لینکونه به د کلک کولو وړ پاتې شي، که څه هم، تر هغه چې تاسو ځانګړتیا لرې نه کړئ. په بدیل سره، تاسو کولی شئ د دې کلیکونو مخنیوي لپاره دودیز جاوا سکریپټ پلي کړئ.href

<ul class = "nav nav-pills" > 
  ...
  <li class = "معلول" ><a href = "#" > کور </a></li>  
  ...
</ul>

د اجزاو سمون

د نیوی لینکونو تنظیم کولو لپاره، .pull-leftیا .pull-rightد کارونې ټولګي وکاروئ. دواړه ټولګي به په ټاکل شوي لوري کې د CSS فلوټ اضافه کړي.

د سټیک وړ

لکه څنګه چې ټبونه او ګولۍ د ډیفالټ له مخې افقی دي، یوازې دویمه ټولګي اضافه کړئ .nav-stacked، د دې لپاره چې دوی په عمودي ډول پټ شوي وي.

پټې شوي ټبونه

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

ډډ شوي ګولۍ

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

ښکته کول

د یو څه اضافي HTML او ډراپ ډاون جاواسکریپټ پلگ ان سره د ډراپ ډاون مینو اضافه کړئ .

ټبونه د ښکته کیدو سره

<ul class = "nav nav-tabs" > 
  <li class = " dropdown" > 
    <a ټولګي = "ډراپ-ډاون-ټوګل" 
       data-toggle = "غورځیدنه"
       href = "#" >
        ښکته کول
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- لینکونه -->
    </ul>
  </li>
</ul>

ګولۍ د ښکته کیدو سره

<ul class = "nav nav-pills" > 
  <li class = " dropdown" > 
    <a ټولګي = "ډراپ-ډاون-ټوګل" 
       data-toggle = "غورځیدنه"
       href = "#" >
        ښکته کول
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- لینکونه -->
    </ul>
  </li>
</ul>

د Nav لیستونه

د اختیاري سرلیکونو سره د نیوی لینکونو ګروپونو جوړولو لپاره ساده او اسانه لار. دا په OS X کې د موندونکي په څیر په سایډ بارونو کې غوره کارول کیږي.

د نمونې nav لیست

د لینکونو لیست واخلئ او اضافه کړئ class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > د لیست سرلیک </li> 
  <li class = "فعال" ><a href = "#" > کور </a></li>  
  <li><a href = "#" > کتابتون </a></li> 
  ...
</ul>

نوټد نیوی لیست دننه د ځنځیرونو لپاره، class="nav nav-list"په هر نیسټ کې شامل کړئ <ul>.

افقی ویشونکي

د ټولګي سره د خالي لیست توکي په جوړولو سره افقی ویشونکی اضافه کړئ .divider، لکه:

<ul class = "nav nav-list" > 
  ...
  <li class = "divider" ></li> 
  ...
</ul>

Tabbable nav

خپل ټبونه د ساده پلگ ان سره ژوند ته راوړو ترڅو د ټبونو له لارې د مینځپانګې ترمینځ بدل شي. بوټسټریپ د میز وړ ټبونه په څلورو سټایلونو کې مدغم کوي: پورتنۍ (ډیفالټ) ، ښیې ، ښکته او کیڼ.

د جدول وړ مثال

د دې لپاره چې د ټبونو ټب کولو وړ وي، .tab-paneد هر ټب لپاره یو ځانګړی ID جوړ کړئ او په کې یې وپلټئ .tab-content.

<div class = "tabbable" > <!-- یوازې د کیڼ / ښیې ټبونو لپاره اړین -->  
  <ul class = "nav nav-tabs" > 
    <li class = "فعال" ><a href = "#tab1" data-toggle = "tab" > برخه 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > برخه 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> زه په لومړۍ برخه کې یم. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> سلامونه، زه په دوهمه برخه کې یم. </p>
    </div>
  </div>
</div>

په ټبونو کې غوړیږي

د دې لپاره چې ټبونه تیاره شي، .fadeهر یو ته اضافه کړئ .tab-pane.

د jQuery پلگ ان ته اړتیا لري

ټول د میز وړ ټبونه زموږ د سپک وزن jQuery پلگ ان لخوا پرمخ وړل کیږي. د جاواسکریپټ اسنادو پاڼې کې ژوند ته د ټب وړ ټبونو راوستلو څرنګوالي په اړه نور ولولئ .

میز په هر لوري کې

ټبونه په ښکته کې

د HTML ترتیب فلیپ کړئ او په لاندې کې د ټبونو ایښودلو لپاره ټولګي اضافه کړئ.

<div class = "tabable tabs-below" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

ټبونه په ښي خوا کې

ټولګي بدل کړئ ترڅو ټبونه چپ اړخ ته واچوئ.

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

په ښي خوا کې ټبونه

ښي خوا ته د ټبونو د ایښودلو لپاره ټولګي بدل کړئ.

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

بنسټیز نوی بار

د پیل کولو لپاره، نوبارونه جامد دي (پورته نه ټاکل شوي) او د پروژې نوم او بنسټیز نیویګیشن لپاره ملاتړ شامل دي. یو په هر ځای کې ځای په ځای کړئ .container، کوم چې ستاسو د سایټ او منځپانګې عرض ټاکي.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "برانډ" href = "#" > سرلیک </a>  
    <ul class = "nav" > 
      <li class = "فعال" ><a href = "#" > کور </a></li>  
      <li><a href = "#" > لینک </a></li> 
      <li><a href = "#" > لینک </a></li> 
    </ul>
  </div>
</div>

د Navbar برخې

برانډ

ستاسو د برانډ یا پروژې نوم ښودلو لپاره یو ساده لینک یوازې د لنگر ټګ ته اړتیا لري.

<a class = "برانډ" href = "#" > د پروژې نوم </a>  

نوي لینکونه

د غیر منظم لیستونو له لارې د نوي توکي اضافه کول ساده دي.

<ul class = "nav" > 
  <li class = "فعال" > 
    <a href="#" > کور </a> _ _ 
  </li>
  <li><a href = "#" > لینک </a></li> 
  <li><a href = "#" > لینک </a></li> 
</ul>

تاسو کولی شئ په اسانۍ سره د خالي لیست توکي او ساده ټولګي سره خپلو نیوی لینکونو کې ویشونکي اضافه کړئ. یوازې دا د لینکونو ترمنځ اضافه کړئ:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

فورمې

په نووبار کې د فورمې په سمه توګه سټایل او موقعیت لپاره، مناسب ټولګي اضافه کړئ لکه څنګه چې لاندې ښودل شوي. د ډیفالټ فارم لپاره، شامل کړئ .navbar-formاو .pull-leftیا .pull-rightیې په سمه توګه تنظیم کړئ.

<فارم کلاس = "نوبار-فارم پل-کیڼ" > 
  <د داخلولو ډول = "متن" کلاس = "span2" >  
  د تڼۍ ډول = "سپارل" طبقه = "btn" > سپارل </ تڼۍ>  
</form>

د لټون فورمه

د یو ډیر دودیز شوي لټون فارم لپاره، په نووبار کې د ځانګړو سټایلونو لپاره داخل او داخل ته اضافه .navbar-searchکړئ .form.search-query

<form class = "navbar-search pull-left" > 
  د انپټ ډول = "متن" کلاس = "لټون-پوښتنه" ځای لرونکی = "لټون" >   
</form>

د اجزاو سمون

د نیوی لینکونو، د لټون فورمه، یا متن، .pull-leftیا د .pull-rightکارونې ټولګي وکاروئ. دواړه ټولګي به په ټاکل شوي لوري کې د CSS فلوټ اضافه کړي.

د ښکته کولو کارول

د یو څه مارک اپ او ډراپ ډاون جاواسکریپټ پلگ ان سره نییو ته ډراپ ډاون او ډراپ اپ اضافه کړئ .

<ul class = "nav" > 
  <li class = " dropdown" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      حساب
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

د زنګ وهلو ډراپ ډاونونو په اړه د نورو مارک اپ او معلوماتو لپاره د جاواسکریپټ ډراپ ډاون اسناد وګورئ.

متن

د متن تارونه په یو عنصر کې وتړئ .navbar-text، معمولا <p>د مناسب مخکښ او رنګ لپاره په ټاګ کې.

د اختیاري ښودلو توپیرونه

نوبار د ویو پورټ پورتنۍ یا ښکته برخې ته د اضافي ټولګي سره په بهرنۍ برخه کې تنظیم کړئ .navbar.

په سر کې ټاکل شوی

اضافه کړئ .navbar-fixed-topاو په یاد ولرئ چې لږترلږه د 40px اضافه کولو سره د دې لاندې پټې ساحې حساب paddingکړئ <body>. ډاډ ترلاسه کړئ چې دا د اصلي بوټسټریپ CSS وروسته او د اختیاري ځواب ویونکي CSS څخه دمخه اضافه کړئ.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

لاندې ته ټاکل شوی

پرځای یې اضافه کړئ .navbar-fixed-bottom.

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

جامد پورته نوبار

یو بشپړ پلنوالی نویبار جوړ کړئ چې د پاڼې سره د اضافه کولو سره سکرول کیږي .navbar-static-top. د .navbar-fixed-topټولګي په خلاف، تاسو اړتیا نلرئ چې په کې هیڅ پیډینګ بدل کړئ body.

<div class = "navbar navbar-static-top" > 
  ...
</div>

ځواب ویونکی نوبار

د سقوط کونکي ځواب ویونکي نیوبار پلي کولو لپاره ، خپل د نیوبار مینځپانګه په یوه لرونکی div کې .nav-collapse.collapseلپاسه کړئ ، او د نیوبار ټګل تڼۍ اضافه کړئ .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "کانټینر" > 
 
      -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- ډاډه اوسئ چې برانډ هلته پریږدئ که تاسو غواړئ دا وښودل شي -->
      <a class = "برانډ" href = "#" > د پروژې نوم </a>  
 
      <!-- هر څه چې تاسو غواړئ په 940px یا لږ کې پټ کړئ، دلته دننه ځای په ځای کړئ -->
      <div class = "nav-collapse collapse" > 
        -->
      </div>
 
    </div>
  </div>
</div>

متغیر تغیر

په اضافه کولو سره د نیوبار نظر بدل کړئ .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

مثالونه

یو واحد مثال ښودل شوی لکه څنګه چې دا ممکن په ډیری پاڼو کې ښودل شي.

<ul class = "breadcrumb" > 
  <li><a href = "#" > کور </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > کتابتون </a> <span class = "divider" > / </span></li>   
  <li class = "فعال" > ډاټا </li> 
</ul>

معیاري پاڼه کول

ساده صفحه کول د Rdio لخوا هڅول شوي، د ایپسونو او لټون پایلو لپاره عالي. لوی بلاک له لاسه ورکول سخت دي، په اسانۍ سره د توزیع وړ، او لوی کلک ساحې چمتو کوي.

<div class = "صفحه کول" > 
  <ul>
    <li><a href = "#" > مخکینی </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 = "#" > بل </a></li> 
  </ul>
</div>

اختیارونه

معلول او فعال ریاستونه

لینکونه د مختلف شرایطو لپاره د تنظیم وړ دي. .disabledد نه کلیک کولو وړ لینکونو لپاره وکاروئ او .activeد اوسني مخ په نښه کولو لپاره.

<div class = "صفحه کول" > 
  <ul>
    <li class = "معلول" ><a href = "#" > « </a></li>  
    <li class = "فعال" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

تاسو کولی شئ په اختیاري توګه د ټاکل شوي سټایلونو ساتلو پرمهال د کلک فعالیت لرې کولو لپاره د سپانونو لپاره فعال یا غیر فعال شوي اینکرونه بدل کړئ.

<div class = "صفحه کول" > 
  <ul>
    <li class = "معلول" ><span> « </span></li> 
    <li class = "فعال" ><span> 1 </span></li> 
    ...
  </ul>
</div>

اندازه

لوی یا کوچنی پاڼه کول خوښوي؟ اضافه کړئ .pagination-large، .pagination-smallیا .pagination-miniد اضافي اندازو لپاره.

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "صفحه کول" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

السلیک

د صفحې کولو لینکونو سمون بدلولو لپاره له دوو اختیاري ټولګیو څخه یو اضافه کړئ: .pagination-centeredاو .pagination-right.

<div class = "pagination pagination-centered" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

پیجر

د سپک مارک اپ او سټایلونو سره د ساده مخ کولو پلي کولو لپاره ګړندي مخکیني او راتلونکي لینکونه. دا د ساده سایټونو لکه بلاګونو یا مجلو لپاره خورا ښه دی.

ډیفالټ مثال

د ډیفالټ په واسطه، پیجر مرکزونه لینکونه لري.

<ul class = "پیجر" > 
  <li><a href = "#" > پخوانی </a></li> 
  <li><a href = "#" > بل </a></li> 
</ul>

تړل شوي لینکونه

په بدیل سره، تاسو کولی شئ هر لینک د اړخونو سره سم کړئ:

<ul class = "پیجر" > 
  <li class = "پخوانی" > 
    <a href="#" > & larr ; زوړ </a> 
  </li>
  <li class = "بل" > 
    <a href="#" > نوی & rarr ; </a> 
  </li>
</ul>

اختیاري معلول حالت

د پیجر لینکونه هم .disabledد صفحې څخه د عمومي کارونې ټولګي کاروي.

<ul class = "پیجر" > 
  <li class = "پخوانی معیوب شوی" > 
    <a href="#" > & larr ; زوړ </a> 
  </li>
  ...
</ul>

لیبلونه

برجونه

په اسانۍ سره د سقوط وړ

د اسانه پلي کولو لپاره، لیبلونه او بیجونه به په ساده ډول سقوط وکړي (د CSS :emptyانتخاب کونکي له لارې) کله چې هیڅ مینځپانګه شتون نلري.

د اتل واحد

ستاسو په سایټ کې د کلیدي مینځپانګې ښودلو لپاره لږ وزن لرونکی ، انعطاف وړ برخه. دا د بازارموندنې او مینځپانګې - درنو سایټونو کې ښه کار کوي.

<div class = "hero-unit" > 
  <h1> سرلیک </h1>
  <p> ټګ لاین </p>
  <p>
    <a class="btn btn-primary btn-large" > 
      نور زده کړئ
    </a>
  </p>
</div>

د پاڼې سرلیک

یو ساده شیل د دې لپاره چې h1په یوه پاڼه کې د مینځپانګې برخې په مناسبه توګه ځای په ځای کړي او برخې برخې کړي. دا کولی شي h1د ډیفالټ small، عنصر او همدارنګه ډیری نور اجزا (د اضافي سټایلونو سره) وکاروي.

<div class = "page-header" > 
  <h1> د مثال پاڼې سرلیک <small> د سرلیک لپاره فرعي متن </small></h1>
</div>

ډیفالټ تمبیلونه

د ډیفالټ په واسطه، د بوټسټریپ تمبیلونه د لږترلږه اړین مارک اپ سره تړل شوي عکسونو ښودلو لپاره ډیزاین شوي.

په لوړه کچه د تنظیم وړ

د یو څه اضافي مارک اپ سره، دا ممکنه ده چې هر ډول HTML منځپانګې لکه سرلیکونه، پراګرافونه، یا تڼۍ په تمبیلونو کې اضافه کړئ.

ولې تمبیلونه وکاروئ

تمبیلونه (پخوا .media-gridتر v1.4 پورې) د عکسونو یا ویډیوګانو ، د عکس لټون پایلو ، پرچون محصولاتو ، پورټ فولیو او نور ډیر څه لپاره عالي دي. دوی کولی شي لینکونه یا جامد مواد وي.

ساده، انعطاف منونکی مارک اپ

د تمبیل مارک اپ ساده دی - د ulهر شمیر liعناصرو سره ټول هغه څه دي چې ورته اړتیا وي. دا خورا انعطاف منونکی هم دی ، د هر ډول مینځپانګې لپاره یوازې یو څه ډیر مارک اپ سره ستاسو مینځپانګې وتړئ.

د گرډ کالم اندازه کاروي

په نهایت کې ، د تمبیل جز د تمبنیل ابعادو کنټرول لپاره د موجوده گرډ سیسټم ټولګي — لکه .span2یا — کاروي..span3

مارک اپ

لکه څنګه چې مخکې یادونه وشوه، د تمبیلونو لپاره اړین مارک اپ روښانه او مستقیم دی. دلته د تړل شوي عکسونو لپاره ډیفالټ ترتیب ته یو نظر دی :

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <a href="#" class="thumbnail" > _ _ _ _  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

په تمبیلونو کې د دودیز HTML منځپانګې لپاره، مارک اپ یو څه بدلون کوي. د بلاک کچې مینځپانګې ته هرچیرې اجازه ورکولو لپاره ، موږ <a>د ورته ډول لپاره تبادله کوو <div>:

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> د تمبیل لیبل </h3>
      <p> د تمبیل سرلیک... </p>
    </div>
  </li>
  ...
</ul>

نور مثالونه

خپل ټول اختیارونه د مختلف گرډ ټولګیو سره چې تاسو ته شتون لري وپلټئ. تاسو کولی شئ مختلف اندازې مخلوط او میچ کړئ.

ډیفالټ خبرتیا

.alertد لومړني خبرتیا خبرتیا پیغام لپاره هر متن او د اختیاري ګوښه کولو تڼۍ لپاس کړئ .

<div class = "خبرتیا" > 
  د تڼۍ ډول = "تڼۍ" طبقه = "بند" ډاټا-خارج = "خبرتیا" > × </ تڼۍ>   
  <strong> خبرداری!</strong> د ځان لپاره غوره وګورئ، تاسو ډیر ښه نه یاست.
</div>

د بټکوین ګوښه کول

د ګرځنده سفاري او ګرځنده اوپیرا براوزرونه، د ځانګړتیا سربیره ، د کارولو په وخت کې د خبرتیاو د ګوښه کولو لپاره data-dismiss="alert"اړتیا لري .href="#"<a> ، د ټګ

<a href="#" class = "close" data- dismisss = "alert" > × ; </a>   

په بدیل سره، تاسو کولی شئ <button>د ډاټا ځانګړتیا سره یو عنصر وکاروئ، کوم چې موږ د خپلو اسنادو لپاره غوره کړی دی. کله چې کاروئ <button>، تاسو باید شامل type="button"کړئ یا ستاسو فورمې ممکن ونه سپارل شي.

د تڼۍ ډول = "تڼۍ" طبقه = "بند" ډاټا-خارج = "خبرتیا" > ×   </ تڼۍ>

د جاواسکریپټ له لارې خبرتیاوې رد کړئ

د خبرتیاو ګړندي او اسانه ګوښه کولو لپاره د خبرتیا jQuery پلگ ان وکاروئ .

اختیارونه

د اوږدو پیغامونو لپاره، د اضافه کولو سره د خبرتیا ریپر په پورتنۍ او ښکته برخه کې پیډینګ زیات کړئ .alert-block.

<div class = "alert alert-block" > 
  د تڼۍ ډول = "تڼۍ" طبقه = "بند" ډاټا-خارج = "خبرتیا" > × </ تڼۍ>   
  <h4> خبرداری! </h4>
  غوره ځان وګورئ، تاسو نه یاست ...
</div>

متناسب بدیلونه

د خبرتیا مفهوم بدلولو لپاره اختیاري ټولګي اضافه کړئ.

خطا او خطر

<div class = "alert alert-error" > 
  ...
</div>

بریالیتوب

<div class = "خبرتیا الرټ-بریالی" > 
  ...
</div>

معلومات

<div class = "alert alert-info" > 
  ...
</div>

مثالونه او مارک اپ

بنسټیز

د ډیفالټ پرمختګ بار د عمودی تدریجي سره.

<div class = "پرمختګ" > 
  <div class = "بار" سټایل = " پلورل : 60 ٪؛ " ></div>   
</div>

پټه

د پټو اغیزو رامینځته کولو لپاره تدریجي کارول کیږي. په IE7-8 کې شتون نلري.

<div class = "progress progress-striped" > 
  <div class = "bar" سټایل = " پلان : 20 ٪؛ " ></div>   
</div>

متحرک

د ښي څخه کیڼ اړخ ته د پټو متحرک .activeکولو لپاره اضافه کړئ . .progress-stripedد IE په ټولو نسخو کې شتون نلري.

<div class = "progress progress-striped active" > 
  <div class = "bar" سټایل = " پلان : 40 ٪؛ " ></div>   
</div>

پټه شوې

ډیری بارونه په ورته ځای کې ځای په ځای .progressکړئ ترڅو دوی ذخیره کړي.

<div class = "پرمختګ" > 
  <div class = "bar bar-success" سټایل = " چوک : 35 ٪؛ " ></div>   
  <div class = "bar bar-warning" style = " پلان : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " چړوالی : 10 %؛ " ></div>   
</div>

اختیارونه

اضافي رنګونه

د پرمختګ بارونه د ورته سټایلونو لپاره ځینې ورته تڼۍ او خبرتیا ټولګي کاروي.

<div class = "progress progress-info" > 
  <div class = "bar" سټایل = " پلان : 20 % " ></div>   
</div>
<div class = "progress progress-success" > 
  <div class = "bar" سټایل = " پلان : 40 % " ></div>   
</div>
<div class = "progress progress-warening" > 
  <div class = "bar" سټایل = " پلان : 60 % " ></div>   
</div>
<div class = "پرمختګ د خطر خطر" > 
  <div class = "bar" سټایل = " پلان : 80 % " ></div>   
</div>

پټې بارونه

د جامد رنګونو سره ورته، موږ مختلف پټې شوي پرمختګ بارونه لرو.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" سټایل = " پلان : 20 % " ></div>   
</div>
<div class = "progress progress-success progress-striped" > 
  <div class = "bar" سټایل = " پلان : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" سټایل = " پلان : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" سټایل = " پلان : 80 % " ></div>   
</div>

د براوزر ملاتړ

د پرمختګ بارونه د دوی ټولو اغیزو ترلاسه کولو لپاره CSS3 تدریجي ، لیږدونه ، او متحرکات کاروي. دا ځانګړتیاوې په IE7-9 یا د فایرفوکس پخوانیو نسخو کې نه ملاتړ کیږي.

د انټرنیټ اکسپلورر 10 او اوپرا 12 څخه دمخه نسخې د متحرکاتو ملاتړ نه کوي.

د مختلف ډولونو اجزاو جوړولو لپاره د خلاصې څیز سټایلونه (لکه د بلاګ تبصرې ، ټویټونه ، او داسې نور) چې د متن مینځپانګې تر څنګ کیڼ یا ښي اړخ عکس لري.

ډیفالټ مثال

ډیفالټ میډیا اجازه ورکوي چې د مینځپانګې بلاک چپ یا ښیې ته د میډیا څیز (عکس ، ویډیو ، آډیو) تیر کړي.

د رسنیو سرلیک

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

د رسنیو سرلیک

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

د رسنیو سرلیک

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class = "میډیا" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > د رسنیو سرلیک </h4> 
    ...
 
    <!-- نیسټ شوی میډیا اعتراض -->
    <div class = "میډیا" > 
      ...
    </div>
  </div>
</div>

د رسنیو لیست

د یو څه اضافي مارک اپ سره ، تاسو کولی شئ د لیست دننه میډیا وکاروئ (د تبصرو موضوعاتو یا مقالو لیستونو لپاره ګټور).

<ul class = "میډیا لیست" > 
  <li class = "میډیا" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > د رسنیو سرلیک </h4> 
      ...
 
      <!-- نیسټ شوی میډیا اعتراض -->
      <div class = "میډیا" > 
        ...
     </div>
    </div>
  </li>
</ul>

ویلز

په یو عنصر باندې د ساده تاثیر په توګه څاه وکاروئ ترڅو دا د انسټیټ تاثیر ورکړي.

<div class = "ښه" > 
  ...
</div>

اختیاري ټولګي

کنټرول پیډینګ او ګردي کونجونه د دوه اختیاري ترمیم کونکي ټولګیو سره.

<div class = "ښه ښه-لوی" > 
  ...
</div>

<div class = "ښه ښه-کوچنی" > 
  ...
</div>

آیکون بند کړئ

د منځپانګې لکه موډلونو او خبرتیاو د ردولو لپاره د عمومي نږدې آیکون څخه کار واخلئ.

<بټن کلاس = "بند" > × </ تڼۍ> 

د iOS وسیلې href="#"د کلیک پیښو لپاره اړتیا لري که تاسو پرځای لنگر وکاروئ.

<a class = "بند" href = "#" > × </a>  

مرستندویه ټولګي

ساده، متمرکز ټولګي د کوچني نندارې یا چلند ټیکونو لپاره.

کیڼ اړخ ته کشول

یو عنصر پاتې شو

ټولګي = "کیڼ اړخ ته راښکته"

. کش کول _ _
  float : چپه ;
}

.ښۍ خواته کش کړه

یو عنصر په سمه توګه تیر کړئ

ټولګي = "ښي خوا ته راښکته"

. کش کول - ښي {
  float : حق ;
}

خاموش

د عنصر رنګ ته بدل کړئ#999

ټولګي = "خاموش"

. خاموشه {
  رنګ : #999؛ 
}

.clearfix

floatپه هر عنصر کې پاک کړئ

ټولګي = "کلیرفکس"

. پاکول {
  * زوم : 1 ; 
  &: مخکې ،
  &: وروسته {
    ښودنه : جدول ;
    منځپانګه : "" ; 
  }
  &: وروسته {
    روښانه : دواړه ;
  }
}