Izingxenye

Inqwaba yezingxenye ezisebenziseka kabusha zakhelwe ku-Bootstrap ukuze inikeze ukuzulazula, izexwayiso, ama-popovers, nokunye okuningi.

Amaqembu ezinkinobho

Sebenzisa amaqembu ezinkinobho ukuze uhlanganise izinkinobho eziningi njengengxenye eyodwa eyinhlanganisela. Zakhe ngochungechunge <a>noma <button>izakhi.

Imikhuba emihle kakhulu

Sincoma imihlahlandlela elandelayo yokusebenzisa amaqembu ezinkinobho namabha wamathuluzi:

Hlala usebenzisa into efanayo eqenjini lenkinobho eyodwa, <a>noma <button>.
Ungahlanganisi izinkinobho zemibala ehlukene eqenjini lezinkinobho ezifanayo.
Sebenzisa izithonjana ngaphezu noma esikhundleni sombhalo, kodwa qiniseka ukuthi uhlanganisa i-alt nombhalo wesihloko lapho kufanele khona.

Amaqembu Ezinkinobho Ezihlobene anokwehliswayo (bona ngezansi) kufanele abizwe ngokuhlukana futhi afake njalo ukunakekelwa kokwehla ukuze abonise ukuziphatha okuhlosiwe.

Isibonelo esizenzakalelayo

Nansi indlela i-HTML ebheka ngayo iqembu lezinkinobho ezijwayelekile elakhiwe ngezinkinobho zamathegi wehange:

<div class = "btn-group" > 
  <inkinobho yekilasi = "btn" > 1 </inkinobho> 
  <inkinobho yekilasi = "btn" > 2 </inkinobho> 
  <inkinobho yekilasi = "btn" > 3 </inkinobho> 
</div>

Isibonelo sebha yamathuluzi

Hlanganisa amasethi we <div class="btn-group">-a <div class="btn-toolbar">ukuze uthole izingxenye eziyinkimbinkimbi.

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

Ibhokisi lokuhlola nama-flavour omsakazo

Amaqembu ezinkinobho angaphinda asebenze njengemisakazo, lapho inkinobho eyodwa kuphela engase isebenze, noma amabhokisi okuhlola, lapho noma iyiphi inombolo yezinkinobho ingase isebenze. Buka amadokhumenti e-Javascript alokho .

Thola i-javascript »

Okwehliswayo emaqenjini ezinkinobho

Amakhanda phezulu! Izinkinobho ezinokwehliswayo kufanele zisongwe ngazodwa .btn-groupngaphakathi kwe-a .btn-toolbarukuze zinikezwe okulungile.

Ukwehliswa kwezinkinobho

Uhlolojikelele nezibonelo

Sebenzisa noma iyiphi inkinobho ukuze uqalise imenyu eyehlayo ngokuyibeka ngaphakathi .btn-groupfuthi unikeze umaki wemenyu ofanele.

Imakhaphu yesibonelo

Ngokufanayo neqembu lezinkinobho, umaki wethu usebenzisa umaka wezinkinobho ezivamile, kodwa ngedlanzana lezengezo ukuze ucwenge isitayela futhi usekele i-plugin ye-jQuery eyehlayo ye-Bootstrap.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Isenzo
    <span class = "caret" ></span> 
  </a>
  <ul class = "imenyu eyehlayo" > 
    <!-- izixhumanisi zemenyu eyehlayo -->
  </ul>
</div>

Isebenza nabo bonke osayizi bezinkinobho

Okwehliswayo kwezinkinobho kusebenza kunoma imuphi usayizi. inkinobho yakho osayizi ukuze .btn-large, .btn-small, noma .btn-mini.

Idinga i-javascript

Ukwehliswa kwezinkinobho kudinga i- plugin eyehlayo ye-Bootstrap ukuthi isebenze.

Kwezinye izimo—njengamamenyu okwehlayo eselula azonwebeka ngaphandle kwendawo yokubuka. Udinga ukuxazulula ukuqondanisa ngesandla noma nge-javascript yangokwezifiso.

Okwehliswayo kwenkinobho yokuhlukanisa

Uhlolojikelele nezibonelo

Ukwakhela phezu kwezitayela zeqembu lezinkinobho kanye nemakhaphu, singakha kalula inkinobho yokuhlukanisa. Izinkinobho zokuhlukanisa zifaka isenzo esijwayelekile kwesokunxele kanye nokuguqula okwehlayo kwesokudla ngezixhumanisi zomongo.

Osayizi

Sebenzisa isigaba sezinkinobho ezengeziwe .btn-mini, .btn-small, noma .btn-largeukwenza usayizi.

<div class = "btn-group" > 
  ...
  <ul class = "imenyu eyehlayo donsa-kwesokudla" > 
    <!-- izixhumanisi zemenyu eyehlayo -->
  </ul>
</div>

Imakhaphu yesibonelo

Sinweba kokwehliswayo kwenkinobho evamile ukuze sinikeze isenzo senkinobho yesibili esebenza njengesicuphi esihlukile sokwehlisa.

<div class = "btn-group" > 
  <inkinobho yekilasi = "btn" > Isenzo </inkinobho> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </inkinobho>
  <ul class = "imenyu eyehlayo" > 
    <!-- izixhumanisi zemenyu eyehlayo -->
  </ul>
</div>

Amamenyu okwehlisa

Amamenyu okudonsela phansi nawo angashintshwa kusukela phansi kuye phezulu ngokwengeza iklasi elilodwa kumzali oseduze we- .dropdown-menu. Izophenya isiqondiso se .caretbese ibeka kabusha imenyu ngokwayo ukuze isuke phansi iye phezulu esikhundleni sokusuka phezulu iye phansi.

<div class = "i-btn-group dropup" > 
  <inkinobho yekilasi = "btn" > Drop </inkinobho> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </inkinobho>
  <ul class = "imenyu eyehlayo" > 
    <!-- izixhumanisi zemenyu eyehlayo -->
  </ul>
</div>

Okuzenzakalelayo okungasindi Imakhaphu efanayo, izigaba ezihlukene

Isigaba sesisekelo esinamandla

Zonke izingxenye ze-nav lapha—amathebhu, amaphilisi, nezinhlu— zabelana ngemakhaphu eyisisekelo efanayo nezitayela ekilasini .nav.

Isetshenziswa nini

Amathebhu namaphilisi kuhle ezingxenyeni zokuqukethwe noma ukuzulazula phakathi kwamakhasi okuqukethwe okuhlobene.

Ukuqondanisa kwengxenye

.pull-leftUkuze uqondanise izixhumanisi ze - nav, sebenzisa .pull-rightizigaba zensiza. Womabili amakilasi azongeza ukuntanta kwe-CSS ngendlela eshiwo.

Amathebhu ayisisekelo

Thatha izixhumanisi ezijwayelekile <ul>bese wengeza .nav-tabs:

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

Amaphilisi ayisisekelo

Thatha leyo HTML efanayo, kodwa sebenzisa .nav-pillsesikhundleni salokho:

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

Okunamathelayo Yenza amathebhu noma amaphilisi ame mpo

Ungawabeka kanjani

Njengoba amathebhu namaphilisi evundlile ngokuzenzakalela, vele wengeze isigaba sesibili, .nav-stacked, ukuze uwenze abonakale estakiwe mpo.

Amathebhu astakiwe

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

Amaphilisi astakiwe

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

Okwehliswayo Kwezingxenye ze-nav ezithuthukisiwe

Amamenyu anothile enziwe aba lula

Amamenyu okwehlayo kumathebhu namaphilisi e-Bootstrap alula kakhulu futhi adinga i-HTML encane eyengeziwe kanye ne-plugin ye-jQuery engasindi.

Yiya ekhasini le-Javascript ukuze ufunde amadokhumenti ekuqaliseni okwehliswayo ku-Bootstrap.

Amathebhu anokwehliswayo

<ul class = "nav-tabs" > 
  <li class = "okwehlayo" > 
    <a class = "dropdown-toggle" 
       idatha-toggle = "okwehlayo"
       href = "#" >
        Okwehlayo
        <b class = "caret" ></b> 
      </a>
    <ul class = "imenyu eyehlayo" > 
      <!-- izixhumanisi -->
    </ul>
  </li>
</ul>

Amaphilisi ane dropdowns

<ul class = "nav nav-pills" > 
  <li class = "okwehlayo" > 
    <a class = "dropdown-toggle" 
       idatha-toggle = "okwehlayo"
       href = "#" >
        Okwehlayo
        <b class = "caret" ></b> 
      </a>
    <ul class = "imenyu eyehlayo" > 
      <!-- izixhumanisi -->
    </ul>
  </li>
</ul>

Uhlu lwe- Nav Yakha ama-navs astakiwe alula, alungele amabha aseceleni

Ukuzulazula kwesitayela sohlelo lokusebenza

Uhlu lwe-Nav lunikeza indlela elula nelula yokwakha amaqembu ezixhumanisi ze-nav ngezihloko ozikhethela zona. Asetshenziswa kangcono kumabha aseceleni njenge-Finder ku-OS X.

Ngokwesakhiwo, zakhelwe phezu kwezitayela ze-nav eziwumongo ezifanayo njengamathebhu namaphilisi, ngakho-ke ukusetshenziswa nokwenza ngendlela oyifisayo kuqondile.

Ngezimpawu

Uhlu lwe-Nav lulula futhi ukuhlomisa ngezithonjana. Engeza ithegi efanele <i>nekilasi futhi usulungile.

Abahlukanisi abavundlile

Engeza isihlukanisi esivundlile ngokudala into yohlu engenalutho neklasi .divider, kanje:

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

Isibonelo sohlu lwe-nav

Thatha uhlu lwezixhumanisi bese wengeza class="nav nav-list":

<ul class = "nav-list" > 
  <li class = "nav-header" > 
    Isihloko sohlu
  </li>
  <li class = "active" > 
    <a href = "#" > Ikhaya </a> 
  </li>
  <li>
    <a href = "#" > Umtapo wezincwadi </a> 
  </li>
  ...
</ul>

Isibonelo esinezimpawu

Isibonelo esifanayo, kodwa <i>esinamathegi ezithonjana.

<ul class = "nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      Umtapowolwazi
    </a>
  </li>
  ...
</ul>

I-Tabable nav Philisa amathebhu nge-javascript

Yini efakiwe

Philisa amathebhu akho nge-plugin elula ukuze uguqule phakathi kokuqukethwe ngamathebhu. I-Bootstrap ihlanganisa amathebhu aphathekayo ngezitayela ezine: phezulu (okuzenzakalelayo), kwesokudla, phansi, nakwesokunxele.

Ukushintsha phakathi kwabo kulula futhi kudinga kuphela ukushintsha imakhaphu encane kakhulu.

Isibonelo sethebula

Ukuze wenze amathebhu abonakale, bopha i- .nav-tabsdiv ngeklasi .tabbable.

NgiseSigabeni 1.

Howdy, I'm in Section 2.

What up girl, this is Section 3.

I-plugin ye-jQuery yangokwezifiso

Wonke amathebhu aphathekayo anikwa amandla i-plugin yethu ye-jQuery engasindi. Funda kabanzi mayelana nokuthi ungawenza kanjani amathebhu aphile aphile ekhasini le-javascript docs.

Thola i-javascript →

Imakhaphu eqondile

Ukusebenzisa amathebhu aphathekayo kudinga i-div egoqwayo, isethi yamathebhu, kanye nesethi yamafasitelana amathebhu wokuqukethwe.

<div class = "tabbable" > 
  <ul class = "nav-tabs" > 
    <li class = "active" ><a href = "#1" data-toggle = "tab"> Isigaba 1 </a></li >   
    <li><a href = "#2" data-toggle = "tab"> Isigaba 2 </a></li >  
  </ul>
  <div class = "ithebhu-okuqukethwe" > 
    <div class = "i-tab-pane esebenzayo" id = "1" >  
      <p> NgiseSigabeni 1. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Sawubona, ngiseSigabeni 2. </p>
    </div>
  </div>
</div>

Ithebula kunoma iyiphi indlela

Amathebhu ngezansi

Phenya ukuhleleka kwe-HTML bese wengeza iklasi ukuze ubeke amathebhu ngezansi.

NgiseSigabeni A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<div class = "amathebhu aphathekayo-ngezansi" > 
  <div class = "ithebhu-okuqukethwe" > 
    ...
  </div>
  <ul class = "nav-tabs" > 
    ...
  </ul>
</div>

Amathebhu kwesokunxele

Shintsha ikilasi ukuze ubeke amathebhu kwesokunxele.

NgiseSigabeni A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<div class = "amathebhu aphathekayo-kwesokunxele" > 
  <ul class = "nav-tabs" > 
    ...
  </ul>
  <div class = "ithebhu-okuqukethwe" > 
    ...
  </div>
</div>

Amathebhu kwesokudla

Shintsha iklasi ukuze ubeke amathebhu kwesokudla.

NgiseSigabeni A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<div class = "amathebhu aphathekayo-kwesokudla" > 
  <ul class = "nav-tabs" > 
    ...
  </ul>
  <div class = "ithebhu-okuqukethwe" > 
    ...
  </div>
</div>

Isibonelo se-navbar emile

Isibonelo se-navbar emile (engagxilile phezulu) enegama lephrojekthi, ukuzulazula, kanye nefomu lokusesha.

I-Navbar scaffolding

I-navbar idinga kuphela ama-div ambalwa ukuze iyakheke kahle ukuze ibe nesibonisi esimile noma esingashintshi.

<div class = "navbar" > 
  <div class = "i-navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

I-navbar elungisiwe

Lungisa i-navbar phezulu noma phansi kwembobo yokubuka ngesigaba esengeziwe ku-div yangaphandle, .navbar.

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

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

Uma unamathisela ibha ye-navbar, khumbula ukulandisa ngendawo efihliwe ngaphansi. Engeza u-40px noma ngaphezulu kokungeza kufayela le- <body>. Qiniseka ukuthi ungeza lokhu ngemva kwe-CSS ye-Bootstrap eyinhloko nangaphambi kwe-CSS esabelayo oyikhethayo.

I gama le-brand

Isixhumanisi esilula sokubonisa umkhiqizo wakho noma igama lephrojekthi sidinga kuphela umaka we-anchor.

<a class = "brand" href = "#" >  
  Igama lephrojekthi
</a>

Amafomu ku-navbar

Ukuze wenze isitayela ngendlela efanele futhi ubeke ifomu ngaphakathi kwe-navbar, engeza amakilasi afanelekile njengoba kukhonjisiwe ngezansi. Ukuze uthole ifomu elizenzakalelayo, faka .navbar-formfuthi .pull-leftnoma .pull-rightukuliqondanisa kahle.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
</ifomu>

Ukuze uthole ifomu lokusesha elenziwe ngendlela oyifisayo kakhulu, engeza .navbar-searchikilasi ukuze uthole izitayela ezikhethekile ku-navbar.

<form class = "i-navbar-search pull-left" > 
  <input type = "text" class = "search-query" isimeli = "Sesha" >   
</ifomu>

Ukuhlukahluka kokusabela ongakukhetha

Kuye ngenani lokuqukethwe kubha yakho ephezulu, ungase ufune ukusebenzisa izinketho zokuphendula. Ukuze wenze kanjalo, bopha okuqukethwe kwakho kwe-nav nge-div equkethe, .nav-collapse.collapse, bese wengeza inkinobho yokuguqula ibha ye-navbar, .btn-navbar.

<div class = "navbar" > 
  <div class = "i-navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar isetshenziswa njengokuguqula okuqukethwe kwe-navbar egoqiwe -->
      <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>
 
      <!-- Qiniseka ukuthi uyayishiya ibhrendi ngaphandle uma ufuna iboniswe -->
      <a class = "brand" href = "#" > Igama lephrojekthi </a>  
 
      <!-- Yonke into oyifunayo ifihlwe kokuthi 940px noma ngaphansi, ibeke lapha -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, njll -->
      </div>
 
    </div>
  </div>
</div>

Amakhanda phezulu! I-navbar ephendulayo idinga i- plugin yokugoqa .

Izixhumanisi ze-Nav

Izinto ze-Nav zilula ukungeza ngohlu olunga-odwe.

<ul class = "nav" > 
  <li class = "active" > 
    <a href = "#" > Ikhaya </a> 
  </li>
  <li><a href = "#" > Xhuma </a></li> 
  <li><a href = "#" > Xhuma </a></li> 
</ul>

Ungakwazi ukwengeza kalula abahlukanisi kuzixhumanisi zakho ze-nav ngento yohlu engenalutho kanye nekilasi elilula. Vele wengeze lokhu phakathi kwezixhumanisi:

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

Ukuqondanisa kwengxenye

.pull-leftUkuze uqondanise i-nav, ifomu losesho, noma umbhalo, sebenzisa .pull-rightamakilasi okusetshenziswayo. Womabili amakilasi azongeza ukuntanta kwe-CSS ngendlela eshiwo.

Yengeza amamenyu okwehlayo

Ukwengeza okwehliswayo nokudonsela phansi ku-nav kulula kakhulu, kodwa kudinga ukusetshenziswa kwe- plugin yethu ye-javascript .

<ul class = "nav" > 
  <li class = "okwehlayo" > 
    <a href = "#" 
          class = "i-dropdown-toggle"
          data-toggle = "okwehlayo" >
          I-akhawunti
          <b class = "caret" ></b> 
    </a>
    <ul class = "imenyu eyehlayo" > 
      ...
    </ul>
  </li>
</ul>

Thola i-javascript →

Umbhalo ku-navbar

Goqa iyunithi yezinhlamvu zombhalo <p>umaka ukuze uthole ukuhola okufanele nombala.

Kungani uwasebenzise

Ukuzulazula kwe-Breadcrumb kusetshenziswa njengendlela yokubonisa abasebenzisi lapho bekhona ngaphakathi kohlelo lokusebenza noma isayithi, kodwa hhayi ekuzulazuleni okuyinhloko. Gcina ukusetshenziswa kwabo kuncane futhi kufushane ukuze kuphumelele kakhulu.

Izibonelo

Isibonelo esisodwa esiboniswayo njengoba singase siboniswe emakhasini amaningi.

Imakhaphu

I-HTML wuhlu lwakho olujwayelekile olunga-odwe olunezixhumanisi.

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > Ikhaya </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Umtapo wezincwadi </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > Idatha </li> 
</ul>

Ukuhlanganisa amakhasi amaningi

Isetshenziswa nini

Ukwakheka kwamakhasi okunesitayela esilula kakhulu nokunesitayela esincane okukhuthazwe yi-Rdio, kulungele izinhlelo zokusebenza nemiphumela yosesho. Ibhulokhi enkulu kunzima ukuyigeja, ingakala kalula, futhi ihlinzeka ngezindawo ezinkulu zokuchofoza.

Izixhumanisi zekhasi ezisemthethweni

Izixhumanisi zingenziwa ngendlela oyifisayo futhi zisebenza ezimeni eziningi ngesigaba esifanele. .disabledngezixhumanisi ezingachofozwayo kanye .activenekhasi lamanje.

Ukuqondanisa okuvumelana nezimo

Engeza noma yiliphi izigaba ezimbili ozikhethela ukuze uguqule ukuqondanisa kwezixhumanisi zamakhasi: .pagination-centeredkanye .pagination-right.

Izibonelo

Ingxenye yokubhala ezenzakalelayo iyavumelana nezimo futhi isebenza ngenani lokuhlukahluka.

Imakhaphu

Isongwe nge- <div>, ukuqanjwa kumane nje kuyi- <ul>.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Okwedlule </a></li> 
    <li class = "active" > 
      <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 = "#" > Okulandelayo </a></li> 
  </ul>
</div>

I- Pager Ukuze uthole izixhumanisi ezisheshayo ezedlule nezilandelayo

Mayelana nepheyija

Ingxenye ye-pager isethi yezixhumanisi zokusetshenziswa okulula kokufakwa kwamakhasi okunophawu olukhanyayo kanye nezitayela ezilula nakakhulu. Ilungele amasayithi alula njengamabhulogi noma omagazini.

Isimo sokukhubazeka ongakukhetha

Izixhumanisi zama-pager nazo zisebenzisa .disabledisigaba esijwayelekile esivela ku-pagination.

Isibonelo esizenzakalelayo

Ngokuzenzakalela, izixhumanisi ze-pager.

<ul class = "pager" > 
  <li>
    <a href = "#" > Okwedlule </a> 
  </li>
  <li>
    <a href = "#" > Okulandelayo </a> 
  </li>
</ul>

Izixhumanisi eziqondanisiwe

Kungenjalo, ungakwazi ukuqondanisa isixhumanisi ngasinye emaceleni:

<ul class = "pager" > 
  <li class = "previous" > 
    <a href = "#" > ← Okudadlana </a> 
  </li>
  <li class = "okulandelayo" > 
    <a href = "#" > Okusha → </a> 
  </li>
</ul>

Amalebula	Imakhaphu
Okuzenzakalelayo	`<span class="label">Default</span>`
Impumelelo	`<span class="label label-success">Success</span>`
Isexwayiso	`<span class="label label-warning">Warning</span>`
Okubalulekile	`<span class="label label-important">Important</span>`
Ulwazi	`<span class="label label-info">Info</span>`
Okuphambene	`<span class="label label-inverse">Inverse</span>`

Mayelana

Amabheji amancane, izingxenye ezilula zokubonisa inkomba noma ukubala kohlobo oluthile. Avame ukutholakala kumaklayenti e-imeyili afana ne-Mail.app noma kuzinhlelo zokusebenza zeselula ukuze uthole izaziso zohlelo lokusebenza.

Amakilasi atholakalayo

Igama	Isibonelo	Imakhaphu
Okuzenzakalelayo	1	`<span class="badge">1</span>`
Impumelelo	2	`<span class="badge badge-success">2</span>`
Isexwayiso	4	`<span class="badge badge-warning">4</span>`
Iphutha	6	`<span class="badge badge-error">6</span>`
Ulwazi	8	`<span class="badge badge-info">8</span>`
Okuphambene	10	`<span class="badge badge-inverse">10</span>`

Iqembu lamaqhawe

I-Bootstrap inikeza ingxenye engasindi, eguquguqukayo ebizwa ngokuthi iyunithi yeqhawe ukuze ibonise okuqukethwe kusayithi lakho. Isebenza kahle ekukhangiseni nakumasayithi anesisindo sokuqukethwe.

Imakhaphu

Gcwalisa okuqukethwe kwakho ngendlela divefana nalena:

<div class = "hero-unit" > 
  <h1> Isihloko </h1>
  <p> Ulayini wethegi </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Funda kabanzi
    </a>
  </p>
</div>

Sawubona Mhlaba!

Leli iyunithi yeqhawe elilula, ingxenye elula yesitayela se-jumbotron yokubiza ukunaka okwengeziwe kokuqukethwe okufakiwe noma ulwazi.

Funda kabanzi

Unhlokweni wekhasi

Igobolondo elilula h1lokubeka isikhala ngokufanelekile bese uhlukanisa izingxenye zokuqukethwe ekhasini. Ingasebenzisa h1okumisiwe small, ingxenye kanye nezinye izingxenye eziningi (ngezitayela ezengeziwe).

<div class = "isihloko sekhasi" > 
  <h1> Iheda yekhasi eliyisibonelo </h1>
</div>

Izithonjana ezizenzakalelayo

Ngokuzenzakalelayo, izithonjana ze-Bootstrap ziklanyelwe ukubonisa izithombe ezixhunyiwe ezinomakhaphu omncane odingekayo.

Yenza ngokwezifiso kakhulu

Ngophawu oluthe xaxa, ungakwazi ukwengeza noma yiluphi uhlobo lokuqukethwe kwe-HTML njengezihloko, izigaba, noma izinkinobho ezithonjaneni.

Ilebula yesithonjana

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.

Isenzo Isenzo
Ilebula yesithonjana

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.

Isenzo Isenzo

Kungani usebenzise izithonjana

Izithonjana (ngaphambilini .media-gridkuze kufike ku-v1.4) zinhle kumagridi ezithombe noma amavidiyo, imiphumela yosesho lwezithombe, imikhiqizo yokudayisa, amaphothifoliyo, nokunye okuningi. Kungaba izixhumanisi noma okuqukethwe okumile.

Imakhaphu elula, evumelana nezimo

Umaki wezithonjana ulula—okunanoma uliyiphi inombolo liyezinto yikho kuphela okudingekayo. Futhi iguquguquka kakhulu, ivumela noma iluphi uhlobo lokuqukethwe olunomakhaphu owengeziwe wokugoqa okuqukethwe kwakho.

Isebenzisa osayizi bekholomu yegridi

Okokugcina, ingxenye yezithonjana isebenzisa amakilasi esistimu yegridi ekhona—njengenoma— .span2ukulawula .span3ubukhulu bezithonjana.

Imakhaphu

Njengoba kushiwo ngaphambili, umaka odingekayo wezithonjana ulula futhi uqondile. Nakhu ukubheka ukusethwa okuzenzakalelayo kwezithombe ezixhunyiwe :

<ul class = "izithonjana" > 
  <li class = "span3" > 
    <a href = "#" class = "isithonjana" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Ngokuqukethwe kwe-HTML yangokwezifiso ezithonjaneni, umaki uyashintsha kancane. Ukuvumela okuqukethwe kweleveli yebhulokhi noma yikuphi, sishintshanisa <a>okufana <div>nalokhu:

<ul class = "izithonjana" > 
  <li class = "span3" > 
    <div class = "isithonjana" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Ilebula yesithonjana </h5>
      <p> Amazwibela esithonjana khona lapha... </p>
    </div>
  </li>
  ...
</ul>

Izibonelo ezengeziwe

Hlola zonke izinketho zakho ngamakilasi egridi ahlukahlukene atholakalayo kuwe. Ungaphinda uhlanganise futhi ufanise osayizi abahlukahlukene.

Okuzenzakalelayo okungasindi

Isigaba sesisekelo esibhalwe kabusha

Nge-Bootstrap 2, senze isigaba sesisekelo saba lula: .alertesikhundleni se- .alert-message. Siphinde sehlise ubuncane bemakhaphu obudingekayo—cha <p>iyadingeka ngokuzenzakalelayo, ngaphandle nje <div>.

Umlayezo owodwa wokwazisa

Ukuze uthole ingxenye ehlala isikhathi eside enekhodi encane, sisuse ukubukeka okuhlukanisayo kwezixwayiso zamabhulokhi, imilayezo eza neziphedi eziningi kanye nombhalo ngokuvamile owengeziwe. Ikilasi nalo selishintshile kwaba .alert-block.

Ihamba kahle nge-javascript

I-Bootstrap iza ne-plugin enhle ye-jQuery esekela imilayezo yesixwayiso, okwenza ukuyixosha ngokushesha futhi kube lula.

Thola i-plugin »

Izexwayiso eziyisibonelo

Goqa umlayezo wakho kanye nesithonjana ongasikhetha sokuvala ku-div ngekilasi elilula.

× Isexwayiso! Kungcono uzihlole kahle, awubukeki umuhle kakhulu.

<div class = "isaziso" > 
  <a class = "close" data-dismiss = "alert"> × </a> _  
  <strong> Isexwayiso! I </strong> Zihlole kahle, awubukeki umuhle kakhulu.
</div>

Nweba kalula umlayezo ojwayelekile wesexwayiso ngamakilasi amabili ongawakhetha: .alert-blockukuze uthole izilawuli ezengeziwe zokupheda nombhalo kanye .alert-headingnesihloko esifanayo.

Isexwayiso!

Kungcono uzihlole kahle, awubukeki umuhle kakhulu. I-Nulla vitae elit libero, i-pharetra augue. I-Preesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class = "i-alert-block-block" > 
  <a class = "close" data-dismiss = "alert"> × </a> _  
  <h4 class = "alert-heading" > Isexwayiso! </h4> 
  Okungcono uzihlole wena, awu...
</div>

Ezinye izindlela zokuqukethwe Engeza amakilasi ongawakhetha ukuze uguqule incazelo yesexwayiso

Iphutha noma ingozi

× Hawu! Shintsha izinto ezimbalwa bese uzama ukuthumela futhi.

<div class = "iphutha lesaziso" > 
  ...
</div>

Impumelelo

× Wenze kahle! Ufunde ngempumelelo lo mlayezo obalulekile wesexwayiso.

<div class = "impumelelo yesixwayiso" > 
  ...
</div>

Ulwazi

× Amakhanda phezulu! Lesi sexwayiso sidinga ukunakwa kwakho, kodwa asibalulekile kakhulu.

<div class = "ulwazi lwesixwayiso" > 
  ...
</div>

Izibonelo kanye nemakhaphu

Okuyisisekelo

Ibha yokuqhubeka ezenzakalelayo enegradient eqondile.

<div class = "progress" > 
  <div class = "ibha" 
       isitayela = " ububanzi : 60 %; " ></div> 
</div>

Inemithende

Isebenzisa i-gradient ukudala umphumela onemigqa (akukho IE).

<div class = "progress progress-striped" > 
  <div class = "ibha" 
       isitayela = " ububanzi : 20 %; " ></div> 
</div>

Okugqwayizayo

Ithatha isibonelo esinemigqa bese isenza (akukho IE).

<div class = "inqubekelaphambili enemigqa 
     iyasebenza" >
  <div class = "ibha" 
       isitayela = " ububanzi : 40 %; " ></div> 
</div>

Izinketho nokusekelwa kwesiphequluli

Imibala eyengeziwe

Amabha okuqhubeka asebenzisa inkinobho efanayo namakilasi okuxwayisa ngezitayela ezingaguquki.

Imigoqo enemigqa

Ngokufana nemibala eqinile, sinemigoqo yenqubekelaphambili enemigqa ehlukahlukene.

Ukuziphatha

Amabha okuqhubeka asebenzisa ukuguqulwa kwe-CSS3, ngakho-ke uma ulungisa ububanzi nge-javascript, izoshintsha usayizi ngokushelelayo.

Uma usebenzisa .activeikilasi, .progress-stripedimigoqo yakho yokuqhubeka izophila imithende ukusuka kwesokunxele kuye kwesokudla.

Usekelo lwesiphequluli

Amabha wenqubekelaphambili asebenzisa ama-gradient e-CSS3, ukuguqulwa, nokugqwayiza ukuze kuzuzwe yonke imiphumela yakhona. Lezi zici azisekelwa kuzinguqulo ze-IE7-9 noma ezindala zeFirefox.

I-Opera ne-IE azisekeli ukugqwayiza ngalesi sikhathi.

Imithombo

Sebenzisa umthombo njengomphumela olula ku-elementi ukuze uyinikeze umphumela wokufakwayo.

Bheka, ngisemthonjeni!

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

Vala isithonjana

Sebenzisa isithonjana sokuvala esijwayelekile ukuze uchithe okuqukethwe okufana namamodeli nezixwayiso.

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

Amaqembu ezinkinobho Joyina izinkinobho ukuze uthole umsebenzi owengeziwe ofana nebha yamathuluzi

Amaqembu ezinkinobho

Imikhuba emihle kakhulu

Isibonelo esizenzakalelayo

Isibonelo sebha yamathuluzi

Ibhokisi lokuhlola nama-flavour omsakazo

Okwehliswayo emaqenjini ezinkinobho

Amamenyu okwehliswayo ezinkinobho Akhelwe phezu kwamaqembu ezinkinobho ukuze anikeze amamenyu anomongo

Ukwehliswa kwezinkinobho

Uhlolojikelele nezibonelo

Imakhaphu yesibonelo

Isebenza nabo bonke osayizi bezinkinobho

Idinga i-javascript

Okwehliswayo kwenkinobho yokuhlukanisa

Uhlolojikelele nezibonelo

Osayizi

Imakhaphu yesibonelo

Amamenyu okwehlisa

Nav, amathebhu, namaphilisi Ukuzulazula kwesitayela sohlu okwenziwa ngendlela oyifisayo kakhulu

Okuzenzakalelayo okungasindi Imakhaphu efanayo, izigaba ezihlukene

Isigaba sesisekelo esinamandla

Isetshenziswa nini

Ukuqondanisa kwengxenye

Amathebhu ayisisekelo

Amaphilisi ayisisekelo

Okunamathelayo Yenza amathebhu noma amaphilisi ame mpo

Ungawabeka kanjani

Amathebhu astakiwe

Amaphilisi astakiwe

Okwehliswayo Kwezingxenye ze-nav ezithuthukisiwe

Amamenyu anothile enziwe aba lula

Amathebhu anokwehliswayo

Amaphilisi ane dropdowns

Uhlu lwe- Nav Yakha ama-navs astakiwe alula, alungele amabha aseceleni

Ukuzulazula kwesitayela sohlelo lokusebenza

Ngezimpawu

Abahlukanisi abavundlile

Isibonelo sohlu lwe-nav

Isibonelo esinezimpawu

I-Tabable nav Philisa amathebhu nge-javascript

Yini efakiwe

Isibonelo sethebula

I-plugin ye-jQuery yangokwezifiso

Imakhaphu eqondile

Ithebula kunoma iyiphi indlela

Amathebhu ngezansi

Amathebhu kwesokunxele

Amathebhu kwesokudla

Ibha ye-Navbar

Isibonelo se-navbar emile

I-Navbar scaffolding

I-navbar elungisiwe

I gama le-brand

Amafomu ku-navbar

Ukuhlukahluka kokusabela ongakukhetha

Izixhumanisi ze-Nav

Ukuqondanisa kwengxenye

Yengeza amamenyu okwehlayo

Umbhalo ku-navbar

Iimvuthuluka zesinkwa

Kungani uwasebenzise

Izibonelo

Imakhaphu

Amakhasi Izinketho ezimbili zokupheqa ngokuqukethwe

Ukuhlanganisa amakhasi amaningi

Isetshenziswa nini

Izixhumanisi zekhasi ezisemthethweni

Ukuqondanisa okuvumelana nezimo

Izibonelo

Imakhaphu

I- Pager Ukuze uthole izixhumanisi ezisheshayo ezedlule nezilandelayo

Mayelana nepheyija

Isimo sokukhubazeka ongakukhetha

Isibonelo esizenzakalelayo

Izixhumanisi eziqondanisiwe

Amalebula asemgqeni Ilebula nombhalo wesichasiselo

Amabheji Izinkomba kanye nokubala okungafundiwe

Mayelana

Amakilasi atholakalayo

Izingxenye ze-Typographic Isihloko sekhasi neyunithi yeqhawe yokuhlukanisa okuqukethwe