Dihlopha tša konope

Šomiša dihlopha tša dikonope go kopanya dikonope tše ntši mmogo bjalo ka karolo e tee ya go kopanywa. Di age ka letoto la <a>goba <button>dielemente.

Mekgwa e mebotse kudu

Re kgothaletša ditlhahlo tše di latelago tša go diriša dihlopha tša dikonope le dibara tša didirišwa:

• Ka mehla šomiša elemente ye e swanago sehlopheng se tee sa konope, <a>goba <button>.
• O se ke wa hlakanya dikonope tša mebala ye e fapanego sehlopheng se tee sa dikonope.
• Šomiša diaekhone go tlaleletša goba go e na le sengwalwa, eupša kgonthiša gore o akaretša alt le sengwalwa sa thaetlele moo go swanetšego.

Dihlopha tša Dikonope tše di amanago tše di nago le dithepo (bona ka fase) di swanetše go bitšwa ka thoko gomme ka mehla di akaretša caret ya go theoga go laetša boitshwaro bjo bo reretšwego.

Mohlala wa default

Mona ke kamoo HTML e nyakago sehlopha sa dikonope sa maemo seo se agilwego ka dikonope tša leswao la ankora:

<div sehlopha = "btn-sehlopha" > 
  < sehlopha sa konopo = "btn" > 1 </konopo> 
  < sehlopha sa konopo = "btn" > 2 </konopo> 
  < sehlopha sa konopo = "btn" > 3 </konopo> 
</div> e

Mohlala wa bara ya didirišwa

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

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.

Hwetša javascript » .

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.

Mohlala wa go swaya

Go swana le sehlopha sa konope, go swaya ga rena go šomiša go swaya ga konope ka mehla, eupša ka ditlaleletšo tše mmalwa go hlwekiša setaele le go thekga polaka ya jQuery ya go theoga ya Bootstrap.

<div sehlopha = "btn-sehlopha" > 
  <a class = "btn go theoga-go fetola" 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

Di-dropdown tša konope di šoma ka bogolo bjo bofe goba bofe. bogolo bja konope ya gago go .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.

Kakaretšo le mehlala

Go aga godimo ga mekgwa ya sehlopha sa konope le go swaya, re ka hlama konope ya go aroganya 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.

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" > 
  ...
  <ul sehlopha = "dropdown-menu hula-tokelo" > 
    <!-- dikgokagano tša thepo ya go theoga -->
  </ul>
</div> e

Mohlala wa go swaya

Re atološa ka go theoga ga konope ye e tlwaelegilego go fa tiro ya bobedi ya konope yeo e šomago bjalo ka sešušumeletši sa go theoga se se arogilego.

<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

Dimenu tša go lahlela

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

Sehlopha se matla sa motheo

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

O swanetše go diriša neng

Dithepo le dipilisi di botse kudu bakeng sa dikarolo tša diteng goba go sepelasepela magareng ga matlakala a diteng tše di tswalanago.

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.

Dithepo tša motheo

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

• Gae
• Phorofaele
• Melaetša

<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:

• Gae
• Phorofaele
• Melaetša

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

Tsela ya go stack 'em

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

• Gae
• Phorofaele
• Melaetša

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

Dipilisi tše di kgobokeditšwego

• Gae
• Phorofaele
• Melaetša

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

Rich dimenu entsoeng bonolo

Dimenu tša go theoga ka go dithepo tša Bootstrap le dipilisi di bonolo kudu gomme di nyaka fela HTML ye nnyane ye e oketšegilego le plugin ya jQuery ye bobebe.

Hlogo godimo go letlakala la Javascript go bala ditokomane ka go thoma di-drolodown ka go Bootstrap.

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

• Gae
• Thušo
• Dropdown ya go theoga
  • Action
  • Another action
  • Something else here
  • Separated link

<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

• Gae
• Thušo
• Dropdown ya go theoga
  • Action
  • Another action
  • Something else here
  • Separated link

<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>

Go sepelasepela ka mokgwa wa tirišo

Mananeo a Nav a fa 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.

Ka sebopego, di agilwe godimo ga mekgwa ye e swanago ya motheo ya nav bjalo ka dithepo le dipilisi, ka fao tšhomišo le go dira gore dilo di be tša gago di a lebanya.

Ka diaekhone

Nav mananeo a boetse a bonolo ho hlomela le diaekhone. Oketša <i>tag ya maleba ka sehlopha gomme o beakantšwe.

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>

Mohlala lenane la nav

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

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

Mohlala ka diaekhone

Mohlala o swanago, eupša ka <i>dithepo tša diaekhone.

<ul sehlopha = "nav nav-lenaneo" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "puku ya maswao" </i> 
      Bokgobapuku
    </a>
  </li>
  ...
</ul>

Seo se akareditšwego

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.

Go fetola magareng ga tšona go bonolo gomme go nyaka fela go fetoša markup ye nnyane kudu.

Fade ka dithepo

Go dira gore dithepo di fifala, 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 .

Hwetša javascript →

Mohlala wa tabbable

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

Bakeng sa dithepo tše di logaganywago ka go le letona goba ka go le letshadi, phuthela .nav-tabsle .tab-contentka go .tabbable.

Go swaya ka go otlologa

Go šomiša dithepo tša dithepo go nyaka div ya go phuthela, sete ya dithepo, le sete ya diphaephe tša dithepo tša diteng.

<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

Dithepo ka tlase

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

<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.

<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.

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

Sefala sa Navbar

Navbar e nyaka div tše mmalwa fela go e rulaganya gabotse bakeng sa pontšho ya go se fetoge goba ye e sa fetogego.

<div sehlopha = "navbar" > 
  <div sehlopha = "navbar-ka hare" > 
    <div sehlopha = "setshelo" > 
      ...
    </div> e
  </div> e
</div> e

Navbar e tsitsitseng

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.

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

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

Ge o kgomaretša navbar, gopola go ikarabela ka lefelo leo le utilwego ka tlase. Oketša 40px goba go feta ya padding go <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.

Lebitso la lebitso la lebitso

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

<a sehlopha = "letshwao" href = "#" >  
  Leina la projeke
</a>

Diforomo ka navbar

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-letsohong le letšehali" > 
  < mofuta wa tsenyo = "sengwalwa" sehlopha = "span2" >  
</form>

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>

Phapano ya go arabela ya boikhethelo

Go ya ka palo ya diteng ka go topbar ya gago, o ka nyaka go phethagatša dikgetho tša go arabela. Go dira bjalo, phuthela diteng tša gago tša nav 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" > 
        <!-- .nav, .navbar-nyatla, .navbar-foromo, jj -->
      </div> e
 
    </div> e
  </div> e
</div> e

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>

Go logaganya dikarolo

Go logaganya 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 tlaleletša ka dimenu tša go theoga

Go tlaleletša ka di-dropdown le di-droup go nav go bonolo kudu, eupša go nyaka go dirišwa ga plugin ya rena ya javascript .

<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>

Hwetša javascript →

Sengwalwa ka gare ga navbar

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

Ke ka baka la’ng o di diriša

Go sepelasepela ga breadcrumb go šomišwa bjalo ka tsela ya go bontšha badiriši moo ba lego gona ka gare ga tirišo goba sebaka, eupša e sego bakeng sa go sepelasepela ga mathomo. Boloka tšhomišo ya tšona e le e sego kae e bile e le e kopana gore e šome kudu.

Mehlala

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

• Gae

• Gae / .
• Bokgobapuku

• Gae / .
• Bokgobapuku / .
• Datha

Go swaya

HTML ke lenaneo la gago la maemo leo le sa rulaganywago leo le nago le dikgokagano.

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

O swanetše go diriša neng

Ultra bonolo le bonyane setaele 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.

Dikgokagano tša letlakala tša maemo

Dikgokagano di ka fetošwa gomme di šoma maemong a mmalwa ka sehlopha se se nepagetšego. .disabledbakeng sa dikgokagano tšeo di sa kgotlego le .activebakeng sa letlakala la bjale.

Go logaganya mo go fetofetogago

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.

Mehlala

Karolo ya go beakanya matlakala ya go se fetoge e a fetofetoga gomme e šoma ka palo ya diphetogo.

Go swaya

E phuthetšwe ka <div>, go beakanya matlakala e fo ba <ul>.

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

Mabapi le pager

Karolo ya pager ke sete ya dikgokagano tša diphethagatšo tše bonolo tša go dira matlakala ka go swaya seetša le mekgwa ye bofefo le go feta. E botse kudu bakeng sa mafelo a bonolo a go swana le di-blog goba dimakasine.

Boemo bja go golofala bja boikgethelo

Dikgokagano tša Pager gape di šomiša .disabledsehlopha sa kakaretšo go tšwa go letlakala.

Mohlala wa default

Ka default, pager e tsepamisa dikgokelo.

• Peleng
• Latelago

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

Dikgokagano tše di logaganywago

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

• ← Ba bagolo
• E mpsha →

<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>

Mabapi le

Dipetšhe ke dikarolo tše nnyane, tše bonolo tša go bontšha sešupo goba palo ya mohuta o itšego. Di hwetšwa ka tlwaelo go bareki ba imeile go swana le Mail.app goba go didirišwa tša sellathekeng bakeng sa ditsebišo tša go kgorometša.

Diklase tše di lego gona

Bootstrap e fana ka karolo e bobebe, e feto-fetohang e bitsoang yuniti ya mohale ho bontša diteng setšeng sa hao. E šoma gabotse go papatšo le mafelong ao a nago le diteng tše dintši.

Go swaya

Phuthelela diteng tša gago ka divlike so:

<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

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 class = "hlogo ya letlakala" > 
  <h1> Mohlala wa hlogo ya letlakala </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

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 nnyane e šomiša diklase tša tshepedišo ya keriti ye e lego gona—go swana le .span2goba .span3—bakeng sa taolo ya ditekanyo tša diswantšho tše nnyane.

The markup ya go swaya

Bjalo ka ge go boletšwe pejana, go swaya mo go nyakegago bakeng sa diswantšho tše dinyenyane ke mo go bofefo 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 = "span3" > 
    <a href = "#" sehlopha = "seswantšho se senyenyane" >  
      <img src = "Sebaka sa sebaka.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Bakeng sa diteng tša HTML tša tlwaelo ka go diswantšho tše nnyane, go swaya go fetoga gannyane. 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 = "span3" > 
    <div sehlopha = "seswantšho se senyenyane" > 
      <img src = "Sebaka sa sebaka.it/260x180" alt = "" >  
      <h5> Leina la seswantšho se senyenyane </h5>
      <p> Tlhaloso ya seswantšho se senyenyane gona mo... </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.

Sehlopha sa motheo se se ngwadilwego gape

Ka Bootstrap 2, re nolofaditše sehlopha sa motheo: .alertgo e na le .alert-message. Re fokoditše gape le bonnyane bjo bo nyakegago bja go swaya—aowa <p>go nyakega ka go ikemela, go nyakega feela ga ka ntle <div>.

Molaetša o tee wa temošo

Bakeng sa karolo e swarelelago kudu yeo e nago le khoutu e nyenyane, re tlošitše ponagalo ya go fapantšha bakeng sa ditemošo tša go thibela, melaetša yeo e tlago le go tlatša kudu le ka tlwaelo sengwalwa se segolo. Tlelase le yona e fetogile go ba .alert-block.

E sepela gabotse ka javascript

Bootstrap e tla le plugin e kgolo ya jQuery yeo e thekgago melaetša ya temošo, e dira gore go e lahla go be bonolo le go ba bonolo.

Hwetša plugin » .

Ditemošo tša mohlala

Phuthelela molaetša wa gago le leswao la go tswalela la boikhethelo ka gare ga div ka sehlopha se bonolo.

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

Dihlogo godimo! disebediswa iOS hloka e href="#"bakeng sa ho rakoa ha ditemoso. Kgonthiša gore o e akaretša le seka sa datha bakeng sa diaekhone tša go tswalela tša ankora. Ka go fapana le moo, o ka šomiša buttonelemente yeo e nago le seka sa datha, seo re kgethilego go se dira bakeng sa ditokomane tša rena.

Katološa gabonolo molaetša wa temošo wa maemo ka diklase tše pedi tša boikhethelo: .alert-blockbakeng sa ditaolo tše dingwe tša go tlatša le tša sengwalwa le .alert-headingbakeng sa hlogo ya go swana.

<div sehlopha = "temošo temošo-thibelo" > 
  <a sehlopha = "tswalela" data-dismiss = "temošo" href = "#" > × </a>   
  <h4 class = "hlogo ya temošo" > Temošo! </h4> 
  Best check yo self, ga o...
</div> e

Phošo goba kotsi

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

Katlego

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

Tshedimošo

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

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 phello ya metsero (ga go na IE).

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

E di phelago

O tšea mohlala wa metsero gomme o o phediša (ga go na IE).

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

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.

Dibara tša methalo

Go swana le mebala e tiilego, re na le dithipa tša tšwelopele tša methalo e fapa-fapanego.

Maitshwaro

Dibara tša tšwelopele di šomiša diphetogo tša CSS3, ka fao ge o beakanya ka maatla bophara ka javascript, e tla fetoša bogolo ka thelelo.

Ge o šomiša .activeklase, .progress-stripeddibara tša gago tša tšwelopele di tla dira gore methalo e phele go tloga go le letshadi go ya go le letona.

Thekgo ya sephephediši

Dibara tša tšwelopele di šomiša dikelo tša CSS3, diphetogo, le ditshwantšho tša go phela go fihlelela ditlamorago tša tšona ka moka. Dikarolo tše ga di thekgwe go IE7-9 goba diphetolelo tša kgale tša Firefox.

Opera le IE ga di thekge ditshwantšho tša go phela ka nako ye.

Didiba

Šomiša sediba bjalo ka khuetšo ye bonolo go elemente go e fa khuetšo ya go tsenya.

<div sehlopha = "hantle" > 
  ...
</div> e

Tswala letshwao

Šomiša leswao la go tswalela la kakaretšo bakeng sa go nyatša diteng go swana le di-modal le ditemošo.

×

< sehlopha sa konopo = "tswalela" > × </konope> 

Didirišwa tša iOS di nyaka href="#" bakeng sa ditiragalo tša go kgotla ge e ba o rata go diriša ankora.

<a sehlopha = "tswalela" href = "#" > &nako; </a>