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.
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 di ka fetošwa gomme di šoma maemong a mmalwa ka sehlopha se se nepagetšego. .disabled
bakeng sa dikgokagano tšeo di sa kgotlego le .active
bakeng sa letlakala la bjale.
Oketša e nngwe ya diklase tše pedi tša boikhethelo go fetoša go logaganya ga dikgokagano tša matlakala: .pagination-centered
le .pagination-right
.
Karolo ya go beakanya matlakala ya go se fetoge e a fetofetoga gomme e šoma ka palo ya diphetogo.
E phuthetšwe ka <div>
, go beakanya matlakala e fo ba <ul>
.
- <div sehlopha = "pagination" >
- <ul>
- <li><a href = "#" > Pele </a></li>
- <li sehlopha = "mafolofolo" >
- <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 = "#" > E latelang </a></li>
- </ul>
- </div> e
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.
Dikgokagano tša Pager gape di šomiša .disabled
sehlopha sa kakaretšo go tšwa go letlakala.
Ka default, pager e tsepamisa dikgokelo.
- <ul sehlopha = "pager" >
- <li>
- <a href = "#" > E fetileng </a>
- </li>
- <li>
- <a href = "#" > E latelang </a>
- </li>
- </ul>
Ka go fapana le moo, o ka logaganya kgokagano ye nngwe le ye nngwe go mahlakoreng:
- <ul sehlopha = "pager" >
- <li sehlopha = "pele" >
- <a href = "#" > & l rr; Ba bagolo </a>
- </li>
- <li sehlopha = "se latelang" >
- <a href = "#" > E ntjha → </a>
- </li>
- </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> |
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.
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> |
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.
Phuthelela diteng tša gago ka div
like so:
- <div sehlopha = "mohale-yuniti" >
- <h1> Hlogo ya </h1>
- <p> Mothaladi wa go swaya </p>
- <p>
- <a sehlopha = "btn btn-primary btn-kgolo" >
- Ithute ka botlalo
- </a>
- </p>
- </div> e
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.
Kgapetla ye bonolo ya h1
go 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).
- <div sehlopha = "letlakala-hlooho" >
- <h1> Mohlala wa hlogo ya letlakala </h1>
- </div> e
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.
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.
Diswantšho tše nnyane (tšeo pele di bego .media-grid
di 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 seswantšho se senyenyane go bonolo—a ul
ka palo le ge e le efe ya li
dielemente 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.
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 .span2
goba .span3
—bakeng sa taolo ya ditekanyo tša diswantšho tše nnyane.
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 :
- <ul sehlopha = "diswantšho tše dinyenyane" >
- <li sehlopha = "span3" >
- <a href = "#" sehlopha = "seswantšho se senyenyane" >
- <img src = "https://sebaka.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </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:
- <ul sehlopha = "diswantšho tše dinyenyane" >
- <li sehlopha = "span3" >
- <div sehlopha = "seswantšho se senyenyane" >
- <img src = "https://sebaka.it/260x180" alt = "" >
- <h5> Leina la seswantšho se senyenyane </h5>
- <p> Tlhaloso ya seswantšho se senyenyane gona mo... </p>
- </div> e
- </li>
- ...
- </ul>
Ka Bootstrap 2, re nolofaditše sehlopha sa motheo: .alert
go 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>
.
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
.
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.
Phuthelela molaetša wa gago le leswao la go tswalela la boikhethelo ka gare ga div ka sehlopha se bonolo.
- <div sehlopha = "temošo" >
- < sehlopha sa konopo = "tswalela" data-dismiss = "temošo" > × </konope>
- <strong> Temošo! </strong> Best check yo self, ga o bonagale gabotse kudu.
- </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-block
bakeng sa ditaolo tše dingwe tša go tlatša le tša sengwalwa le .alert-heading
bakeng sa hlogo ya go swana.
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.
- <div sehlopha = "temošo temošo-thibelo" >
- <a sehlopha = "tswalela" data-dismiss = "temošo" href = "#" > × </a>
- <h4 class = "hlogo ya temošo" > Temošo! </h4>
- Best check yo self, ga o...
- </div> e
- <div sehlopha = "temošo temošo-phošo" >
- ...
- </div> e
- <div sehlopha = "temošo temošo-katlego" >
- ...
- </div> e
- <div sehlopha = "temošo temošo-tshedimošo" >
- ...
- </div> e
Default tsoelo-pele bareng le paatsepama gradient.
- <div sehlopha = "tšwelopele" >
- <div sehlopha = "bareng".
- setaele = " bophara : 60 %; " ></div>
- </div> e
E šomiša gradient go hlola phello ya metsero (ga go na IE).
- <div class = "tšwelopele ya tšwelopele-methalo" >
- <div sehlopha = "bareng".
- setaele = " bophara : 20 %; " ></div>
- </div> e
O tšea mohlala wa metsero gomme o o phediša (ga go na IE).
- <div class = "tšwelopele ya tšwelopele-methalo ."
- mafolofolo" >
- <div sehlopha = "bareng".
- setaele = " bophara : 40 %; " ></div>
- </div> e
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.
Go swana le mebala e tiilego, re na le dithipa tša tšwelopele tša methalo e fapa-fapanego.
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 .active
klase, .progress-striped
dibara tša gago tša tšwelopele di tla dira gore methalo e phele go tloga go le letshadi go ya go le letona.
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.
Šomiša sediba bjalo ka khuetšo ye bonolo go elemente go e fa khuetšo ya go tsenya.
- <div sehlopha = "hantle" >
- ...
- </div> e
Šomiša leswao la go tswalela la kakaretšo bakeng sa go nyatša diteng go swana le di-modal le ditemošo.
- < 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.
- <a sehlopha = "tswalela" href = "#" > &nako; </a>