Isibonelo

Imenyu eguqukayo, engokomongo yokubonisa izinhlu zezixhumanisi. Kwenziwe ukusebenzisana nokwehliswa kwe- JavaScript plugin .

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Isenzo</a></li>
  <li><a tabindex="-1" href="#">Esinye isenzo</a></li>
  <li><a tabindex="-1" href="#">Okunye lapha</a></li>
  <li class="divider"></li>
  <li><a tabindex="-1" href="#">Isixhumanisi esihlukanisiwe</a></li>
</ul>

Imakhaphu

Uma ubheka imenyu yokudonsela phansi, nansi i-HTML edingekayo. Udinga ukugoqa i-trigger yokudonsela phansi kanye nemenyu yokudonsela phansi ngaphakathi kokuthi .dropdown, noma enye into esho ukuthi position: relative;. Bese uvele udale imenyu.

<div class="dropdown">
  <!-- Xhumanisa noma inkinobho yokuguqula okwehliswayo -->
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">Isenzo</a></li>
    <li><a tabindex="-1" href="#">Esinye isenzo</a></li>
    <li><a tabindex="-1" href="#">Okunye lapha</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Isixhumanisi esihlukanisiwe</a></li>
  </ul>
</div>

Izinketho

Qondanisa amamenyu kwesokudla bese wengeza kufaka phakathi amazinga engeziwe okwehlayo.

Ukuqondanisa amamenyu

Engeza .pull-rightkokuthi a .dropdown-menuukuze uqondanise kwesokudla imenyu eyehlayo.

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

Amamenyu amancane kokwehliswayo

Engeza ileveli eyengeziwe yamamenyu okwehlayo, avela phezulu njengalawo e-OS X, anezengezo zemakhaphu ezilula. Engeza .dropdown-submenukunoma iyiphi likumenyu eyehlayo ekhona ukuze wenze isitayela esizenzakalelayo.

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

Izibonelo

Izinketho ezimbili eziyisisekelo, kanye nokuhluka okubili okuqondile.

Iqembu lenkinobho eyodwa

Goqa uchungechunge lwezinkinobho ngo- .btnin .btn-group.

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

Amaqembu wezinkinobho eziningi

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>

Amaqembu ezinkinobho eziqondile

Yenza isethi yezinkinobho zibonakale zistakwe ziqondile kunokuba zivundlile.

<div class="btn-group btn-group-vertical">
  ...
</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 .

Okwehliswayo emaqenjini ezinkinobho

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

Uhlolojikelele nezibonelo

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

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

Isebenza nabo bonke osayizi bezinkinobho

Okwehliswayo kwezinkinobho kusebenza kunoma imuphi usayizi: .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 mathupha noma nge-JavaScript yangokwezifiso.

Okwehliswayo kwenkinobho yokuhlukanisa

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

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

Osayizi

Sebenzisa amakilasi enkinobho eyengeziwe .btn-mini, .btn-small, noma .btn-largeukwenza usayizi.

<div class="btn-group">
  <button class="btn btn-mini">Isenzo</inkinobho>
  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </inkinobho>
  <ul class="dropdown-menu">
    <!-- 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="btn-group dropup">
  <button class="btn">Yehlisa</inkinobho>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </inkinobho>
  <ul class="dropdown-menu">
    <!-- izixhumanisi zemenyu eyehlayo -->
  </ul>
</div>

Okuzenzakalelayo okungasindi Imakhaphu efanayo, izigaba ezihlukene

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

Amathebhu ayisisekelo

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

<ul class="nav 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>

Isimo sokukhubazeka

Kunoma iyiphi ingxenye ye-nav (amathebhu, amaphilisi, noma uhlu), engeza .disabledukuze uthole izixhumanisi ezimpunga futhi akukho miphumela ye-hover . Izixhumanisi zizohlala zichofozeka, nokho, ngaphandle uma ususa hrefisibaluli. Noma, ungasebenzisa i-JavaScript yangokwezifiso ukuze uvimbele lokho kuchofoza.

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

Ukuqondanisa kwengxenye

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

Iyabekeka

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

Engeza amamenyu okwehlayo nge-HTML encane eyengeziwe kanye ne- plugin ye-JavaScript eyehlayo .

Amathebhu anokwehliswayo

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

Amaphilisi ane dropdowns

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

Nav uhlu

Indlela elula nelula yokwakha amaqembu ezixhumanisi ze-nav ngezihloko ozikhethela zona. Asetshenziswa kangcono kumabha aseceleni njenge-Finder ku-OS X.

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="#">Ekhaya</a></li>
  <li><a href="#">Ilabhulali</a></li>
  ...
</ul>

Inothi Ngokwakha isidleke phakathi kohlu lwe-nav, faka class="nav nav-list"kunoma yisiphi isidleke <ul>.

Abahlukanisi abavundlile

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

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

Ithebhu ye-nav

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

Isibonelo sethebula

Ukuze wenze amathebhu abonakale, dala i- .tab-paneID ene-ID ehlukile yawo wonke amathebhu bese uwagoqa ngo- .tab-content.

<div class="tabbable"> <!-- Idingeka kuphela kumathebhu kwesokunxele/kwesokudla -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Isigaba 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Isigaba 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>NgiseSigabeni 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Sawubona, ngiseSigabeni 2.</p>
    </div>
  </div>
</div>

Fade kumathebhu

Ukuze wenze amathebhu afiphale, .fadeengeza .tab-pane.

Idinga i-plugin ye-jQuery

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

Ithebula kunoma iyiphi indlela

Amathebhu ngezansi

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

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

Amathebhu kwesokunxele

Shintsha ikilasi ukuze ubeke amathebhu kwesokunxele.

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

Amathebhu kwesokudla

Shintsha iklasi ukuze ubeke amathebhu kwesokudla.

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

Ibha ye-navbar eyisisekelo

Ukuze uqale, ama-navbar amile (awagxilile phezulu) futhi afaka ukusekelwa kwegama lephrojekthi nokuzulazula okuyisisekelo. Beka eyodwa noma yikuphi ngaphakathi .containerkwe-, ebeka ububanzi besayithi lakho nokuqukethwe.

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Isihloko</a>
    <ul class="nav">
      <li class="active"><a href="#">Ekhaya</a></li>
      <li><a href="#">Isixhumanisi</a></li>
      <li><a href="#">Isixhumanisi</a></li>
    </ul>
  </div>
</div>

Izingxenye ze-Navbar

Ibhrendi

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

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

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="#">Isixhumanisi</a></li>
  <li><a href="#">Isixhumanisi</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="divider-vertical"></li>
  ...
</ul>

Amafomu

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">
  <button type="submit" class="btn">Hambisa</button>
</ifomu>

Sesha ifomu

Ukuze uthole ifomu lokusesha elenziwe ngendlela oyifisayo kakhulu, engeza kokokufaka .navbar-searchkwezitayela ezikhethekile ku-navbar.form.search-query

<form class="navbar-search pull-left">
  <input type="text" class="search-query" placeholder="Search">
</ifomu>

Ukuqondanisa kwengxenye

.pull-leftQondanisa izixhumanisi ze-nav, ifomu lokusesha, noma umbhalo, sebenzisa .pull-rightamakilasi ezinsiza. Womabili amakilasi azongeza ukuntanta kwe-CSS endaweni ecacisiwe.

Ukusebenzisa okwehliswayo

Engeza okwehliswayo nokwehliswayo ku-nav nge-markup encane kanye ne- plugin ye-JavaScript eyehlayo .

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

Vakashela amadokhumenti okwehliswayo e-JavaScript ukuze uthole imakhaphu eyengeziwe nolwazi lokwehliswa kwezingcingo.

Umbhalo

Goqa iyunithi yezinhlamvu zombhalo nge-elementi ngokuthi .navbar-text, ngokuvamile <p>kumaka ukuze uthole ukuhola nombala okulungile.

Izinguquko zesibonisi ozikhethela

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

Kulungiswe phezulu

Engeza .navbar-fixed-topfuthi ukhumbule ukulandisa ngendawo efihliwe ngaphansi kwayo ngokungeza okungenani u-40px paddingku- <body>. Qiniseka ukuthi ungeza lokhu ngemva kwe-CSS ye-Bootstrap eyinhloko nangaphambi kwe-CSS esabelayo oyikhethayo.

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

Kugxilwe phansi

Engeza .navbar-fixed-bottomesikhundleni.

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

I-navbar ephezulu emile

Dala i-navbar enobubanzi obugcwele eskrola isuke nekhasi ngokungeza .navbar-static-top. Ngokungafani .navbar-fixed-topnekilasi, awudingi ukushintsha noma iyiphi i-padding ku- body.

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

I-navbar ephendulayo

Ukuze usebenzise ibha ye-navbar egoqikayo, bopha okuqukethwe kwe-navbar yakho nge-div equkethe, .nav-collapse.collapse, bese wengeza inkinobho yokuguqula ibha ye-navbar, .btn-navbar.

<div class="navbar">
  <div class="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 collapse">
        <!-- .nav, .navbar-search, .navbar-form, njll -->
      </div>

    </div>
  </div>
</div>

Ukwehluka okuhlanekezelwe

Shintsha ukubukeka kwe-navbar ngokungeza .navbar-inverse.

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

Izibonelo

Isibonelo esisodwa esiboniswayo njengoba singase siboniswe emakhasini amaningi.

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

Ukuqanjwa okujwayelekile

Ukuqanjwa okulula okukhuthazwe yi-Rdio, kulungele izinhlelo zokusebenza nemiphumela yosesho. Ibhulokhi enkulu kunzima ukuyigeja, ingakala kalula, futhi ihlinzeka ngezindawo ezinkulu zokuchofoza.

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

Izinketho

Izimo ezikhubazekile nezisebenzayo

Izixhumanisi zingenziwa ngendlela oyifisayo ezimeni ezahlukene. Sebenzisa .disabledizixhumanisi ezingachofozwayo kanye .activenokukhombisa ikhasi lamanje.

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

Ungakhetha ukushintsha amahange asebenzayo noma akhutshaziwe ukuze ususe ukusebenza kokuchofoza kuyilapho ugcina izitayela ezihlosiwe.

<div class="pagination">
  <ul>
    <li class="disabled"><span>Okwedlule</span></li>
    <li class="active"><span>1</span></li>
    ...
  </ul>
</div>

Osayizi

Uyathanda ukuqanjwa okukhudlwana noma okuncane? Engeza .pagination-large, .pagination-small, noma .pagination-miniosayizi abengeziwe.

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

Ukuqondanisa

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

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

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

Ipheyija

Izixhumanisi ezisheshayo zangaphambilini nezilandelayo zokusetshenziswa okulula kokwakheka kwamagama okunophawu olukhanyayo nezitayela. Ilungele amasayithi alula njengamabhulogi noma omagazini.

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="next">
    <a href="#">Okusha →</a>
  </li>
</ul>

Isimo sokukhubazeka ongakukhetha

Izixhumanisi zama-pager nazo zisebenzisa isigaba sokusetshenziswa okujwayelekile .disabledkusuka ephepheni.

<ul class="pager">
  <li class="previous disabled">
    <a href="#">← Okudadlana</a>
  </li>
  ...
</ul>

Amalebula

Amabheji

Iqembu lamaqhawe

Ingxenye engasindi, evumelana nezimo ukuze ubonise okuqukethwe okuyinhloko kusayithi lakho. Isebenza kahle ekukhangiseni nakumasayithi anesisindo sokuqukethwe.

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

Unhlokweni wekhasi

Igobolondo elilula h1lendawo yokukhipha ngokufanelekile futhi uhlukanise izingxenye zokuqukethwe ekhasini. Ingasebenzisa h1okumisiwe small, ingxenye kanye nezinye izingxenye eziningi (ngezitayela ezengeziwe).

<div class="page-header">
  <h1>Isibonelo seheda yekhasi <small>Umbhalo ongezansi weheda</small></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.

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="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img src="https://placehold.it/300x200" 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="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img src="https://placehold.it/300x200" alt="">
      <h3>Ilebula yesithonjana</h3>
      <p>Isithombe-ncazo...</p>
    </div>
  </li>
  ...
</ul>

Izibonelo ezengeziwe

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

Isexwayiso esizenzakalelayo

Goqa noma yimuphi umbhalo kanye nenkinobho yokuchitha ngokuzithandela .alertukuze uthole umlayezo oyisisekelo wesexwayiso.

<div class="alert">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <strong>Isexwayiso!</strong> Zihlole kahle, awubukeki umuhle kakhulu.
</div>

Cashisa izinkinobho

Iziphequluli ze-Mobile Safari ne-Mobile Opera, ngaphezu data-dismiss="alert"kwesibaluli, zidinga href="#"ukuchithwa kwezixwayiso uma usebenzisa <a>ithegi.

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

Kungenjalo, ungasebenzisa i- <button>elementi enesibaluli sedatha, esikhethe ukuyenzela amadokhumenti ethu. Uma usebenzisa <button>, kufanele ufake type="button"noma amafomu akho angase angawahambisi.

<button type="button" class="close" data-dismiss="alert">×</button>

Cashisa izexwayiso nge-JavaScript

Sebenzisa i- plugin yezaziso ye-jQuery ukuze ukhiphe izaziso ngokushesha futhi kalula.

Izinketho

Ngemilayezo emide, khulisa ukupheda phezulu nangaphansi kwesisonga sesexwayiso ngokungeza .alert-block.

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <h4>Isexwayiso!</h4>
  Okungcono uzihlole wena, awu...
</div>

Ezinye izindlela zomongo

Engeza amakilasi ongawakhetha ukuze uguqule incazelo yesexwayiso.

Iphutha noma ingozi

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

Impumelelo

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

Ulwazi

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

Izibonelo kanye nemakhaphu

Okuyisisekelo

Ibha yokuqhubeka ezenzakalelayo enegradient eqondile.

<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>

Inemithende

Isebenzisa i-gradient ukuze idale umphumela onemigqa. Ayitholakali ku-IE7-8.

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

Okugqwayizayo

Engeza .activeukuze .progress-stripeduphilise imithende kwesokudla ukuya kwesokunxele. Ayitholakali kuzo zonke izinguqulo ze-IE.

<div class="progress progress-striped active">
  <div class="bar" style="width: 40%;"></div>
</div>

Kustakiwe

Beka amabha amaningi okufanayo .progressukuze uwabeke.

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

Izinketho

Imibala eyengeziwe

Amabha okuqhubeka asebenzisa inkinobho efanayo namakilasi okuxwayisa ngezitayela ezingaguquki.

<div class="progress progress-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>

Imigoqo enemigqa

Ngokufana nemibala eqinile, sinemigoqo yenqubekelaphambili enemigqa ehlukahlukene.

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

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.

Izinguqulo zangaphambi kwe-Internet Explorer 10 ne-Opera 12 azikusekeli ukugqwayiza.

Izitayela zento engabonakali zokwakha izinhlobo ezihlukahlukene zezingxenye (njengamazwana ebhulogi, ama-Tweets, njll) anesithombe esiqondaniswe kwesokunxele noma kwesokudla eceleni kokuqukethwe kombhalo.

Isibonelo esizenzakalelayo

Imidiya ezenzakalelayo ivumela ukuntanta into yemidiya (izithombe, ividiyo, umsindo) iye kwesokunxele noma kwesokudla sebhulokhi yokuqukethwe.

Isihloko semidiya

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

Isihloko semidiya

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

Isihloko semidiya

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

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" src="https://placehold.it/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Isihloko semidiya</h4>
    ...

    <!-- Into yemidiya efakwe esidlekeni -->
    <div class="media">
      ...
    </div>
  </div>
</div>

Uhlu lwemidiya

Ngokumakwa okuthe xaxa, ungasebenzisa imidiya engaphakathi kohlu (iwusizo ochungechungeni lwamazwana noma uhlu lwama-athikili).

<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" src="https://placehold.it/64x64">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Isihloko semidiya</h4>
      ...

      <!-- Into yemidiya efakwe esidlekeni -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
</ul>

Imithombo

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

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

Amakilasi okuzikhethela

Lawula ama-padding namakhona ayindilinga ngamakilasi amabili okushintsha ozikhethela.

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

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

Vala isithonjana

Sebenzisa isithonjana sokuvala esijwayelekile ukuze uchithe okuqukethwe okufana namamodeli nezixwayiso.

<button class="close">&izikhathi;</inkinobho>

Amadivayisi we-iOS adinga i- href="#" yokuchofoza imicimbi uma ungathanda ukusebenzisa ihange.

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

Amakilasi omsizi

Amakilasi alula, agxilile okubonisa okuncane noma ama-tweaks wokuziphatha.

.donsela kwesokunxele

Ntanta i-elementi kwesokunxele

class="donsa-kwesokunxele"

.donsela kwesokunxele {
  ukuntanta: kwesokunxele;
}

.donsela kwesokudla

Gcoba i-elementi kwesokudla

class="donsa-kwesokudla"

.donsela kwesokudla {
  ukuntanta: kwesokudla;
}

.ithulisiwe

Shintsha umbala we-elementi ube#999

class="thulisiwe"

.thulisiwe {
  umbala: #999;
}

.clearfix

Sula floatkunoma iyiphi i-elementi

class="clearfix"

.clearfix {
  *sondeza: 1;
  &:ngaphambili,
  &:ngemuva {
    isibonisi: ithebula;
    okuqukethwe: "";
  }
  &:ngemuva {
    cacile: kokubili;
  }
}