Dikarolo

Dikarolo tše dintši tšeo di ka dirišwago gape di agilwe ka gare ga Bootstrap go nea go sepelasepela, ditemošo, di-popovers le tše dingwe tše dintši.

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:

  1. <div sehlopha = "btn-sehlopha" >
  2. < sehlopha sa konopo = "btn" > 1 </konopo>
  3. < sehlopha sa konopo = "btn" > 2 </konopo>
  4. < sehlopha sa konopo = "btn" > 3 </konopo>
  5. </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.

  1. <div sehlopha = "btn-bar ya didirišwa" >
  2. <div sehlopha = "btn-sehlopha" >
  3. ...
  4. </div> e
  5. </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.

Dithepo tša go theoga tša konope

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.

  1. <div sehlopha = "btn-sehlopha" >
  2. <a class = "btn dropdown-toggle" ya data-toggle = "go theoga" href = "#" >
  3. Kgato
  4. <span sehlopha = "caret" </span>
  5. </a>
  6. <ul sehlopha = "thepo ya go theoga" >
  7. <!-- dikgokagano tša thepo ya go theoga -->
  8. </ul>
  9. </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.


Arola konopo dropdowns

Kakaretšo le mehlala

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

  1. <div sehlopha = "btn-sehlopha" >
  2. ...
  3. <ul sehlopha = "dropdown-menu hula-tokelo" >
  4. <!-- dikgokagano tša thepo ya go theoga -->
  5. </ul>
  6. </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.

  1. <div sehlopha = "btn-sehlopha" >
  2. < sehlopha sa konopo = "btn" > Tiro </konopo>
  3. < sehlopha sa konopo = "btn dropdown-toggle" ya data-toggle = "dropdown" >
  4. <span sehlopha = "caret" </span>
  5. </konope>
  6. <ul sehlopha = "thepo ya go theoga" >
  7. <!-- dikgokagano tša thepo ya go theoga -->
  8. </ul>
  9. </div> e

Dimenu tša go theoga

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.

  1. <div sehlopha = "btn-sehlopha dropup" >
  2. < sehlopha sa konopo = "btn" > Dropup </konopo>
  3. < sehlopha sa konopo = "btn dropdown-toggle" ya data-toggle = "dropdown" >
  4. <span sehlopha = "caret" </span>
  5. </konope>
  6. <ul sehlopha = "thepo ya go theoga" >
  7. <!-- dikgokagano tša thepo ya go theoga -->
  8. </ul>
  9. </div> e

Maqephe a matlakala a di-multicon

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

  1. <div sehlopha = "pagination" >
  2. <ul>
  3. <li><a href = "#" > Pele </a></li>
  4. <li sehlopha = "mafolofolo" >
  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> e

Pager Bakeng sa dikgokagano tša ka pela tša peleng le tše di latelago

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.

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

Dikgokagano tše di logaganywago

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

  1. <ul sehlopha = "pager" >
  2. <li sehlopha = "pele" >
  3. <a href = "#" > & l rr; Ba bagolo </a>
  4. </li>
  5. <li sehlopha = "se latelang" >
  6. <a href = "#" > E ntjha → </a>
  7. </li>
  8. </ul>
Dileibole Go swaya
Hlokomologa <span class="label">Default</span>
Katlego <span class="label label-success">Success</span>
Temošo <span class="label label-warning">Warning</span>
Bohlokwa <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>

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

Leina Mohlala Go swaya
Hlokomologa 1. 1. <span class="badge">1</span>
Katlego 2. <span class="badge badge-success">2</span>
Temošo 4. <span class="badge badge-warning">4</span>
Bohlokwa 6. <span class="badge badge-important">6</span>
Info 8. <span class="badge badge-info">8</span>
Inverse 10. <span class="badge badge-inverse">10</span>

Yuniti ya mogale

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:

  1. <div sehlopha = "mohale-yuniti" >
  2. <h1> Hlogo ya </h1>
  3. <p> Mothaladi wa go swaya </p>
  4. <p>
  5. <a sehlopha = "btn btn-primary btn-kgolo" >
  6. Ithute ka botlalo
  7. </a>
  8. </p>
  9. </div> e

Thobela, lefase!

Ye ke yuniti ye bonolo ya mogale, karolo ye bonolo ya mokgwa wa jumbotron ya go bitša tlhokomelo ye e oketšegilego go dikagare tše di bontšhitšwego goba tshedimošo.

Ithute ka botlalo

Hlogo ya letlakala

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

  1. <div sehlopha = "letlakala-hlooho" >
  2. <h1> Mohlala wa hlogo ya letlakala </h1>
  3. </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 go bobebe e bile go otlologile. Mona ke go lebelela peakanyo ya go se fetoge ya diswantšho tše di kgokagantšwego :

  1. <ul sehlopha = "diswantšho tše dinyenyane" >
  2. <li sehlopha = "span3" >
  3. <a href = "#" sehlopha = "seswantšho se senyenyane" >
  4. <img src = "https://sebaka.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Bakeng sa diteng tša HTML tša tlwaelo ka go diswantšho tše nnyane, go swaya go fetoga go se nene. Go dumelela diteng tša maemo a thibelo kae goba kae, re fapantšha the <a>ka go <div>rata bjalo:

  1. <ul sehlopha = "diswantšho tše dinyenyane" >
  2. <li sehlopha = "span3" >
  3. <div sehlopha = "seswantšho se senyenyane" >
  4. <img src = "https://sebaka.it/260x180" alt = "" >
  5. <h5> Leina la seswantšho se senyenyane </h5>
  6. <p> Tlhaloso ya seswantšho se senyenyane gona mo... </p>
  7. </div> e
  8. </li>
  9. ...
  10. </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.

Di-default tše bobebe

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.

Temošo! Best check yo self, ga o bonagale gabotse kudu.
  1. <div sehlopha = "temošo" >
  2. < sehlopha sa konopo = "tswalela" data-dismiss = "temošo" > × </konope>
  3. <strong> Temošo! </strong> Best check yo self, ga o bonagale gabotse kudu.
  4. </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 <button>elemente yeo e nago le seka sa datha, seo re kgethilego go se dira bakeng sa ditokomane tša rena. Ge o šomiša <button>, o swanetše go akaretša type="button"goba diforomo tša gago di ka se romele.

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.

Temošo!

Best check yo self, ga o bonagale gabotse kudu. Nulla vitae elit libero, e lego pharetra e lego augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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

Dikgetho tše dingwe tša seemo Oketša diklase tša boikhethelo go fetoša tlhalošo ya temošo

Phošo goba kotsi

Ao snap! Fetoša dilo tše mmalwa godimo gomme o leke go romela gape.
  1. <div sehlopha = "temošo temošo-phošo" >
  2. ...
  3. </div> e

Katlego

O šomile gabotse! O bala molaetša wo o bohlokwa wa temošo ka katlego.
  1. <div sehlopha = "temošo temošo-katlego" >
  2. ...
  3. </div> e

Tshedimošo

Dihlogo godimo! Tlhokomedišo ye e nyaka tlhokomelo ya gago, eupša ga se ya bohlokwa kudu.
  1. <div sehlopha = "temošo temošo-tshedimošo" >
  2. ...
  3. </div> e

Mehlala le go swaya

Ya motheo

Default tsoelo-pele bareng le paatsepama gradient.

  1. <div sehlopha = "tšwelopele" >
  2. <div sehlopha = "bareng".
  3. setaele = " bophara : 60 %; " ></div>
  4. </div> e

E na le methalo

E šomiša gradient go hlola phello ya metsero (ga go na IE).

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

E di phelago

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

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

Dikgetho le thekgo ya sephephediši

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.

Bona, ke ka sedibeng!
  1. <div sehlopha = "hantle" >
  2. ...
  3. </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.

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

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