Likaroloana

Lintho tse ngata tse ka sebelisoang hape li hahiloe ho Bootstrap ho fana ka navigation, litemoso, popover, le tse ling tse ngata.

Lihlopha tsa konopo

Sebelisa lihlopha tsa likonopo ho kopanya likonopo tse ngata hammoho e le motsoako o le mong. Li hahe ka letoto la <a>kapa <button>likarolo.

Mekhoa e metle

Re khothaletsa litataiso tse latelang tsa ho sebelisa lihlopha tsa likonopo le li-toolbar:

  • Kamehla sebelisa ntho e tšoanang sehlopheng se le seng sa konopo, <a>kapa <button>.
  • Se ke oa kopanya likonopo tsa mebala e fapaneng sehlopheng se le seng sa likonopo.
  • Sebedisa diaekhone ho ekeletsa mongolo kapa sebakeng sa mongolo, empa etsa bonnete ba hore o kenyelletsa mongolo wa alt le sehlooho moo ho loketseng.

Lihlopha tsa Likonopo tse amanang tse nang le li-dropdown (sheba ka tlase) li lokela ho bitsoa ka thoko 'me li kenyelletse le tlhokomelo ea ho theoha ho bontša boitšoaro bo reriloeng.

Mohlala oa kamehla

Mona ke kamoo HTML e batlang sehlopha se tloaelehileng sa konopo se hahiloeng ka likonopo tsa tag ea anchor:

  1. <div class = "btn-group" >
  2. < sehlopha sa konopo = "btn" > 1 </button>
  3. < sehlopha sa konopo = "btn" > 2 </button>
  4. < sehlopha sa konopo = "btn" > 3 </button>
  5. </ div>

Mohlala oa Toolbar

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

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </ div>
  5. </ 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.

Fumana javascript »

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.

Likonopo tse theohang

Mehlala ea mohlala

Joalo ka sehlopha sa li-button, li-markup tsa rona li sebelisa likonopo tse tloaelehileng, empa ka litlatsetso tse seng kae ho ntlafatsa setaele le ho ts'ehetsa plugin ea Bootstrap ea jQuery.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">
  3. Ketso
  4. <span class = "caret" > </span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <!-- lihokelo tsa menu tse theoha -->
  8. </ul>
  9. </ div>

E sebetsa ka boholo ba likonopo

Likonopo tse theohang li sebetsa ka boholo bofe kapa bofe. likonopo tsa hau tsa boholo ho .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 tlhophiso ka letsoho kapa ka javascript e tloaelehileng.


Li-dropdown tsa konopo ea Arohane

Kakaretso le mehlala

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.

Boholo

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

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "menu e theoha-ho hula-ka ho le letona" >
  4. <!-- lihokelo tsa menu tse theoha -->
  5. </ul>
  6. </ div>

Mehlala ea mohlala

Re holisa likonopo tse tloaelehileng ho fana ka ts'ebetso ea bobeli ea konopo e sebetsang e le mokhoa o ikhethileng oa ho theola.

  1. <div class = "btn-group" >
  2. < sehlopha sa konopo = "btn" > Ketso </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </span>
  5. </ konopo>
  6. <ul class = "dropdown-menu" >
  7. <!-- lihokelo tsa menu tse theoha -->
  8. </ul>
  9. </ 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.

  1. <div class = "btn-group dropup" >
  2. < sehlopha sa konopo = "btn" > Tloha </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </span>
  5. </ konopo>
  6. <ul class = "dropdown-menu" >
  7. <!-- lihokelo tsa menu tse theoha -->
  8. </ul>
  9. </ div>

Multicon-page pagination

Nako ea ho sebelisoa

Mokhoa o bonolo le o sa reng letho oa pagination o bululetsoeng ke Rdio, o loketse 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.

Lihokelo tsa leqephe tse hlakileng

Lihokelo li ka khoneha 'me li sebetsa maemong a mangata ka sehlopha se nepahetseng. .disabledbakeng sa lihokelo tse sa totobaleheng le .activebakeng sa leqephe la hajoale.

Ho tsamaisana le maemo

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

Mehlala

Karolo ea kamehla ea pagination ea fetoha 'me e sebetsa ka mefuta e mengata.

Markup

E phuthetsoe ka <div>, bohetene ke <ul>.

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#"> E fetileng </a></li>
  4. <li class = "active" >
  5. <a href = "#"> 1 </a> _
  6. </li>
  7. <li><a href = "#"> 2 </a> </li>
  8. <li><a href = "#"> 3 </a> </li>
  9. <li><a href = "#"> 4 </a> </li>
  10. <li><a href = "#"> E latelang </a></li>
  11. </ul>
  12. </ div>

Pager Bakeng sa lihokelo tsa pele le tse tlang kapele

Mabapi le pager

Karolo ea pager ke sete ea likhokahano bakeng sa ts'ebetso e bonolo ea bohetene e nang le markup e bobebe esita le mekhoa e bobebe. E ntle bakeng sa libaka tse bonolo joalo ka li-blog kapa limakasine.

Boemo ba ho holofala ha boikhethelo

Lihokelo tsa li-pager li boetse li sebelisa sehlopha se akaretsang .disabledho tloha boheteneng.

Mohlala oa kamehla

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

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#"> E fetileng </a>
  4. </li>
  5. <li>
  6. <a href = "#"> E latelang </a>
  7. </li>
  8. </ul>

Lihokelo tse tsamaellanang

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

  1. <ul class = "pager" >
  2. <li class = "e fetileng" >
  3. <a href = "#" > Khale </a>
  4. </li>
  5. <li class = "e latelang" >
  6. <a href = "#"> > Ntjhanyana → </a>
  7. </li>
  8. </ul>
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>

About

Libeche ke likaroloana tse nyane, tse bonolo bakeng sa ho hlahisa letšoao kapa palo ea mofuta o itseng. Li fumaneha hangata ho bareki ba lengolo-tsoibila joalo ka Mail.app kapa lits'ebetsong tsa mehala bakeng sa litsebiso.

Lihlopha tse fumanehang

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>

Sehlopha sa mohale

Bootstrap e fana ka karolo e bobebe, e tenyetsehang e bitsoang yuniti ea mohale ho bonts'a litaba sebakeng sa hau sa marang-rang. E sebetsa hantle ho mebaraka le liwebsaete tse boima ba litaba.

Markup

Qetella litaba tsa hau ka tsela e divtšoanang:

  1. <div class = "hero-unit" >
  2. <h1> Sehlooho </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large">
  6. Ithute haholoanyane
  7. </a>
  8. </p>
  9. </ div>

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

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

  1. <div class = "leqephe-hlooho" >
  2. <h1> Sehlooho sa leqephe la mohlala </h1>
  3. </ 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

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.

Thepa

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 :

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <a href = "#" class = "thumbnail"> _
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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:

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Leibole ya manane < /h5>
  6. <p> Lits'oants'o tse nyane hona mona... </p>
  7. </ div>
  8. </li>
  9. ...
  10. </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.

Mekhahlelo e bobebe

Sehlopha sa motheo se ngotsweng hape

Ka Bootstrap 2, re nolofalitse sehlopha sa motheo: .alertsebakeng sa .alert-message. Hape re fokolitse palo e tlase e hlokahalang - che <p>e batloang ka ho sa feleng, e ka ntle feela <div>.

Molaetsa o le mong oa tlhokomeliso

Bakeng sa karolo e tšoarellang haholoanyane e nang le khoutu e nyane, re tlositse ponahalo e khethollang ea tlhokomeliso ea li-block, melaetsa e tlang le li-padding tse ngata le mongolo o mongata. Sehlopha le sona se fetohile ho .alert-block.


E tsamaisana hantle le javascript

Bootstrap e tla le plugin e ntle ea jQuery e ts'ehetsang melaetsa ea tlhokomeliso, e etsang hore e lelekoe kapele le ha bonolo.

Fumana plugin »

Mehlala ea tlhokomeliso

Qetella molaetsa oa hau le aekhone ea boikhethelo ea ho koala ka div ka sehlopha se bonolo.

Tlhokomeliso! Ke hantle hore u itlhahlobe, ha u shebahale hantle haholo.
  1. <div class = "temoso" >
  2. < sehlopha sa konopo = "koala" data-dismiss = "temoso" > × </button>
  3. <strong> Temoso! </strong> Molemo ka ho fetisisa hlahloba u self, ha u shebahale hantle haholo.
  4. </ div>

Hlokomela! Lisebelisoa tsa iOS li hloka tlhokomeliso href="#"bakeng sa ho tlosoa ha litemoso. Netefatsa hore oa e kenyelletsa le tšobotsi ea data bakeng sa li-icon tsa anchor close. 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.

Atolosa molaetsa o tloaelehileng oa tlhokomeliso ka litlelase tse peli tseo u ka li khethang: .alert-blockbakeng sa li- padding tse ngata le li-taolo tsa mongolo le .alert-headingbakeng sa sehlooho se nyallanang.

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.

  1. <div class = "temoso ea tlhokomeliso-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#"> × </a> _
  3. <h4 class = "alert-heading" > Tlhokomeliso! </h4>
  4. Ho molemo hore u itlhahlobe, ha u...
  5. </ div>

Mekhoa e meng ea maemo Eketsa lihlopha tsa boikhethelo ho fetola moelelo oa tlhokomeliso

Phoso kapa kotsi

Oho hang! Fetola lintho tse 'maloa 'me u leke ho romella hape.
  1. <div class = "temoso-phoso ea tlhokomeliso" >
  2. ...
  3. </ div>

Katleho

Mosebetsi o motle! U atlehile ho bala molaetsa ona oa bohlokoa oa tlhokomeliso.
  1. <div class = "temoso-katleho ea tlhokomeliso" >
  2. ...
  3. </ div>

Boitsebiso

Hlokomela! Tlhokomeliso ena e hloka tlhokomelo ea hau, empa ha e bohlokoa haholo.
  1. <div class = "temoso ea tlhokomeliso-litaba" >
  2. ...
  3. </ div>

Mehlala le markup

Motheo

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

  1. <div class = "tsoelopele" >
  2. <div class = "bar"
  3. style = " bophara : 60 %; " ></div>
  4. </ div>

E methalo

E sebelisa gradient ho theha phello e metsero (ha ho IE).

  1. <div class = "tsoelopele-tsoelopele" >
  2. <div class = "bar"
  3. style = " bophara : 20 %; " ></div>
  4. </ div>

Animated

E nka mohlala o nang le mela 'me oa e phelisa (ha ho IE).

  1. <div class = "tsoelopele-tsoelopele
  2. e sebetsang" >
  3. <div class = "bar"
  4. style = " bophara : 40 %; " ></div>
  5. </ div>

Dikgetho le tshehetso ya sebadi

Mebala e eketsehileng

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

Mehala e methalo

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

Boitšoaro

Libaka tsa tsoelo-pele li sebelisa liphetoho tsa CSS3, kahoo haeba u fetola bophara ka matla ka javascript, e tla fetola boholo ba eona hantle.

Haeba u sebelisa .activesehlopha, mekoallo ea hau ea .progress-stripedtsoelo-pele e tla phelisa mela e tlohang ho le letšehali ho ea ho le letona.

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.

Opera le IE ha li tšehetse lipopae ka nako ena.

Liliba

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

Bona, ke ka sedibeng!
  1. <div class = "hantle" >
  2. ...
  3. </ div>

Koala letšoao

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

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

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

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