Mohlala

Thepo ya go fetošwa, ya diteng ya go bontšha mananeo a dikgokagano. E dirilwe gore e be ya tirišano ka polaka ya JavaScript ya go theoga .

<ul sehlopha = "thepo ya go theoga" tema = "menu" aria-labelledby = "Menu ya go theoga" >   
  <li><a tabindex = "-1" href = "#" > Kgato </a></li>  
  <li><a tabindex = "-1" href = "#" > Tiro e nngwe </a></li>  
  <li><a tabindex = "-1" href = "#" > Selo se sengwe mo </a></li>  
  <li sehlopha = "karoganyo" </li> 
  <li><a tabindex = "-1" href = "#" > Kgokagano ye e arotšwego </a></li>  
</ul>

Go swaya

Ge o lebelela fela thepo ya go theoga, mo ke HTML ye e nyakegago. O swanetše go phuthela sešušumeletši sa go theoga le thepo ya go theoga ka gare ga .dropdown, goba elemente ye nngwe yeo e tsebagatšago position: relative;. Ebe feela bopa menu ya.

<div sehlopha = "dropdown" > 
  <!-- Kgokaganya goba konope go fetola go theoga -->
  <ul sehlopha = "thepo ya go theoga" tema = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Kgato </a></li>  
    <li><a tabindex = "-1" href = "#" > Tiro e nngwe </a></li>  
    <li><a tabindex = "-1" href = "#" > Selo se sengwe mo </a></li>  
    <li sehlopha = "karoganyo" </li> 
    <li><a tabindex = "-1" href = "#" > Kgokagano ye e arotšwego </a></li>  
  </ul>
</div> e

Dikgetho

Logaganya dimenu ka go le letona gomme o tlaleletše go akaretša maemo a tlaleletšo a dithepo.

Go logaganya dimenu

Oketša .pull-rightgo a go ya .dropdown-menugo le letona logaganya thepo ya go theoga.

<ul sehlopha = "dropdown-menu hula-tokelo" karolo = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Dikgetho tša menu tše di golofetšego

Oketša .disabledgo a <li>ka go theoga go šitiša kgokagano.

<ul sehlopha = "thepo ya go theoga" tema = "menu" aria-labelledby = "Menu ya go theoga" >   
  <li><a tabindex = "-1" href = "#" > Kgokagano ya ka mehla </a></li>  
  <li class = "e golofetše" ><a tabindex = "-1" href = "#" > Kgokagano e golofetše </a></li>   
  <li><a tabindex = "-1" href = "#" > Kgokagano ye nngwe </a></li>  
</ul>

Sub dimenu ka dropdowns

Oketša maemo a tlaleletšo a dimenu tša go theoga, tšeo di tšwelelago go hover go swana le tša OS X, ka ditlaleletšo tše dingwe tše bonolo tša go swaya. Oketša .dropdown-submenugo efe goba efe lika go thepo ya go theoga ye e lego gona bakeng sa setaele sa go itiriša.

<ul sehlopha = "thepo ya go theoga" tema = "menu" aria-labelledby = "dLabel" >   
  ...
  <li sehlopha = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > Dikgetho tše dingwe </a>  
    <ul sehlopha = "thepo ya go theoga" > 
      ...
    </ul>
  </li>
</ul>

Mehlala

Dikgetho tše pedi tša motheo, gotee le diphetogo tše dingwe tše pedi tše di lebanyago.

Sehlopha sa konopo e le nngwe

Phuthelela lelokelelo la dikonope ka .btnka .btn-group.

<div sehlopha = "btn-sehlopha" > 
  < sehlopha sa konopo = "btn" > Letsohong le letšehali </konopo> 
  < sehlopha sa konopo = "btn" > Bohareng </konopo> 
  < sehlopha sa konopo = "btn" > Tokelo ya </konopo> 
</div> e

Dihlopha tše dintši tša dikonope

Kopanya disete tsa <div class="btn-group">ka a <div class="btn-toolbar">bakeng sa dikarolo rarahaneng haholoanyane.

<div sehlopha = "btn-bar ya didirišwa" > 
  <div sehlopha = "btn-sehlopha" > 
    ...
  </div> e
</div> e

Dihlopha tša konope tše di emego thwii

Dira gore sete ya dikonope e bonagale e kgobokeditšwe ka go otlologa go e na le go rapalala.

<div sehlopha = "btn-sehlopha btn-sehlopha-e emeng" > 
  ...
</div> e

Lepokisi la go hlahloba le ditatso tša radio

Dihlopha tša dikonope di ka šoma gape bjalo ka diradio, moo konope e tee fela e ka bago e šoma, goba mapokisi a go hlahloba, moo palo efe goba efe ya dikonope e ka bago e šoma. Lebelela ditokomane tša JavaScript bakeng sa seo.

Di-dropdown ka dihlopha tša konope

Dihlogo godimo!Dikonope tše di nago le dithepo di swanetše go phuthelwa ka botee ka .btn-groupgare ga a .btn-toolbarbakeng sa go fetolela gabotse.

Kakaretšo le mehlala

Šomiša konope efe goba efe go hlohleletša thepo ya go theoga ka go e bea ka gare ga a .btn-grouple go fa leswao la thepo ya maleba.

<div sehlopha = "btn-sehlopha" > 
  <a class = "btn dropdown-toggle" ya data-toggle = "go theoga" href = "#" >   
    Kgato
    <span sehlopha = "caret" </span> 
  </a>
  <ul sehlopha = "thepo ya go theoga" > 
    <!-- dikgokagano tša thepo ya go theoga -->
  </ul>
</div> e

E šoma ka bogolo ka moka bja dikonope

Dithepo tša dikonope di šoma ka bogolo bjo bofe goba bofe: .btn-large, .btn-small, goba .btn-mini.

E nyaka JavaScript

Dithepo tša konope di nyaka gore polaka ya go theoga ya Bootstrap e šome.

Maemong a mangwe—go swana le sellathekeng—dimenu tša go theoga di tla atologela ka ntle ga lefelo la go lebelela. O swanetše go rarolla go logaganya ka seatla goba ka JavaScript ya tlwaelo.

Arola konopo dropdowns

Go aga godimo ga mekgwa ya sehlopha sa konope le go swaya, re ka hlama konope ya go arogana gabonolo. Dikonope ta go aroganya di na le tiro ya maemo ka go la nngele le go fetola ga go theoga ka go le letona ka dikgokagano ta seemo.

<div sehlopha = "btn-sehlopha" > 
  < sehlopha sa konopo = "btn" > Tiro </konopo> 
  < sehlopha sa konopo = "btn dropdown-toggle" ya data-toggle = "dropdown" >  
    <span sehlopha = "caret" </span> 
  </konope>
  <ul sehlopha = "thepo ya go theoga" > 
    <!-- dikgokagano tša thepo ya go theoga -->
  </ul>
</div> e

Bogolo

Diriša diklase tša konope tše di oketšegilego .btn-mini, .btn-small, goba .btn-largebakeng sa go lekanyetša bogolo.

<div sehlopha = "btn-sehlopha" > 
  < sehlopha sa konopo = "btn btn-mini" > Tiro </konopo> 
  < sehlopha sa konopo = "btn btn-mini dropdown-toggle" ya data-toggle = "dropdown" >  
    <span sehlopha = "caret" </span> 
  </konope>
  <ul sehlopha = "thepo ya go theoga" > 
    <!-- dikgokagano tša thepo ya go theoga -->
  </ul>
</div> e

Dimenu tša go theoga

Dimenu tša go theoga le tšona di ka fetošwa go tšwa fase go ya godimo ka go oketša sehlopha se tee go motswadi wa kgauswi wa .dropdown-menu. E tla flip tlhahlo ya .caretle reposition menu ya ka boyona ho tloha tlase ho fihlela ho ena le holimo fatše.

<div sehlopha = "btn-sehlopha dropup" > 
  < sehlopha sa konopo = "btn" > Dropup </konopo> 
  < sehlopha sa konopo = "btn dropdown-toggle" ya data-toggle = "dropdown" >  
    <span sehlopha = "caret" </span> 
  </konope>
  <ul sehlopha = "thepo ya go theoga" > 
    <!-- dikgokagano tša thepo ya go theoga -->
  </ul>
</div> e

Di-default tše bobebe Go swaya mo go swanago, diklase tše di fapanego

Dikarolo ka moka tša nav mo—dithepo, dipilisi le mananeo —a abelana leswao la motheo le mekgwa e swanago ka .navklase.

Dithepo tša motheo

Nka ka mehla <ul>ya dikgokelo le eketsa .nav-tabs:

<ul sehlopha = "nav nav-dithepo" > 
  <li sehlopha = "mafolofolo" > 
    <a href = "#" > Gae </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Dipilisi tša motheo

Tšea yona HTML yeo, eupša diriša .nav-pillsgo e na le moo:

<ul sehlopha = "nav nav-dipilisi" > 
  <li sehlopha = "mafolofolo" > 
    <a href = "#" > Gae </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Boemo bjo bo golofetšego

Bakeng sa karolo efe goba efe ya nav (dithepo, dipilisi, goba lenaneo), oketša .disabledbakeng sa dikgokagano tše bohlokwa gomme go se be le ditlamorago tša go hover . Dikgokagano di tla dula di kgotla, le ge go le bjalo, ntle le ge o tloša hrefseka. Ka mo go fapanego, o ka phethagatša JavaScript ya tlwaelo go thibela go kgotla moo.

<ul sehlopha = "nav nav-dipilisi" > 
  ...
  <li class = "e golofetše" ><a href = "#" > Gae </a></li>  
  ...
</ul>

Go logaganya dikarolo

Go logaganya dikgokagano tša nav, šomiša diklase tša .pull-leftgoba .pull-righttša utility. Diklase ka bobedi di tla oketša go phaphamala ga CSS ka tsela ye e laeditšwego.

E ka kgoboketšwa

Bjalo ka ge dithepo le dipilisi di rapaletše ka go ikemela, e no oketša sehlopha sa bobedi, .nav-stacked, go dira gore di bonagale di kgobokeditšwe ka go otlologa.

Dithepo tše di kgobokeditšwego

<ul sehlopha = "nav nav-dithepo nav-stacked" > 
  ...
</ul>

Dipilisi tše di kgobokeditšwego

<ul sehlopha = "nav nav-dipilisi nav-stacked" > 
  ...
</ul>

Di-dropdown tša go theoga

Oketša dimenu tša go theoga ka HTML ye nnyane ya tlaleletšo le plugin ya JavaScript ya go theoga .

Dithepo tšeo di nago le dilo tšeo di theogago

<ul sehlopha = "nav nav-dithepo" > 
  <li sehlopha = "dropdown" > 
    <a sehlopha = "dropdown-toggle". 
       data-toggle = "go theoga".
       href = "#" >
        Dropdown ya go theoga
        <b sehlopha = "caret" </b> 
      </a>
    <ul sehlopha = "thepo ya go theoga" > 
      <!-- dikgokagano -->
    </ul>
  </li>
</ul>

Dipilisi tšeo di nago le di- dropdown

<ul sehlopha = "nav nav-dipilisi" > 
  <li sehlopha = "dropdown" > 
    <a sehlopha = "dropdown-toggle". 
       data-toggle = "go theoga".
       href = "#" >
        Dropdown ya go theoga
        <b sehlopha = "caret" </b> 
      </a>
    <ul sehlopha = "thepo ya go theoga" > 
      <!-- dikgokagano -->
    </ul>
  </li>
</ul>

Mananeo a Nav

Tsela ye bonolo le ye bonolo ya go aga dihlopha tša dikgokagano tša nav ka dihlogo tša boikhethelo. Di šomišwa gabotse ka go di-sidebar go swana le Finder ka go OS X.

Mohlala lenane la nav

Tšea lenaneo la dikgokagano gomme o tlaleletše ka class="nav nav-list":

<ul sehlopha = "nav nav-lenaneo" > 
  <li class = "nav-header" > Hlogo ya lenaneo </li> 
  <li sehlopha = "mafolofolo" ><a href = "#" > Gae </a></li>  
  <li><a href = "#" > Bokgobapuku </a></li> 
  ...
</ul>

TemošoBakeng sa go bea dihlaga ka gare ga lenaneo la nav, akaretša class="nav nav-list"go sehlaga sefe goba sefe <ul>.

Dikaroganyo tše di rapaletšego

Oketša karoganyo ye e rapaletšego ka go hlama aetheme ya lenaneo ye e se nago selo ka sehlopha .divider, go swana le bjalo:

<ul sehlopha = "nav nav-lenaneo" > 
  ...
  <li sehlopha = "karoganyo" </li> 
  ...
</ul>

Tabba ya nav

Tliša dithepo tša gago bophelong ka polaka ye bonolo go fetoša magareng ga diteng ka dithepo. Bootstrap e kopanya dithepo tša tabbable ka mekgwa ye mene: godimo (ya go se fetoge), ka go le letona, ka fase, le ka go le letshadi.

Mohlala wa tabbable

Go dira gore dithepo di kgone go thepo, hlama .tab-paneka ID ya moswananoši ya thepo ye nngwe le ye nngwe gomme o di phuthele ka go .tab-content.

Ke mo Karolong ya 1.

Howdy, ke Karolong ya 2.

What up girl, ye ke Karolo ya 3.

<div class = "tabbable" > <!-- E nyakega fela bakeng sa dithepo tša nngele/go le letona -->  
  <ul sehlopha = "nav nav-dithepo" > 
    <li class = "mafolofolo" ><a href = "#tab1" data-toggle = "thepo" > Karolo 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "thepo" > Karolo ya 2 </a></li>  
  </ul>
  <div sehlopha = "tab-diteng" > 
    <div sehlopha = "tab-pane mafolofolo" id = "tab1" >  
      <p> Ke mo Karolong ya 1. </p>
    </div> e
    <div sehlopha = "tab-pane" id = "tab2" >  
      <p> Howdy, ke Karolong ya 2. </p>
    </div> e
  </div> e
</div> e

Fade ka dithepo

Go dira gore dithepo di fifala ka gare, oketša .fadego e nngwe le e nngwe .tab-pane.

E nyaka plugin ya jQuery

Dithepo ka moka tša tabbable di matlafatšwa ke plugin ya rena ya jQuery ye bobebe. Bala ka botlalo ka ga ka moo o ka tlišago dithepo tša dithepo bophelong letlakaleng la ditokomane tša JavaScript .

Tabbable ka lehlakoreng lefe goba lefe

Dithepo ka tlase

Flip tatelano ya HTML gomme o tlaleletše sehlopha go bea dithepo ka fase.

Ke mo Karolong ya A.

Howdy, ke Karolong ya B.

What up girl, ye ke Karolo ya C.

<div sehlopha = "tabbable dithepo-ka tlase" > 
  <div sehlopha = "tab-diteng" > 
    ...
  </div> e
  <ul sehlopha = "nav nav-dithepo" > 
    ...
  </ul>
</div> e

Dithepo ka go le letshadi

Swap sehlopha go bea dithepo ka go le letshadi.

Ke mo Karolong ya A.

Howdy, ke Karolong ya B.

What up girl, ye ke Karolo ya C.

<div sehlopha = "tabbable dithepo-left" > 
  <ul sehlopha = "nav nav-dithepo" > 
    ...
  </ul>
  <div sehlopha = "tab-diteng" > 
    ...
  </div> e
</div> e

Dithepo ka go le letona

Swap sehlopha go bea dithepo ka go le letona.

Ke mo Karolong ya A.

Howdy, ke Karolong ya B.

What up girl, ye ke Karolo ya C.

<div sehlopha = "tabbable dithepo-tokelo" > 
  <ul sehlopha = "nav nav-dithepo" > 
    ...
  </ul>
  <div sehlopha = "tab-diteng" > 
    ...
  </div> e
</div> e

Navbar ya motheo

Go thoma, di-navbar ga di sa fetoge (ga di tsepame go ya godimo) gomme di akaretša thekgo ya leina la porojeke le go sepelasepela ga motheo. Bea e tee kae goba kae ka gare ga .container, yeo e beago bophara bja sebaka sa gago le diteng.

<div sehlopha = "navbar" > 
  <div sehlopha = "navbar-ka hare" > 
    <a class = "brand" href = "#" > Sehlogo </a>  
    <ul sehlopha = "nav" > 
      <li sehlopha = "mafolofolo" ><a href = "#" > Gae </a></li>  
      <li><a href = "#" > Kgokagano </a></li> 
      <li><a href = "#" > Kgokagano </a></li> 
    </ul>
  </div> e
</div> e

Dikarolo tša Navbar

Leswao

Kgokagano ye bonolo ya go bontšha leina la gago la leina goba la projeke e nyaka fela leswao la ankora.

<a class = "brand" href = "#" > Leina la projeke </a>

Dikgokagano tša Nav

Nav dintho di bonolo ho eketsa ka manane a unordered.

<ul sehlopha = "nav" > 
  <li sehlopha = "mafolofolo" > 
    <a href = "#" > Gae </a> 
  </li>
  <li><a href = "#" > Kgokagano </a></li> 
  <li><a href = "#" > Kgokagano </a></li> 
</ul>

O ka tlaleletša gabonolo dikarolo go dikgokagano tša gago tša nav ka selo sa lenaneo se se se nago selo le sehlopha se bonolo. E no oketša se magareng ga dikgokagano:

<ul sehlopha = "nav" > 
  ...
  <li sehlopha = "karoganyo-e emego" </li> 
  ...
</ul>

Diforomo

Go setaele gabotse le go bea foromo ka gare ga navbar, oketša diklase tša maleba bjalo ka ge go bontšhitšwe ka mo tlase. Bakeng sa foromo ya go se fetoge, akaretša .navbar-formle e ka ba .pull-leftgoba .pull-rightgo e logaganya gabotse.

<foromo sehlopha = "navbar-foromo hula-le letšehali" > 
  < mohuta wa tsenyo = "sengwalwa" sehlopha = "span2" >  
  < mofuta wa konopo = "romela" sehlopha = "btn" > Romela </konopo>  
</form>

Batla foromo

Bakeng sa foromo ya nyakišišo ye e rulagantšwego kudu, oketša .navbar-searchgo formle .search-querygo tsenyo ya mekgwa ye e kgethegilego ka go navbar.

<foromo sehlopha = "navbar-batla hula-ka ho le letšehali" > 
  < mohuta wa tsenyo = "sengwalwa" sehlopha = "nyakišišo-potšišo" seswari sa lefelo = "Batla" >   
</form>

Go logaganya dikarolo

Lokiša dikgokagano tša nav, foromo ya go nyaka, goba sengwalwa, šomiša diklase tša .pull-leftgoba .pull-righttša mohola. Diklase ka bobedi di tla oketša go phaphamala ga CSS ka tsela ye e laeditšwego.

Go diriša dilo tšeo di theogago

Oketša dithepo le dithepo go nav ka go swaya go se nene le dithepo tša JavaScript plugin .

<ul sehlopha = "nav" > 
  <li sehlopha = "dropdown" > 
    <a href = "#" class = "go theoga-go fetola" data-toggle = "go theoga" >   
      Akhaonte
      <b sehlopha = "caret" </b> 
    </a>
    <ul sehlopha = "thepo ya go theoga" > 
      ...
    </ul>
  </li>
</ul>

Etela ditokomane tša go theoga tša JavaScript bakeng sa go swaya mo go oketšegilego le tshedimošo ka ga go bitša dithepo tša go theoga.

Sengwalwa

Phuthelela dithapo tša sengwalwa ka gare ga elemente ka .navbar-text, gantši godimo ga <p>thepo ya go eta pele gabotse le mmala.

Diphetogo tša pontšho ya boikgethelo

Lokiša navbar go ya godimo goba ka fase ga lefelo la go lebelela ka sehlopha sa tlaleletšo go div ya ka ntle kudu, .navbar.

E tsepame go ya godimo

Oketša .navbar-fixed-topgomme o gopole go ikarabela ka lefelo leo le utilwego ka fase ga yona ka go oketša bonyenyane 40px paddinggo <body>. Kgonthiša gore o tlaleletša se ka morago ga CSS ya motheo ya Bootstrap le pele ga CSS ya go arabela ya boikhethelo.

<div sehlopha = "navbar navbar-e tsitsitseng-hodimo" > 
  ...
</div> e

E tsepame go ya tlase

Oketša .navbar-fixed-bottomgo e na le moo.

<div sehlopha = "navbar navbar-e tsitsitseng-bottom" > 
  ...
</div> e

Navbar ya godimo ya go se fetoge

Hlama navbar ya bophara bjo bo tletšego yeo e sepelago go tloga le letlakala ka go tlaleletša .navbar-static-top. Go fapana le .navbar-fixed-topklase, ga go nyakege gore o fetoše padding le ge e le efe go body.

<div sehlopha = "navbar navbar-e sa fetoheng-hodimo" > 
  ...
</div> e

Navbar e arabelang

Go phethagatša navbar ye e arabelago ye e phuhlamago, phuthela diteng tša gago tša navbar ka gare ga div ye e nago le, .nav-collapse.collapse, gomme o tlaleletše konope ya go fetoša ya navbar, .btn-navbar.

<div sehlopha = "navbar" > 
  <div sehlopha = "navbar-ka hare" > 
    <div sehlopha = "setshelo" > 
 
      <!-- .btn-navbar e šomišwa bjalo ka toggle ya diteng tša navbar tše di phuhlamego -->
      <a sehlopha = "btn btn-navbar" ya data-toggle = "ho phuhlama" ya data-sepheo = ".nav-phuhlama" >   
        <span sehlopha = "akhone-bareng" </span> 
        <span sehlopha = "akhone-bareng" </span> 
        <span sehlopha = "akhone-bareng" </span> 
      </a>
 
      <!-- Kgonthiša gore o tlogela leina ka ntle kua ge o nyaka gore le bontšhwe -->
      <a class = "brand" href = "#" > Leina la projeke </a>  
 
      <!-- Se sengwe le se sengwe seo o se nyakago se utilwe ka 940px goba ka fase ga moo, bea ka gare mo -->
      <div sehlopha = "nav-phuhlama phuhlama" > 
        <!-- .nav, .navbar-nyatla, .navbar-foromo, jj -->
      </div> e
 
    </div> e
  </div> e
</div> e

Dihlogo godimo! Navbar ye e arabelago e nyaka plugin ya go phuhlama le faele ya CSS ya Bootstrap ye e arabelago .

Phapano e fetotšwego

Fetoša ponagalo ya navbar ka go tlaleletša .navbar-inverse.

<div sehlopha = "navbar navbar-inverse" > 
  ...
</div> e

Mehlala

Mohlala o tee wo o bontšhitšwego bjalo ka ge o ka bontšhwa go ralala le matlakala a mantši.

<ul sehlopha = "breadcrumb" > 
  <li><a href = "#" > Gae </a> < sehlopha sa span = "karoganyo" > / </span></li>   
  <li><a href = "#" > Bokgobapuku </a> <span class = "karoganyo" > / </span></li>   
  <li sehlopha = "mafolofolo" > Datha </li> 
</ul>

Go beakanya matlakala ka maemo

Bonolo pagination bululetsoeng ke Rdio, e khōlō bakeng sa ditiriso tse dingwe le diphetho batla. Bloko e kgolo e thata go e foša, e ka lekanywa gabonolo, gomme e nea mafelo a magolo a go kgotla.

<div sehlopha = "pagination" > 
  <ul>
    <li><a href = "#" > Pele </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 = "#" > E latelago </a></li> 
  </ul>
</div> e

Dikgetho

Bogolofadi le mafolofolo e re

Links ba customizable bakeng sa maemo a fapaneng. Šomiša .disabledbakeng sa dikgokagano tšeo di sa kgotlego le .activego bontšha letlakala la bjale.

<div sehlopha = "pagination" > 
  <ul>
    <li sehlopha = "go golofetše" ><a href = "#" > « </a></li> e  
    <li sehlopha = "mafolofolo" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div> e

O ka fapantšha ka boikgethelo ditshetledi tše di šomago goba tše di golofetšego bakeng sa di-span go tloša mošomo wa go klika mola o boloka mekgwa yeo e reretšwego.

<div sehlopha = "pagination" > 
  <ul>
    <li sehlopha = "ba golofetšego" ><span> « </span></li> e 
    <li sehlopha = "mafolofolo" ><span> 1 </span></li> 
    ...
  </ul>
</div> e

Bogolo

Fancy kgolo goba e nyenyane pagination? Oketša .pagination-large, .pagination-small, goba .pagination-minibakeng sa bogolo bjo bo oketšegilego.

<div class = "matlakala a letlakala-kgolo" > 
  <ul>
    ...
  </ul>
</div> e
<div sehlopha = "pagination" > 
  <ul>
    ...
  </ul>
</div> e
<div sehlopha = "pagination maqephe-nyenyane" > 
  <ul>
    ...
  </ul>
</div> e
<div sehlopha = "maqephe a matlakala-mini" > 
  <ul>
    ...
  </ul>
</div> e

Go logaganya

Oketša e nngwe ya diklase tše pedi tša boikhethelo go fetoša go logaganya ga dikgokagano tša matlakala: .pagination-centeredle .pagination-right.

<div class = "go tsepama go letlakala la matlakala" > 
  ...
</div> e

<div sehlopha = "pagination maqephe-tokelo" > 
  ...
</div> e

Pager ya go swana le yona

Dikgokagano tša ka pela tša peleng le tše di latelago bakeng sa diphethagatšo tše bonolo tša matlakala ka go swaya seetša le mekgwa. E botse kudu bakeng sa mafelo a bonolo a go swana le di-blog goba dimakasine.

Mohlala wa default

Ka default, pager e tsepamisa dikgokelo.

<ul sehlopha = "pager" > 
  <li><a href = "#" > E fetileng </a></li> 
  <li><a href = "#" > E latelago </a></li> 
</ul>

Dikgokagano tše di logaganywago

Ka go fapana le moo, o ka logaganya kgokagano ye nngwe le ye nngwe go mahlakoreng:

<ul sehlopha = "pager" > 
  <li sehlopha = "pele" > 
    <a href = "#" > & l rr; Ba bagolo </a> 
  </li>
  <li sehlopha = "se latelang" > 
    <a href = "#" > E ntjha → </a> 
  </li>
</ul>

Boemo bja go golofala bja boikgethelo

Dikgokagano tša Pager gape di šomiša .disabledsehlopha sa utility ya kakaretšo go tšwa go pagination.

<ul sehlopha = "pager" > 
  <li class = "pele e golofetše" > 
    <a href = "#" > & l rr; Ba bagolo </a> 
  </li>
  ...
</ul>

Dileibole

Dileibole	Go swaya
Hlokomologa	`<span class="label">Default</span>`
Katlego	`<span class="label label-success">Success</span>`
Temošo	`<span class="label label-warning">Warning</span>`
Bohlokwa	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`
Inverse	`<span class="label label-inverse">Inverse</span>`

Dipetšhe

Leina	Mohlala	Go swaya
Hlokomologa	1. 1.	`<span class="badge">1</span>`
Katlego	2.	`<span class="badge badge-success">2</span>`
Temošo	4.	`<span class="badge badge-warning">4</span>`
Bohlokwa	6.	`<span class="badge badge-important">6</span>`
Info	8.	`<span class="badge badge-info">8</span>`
Inverse	10.	`<span class="badge badge-inverse">10</span>`

E phuhlama gabonolo

Bakeng sa phethagatšo ye bonolo, dileibole le dipetšhe di tla no phuhlama (ka :emptymokgethi wa CSS) ge go se na diteng tšeo di lego gona ka gare.

Yuniti ya mogale

Karolo ye bobebe, ye e fetofetogago go bontšha diteng tša bohlokwa mo saeteng ya gago. E šoma gabotse go papatšo le mafelong ao a nago le diteng tše dintši.

Thobela, lefase!

Ye ke yuniti ye bonolo ya mogale, karolo ye bonolo ya mokgwa wa jumbotron ya go bitša tlhokomelo ye e oketšegilego go dikagare tše di bontšhitšwego goba tshedimošo.

Ithute ka botlalo

<div sehlopha = "mohale-yuniti" > 
  <h1> Hlogo ya </h1>
  <p> Mothaladi wa go swaya </p>
  <p>
    <a sehlopha = "btn btn-primary btn-kgolo" > 
      Ithute ka botlalo
    </a>
  </p>
</div> e

Hlogo ya letlakala

Kgapetla ye bonolo ya h1go sekgoba ka tshwanelo le go arola dikarolo ta diteng letlakaleng. E ka diriša h1's default small, elemente gammogo le bontši bja dikarolo tše dingwe (ka mekgwa ya tlaleletšo).

<div sehlopha = "letlakala-hlooho" > 
  <h1> Mohlala wa hlogo ya letlakala <small> Sengwalwa sa ka fasana sa hlogo </small></h1>
</div> e

Ditshwantsho tse dinyenyane tsa kamehla

Ka go ikemela, diswantšho tše nnyane tša Bootstrap di hlamilwe go bontšha diswantšho tše di kgokagantšwego ka go swaya mo gonyenyane mo go nyakegago.

E ka fetošwa kudu

Ka go swaya go se nene ga tlaleletšo, go a kgonega go oketša mohuta ofe goba ofe wa diteng tša HTML go swana le dihlogo, dirapa, goba dikonope ka gare ga diswantšho tše nnyane.

Leina la seswantšho se senyenyane

Cras justo odio, dapibus ac facilisis ka, di-egestas di eget quam. Donec id elit e seng mi porta gravida ka eget metus. Nullam id dolor id nibh dikoloi tša dikoloi ut id elit.

Kgato Kgato
Leina la seswantšho se senyenyane

Cras justo odio, dapibus ac facilisis ka, di-egestas di eget quam. Donec id elit e seng mi porta gravida ka eget metus. Nullam id dolor id nibh dikoloi tša dikoloi ut id elit.

Kgato Kgato
Leina la seswantšho se senyenyane

Cras justo odio, dapibus ac facilisis ka, di-egestas di eget quam. Donec id elit e seng mi porta gravida ka eget metus. Nullam id dolor id nibh dikoloi tša dikoloi ut id elit.

Kgato Kgato

Ke ka baka la’ng o diriša diswantšho tše dinyenyane

Diswantšho tše nnyane (tšeo pele di bego .media-griddi fihla go v1.4) di botse kudu bakeng sa digridi tša dinepe goba dibidio, dipoelo tša go nyaka diswantšho, ditšweletšwa tša mabenkele, dipotfolio, le tše dingwe tše dintši. Di ka ba dikgokagano goba dikagare tše di sa fetogego.

Go swaya mo go bonolo, mo go fetofetogago

Go swaya seswantšho se senyenyane go bonolo—a ulka palo le ge e le efe ya lidielemente ke sohle seo se nyakegago. Gape ke super flexible, e dumelela mohuta ofe goba ofe wa dikagare ka go swaya go se nene fela go phuthela dikagare tša gago.

E šomiša bogolo bja dikholomo tša keriti

Labofelo, karolo ya diswantšho tše dinyenyane e diriša diklase tša tshepedišo ya keriti tšeo di lego gona—go swana le .span2goba.span3 —bakeng sa taolo ya ditekanyo tša diswantšho tše nnyane.

Go swaya

Bjalo ka ge go boletšwe pejana, go swaya mo go nyakegago bakeng sa diswantšho tše dinyenyane go bobebe e bile go otlologile. Mona ke go lebelela peakanyo ya go se fetoge ya diswantšho tše di kgokagantšwego :

<ul sehlopha = "diswantšho tše dinyenyane" > 
  <li sehlopha = "span4" > 
    <a href = "#" sehlopha = "seswantšho se senyenyane" >  
      <img ya data-src = "moswari.js / 300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

Bakeng sa diteng tša HTML tša tlwaelo ka go diswantšho tše nnyane, go swaya go fetoga go se nene. Go dumelela diteng tša maemo a thibelo kae goba kae, re fapantšha the <a>ka go <div>rata bjalo:

<ul sehlopha = "diswantšho tše dinyenyane" > 
  <li sehlopha = "span4" > 
    <div sehlopha = "seswantšho se senyenyane" > 
      <img ya data-src = "moswari.js / 300x200" alt = "" >  
      <h3> Leina la seswantšho se senyenyane </h3>
      <p> Tlhaloso ya seswantšho se senyenyane... </p>
    </div> e
  </li>
  ...
</ul>

Mehlala e mengwe

Hlahloba dikgetho tša gago ka moka ka diklase tša go fapafapana tša keriti tšeo di lego gona go wena. O ka boela wa hlakanya le go nyalelanya bogolo bjo bo fapanego.

Temoso ya kamehla

Phuthelela sengwalwa sefe goba sefe le konope ya go raka ya boikhethelo ka gare .alertbakeng sa molaetša wa temošo ya temošo ya motheo.

Temošo! Best check yo self, ga o bonagale gabotse kudu.

<div sehlopha = "temošo" > 
  < mofuta wa konopo = "konopo" sehlopha = "tswalela" data-dismiss = "temošo" > × </konope>   
  <strong> Temošo! </strong> Best check yo self, ga o bonagale gabotse kudu.
</div> e

Raka dikonope

Mobile Safari le Mobile Opera diphensele, go tlaleletša go data-dismiss="alert"seka, di nyaka e href="#"bakeng sa go rakwa ga ditemošo ge o diriša <a>tag.

<a href = "#" sehlopha = "tswalela" ya data-dismiss = "temošo" > &dinako; </a>

Ka go fapana le moo, o ka šomiša <button>elemente yeo e nago le seka sa datha, seo re kgethilego go se dira bakeng sa ditokomane tša rena. Ge o šomiša <button>, o swanetše go akaretša type="button"goba diforomo tša gago di ka se romele.

< mofuta wa konopo = "konopo" sehlopha = "tswalela" data-dismiss = "temošo" > × </konope>

Lahla ditemošo ka JavaScript

Diriša ditemošo jQuery plugin bakeng sa go rakwa ka pela le bonolo ga ditemošo.

Dikgetho

Bakeng sa melaetša e metelele, oketša go tlatša ka godimo le ka tlase ga sephuthelwana sa temošo ka go oketša .alert-block.

Temošo!

Best check yo self, ga o bonagale gabotse kudu. Nulla vitae elit libero, e lego pharetra e lego augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div sehlopha = "temošo temošo-thibelo" > 
  < mofuta wa konopo = "konopo" sehlopha = "tswalela" data-dismiss = "temošo" > × </konope>   
  <h4> Temošo! </h4>
  Best check yo self, ga o...
</div> e

Dikgetho tše dingwe tša seemo

Oketša diklase tša boikhethelo go fetoša tlhalošo ya temošo.

Phošo goba kotsi

Ao snap! Fetoša dilo tše mmalwa godimo gomme o leke go romela gape.

<div sehlopha = "temošo temošo-phošo" > 
  ...
</div> e

Katlego

O šomile gabotse! O bala molaetša wo o bohlokwa wa temošo ka katlego.

<div sehlopha = "temošo temošo-katlego" > 
  ...
</div> e

Tshedimošo

Dihlogo godimo! Tlhokomedišo ye e nyaka tlhokomelo ya gago, eupša ga se ya bohlokwa kudu.

<div sehlopha = "temošo temošo-tshedimošo" > 
  ...
</div> e

Mehlala le go swaya

Ya motheo

Default tsoelo-pele bareng le paatsepama gradient.

<div sehlopha = "tšwelopele" > 
  <div sehlopha = "bareng" setaele = " bophara : 60 %; " ></div>   
</div> e

E na le methalo

E šomiša gradient go hlola seabe sa methalo. Ga e hwetšagale go IE7-8.

<div class = "tšwelopele ya tšwelopele-methalo" > 
  <div sehlopha = "bareng" setaele = " bophara : 20 %; " ></div>   
</div> e

E di phelago

Oketša .activego .progress-stripedgo phediša methalo go le letona go ya go le letshadi. Ga e hwetšagale ka diphetolelong ka moka tša IE.

<div class = "tšwelopele tšwelopele-striped mafolofolo" > 
  <div sehlopha = "bareng" setaele = " bophara : 40 %; " ></div>   
</div> e

E kgobokeditšwe

Bea dibara tše ntši ka gare ga e tee .progressgo di kgoboketša.

<div sehlopha = "tšwelopele" > 
  <div sehlopha = "bareng bareng-katleho" setaele = " bophara : 35 %; " ></div>   
  <div sehlopha = "bareng bareng-temošo" setaele = " bophara : 20 %; " ></div>   
  <div sehlopha = "bareng bareng-kotsi" setaele = " bophara : 10 %; " ></div>   
</div> e

Dikgetho

Mebala ya tlaleletšo

Dibara tša tšwelopele di šomiša tše dingwe tša konope ye e swanago le diklase tša temošo bakeng sa mekgwa ye e sa fetogego.

<div class = "tšwelopele ya tšwelopele-info" > 
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

Striped bars

Similar to the solid colors, we have varied striped progress bars.

<div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <div class="bar" style="width: 80%"></div>
</div>

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

Default example

The default media allow to float a media object (images, video, audio) to the left or right of a content block.

Media heading

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.

Media heading

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" data-src="holder.js/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
 
    <!-- Nested media object -->
    <div class="media">
      ...
    </div>
  </div>
</div>

Media list

With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).

Media heading

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.

Nested media heading
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.

Nested media heading
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.

Nested media heading
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.
Media heading
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.

<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" data-src="holder.js/64x64">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
 
      <!-- Nested media object -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
</ul>

Wells

Use the well as a simple effect on an element to give it an inset effect.

Look, I'm in a well!

<div class="well">
  ...
</div>

Optional classes

Control padding and rounded corners with two optional modifier classes.

Look, I'm in a well!

<div class="well well-large">
  ...
</div>

Look, I'm in a well!

<div class="well well-small">
  ...
</div>

Close icon

Use the generic close icon for dismissing content like modals and alerts.

<button class="close">&times;</button>

iOS devices require an href="#" for click events if you would rather use an anchor.

<a class="close" href="#">&times;</a>

Helper classes

Simple, focused classes for small display or behavior tweaks.

.pull-left

Float an element left

class="pull-left"

.pull-left {
  float: left;
}

.pull-right

Float an element right

class="pull-right"

.pull-right {
  float: right;
}

.muted

Change an element's color to #999

class="muted"

.muted {
  color: #999;
}

.clearfix

Clear the float on any element

class="clearfix"

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

Dimenu tša go theoga

Mohlala

Go swaya

Dikgetho

Go logaganya dimenu

Dikgetho tša menu tše di golofetšego

Sub dimenu ka dropdowns

Dihlopha tša konope

Mehlala

Sehlopha sa konopo e le nngwe

Dihlopha tše dintši tša dikonope

Dihlopha tša konope tše di emego thwii

Lepokisi la go hlahloba le ditatso tša radio

Di-dropdown ka dihlopha tša konope

Dimenu tša go theoga tša konope

Kakaretšo le mehlala

E šoma ka bogolo ka moka bja dikonope

E nyaka JavaScript

Arola konopo dropdowns

Bogolo

Dimenu tša go theoga

Nav: dithepo, dipilisi, le mananeo

Di-default tše bobebe Go swaya mo go swanago, diklase tše di fapanego

Dithepo tša motheo

Dipilisi tša motheo

Boemo bjo bo golofetšego

Go logaganya dikarolo

E ka kgoboketšwa

Dithepo tše di kgobokeditšwego

Dipilisi tše di kgobokeditšwego

Di-dropdown tša go theoga

Dithepo tšeo di nago le dilo tšeo di theogago

Dipilisi tšeo di nago le di- dropdown

Mananeo a Nav

Mohlala lenane la nav

Dikaroganyo tše di rapaletšego

Tabba ya nav

Mohlala wa tabbable

Fade ka dithepo

E nyaka plugin ya jQuery

Tabbable ka lehlakoreng lefe goba lefe

Dithepo ka tlase

Dithepo ka go le letshadi

Dithepo ka go le letona

Navbar

Navbar ya motheo

Dikarolo tša Navbar

Leswao

Dikgokagano tša Nav

Diforomo

Batla foromo

Go logaganya dikarolo

Go diriša dilo tšeo di theogago

Sengwalwa

Diphetogo tša pontšho ya boikgethelo

E tsepame go ya godimo

E tsepame go ya tlase

Navbar ya godimo ya go se fetoge

Navbar e arabelang

Phapano e fetotšwego

Dikgapetla tša borotho

Mehlala

Go dira matlakala Dikgetho tše pedi tša go dira matlakala ka gare ga diteng

Go beakanya matlakala ka maemo

Dikgetho

Bogolofadi le mafolofolo e re

Bogolo

Go logaganya

Pager ya go swana le yona

Mohlala wa default

Dikgokagano tše di logaganywago

Boemo bja go golofala bja boikgethelo

Dileibole le dipetšhe

Dileibole

Dipetšhe

E phuhlama gabonolo

Dikarolo tša go gatiša

Yuniti ya mogale

Thobela, lefase!

Hlogo ya letlakala