Mohlala

Lenane la maemo a feto-fetohang bakeng sa ho hlahisa manane a lihokelo. E entsoe hore e sebelisane le ho theoha ha JavaScript plugin .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#"> Ketso </a></li >  
  <li><a tabindex = "-1" href = "#"> Ketso e nngwe </a></li>  
  <li><a tabindex = "-1" href = "#" > Ntho e nngwe mona </a></li>  
  <li class = "divider" > </li> 
  <li><a tabindex = "-1" href = "#"> Sehokelo se arohaneng </a></li>  
</ul>

Markup

Ha u sheba feela lethathamo la litheolelo, HTML e hlokahalang ke ena. U hloka ho phuthela "trigger" ea dropdown le menu e theoha ka hare ho .dropdown, kapa ntho e 'ngoe e phatlalatsang position: relative;. Ebe u theha menu feela.

<div class = "dropdown" > 
  <!-- Link kapa konopo ho toggle dropdown -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#"> Ketso </a></li >  
    <li><a tabindex = "-1" href = "#"> Ketso e nngwe </a></li>  
    <li><a tabindex = "-1" href = "#" > Ntho e nngwe mona </a></li>  
    <li class = "divider" > </li> 
    <li><a tabindex = "-1" href = "#"> Sehokelo se arohaneng </a></li>  
  </ul>
</ div>

Dikgetho

Lokisetsa li-menu ka ho le letona 'me u li kenye, u kenyelletse maemo a mang a litheohelang.

Ho kopanya li-menu

Eketsa .pull-rightho a .dropdown-menuho le letona lokisetsa menu e theoha.

<ul class = "menu e theoha-ho hula-ka ho le letona" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Likhetho tsa menu tse holofetseng

Kenya .disabledho a <li>dropdown ho tima sehokelo.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#"> Sehokelo sa kamehla </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#"> Sehokelo se holofetseng </a></li >   
  <li><a tabindex = "-1" href = "#"> Sehokelo se seng </a></li>  
</ul>

Manane a tlase ho li-dropdown

Kenya boemo bo eketsehileng ba li-menu tse theohang, tse hlahang hover joalo ka tsa OS X, ka litlatsetso tse bonolo tsa markup. Eketsa .dropdown-submenuho efe kapa efe liho menu e theohang e teng bakeng sa ho iketsetsa setaele.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#"> Likgetho tse ling </a>  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Mehlala

Likhetho tse peli tsa mantlha, hammoho le mefuta e 'meli e ikhethang.

Sehlopha sa konopo e le 'ngoe

Koahela letoto la likonopo ka .btnin .btn-group.

<div class = "btn-group" > 
  < sehlopha sa konopo = "btn" > Ka ho le letšehali </button> 
  < sehlopha sa konopo = "btn" > Bohareng </button> 
  < sehlopha sa konopo = "btn" > Ka ho le letona </ konopo> 
</ div>

Lihlopha tse ngata tsa likonopo

Kopanya lihlopha tsa <div class="btn-group">ho ba a <div class="btn-toolbar">bakeng sa likarolo tse rarahaneng haholoanyane.

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

Lihlopha tsa konopo tse otlolohileng

Etsa hore likonopo tse 'maloa li hlahe li theohile ho fapana le tse tšekaletseng.

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

Li-checkbox le litlolo tsa radio

Lihlopha tsa likonopo le tsona li ka sebetsa joalo ka liea-le-moea, moo konopo e le 'ngoe feela e ka bang teng, kapa mabokose a hlahlobang, moo palo efe kapa efe ea likonopo e ka bang teng. Sheba litokomane tsa JavaScript bakeng sa seo.

Litheolelo ka lihlopha tsa likonopo

Hlokomela!Likonopo tse nang le li-dropdown li tlameha ho phutheloa ka botsona .btn-groupka botsona ba tsona .btn-toolbarbakeng sa phetolelo e nepahetseng.

Kakaretso le mehlala

Sebelisa konopo efe kapa efe ho qala menu e theoha ka ho e beha ka har'a a .btn-grouple ho fana ka letšoao le nepahetseng la menu.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
    Ketso
    <span class = "caret" > </span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- lihokelo tsa menu tse theoha -->
  </ul>
</ div>

E sebetsa ka boholo ba likonopo

Likonopo tse theohang li sebetsa ka boholo bofe kapa bofe: .btn-large, .btn-small, kapa .btn-mini.

E hloka JavaScript

Likonopo tse theohang li hloka hore plugin e theohang ea Bootstrap e sebetse.

Maemong a mang - joalo ka li-menu tse theohang tsa mobile li tla atoloha ka ntle ho boema-kepe. U hloka ho rarolla litlhophiso ka letsoho kapa ka JavaScript e tloaelehileng.

Li-dropdown tsa konopo ea Arohane

Ho aha holim'a li-styles tsa lihlopha tsa konopo le li-markup, re ka theha konopo ea ho arohana habonolo. Likonopo tse arohaneng li na le ketso e tloaelehileng ka ho le letšehali le toggle ea ho theoha ka ho le letona ka lihokelo tsa maemo.

<div class = "btn-group" > 
  < sehlopha sa konopo = "btn" > Ketso </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" > </span> 
  </ konopo>
  <ul class = "dropdown-menu" > 
    <!-- lihokelo tsa menu tse theoha -->
  </ul>
</ div>

Boholo

Sebelisa li-buttons tse eketsehileng .btn-mini, .btn-smallkapa .btn-largeho etsa boholo.

<div class = "btn-group" > 
  < sehlopha sa konopo = "btn btn-mini" > Ketso </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" > </span> 
  </ konopo>
  <ul class = "dropdown-menu" > 
    <!-- lihokelo tsa menu tse theoha -->
  </ul>
</ div>

Menu ea ho tlohela

Manane a theohang le ona a ka fetoloa ho tloha tlase ho ea holimo ka ho kenyelletsa sehlopha se le seng ho motsoali ea haufi oa .dropdown-menu. E tla fetola tsela ea ' .caretme e behe menu ka boeona hore e tsamaee ho tloha tlaase ho ea holimo ho e-na le ho ea holimo.

<div class = "btn-group dropup" > 
  < sehlopha sa konopo = "btn" > Tloha </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" > </span> 
  </ konopo>
  <ul class = "dropdown-menu" > 
    <!-- lihokelo tsa menu tse theoha -->
  </ul>
</ div>

Litefello tse bobebe Letšoao le tšoanang, lihlopha tse fapaneng

Likarolo tsohle tsa nav mona - li-tab, lipilisi, le manane- li arolelanoa ka mokhoa o ts'oanang oa mokhoa le mekhoa ho pholletsa le .navsehlopha.

Li-tab tsa motheo

Nka <ul>li-link tse tloaelehileng 'me u kenye .nav-tabs:

<ul class = "nav-tabs" > 
  <li class = "active" > 
    <a href = "#"> Lehae </a> _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Lipilisi tsa motheo

Nka HTML e tšoanang, empa sebelisa .nav-pillsho e-na le hoo:

<ul class = "nav nav-pills" > 
  <li class = "active" > 
    <a href = "#"> Lehae </a> _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Boemo ba bokooa

Bakeng sa karolo efe kapa efe ea nav (tabo, lipilisi, kapa lenane), eketsa .disabledbakeng sa lihokelo tse grey mme ha ho na litlamorao tsa hover . Lihokelo li tla lula li penya, leha ho le joalo, ntle le haeba u tlosa hreftšobotsi. Ntle le moo, o ka kenya JavaScript ea tloaelo ho thibela ho tobetsa hoo.

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#"> Lehae </a></li >  
  ...
</ul>

Ho tsamaisana le karolo

Ho hokahanya lihokelo tsa nav, sebelisa .pull-leftkapa .pull-rightlitlelase tsa lisebelisoa. Lihlopha tsena ka bobeli li tla eketsa CSS float ka tsela e boletsoeng.

Stackable

Joalo ka ha li-tab le lipilisi li tšekaletse ka ho sa feleng, eketsa feela sehlopha sa bobeli, .nav-stacked, ho etsa hore li hlahe li patiloe ka kotloloho.

Li-tab tse behiloeng

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

Lipilisi tse pakiloeng

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

Litheohelang

Kenya li-menu tse theohang ka HTML e nyane le li- plugins tsa JavaScript .

Li-tab tse nang le li-dropdown

<ul class = "nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "theoha"
       href = "#" >
        Theosa
        <b sehlopha = "tlhokomelo" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- mahokelo -->
    </ul>
  </li>
</ul>

Lipilisi tse nang le marotholi

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "theoha"
       href = "#" >
        Theosa
        <b sehlopha = "tlhokomelo" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- mahokelo -->
    </ul>
  </li>
</ul>

Manane a Nav

Mokhoa o bonolo le o bonolo oa ho aha lihlopha tsa lihokelo tsa nav ka lihlooho tsa boikhethelo. Li sebelisoa hantle ka ho fetisisa mabaleng a mahlakoreng joalo ka Finder ho OS X.

Mohlala oa lethathamo la nav

Nka lethathamo la lihokelo ebe u eketsa class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Sehlooho sa lethathamo </li> 
  <li class = "active" ><a href = "#"> Lehae </a></li >  
  <li><a href = "#"> Laeborari </a> </li> 
  ...
</ul>

HlokomelaBakeng sa ho aha sehlaha ka har'a lethathamo la nav, kenyelletsa class="nav nav-list"ho eng kapa eng e behiloeng <ul>.

Likarohano tse tšekaletseng

Kenya karohano e otlolohileng ka ho theha lethathamo le se nang letho le sehlopha .divider, joalo ka:

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

Table nav

Etsa hore li-tab tsa hau li phele ka plugin e bonolo ea ho fetola lipakeng tsa litaba ka li-tab. Bootstrap e kopanya li-tabbable ka mekhoa e mene: holimo (kamehla), ka ho le letona, ka tlase le ka ho le letšehali.

Mohlala oa letlapa

Ho etsa hore li-tab li khonehe, theha .tab-paneID e ikhethang bakeng sa tab e 'ngoe le e' ngoe 'me u e phuthele ka .tab-content.

Ke karolo ea 1.

Lumela, ke karolo ea 2.

Ke eng ngoanana, ena ke Karolo ea 3.

<div class = "tabable" > <!-- E hlokeha feela bakeng sa di-tab tsa leqele/le letona -->  
  <ul class = "nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab"> Karolo 1 </a></li >   
    <li><a href = "#tab2" data-toggle = "tab"> Karolo 2 </a></li >  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane e sebetsang" id = "tab1" >  
      <p> Ke Karolong ea 1. </p>
    </ div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Dumela, ke kena Karolong ea 2. </p>
    </ div>
  </ div>
</ div>

Fade ka li-tab

Ho etsa hore li-tab li nyamele, eketsa .fadeho e 'ngoe le e 'ngoe .tab-pane.

E hloka plugin ea jQuery

Li-tab tsohle tse fumanehang li tsamaisoa ke plugin ea rona ea jQuery e bobebe. Bala haholoanyane mabapi le mokhoa oa ho etsa hore li-tabbable li phele leqepheng la JavaScript docs .

Table ka tsela efe kapa efe

Li-tab ka tlase

Fetola tatellano ea HTML 'me u kenye sehlopha ho beha li-tab ka tlase.

Ke Karolong ea A.

Dumelang, ke Karolong ya B.

Ho joang ngoanana, ena ke Karolo ea C.

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

Li-tab ka ho le letšehali

Fetola sehlopha ho beha li-tab ka ho le letšehali.

Ke Karolong ea A.

Dumelang, ke Karolong ya B.

Ho joang ngoanana, ena ke Karolo ea C.

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

Li-tab ka ho le letona

Fetola sehlopha ho beha li-tab ka ho le letona.

Ke Karolong ea A.

Dumelang, ke Karolong ya B.

Ho joang ngoanana, ena ke Karolo ea C.

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

Navbar ea mantlha

Ho qala, li-navbar li tsitsitse (ha li tsitsitse ho ea holimo) 'me li kenyelletsa tšehetso bakeng sa lebitso la morero le mokhoa oa motheo oa ho tsamaea. Beha e 'ngoe kae kapa kae ka har'a .container, e behang bophara ba sebaka sa hau sa marang-rang le litaba.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#"> Sehlooho </a> _  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#"> Lehae </a></li >  
      <li><a href = "#"> Sehokelo </a> </li> 
      <li><a href = "#"> Sehokelo </a> </li> 
    </ul>
  </ div>
</ div>

Likarolo tsa Navbar

Brand

Khokahano e bonolo ea ho bonts'a lebitso la hau kapa lebitso la projeke e hloka feela tag ea ankora.

<a class = "brand" href = "#"> Lebitso la morero </a>

Lihokelo tsa Nav

Lintho tsa Nav li bonolo ho li kenyelletsa ka manane a sa reroang.

<ul class = "nav" > 
  <li class = "active" > 
    <a href = "#"> Lehae </a> _ 
  </li>
  <li><a href = "#"> Sehokelo </a> </li> 
  <li><a href = "#"> Sehokelo </a> </li> 
</ul>

U ka eketsa li-divider habonolo lihokelong tsa hau tsa nav ka ntho e se nang letho ea lenane le sehlopha se bonolo. Kenya feela sena lipakeng tsa lihokelo:

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

Mefuta

Ho seta hantle le ho beha foromo ka har'a navbar, eketsa lihlopha tse nepahetseng joalo ka ha ho bonts'itsoe ka tlase. Bakeng sa foromo ea kamehla, kenyelletsa .navbar-formle ebang .pull-leftkapa .pull-rightho e lekanya hantle.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  < mofuta oa konopo = "submit" class = "btn" > Kenya </button>  
</ form>

Batla foromo

Bakeng sa mofuta o ikhethileng oa ho batla, eketsa .navbar-searchle ho formtse .search-querykenyelletsoang bakeng sa mefuta e ikhethileng ea navbar.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-potso" setshwari sa sebaka = "Batla" >   
</ form>

Ho tsamaisana le karolo

Lokisetsa lihokelo tsa nav, foromo ea ho batla, kapa mongolo, sebelisa .pull-leftkapa .pull-rightlitlelase tsa lisebelisoa. Lihlopha tsena ka bobeli li tla eketsa CSS float ka tsela e boletsoeng.

Ho sebelisa li-dropdowns

Kenya li-dropdown le li-drop-ups ho nav ka markup e nyane le li- plugins tsa JavaScript tse theohang .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"> _   
      Akhaonto
      <b sehlopha = "tlhokomelo" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Etela litokomane tse theohang tsa JavaScript ho fumana lintlha tse ling mabapi le ho theoha ha mehala.

Mongolo

Koaela mantsoe ka elemente ka .navbar-text, hangata holim'a <p>theke bakeng sa moeta-pele le mebala e nepahetseng.

Phapang ea boikhethelo

Lokisa navbar holimo kapa tlase sebakeng sa pono ka sehlopha sa tlatsetso ho div e ka ntle, .navbar.

E tsitsitseng holimo

Eketsa .navbar-fixed-top'me u hopole ho ikarabella bakeng sa sebaka se patiloeng ka tlase ho eona ka ho eketsa bonyane 40px paddingho <body>. Etsa bonnete ba hore u eketsa sena ka mor'a motheo oa Bootstrap CSS le pele ho khetho ea CSS e arabelang.

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

E tsitsitse ho ea tlase

Eketsa ho ena .navbar-fixed-bottomle hoo.

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

Navbar e holimo e tsitsitseng

Theha navbar ka bophara bo felletseng e tsamaellanang le leqephe ka ho eketsa .navbar-static-top. Ho fapana le .navbar-fixed-topsehlopha, ha ho hlokahale hore u fetole padding efe kapa efe ho body.

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

Navbar e arabelang

Ho kenya ts'ebetsong navbar e oelang, thatela litaba tsa hau tsa navbar ka div, .nav-collapse.collapse, 'me u kenye konopo ea navbar toggle, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "setshelo" > 
 
      <!-- .btn-navbar e sebelisoa joalo ka toggle bakeng sa litaba tsa navbar tse putlang -->
      <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>
 
      <!-- Etsa bonnete ba hore o tlohela lebitso leo haeba o batla hore le bontshiwe -->
      <a class = "brand" href = "#"> Lebitso la morero </a>  
 
      <!-- Tsohle tseo o di batlang di patilwe ho 940px kapa ka tlase ho moo, beha ka hare ho mona -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, joalo-joalo -->
      </ div>
 
    </ div>
  </ div>
</ div>

Hlokomela! Navbar e arabelang e hloka plugin ea ho putlama le faele ea CSS ea Bootstrap e arabelang .

Phapang e sothehileng

Fetola chebahalo ea navbar ka ho eketsa .navbar-inverse.

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

Mehlala

Mohlala o le mong o bonts'itsoe kaha o ka bonts'oa maqepheng a mangata.

<ul sehlopha = "breadcrumb" > 
  <li><a href = "#" > Lehae </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Library </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Data </li> 
</ul>

Pagination e tloaelehileng

Papali e bonolo e bululetsoeng ke Rdio, e ntle bakeng sa lits'ebetso le liphetho tsa lipatlisiso. Sebaka se seholo se thata ho fosa, se ka senyeha habonolo, 'me se fana ka libaka tse kholo tsa ho tobetsa.

<div class = "pagination" > 
  <ul>
    <li><a href = "#"> E fetileng </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 latelang </a></li> 
  </ul>
</ div>

Dikgetho

Libaka tse holofetseng le tse sebetsang

Lihokelo li ka khonahala bakeng sa maemo a fapaneng. Sebelisa .disabledbakeng sa lihokelo tse sa tolokong le .activeho supa leqephe la hajoale.

<div class = "pagination" > 
  <ul>
    <li class = "disabled" ><a href = "#" > « </a></li>  
    <li class = "active" ><a href = "#"> 1 </a></li >  
    ...
  </ul>
</ div>

U ka khona ho fapanyetsana li-ankora tse sebetsang kapa tse holofetseng bakeng sa li-spans ho tlosa ts'ebetso ea ho tobetsa ha u ntse u boloka mekhoa e reriloeng.

<div class = "pagination" > 
  <ul>
    <li class = "holofetse" ><span> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</ div>

Boholo

U batla ho etsa pagination e kholoanyane kapa e nyane? Kenya .pagination-large, .pagination-small, kapa .pagination-minibakeng sa boholo bo eketsehileng.

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</ div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</ div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</ div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</ div>

Ho tsamaisana

Eketsa e 'ngoe ea lihlopha tse peli tseo u ka li khethang ho fetola lihokelo tsa pagination: .pagination-centeredle .pagination-right.

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

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

Pager

Lihokelo tsa pejana le tse latelang bakeng sa ts'ebetso e bonolo ea bohetene ka li-markup tse bobebe le mekhoa. E ntle bakeng sa libaka tse bonolo joalo ka li-blog kapa limakasine.

Mohlala oa kamehla

Ka ho sa feleng, li-pager centers li hokahanya.

<ul class = "pager" > 
  <li><a href = "#"> E fetileng </a></li> 
  <li><a href = "#"> E latelang </a></li> 
</ul>

Lihokelo tse tsamaellanang

Ntle le moo, o ka hokahanya sehokelo se seng le se seng mahlakoreng:

<ul class = "pager" > 
  <li class = "e fetileng" > 
    <a href = "#" > ← Khale </a> 
  </li>
  <li class = "e latelang" > 
    <a href = "#"> > Ntjhanyana → </a> 
  </li>
</ul>

Boemo ba ho holofala ha boikhethelo

Lihokelo tsa li-Pager li boetse li sebelisa sehlopha sa .disabledlisebelisoa tse akaretsang ho tloha boheteneng.

<ul class = "pager" > 
  <li class = "ho holofetse nakong e fetileng" > 
    <a href = "#" > ← Khale </a> 
  </li>
  ...
</ul>

Labels

Labels	Markup
Ea kamehla	`<span class="label">Default</span>`
Katleho	`<span class="label label-success">Success</span>`
Tlhokomediso	`<span class="label label-warning">Warning</span>`
Bohlokoa	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`
E fapaneng	`<span class="label label-inverse">Inverse</span>`

Libeche

Lebitso	Mohlala	Markup
Ea kamehla	1	`<span class="badge">1</span>`
Katleho	2	`<span class="badge badge-success">2</span>`
Tlhokomediso	4	`<span class="badge badge-warning">4</span>`
Bohlokoa	6	`<span class="badge badge-important">6</span>`
Info	8	`<span class="badge badge-info">8</span>`
E fapaneng	10	`<span class="badge badge-inverse">10</span>`

E phuthoa ha bonolo

Bakeng sa ts'ebetsong e bonolo, lileibole le libeche li tla putlama feela (ka :emptykhetho ea CSS) ha ho se na litaba ka hare.

Sehlopha sa mohale

Karolo e bobebe, e feto-fetohang ho bonts'a litaba tsa bohlokoa sebakeng sa hau sa marang-rang. E sebetsa hantle ho mebaraka le liwebsaete tse boima ba litaba.

Lefatše Lumela!

Ena ke yuniti e bonolo ea mohale, karolo e bonolo ea mokhoa oa jumbotron bakeng sa ho lebisa tlhokomelo e eketsehileng ho litaba tse hlahang kapa lintlha.

Ithute haholoanyane

<div class = "hero-unit" > 
  <h1> Sehlooho </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-large"> 
      Ithute haholoanyane
    </a>
  </p>
</ div>

Sehlooho sa leqephe

Khetla e bonolo bakeng sa h1ho beha sebaka ka nepo le ho arola likarolo tsa litaba leqepheng. E ka sebelisa h1's default small, element hammoho le likarolo tse ling tse ngata (ka mekhoa e meng).

<div class = "leqephe-hlooho" > 
  <h1> Sehlooho sa leqephe la mohlala <small> Subtext bakeng sa hlooho </small></h1>
</ div>

Lits'oants'o tsa kamehla

Ka nako e sa lekanyetsoang, linepe tsa Bootstrap li etselitsoe ho bonts'a litšoantšo tse hokahaneng tse nang le matšoao a fokolang a hlokahalang.

Haholo customisable

Ka li-markup tse ling, hoa khoneha ho kenya mofuta ofe kapa ofe oa litaba tsa HTML joalo ka lihlooho, lirapa, kapa likonopo ho li-thumbnails.

Leibole ea li-thumbnail

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Ketso Ketso
Leibole ea li-thumbnail

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Ketso Ketso
Leibole ea li-thumbnail

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Ketso Ketso

Hobaneng u sebelisa li-thumbnails

Li -thumbnails (pele .media-gridho fihlela v1.4) li ntle bakeng sa marang-rang a lifoto kapa livideo, liphetho tsa lipatlisiso tsa litšoantšo, lihlahisoa tsa mabenkele, li-portfolio, le tse ling tse ngata. E ka ba lihokelo kapa litaba tse sa fetoheng.

E bonolo, e tenyetseha

Letšoao la li-thumbnail le bonolo - ho ulna le palo efe kapa efe ea lilikarolo ke sona se hlokahalang. E boetse e tenyetseha haholo, e lumella mofuta ofe kapa ofe oa litaba tse nang le li-markups tse ngatanyana ho thatela litaba tsa hau.

E sebelisa boholo ba kholomo ea grid

Qetellong, karolo ea li-thumbnail e sebelisa lihlopha tse seng li ntse li le teng tsa tsamaiso ea grid-joaloka .span2kapa .span3- bakeng sa ho laola boholo ba li-thumbnail.

Markup

Joalokaha ho boletsoe pejana, letšoao le hlokahalang bakeng sa li-thumbnails le bobebe ebile le hlakile. Mona ke ho sheba litlhophiso tsa kamehla tsa litšoantšo tse hokahantsoeng :

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

Bakeng sa litaba tsa tloaelo tsa HTML ka har'a li-thumbnails, markup e fetoha hanyane. Ho lumella litaba tsa block level kae kapa kae, re fapanyetsana <a>le <div>tse ling tse joalo:

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Leibole ya manane < /h3>
      <p> Mongolo o monyane... </p>
    </ div>
  </li>
  ...
</ul>

Mehlala e meng

Lekola likhetho tsohle tsa hau ka lihlopha tse fapaneng tsa grid tse fumanehang ho uena. U ka boela ua kopanya le ho bapisa boholo bo fapaneng.

Tlhokomeliso ea kamehla

Qetella mongolo ofe kapa ofe le konopo ea boikhethelo ea ho hlakola .alertbakeng sa molaetsa oa tlhokomeliso oa mantlha.

Tlhokomeliso! Ke hantle hore u itlhahlobe, ha u shebahale hantle haholo.

<div class = "temoso" > 
  < mofuta wa konopo = "button" class = "close" data-dismiss = "temoso" > × </ konopo>   
  <strong> Temoso! </strong> Molemo ka ho fetisisa hlahloba u self, ha u shebahale hantle haholo.
</ div>

Hlakola likonopo

Libatli tsa Mobile Safari le Mobile Opera, ntle le data-dismiss="alert"tšobotsi, li hloka tlhokomeliso href="#"bakeng sa ho lelekoa ha litemoso ha u sebelisa <a>tag.

<a href = "#" class = "close" data-dismiss = "temoso" > × </a>

Ntle le moo, o ka sebelisa <button>ntho e nang le tšobotsi ea data, eo re khethileng ho e etsa bakeng sa litokomane tsa rona. Ha u sebelisa <button>, u tlameha ho kenyelletsa type="button"kapa liforomo tsa hau li ka 'na tsa se ke tsa fana ka tsona.

< mofuta wa konopo = "button" class = "close" data-dismiss = "temoso" > × </ konopo>

Tlosa litlhokomeliso ka JavaScript

Sebelisa plugin ea tlhokomeliso ea jQuery bakeng sa ho tlosa litlhokomeliso kapele le ha bonolo.

Dikgetho

Bakeng sa melaetsa e melelele, eketsa padding ka holimo le tlase ho sephutheloana sa tlhokomeliso ka ho eketsa .alert-block.

Tlhokomeliso!

Ke hantle hore u itlhahlobe, ha u shebahale hantle haholo. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class = "temoso ea tlhokomeliso-block" > 
  < mofuta wa konopo = "button" class = "close" data-dismiss = "temoso" > × </ konopo>   
  <h4> Tlhokomeliso! </h4>
  Ho molemo hore u itlhahlobe, ha u...
</ div>

Mekhoa e meng ea maemo

Kenya litlelase tsa boikhethelo ho fetola moelelo oa tlhokomeliso.

Phoso kapa kotsi

Oho hang! Fetola lintho tse 'maloa 'me u leke ho romella hape.

<div class = "temoso-phoso ea tlhokomeliso" > 
  ...
</ div>

Katleho

Mosebetsi o motle! U atlehile ho bala molaetsa ona oa bohlokoa oa tlhokomeliso.

<div class = "temoso-katleho ea tlhokomeliso" > 
  ...
</ div>

Boitsebiso

Hlokomela! Tlhokomeliso ena e hloka tlhokomelo ea hau, empa ha e bohlokoa haholo.

<div class = "temoso ea tlhokomeliso-litaba" > 
  ...
</ div>

Mehlala le markup

Motheo

Sebaka sa kamehla sa tsoelo-pele se nang le gradient e otlolohileng.

<div class = "tsoelopele" > 
  <div class = "bar" style = " wide : 60 %; " ></div>   
</ div>

E methalo

E sebelisa gradient ho theha sephetho sa melato. Ha e fumanehe ho IE7-8.

<div class = "tsoelopele-tsoelopele" > 
  <div class = "bar" style = " width : 20 %; " ></div>   
</ div>

Animated

Eketsa .activeho .progress-stripedho phelisa melato ka ho le letona ho ea ho le letšehali. Ha e fumanehe liphetolelong tsohle tsa IE.

<div class = "tswelopele-tswelopele e sebetsang" > 
  <div class = "bar" style = " wide : 40 %; " ></div>   
</ div>

E phuthetsoe

Beha li-bar tse ngata ka ho lekana .progressho li beha.

<div class = "tsoelopele" > 
  <div class = "bar-success" style = " width : 35 %; " ></div>   
  <div class = "bar-warning" style = " bophara : 20 %; " ></div>   
  <div class = "bar-danger" style = " bophara : 10 %; " ></div>   
</ div>

Dikgetho

Mebala e eketsehileng

Libaka tsa tsoelo-pele li sebelisa likonopo tse tšoanang le lihlopha tsa tlhokomeliso bakeng sa mekhoa e tsitsitseng.

<div class = "boitsebiso ba tsoelo-pele" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</ div>
<div class = "tsoelopele-katleho" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</ div>
<div class = "temoso ea tsoelo-pele ea tsoelo-pele" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</ div>
<div class = "tsoelopele-kotsi" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</ div>

Litšepe tse metsero

Ho tšoana le mebala e tiileng, re na le mekoallo ea tsoelo-pele e fapaneng.

<div class = "tsoelopele-boitsebiso ba tsoelo-pele-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</ div>
<div class = "tsoelopele-tsoelopele-katleho e nang le methapo" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</ div>
<div class = "tsoelopele-temoso ea tsoelo-pele-tse-telo-pele" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</ div>
<div class = "tswelopele-tswelopele e kotsi-e nang le methapo" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</ div>

Tšehetso ea sebatli

Libaka tsa tsoelo-pele li sebelisa li-gradients tsa CSS3, liphetoho, le litšoantšo ho finyella liphello tsohle tsa tsona. Likarolo tsena ha li tšehetsoe ho IE7-9 kapa mefuta ea khale ea Firefox.

Liphetolelo tsa pejana ho Internet Explorer 10 le Opera 12 ha li tšehetse lipopae.

Mefuta e sa bonahaleng ea lintho bakeng sa ho aha mefuta e fapaneng ea likarolo (joalo ka maikutlo a blog, li-Tweets, joalo-joalo) tse nang le sets'oants'o se leqeleng kapa le letona le litaba tsa mongolo.

Mohlala oa kamehla

Mecha ea litaba ea kamehla e lumella ho phaphamala ntho ea media (litšoantšo, video, audio) ka ho le letšehali kapa ka ho le letona la block ea litaba.

Sehlooho sa litaba

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.

Sehlooho sa litaba

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

Lenane la mecha ea litaba

Ka li-markup tse eketsehileng, u ka sebelisa mecha ea litaba ka har'a lethathamo (e molemo bakeng sa likhoele tsa maikutlo kapa lethathamo la lingoliloeng).

Sehlooho sa litaba

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.

Sehloho sa media se fumanehang
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.

Sehloho sa media se fumanehang
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.

Sehloho sa media se fumanehang
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.
Sehlooho sa litaba
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 sehlopha = "pull-left" href = "#"> _  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Sehlooho sa litaba </h4> 
      ...
 
      <!-- Nested media object -->
      <div class = "media" > 
        ...
     </ div>
    </ div>
  </li>
</ul>

Liliba

Sebelisa seliba e le phello e bonolo holim'a element ho e fa phello ea inset.

Bona, ke ka sedibeng!

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

Lihlopha tsa boikhethelo

Laola padding le likhutlo tse chitja ka lihlopha tse peli tseo u ka li khethang tsa ho fetola.

Bona, ke ka sedibeng!

<div class = "hantle-kholo hantle" > 
  ...
</ div>

Bona, ke ka sedibeng!

<div class = "hantle-ntle" > 
  ...
</ div>

Koala letšoao

Sebelisa lets'oao le akaretsang la ho koala ho qhelela litaba tse kang mekhoa le litlhokomeliso.

< sehlopha sa konopo = "koala" > &nako; </ konopo>

Lisebelisoa tsa iOS li hloka href="#"bakeng sa liketsahalo tsa ho tobetsa haeba u ka rata ho sebelisa ankora.

<a class = "close" href = "#" > × </a>

Lihlopha tsa bathusi

Litlelase tse bonolo, tse tsepamisitsoeng maikutlo bakeng sa pontšo e nyane kapa li-tweaks tsa boitšoaro.

. hula-ka ho le letshehadi

Phaphamisa ntho e ka ho le letšehali

sehlopha = "hula-ka ho le letšehali"

. hula - ka ho le letšehali {
  phaphamala : le letšehali ;
}

. hula-ho le letona

Phaphamisa ntho ka ho le letona

sehlopha = "hula-ho le letona"

. hula - ka ho le letona {
  phaphamala : tokelo ;
}

. khutsisitsoe

Fetola 'mala oa element ho#999

sehlopha = "ho khutsitse"

. khutsisitsoe {
  mmala : #999; 
}

.hlakisa

Hlakola floatntho efe kapa efe

sehlopha = "clearfix"

. clearfix {
  * atometsa : 1 ; 
  &: pele ,
  &: ka mor'a {
    pontšo : tafole ;
    dikahare : "" ; 
  }
  &: ka mor'a {
    hlakileng : ka bobeli ;
  }
}

Manane a theoha

Mohlala

Markup

Dikgetho

Ho kopanya li-menu

Likhetho tsa menu tse holofetseng

Manane a tlase ho li-dropdown

Lihlopha tsa konopo

Mehlala

Sehlopha sa konopo e le 'ngoe

Lihlopha tse ngata tsa likonopo

Lihlopha tsa konopo tse otlolohileng

Li-checkbox le litlolo tsa radio

Litheolelo ka lihlopha tsa likonopo

Li-menu tsa ho theola likonopo

Kakaretso le mehlala

E sebetsa ka boholo ba likonopo

E hloka JavaScript

Li-dropdown tsa konopo ea Arohane

Boholo

Menu ea ho tlohela

Nav: li-tab, lipilisi, le manane

Litefello tse bobebe Letšoao le tšoanang, lihlopha tse fapaneng

Li-tab tsa motheo

Lipilisi tsa motheo

Boemo ba bokooa

Ho tsamaisana le karolo

Stackable

Li-tab tse behiloeng

Lipilisi tse pakiloeng

Litheohelang

Li-tab tse nang le li-dropdown

Lipilisi tse nang le marotholi

Manane a Nav

Mohlala oa lethathamo la nav

Likarohano tse tšekaletseng

Table nav

Mohlala oa letlapa

Fade ka li-tab

E hloka plugin ea jQuery

Table ka tsela efe kapa efe

Li-tab ka tlase

Li-tab ka ho le letšehali

Li-tab ka ho le letona

Navbar

Navbar ea mantlha

Likarolo tsa Navbar

Brand

Lihokelo tsa Nav

Mefuta

Batla foromo

Ho tsamaisana le karolo

Ho sebelisa li-dropdowns

Mongolo

Phapang ea boikhethelo

E tsitsitseng holimo

E tsitsitse ho ea tlase

Navbar e holimo e tsitsitseng

Navbar e arabelang

Phapang e sothehileng

Li-breadcrumbs

Mehlala

Pagination Likhetho tse peli tsa ho phetla ka litaba

Pagination e tloaelehileng

Dikgetho

Libaka tse holofetseng le tse sebetsang

Boholo

Ho tsamaisana

Pager

Mohlala oa kamehla

Lihokelo tse tsamaellanang

Boemo ba ho holofala ha boikhethelo

Li-labels le libeche

Labels

Libeche

E phuthoa ha bonolo

Likarolo tsa mongolo

Sehlopha sa mohale

Lefatše Lumela!

Sehlooho sa leqephe