Lebanta la Bootstrap

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 dikonope Kopanya dikonope bakeng sa mošomo wo montši wa go swana le bara ya didirišwa

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:

Nngele Bogareng Nepagetše 
  1. <div sehlopha = "btn-sehlopha" > 
  2.   <a sehlopha = "btn" href = "#" > 1 </a>  
  3.   <a sehlopha = "btn" href = "#" > 2 </a>  
  4.   <a sehlopha = "btn" href = "#" > 3 </a>  
  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. 1. 2. 3. 4.
5. 5. 6. 7. 7.
8. 
  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 » .

Dihlogo godimo

CSS bakeng sa dihlopha konopo e ka faele e arohaneng, konopo-groups.less.

Dikonope ta go theoga Dimenu ta go theoga ta seemo te di agilwego godimo ga dihlopha ta dikonope

Dithepo tša go theoga tša konope

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

Kgato
Kgato
Kotsi
Katlego
Info

Dihlogo godimo! Dithepo tša konope di nyaka gore polaka ya go theoga ya Bootstrap e šome.

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

Arola konopo dropdowns

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.

Kgato
Kgato
Kotsi
Katlego
Info

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.   <a sehlopha = "btn" href = "#" > Tiro </a>  
  3.   <a class = "btn dropdown-toggle" ya data-toggle = "go theoga" href = "#" >   
  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

Go dira matlakala Dikgetho tše pedi tša go dira matlakala ka gare ga diteng

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

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 tša ka gare ga mothaladi Leina le go hlaloša sengwalwa

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>

Dikarolo tša go thaepa Hlogo ya letlakala le yuniti ya mogale ya go arola diteng

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 appropratiely sekgoba ntle le go arola dikarolo tša 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-haeder" > 
  2.   <h1> Mohlala wa hlogo ya letlakala </h1>
  3. </div> e

Diswantšho tše nnyane Digridi tša diswantšho, dibidio, sengwalwa, le tše dingwe

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.

Ditemošo Ditaele tša katlego, temošo, le melaetša ya phošo

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.   <a sehlopha = "tswalela" data-dismiss = "temošo" > × </a>  
  3.   <strong> Temošo! </strong> Best check yo self, ga o bonagale gabotse kudu.
  4. </div> e

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" > × </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

Dibara tša tšwelopele Bakeng sa go laetša, go lebiša lefsa, goba maemo a tiro

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 seabe sa methalo.

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

E di phelago

O tšea mohlala wa metsero gomme o o phediša.

  1. <div class = "tšwelopele ya tšwelopele-kotsi." 
  2.      tšwelopele-striped 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 diriša tše dingwe tša maina a sehlopha a swanago le dikonope le ditemošo bakeng sa setaele se se swanago.

  • .progress-info
  • .progress-success
  • .progress-danger

Ka go fapana le moo, o ka tlwaetša difaele tša LESS gomme wa kgokološa mebala ya gago le bogolo.

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-8 goba diphetolelo tša kgale tša Firefox.

Opera ga e thekge ditshwantšho tša go phela ka nako ye.

Mehutahuta Didiba, dipetšhe, le leswao la kgauswi

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. <a sehlopha = "tswalela" > × </a>