Di-glyph tšeo di lego gona

E akaretša di-glyph tša go feta tše 250 ka sebopego sa fonte go tšwa go sete ya Glyphicon Halflings. Glyphicons Halflings ka tlwaelo ga di hwetšagale mahala, eupša mmopi wa tšona o di dirile gore di hwetšagale bakeng sa Bootstrap mahala. Bjalo ka tebogo, re kgopela fela gore o akaretše kgokagano ya go boela morago go Glyphicons neng le neng ge go kgonega.

glyphicon glyphicon-naledi ya dinaledi
glyphicon glyphicon-go tlaleletsa ka
glyphicon glyphicon-ero ya go swana le yona
glyphicon glyphicon-eur ya go swana le yona
glyphicon glyphicon-go tloša
glyphicon glyphicon-leru la leru
glyphicon glyphicon-enfelopo
glyphicon glyphicon-phensele
glyphicon glyphicon-khalase ya go swana le yona
glyphicon glyphicon-mmino wa mmino
glyphicon glyphicon-batla
glyphicon glyphicon-pelo ya di-glyphicon
glyphicon naledi ya glyphicon
glyphicon glyphicon-naledi-e se nang letho
glyphicon mosebedisi wa glyphicon
glyphicon glyphicon-filimi ya go swana le yona
glyphicon glyphicon-go th-kgolo
glyphicon glyphicon-th ya go swana le yona
glyphicon glyphicon-lenane la go th
glyphicon glyphicon-ok ya go swana le yona
glyphicon glyphicon-tlosa
glyphicon glyphicon-go godiša-ka go godiša
glyphicon glyphicon-go godiša-go fokotša
glyphicon glyphicon-e tima
glyphicon glyphicon-letshwao la letshwao
glyphicon glyphicon-cog ya go swana le yona
glyphicon glyphicon-ditlakala
glyphicon glyphicon-gae
glyphicon faele ya glyphicon
glyphicon glyphicon-nako
glyphicon glyphicon-tsela ya go swana le yona
glyphicon glyphicon-tlarollo-alt
glyphicon glyphicon-tlakala
glyphicon glyphicon-ho kenya
glyphicon glyphicon-lebokose la ho kena
glyphicon glyphicon-bapala-sedikadikwe
glyphicon glyphicon-pheta
glyphicon glyphicon-e hlabolla
glyphicon glyphicon-lenaneo-alt
glyphicon glyphicon-senotlolo
glyphicon folaga ya glyphicon
glyphicon di-headphone tša glyphicon
glyphicon glyphicon-bophahamo ba modumo-tima
glyphicon glyphicon-bophahamo ba modumo-fatše
glyphicon glyphicon-bophahamo ba modumo-hodimo
glyphicon glyphicon-qrkhoutu ya go ngwala
glyphicon glyphicon-khoutu ya bareng
glyphicon leswao la glyphicon
glyphicon dithegi tša glyphicon
glyphicon puku ya glyphicon
glyphicon glyphicon-letshwao la buka
glyphicon glyphicon-kgatišo
glyphicon glyphicon-khamera ya di-glyphicon
glyphicon glyphicon-fonte ya go swana le yona
glyphicon glyphicon-e sebete
glyphicon glyphicon-sekametseng
glyphicon glyphicon-sengwalwa-bophagamo
glyphicon glyphicon-sengwalwa-bophara
glyphicon glyphicon-lolaganya-ka go le letshadi
glyphicon glyphicon-lolaganya-bohareng
glyphicon glyphicon-lolaganya-le letona
glyphicon glyphicon-lolaganya-lokafatsa
glyphicon glyphicon-lenane
glyphicon glyphicon-indent-ka go le letshadi
glyphicon glyphicon-indent-ka ho le letona
glyphicon glyphicon-sefahleho-nako-bidio
glyphicon glyphicon-seswantšho
glyphicon glyphicon-setshwao-mapa
glyphicon glyphicon-e beakanya
glyphicon glyphicon-tint ya go swana le yona
glyphicon glyphicon-rulaganya
glyphicon glyphicon-arolelana
glyphicon glyphicon-hlahloba
glyphicon glyphicon-šutha
glyphicon glyphicon-kgato-morao
glyphicon glyphicon-ka potlako-morao
glyphicon glyphicon-go boela morago
glyphicon glyphicon-bapala
glyphicon glyphicon-go khutša
glyphicon glyphicon-ema
glyphicon glyphicon-pele
glyphicon glyphicon-ka potlako-pele
glyphicon glyphicon-kgato-pele
glyphicon glyphicon-e ntšha
glyphicon glyphicon-chevron-ka go le letshadi
glyphicon glyphicon-chevron-ka ho le letona
glyphicon glyphicon-go tlaleletsa ka-letshwao
glyphicon glyphicon-go tloša-leswao
glyphicon glyphicon-tlosa-letšoao
glyphicon glyphicon-ok-letšoao
glyphicon glyphicon-potšišo-leswao
glyphicon glyphicon-tlhahisoleseding-letshwao
glyphicon glyphicon-setšoantšo sa skrine
glyphicon glyphicon-tlosa-sedikadikwe
glyphicon glyphicon-ok-sedikadikwe
glyphicon glyphicon-thibelo-sedikadikwe
glyphicon glyphicon-motsu-ka go le letshadi
glyphicon glyphicon-motsu-le letona
glyphicon glyphicon-motsu-hodimo
glyphicon glyphicon-motsu-fatše
glyphicon glyphicon-arolelana-alt
glyphicon glyphicon-fetola boholo-e tletseng
glyphicon glyphicon-fetola bogolo-e nnyane
glyphicon glyphicon-letshwao la go goeletša
glyphicon glyphicon-mpho ya di-glyphicon
glyphicon glyphicon-letlakala
glyphicon glyphicon-mollo
glyphicon glyphicon-e bulehileng leihlo
glyphicon glyphicon-leihlo-kgauswi
glyphicon glyphicon-letshwao la temošo
glyphicon glyphicon-sefofane
glyphicon glyphicon-almanaka
glyphicon glyphicon-ya go se kgethe
glyphicon glyphicon-tshwaelo ya go tshwaela
glyphicon glyphicon-makenete ya go swana le yona
glyphicon glyphicon-chevron-godimo ga dilo
glyphicon glyphicon-chevron-fatše
glyphicon glyphicon-go boela morago
glyphicon glyphicon-koloyana ya mabenkele
glyphicon glyphicon-foldara-koala
glyphicon glyphicon-foldara-e bulehileng
glyphicon glyphicon-fetola bogolo-e emeng
glyphicon glyphicon-fetola boholo-e rapameng
glyphicon glyphicon-hdd ya go swana le yona
glyphicon glyphicon-lenaka la poo
glyphicon glyphicon-tšepe
glyphicon glyphicon-setifikeiti
glyphicon glyphicon-monwana o mogolo-godimo
glyphicon glyphicon-monwana o mogolo-fase
glyphicon glyphicon-letsoho-le letona
glyphicon glyphicon-letsoho-le letšehali
glyphicon glyphicon-letsoho-hodimo
glyphicon glyphicon-letsoho-fatše
glyphicon glyphicon-sedikadikwe-motsu-tokelo ya
glyphicon glyphicon-sediko-motsu-le letšehali
glyphicon glyphicon-sedikadikwe-motsu-hodimo
glyphicon glyphicon-sediko-motsu-fatše
glyphicon glyphicon-lefatše
glyphicon glyphicon-senotlolo sa senotlolo
glyphicon glyphicon-mesebetsi
glyphicon glyphicon-sefa
glyphicon glyphicon-mokotla wa dibuka
glyphicon glyphicon-skrine se se tletšego
glyphicon glyphicon-dashboard ya di-glyphicon
glyphicon glyphicon-sekgomaretši sa pampiri
glyphicon glyphicon-pelo-e se nang letho
glyphicon glyphicon-kgokaganyo
glyphicon glyphicon-mohala
glyphicon glyphicon-kgorometša
glyphicon glyphicon-usd ya go swana le yona
glyphicon glyphicon-gbp ya go swana le yona
glyphicon glyphicon-mofuta
glyphicon glyphicon-hlopha-ka-alefabete
glyphicon glyphicon-hlopha-ka-alefabete-alt
glyphicon glyphicon-hlopha-ka-taelo
glyphicon glyphicon-hlopha-ka-taelo-alt
glyphicon glyphicon-hlopha-ka-dika
glyphicon glyphicon-hlopha-ka-dika-alt
glyphicon glyphicon-e sa hlahlobja
glyphicon glyphicon-katolosa
glyphicon glyphicon-go phuhlama-fase
glyphicon glyphicon-go phuhlama-godimo
glyphicon glyphicon-go tsena
glyphicon glyphicon-khanya
glyphicon glyphicon-go tšwa go tšwa
glyphicon glyphicon-lefasetere-le lecha
glyphicon glyphicon-rekhoto
glyphicon glyphicon-boloka
glyphicon glyphicon-e bulehileng
glyphicon e bolokilwe ka glyphicon
glyphicon glyphicon-go tsenya ka ntle
glyphicon glyphicon-romelantle
glyphicon glyphicon-romela
glyphicon glyphicon-flopi-diske
glyphicon glyphicon-e bolokilwe ka flopi
glyphicon glyphicon-floppy-tlosa
glyphicon glyphicon-flopi-boloka
glyphicon glyphicon-flopi-e bulehileng
glyphicon glyphicon-karata ya mokitlane
glyphicon glyphicon-phetiso
glyphicon glyphicon-didirišwa tša go swara dijo
glyphicon glyphicon-hlooho ea sehlooho
glyphicon e gateletšwego ka glyphicon
glyphicon glyphicon-sekwahelo sa tsebe
glyphicon glyphicon-mohala-alt
glyphicon glyphicon-tora ya go swana le yona
glyphicon glyphicon-dipalopalo
glyphicon glyphicon-sd-bidio ya go swana le yona
glyphicon glyphicon-bidio ya hd
glyphicon glyphicon-ditlhaloso tša ka tlase
glyphicon glyphicon-modumo-stereo
glyphicon glyphicon-modumo-dolby
glyphicon glyphicon-modumo-5-1
glyphicon glyphicon-modumo-6-1
glyphicon glyphicon-modumo-7-1
glyphicon glyphicon-letshwao la tokelo ya ngwalollo
glyphicon glyphicon-letshwao la-ngwadiso
glyphicon glyphicon-leru-go taonelouta
glyphicon glyphicon-leru-ho kenya
glyphicon glyphicon-sefate-sefate sa khonifer
glyphicon glyphicon-sehlare-se se bolaang matlakala
glyphicon glyphicon-cd ya go swana le yona
glyphicon glyphicon-boloka-faele
glyphicon glyphicon-faele e bulehileng
glyphicon glyphicon-maemo a godimo
glyphicon glyphicon-khopi ya di-glyphicon
glyphicon glyphicon-sekhomaretsi
glyphicon glyphicon-temošo
glyphicon glyphicon-se-equalizer
glyphicon glyphicon-kgosi ya di-glyphicon
glyphicon glyphicon-mofumahali
glyphicon glyphicon-pawn ya go swana le yona
glyphicon glyphicon-mopišopo
glyphicon glyphicon-knight ya go ba le di-knight
glyphicon glyphicon-lesea-formula
glyphicon glyphicon-tente ya di-glyphicon
glyphicon glyphicon-boto e ntšo
glyphicon glyphicon-bethe ya di-glyphicon
glyphicon glyphicon-apole ya go swana le yona
glyphicon glyphicon-e phumola
glyphicon glyphicon-sešupanako sa iri
glyphicon lebone la glyphicon
glyphicon glyphicon-e pheta-pheta
glyphicon glyphicon-banka ya kolobe
glyphicon dikere tša glyphicon
glyphicon glyphicon-bitcoin ya go swana le yona
glyphicon glyphicon-btc ya go swana le yona
glyphicon glyphicon-xbt ya go swana le yona
glyphicon glyphicon-yen ya go swana le yona
glyphicon glyphicon-jpy ya go swana le yona
glyphicon glyphicon-ruble ya go swana le yona
glyphicon glyphicon-go itlotša
glyphicon tekanyo ya glyphicon
glyphicon glyphicon-leqhoa-lolly
glyphicon glyphicon-leqhoa-lolly-latsoa
glyphicon glyphicon-thuto
glyphicon glyphicon-kgetho-e rapameng
glyphicon glyphicon-kgetho-e emeng
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-lefasetere
glyphicon glyphicon-oli ya go swana le yona
glyphicon glyphicon-mabele
glyphicon glyphicon-digalase tša letšatši
glyphicon glyphicon-sengwalwa-bogolo
glyphicon glyphicon-sengwalwa-mmala
glyphicon glyphicon-sengwalwa-morao
glyphicon glyphicon-ntho-lolaganya-godimo
glyphicon glyphicon-ntho-lolaganya-tlase
glyphicon glyphicon-ntho-lolaganya-e rapameng
glyphicon glyphicon-ntho-lolaganya-letsohong le letšehali
glyphicon glyphicon-ntho-lolaganya-e emeng
glyphicon glyphicon-ntho-lolaganya-tokelo
glyphicon glyphicon-khutlotharo-tokelo ya
glyphicon glyphicon-khutlotharo-le letšehali
glyphicon glyphicon-khutlotharo-bottom
glyphicon glyphicon-khutlotharo-ka holimo
glyphicon glyphicon-khosola ya go tswalela
glyphicon glyphicon-mongwalo wa godimo
glyphicon glyphicon-sengwalwa sa ka tlase
glyphicon glyphicon-menu-letsohong le letšehali
glyphicon glyphicon-menu-le letona
glyphicon glyphicon-menu-fatše
glyphicon glyphicon-menu-godimo

Tsela ya go diriša

Ka mabaka a tshebetso, diaekhone tsohle di hloka sehlopha sa motheo le sehlopha sa matšoao a motho ka mong. Go diriša, bea khoutu e latelago mo e nyakilego go ba kae le kae. Kgonthiša gore o tlogela sekgoba magareng ga leswao le sengwalwa bakeng sa go tlatša gabotse.

O se ke wa hlakanya le dikarolo tše dingwe

Diklase tša maswao di ka se kopanywe thwii le dikarolo tše dingwe. Ga se tša swanela go šomišwa gotee le diklase tše dingwe godimo ga elemente ye e swanago. Go e na le moo, oketša sehlaga <span>gomme o diriše diklase tša leswao go <span>.

Feela bakeng sa tshebediso ya ka elements lefeela

Diklase ta maswao di swanete go omiwa fela go dielemente te di se nago diteng ta sengwalwa ebile di se na dielemente ta ngwana.

Go fetola lefelo la fonte ya leswao

Bootstrap e tšea gore difaele tša fonte ya leswao di tla hwetšwa ka gare ga ../fonts/tšhupetšo, ge di bapetšwa le difaele tša CSS tše di kgobokeditšwego. Go šuthiša goba go reela difaele tšeo tša fonte leina lefsa go bolela go mpshafatša CSS ka e nngwe ya ditsela tše tharo:

Fetoša @icon-font-pathle/goba @icon-font-namediphetogo ka go difaele tša mohlodi tše nnyane.
Šomiša kgetho ya di-URL tša go lekana yeo e filwego ke mokgoboketši wa Ka tlase.
Fetoša url()ditsela ka go CSS ye e kgobokeditšwego.

Diriša kgetho efe goba efe yeo e swanetšego kudu peakanyo ya gago e itšego ya tlhabollo.

Diaekhone tše di fihlelelwago

Diphetolelo tša sebjalebjale tša theknolotši ya go thuša di tla tsebiša dikagare tšeo di tšweleditšwego ke CSS, gammogo le ditlhaka tše itšego tša Unicode. Go efoga ditšweletšwa tše di sa rerelwago le tše di gakantšhago ka go babadi ba skrine (kudu ge diaekhone di šomišwa fela bakeng sa go kgabiša), re di uta ka aria-hidden="true"seka.

Ge o šomiša leswao go fetišetša tlhalošo (go e na le fela bjalo ka elemente ya go kgabiša), netefatša gore tlhalošo ye e fetišetšwa gape go theknolotši ya go thuša – go fa mohlala, akaretša diteng tša tlaleletšo, tšeo di utilwego ka pono le .sr-onlysehlopha.

Ge o hlama ditaolo tšeo di se nago sengwalwa se sengwe (go swana le <button>seo se nago le leswao fela), o swanetše go fela o fa diteng tše dingwe go hlaola morero wa taolo, gore e be le tlhaologanyo go badiriši ba theknolotši ya go thuša. Tabeng ye, o ka tlaleletša ka aria-labelseka godimo ga taolo ka boyona.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Mehlala

Di šomiše ka go dikonope, dihlopha tša dikonope tša bara ya didirišwa, go sepelasepela, goba ditseno tša foromo tše di emetšwego pele.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

Letshwao leo le šomišwago ka go temošo go fetišetša gore ke molaetša wa phošo, ka .sr-onlysengwalwa sa tlaleletšo go fetišetša tšhupetšo ye go badiriši ba theknolotši ya go thuša.

Tsenya aterese ya imeile ye e šomago

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

Thepo ya go fetošwa, ya diteng ya go bontšha mananeo a dikgokagano. E dirilwe gore e be ya tirišano ka polaka ya JavaScript ya go theoga .

Mohlala

Phuthelela sešušumeletši sa go theoga le thepo ya go theoga ka gare ga .dropdown, goba elemente ye nngwe yeo e tsebagatšago position: relative;. Ebe o eketsa HTML ya menu ya.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Dimenu tša go theoga di ka fetošwa go katološa go ya godimo (go e na le go ya fase) ka go tlaleletša .dropupgo motswadi.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Go logaganya

Ka go ikemela, thepo ya go theoga e bewa ka go iketla 100% go tšwa godimo le go bapa le lehlakore la nngele la motswadi wa yona. Oketša .dropdown-menu-rightgo a go ya .dropdown-menugo le letona logaganya thepo ya go theoga.

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

Dihlogo tša dihlogo

Oketša hlogo go leina dikarolo tša ditiro ka go thepo efe goba efe ya go theoga.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Sekaroganyo

Oketša karoganyo go letoto la dikgokagano tše di aroganego ka go thepo ya go theoga.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Diaetheme tša menu tše di golofetšego

Oketša .disabledgo a <li>ka go theoga go šitiša kgokagano.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Hlopha letoto la dikonope mmogo mo moleng o tee le sehlopha sa dikonope. Oketša ka boikhethelo JavaScript radio le checkbox setaele boitšoaro le rona dikonopo plugin .

Tooltips & popovers ka dihlopha konopo hloka setting e khethehileng

Ge o diriša ditšhišinyo tša didirišwa goba di-popover go dielemente ka gare ga .btn-group, o tla swanelwa ke go laetša kgetho ya container: 'body'go efoga ditlamorago tše di sa nyakegego (go swana le elemente yeo e golago ka bophara le/goba go lahlegelwa ke dikhutlo tša yona tše di kgokologilego ge ntlha ya didirišwa goba popover e hlohleletšwa).

Netefatša gore e nepagetše `role`gomme o nee leina

Gore theknolotši ya go thuša – go swana le dibadi tša skrine – di fetišetše gore lelokelelo la dikonope le hlophilwe, roleseka sa maleba se swanetše go fiwa. Bakeng sa dihlopha tša dikonope, se e tla ba role="group", mola dibara tša didirišwa di swanetše go ba le role="toolbar".

Mokgekolo o tee ke dihlopha tšeo di nago le taolo e tee fela (mohlala dihlopha tša konope ye e lokafaditšwego ka <button>dielemente) goba go theoga.

Go tlaleletša, dihlopha le dibara tša didirišwa di swanetše go fiwa leina leo le lego molaleng, ka ge bontši bja theknolotši ya go thuša ka tsela ye nngwe e ka se di tsebiše, go sa šetšwe go ba gona ga roleseka se se nepagetšego. Mehlaleng yeo e filwego mo, re šomiša aria-label, eupša mekgwa ye mengwe ya go swana le yeo le aria-labelledbyyona e ka šomišwago.

Mohlala wa motheo

Phuthelela lelokelelo la dikonope ka .btnka .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Kopanya disete tsa <div class="btn-group">ka a <div class="btn-toolbar">bakeng sa dikarolo rarahaneng haholoanyane.

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

Go lekanyetša bogolo

Go e na le go diriša diklase tša go lekanyetša bogolo bja konope go konope e nngwe le e nngwe sehlopheng, e no oketša .btn-group-*go e nngwe le e nngwe .btn-group, go akaretša le ge o bea dihlaga tša dihlopha tše dintši.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

Go dira dihlaga

Bea a .btn-groupka gare ga ye nngwe .btn-groupge o nyaka dimenu tša go theoga di hlakantšwe le lelokelelo la dikonope.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Phapano ya go ema thwii

Dira gore sete ya dikonope e bonagale e kgobokeditšwe ka go otlologa go e na le go rapalala. Di-drolodown tša konope ya go aroganya ga di thekgwe mo.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

Dihlopha tša konope tše di lokafaditšwego

Dira gore sehlopha sa dikonope se otlolle ka bogolo bjo bo lekanago go akaretša bophara ka moka bja motswadi wa sona. Gape e šoma ka di-dropdown tša konope ka gare ga sehlopha sa konope.

Go swara mellwane

Ka lebaka la HTML le CSS ye e itšego yeo e šomišwago go lokafatša dikonope (e lego display: table-cell), mellwane magareng ga tšona e a oketšega gabedi. Ka dihlopha tša konope tša ka mehla, margin-left: -1pxe šomišwa go kgoboketša mellwane go e na le go e tloša. Lega go le bjalo, marginga e šome ka display: table-cell. Ka lebaka leo, go ya ka diphetogo tša gago go Bootstrap, o ka rata go tloša goba go tsenya mebala gape mellwaneng.

IE8 le mellwane

Internet Explorer 8 ga e tšweletše mellwane go dikonope sehlopheng sa dikonope seo se lokafaditšwego, e ka ba e bulegile <a>goba e le <button>dielemente. Go dikologa seo, phuthela konotswana e nngwe le e nngwe ka e nngwe .btn-group.

Bona #12476 go hwetša tshedimošo ka botlalo.

Ka `<a>`dielemente

E no phuthela lelokelelo la .btns ka .btn-group.btn-group-justified.

Nngele Bogareng Nepagetše

Nngele Bogareng

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Dikgokagano tšeo di šomago bjalo ka dikonope

Ge e le gore <a>dielemente di šomišwa go šoma bjalo ka dikonope – go hlohleletša mošomo wa ka gare ga letlakala, go e na le go sepelasepela go tokumente ye nngwe goba karolo ka gare ga letlakala la bjale – di swanetše go fiwa gape role="button".

Ka `<button>`dielemente

Go šomiša dihlopha tša dikonope tše di lokafaditšwego ka <button>dielemente, o swanetše go phuthela konope ye nngwe le ye nngwe ka gare ga sehlopha sa konope . Bontši bja diphensele ga di diriše CSS ya rena gabotse bakeng sa go lokafatšwa go <button>dielemente, eupša ka ge re thekga di-dropdown tša dikonope, re ka šoma go dikologa seo.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

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

Go ithekga ka plugin

Dithepo tša konope di nyaka gore plugin ya go theoga e akaretšwe ka go phetolelo ya gago ya Bootstrap.

Di-drolodown tša konope e tee

Fetoša konope go ba toggle ya go theoga ka diphetogo tše dingwe tša motheo tša go swaya.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Arola konopo dropdowns

Ka mo go swanago, hlama dithepo tša konope ya go arogana ka diphetogo tša go swaya tše di swanago, fela ka konope ye e arogilego.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Go lekanyetša bogolo

Dikonope tša go theoga di šoma ka dikonope tša bogolo ka moka.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Phapano ya go theoga

Hlohleletša dimenu tša go theoga ka godimo ga dielemente ka go tlaleletša .dropupgo motswadi.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Katološa ditaolo tša foromo ka go oketša sengwalwa goba dikonope pele, ka morago, goba ka mahlakoreng ka bobedi a sengwalwa sefe goba sefe seo se theilwego godimo ga sengwalwa <input>. Šomiša .input-groupka .input-group-addongoba .input-group-btngo tlatša pele goba go tlaleletša dielemente go e tee .form-control.

Sengwalwa `<input>`s fela

Phema go šomiša <select>dielemente mo ka ge di ka se be le setaele ka botlalo ka go diphensele tša WebKit.

Phema go šomiša <textarea>dielemente mo ka ge rowsseka sa tšona se ka se hlompšhe maemong a mangwe.

Tooltips & popovers ka dihlopheng tsenyo hloka setting e khethehileng

Ge o diriša ditšhišinyo tša didirišwa goba di-popover go dielemente ka gare ga .input-group, o tla swanelwa ke go laetša kgetho ya container: 'body'go efoga ditlamorago tše di sa nyakegego (go swana le elemente yeo e golago ka bophara le/goba go lahlegelwa ke dikhutlo tša yona tše di kgokologilego ge ntlha ya didirišwa goba popover e hlohleletšwa).

O se ke wa hlakanya le dikarolo tše dingwe

O se ke wa hlakanya dihlopha tša foromo goba diklase tša dikholomo tša keriti thwii le dihlopha tša tsenyo. Go e na le moo, bea sehlopha sa tsenyo ka gare ga sehlopha sa foromo goba elemente ye e amanago le keriti.

Ka mehla oketša dileibole

Babadi ba skrine ba tla ba le bothata ka diforomo tša gago ge o sa akaretše leina la tsenyo ye nngwe le ye nngwe. Bakeng sa dihlopha tše tša ditseno, netefatša gore leina lefe goba lefe la tlaleletšo goba mošomo o fetišetšwa go theknolotši ya go thuša.

Thekniki ye e nepagetšego yeo e tlago šomišwa (dielemente tše di bonagalago <label>, <label>dielemente tše di utilwego ka go šomiša .sr-onlysehlopha, goba tšhomišo ya aria-label, aria-labelledby, aria-describedby, titlegoba placeholderseka) le gore ke tshedimošo efe ya tlaleletšo yeo e tlago swanelwa ke go fetišetšwa e tla fapana go ya ka mohuta wo o nepagetšego wa sedirišwa sa segokanyimmediamentsi sa sebolokigolo seo o se phethagatšago. Mehlala yeo e lego karolong ye e fa mekgwa ye mmalwa ye e šišintšwego, yeo e lebanego le taba ye e itšego.

Mohlala wa motheo

Bea tlaleletšo e tee goba konope ka mahlakoreng ka bobedi a tsenyo. O ka bea gape e tee ka mahlakoreng ka bobedi a tsenyo.

Ga re thekge ditlaleletšo tše dintši ( .input-group-addongoba .input-group-btn) ka lehlakoreng le tee.

Ga re thekge ditaolo tša foromo tše ntši sehlopheng se tee sa tsenyo.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Go lekanyetša bogolo

Oketša diklase tša go lekanyetša bogolo bja foromo go ya .input-groupka boyona gomme dikagare ka gare di tla fetoša bogolo ka go iketla—ga go nyakege gore o boeletše diklase tša bogolo bja taolo ya foromo godimo ga elemente ye nngwe le ye nngwe.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Mapokisi a go hlahloba le ditlaleletšo tša radio

Bea lepokisi lefe goba lefe la go hlahloba goba kgetho ya radio ka gare ga addon ya sehlopha sa tsenyo go e na le sengwalwa.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Ditlaleletšo tša konope

Dikonope ka dihlopha tša tsenyo di fapane go se nene gomme di nyaka maemo a tee a tlaleletšo a go bea dihlaga. Go e na le .input-group-addon, o tla swanelwa ke go diriša .input-group-btngo phuthela dikonope. Se se nyakega ka lebaka la ditaele tša sephephediši tša maitirelo tšeo di ka se kego tša tlošwa.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Dikonope tšeo di nago le dilo tšeo di theogago

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Dikonope tše di arotšwego ka dikarolo

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

Dikonope tše dintši

Le ge o ka ba le tlaleletšo e tee feela ka lehlakoreng le lengwe le le lengwe, o ka ba le dikonope tše dintši ka gare ga e tee .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

Navs e fumanehang ka Bootstrap ba arolelanoa markup, ho qala ka .navsehlopha sa motheo, hammoho le e re arolelanoang. Swap diklase tša sefetoši go fetola magareng ga setaele se sengwe le se sengwe.

Go šomiša navs bakeng sa diphanele tša thepo go nyaka plugin ya dithepo tša JavaScript

Bakeng sa dithepo tše di nago le mafelo a go ba le dithepo, o swanetše go šomiša dithepo tša JavaScript plugin . Leswao le tla nyaka gape rolele dika tša tlaleletšo le tša ARIA – bona leswao la mohlala la plugin bakeng sa dintlha tše dingwe.

Dira gore di-nav tšeo di dirišwago bjalo ka go sepelasepela di fihlelelege

Ge e le gore o šomiša navs go fa baara ya go sepelasepela, kgonthiša gore o tlaleletša a role="navigation"go setshelo sa motswadi seo se kwagalago kudu sa <ul>, goba o phuthele <nav>elemente go dikologa go sepelasepela ka moka. O se ke wa oketša tema go yona <ul>ka boyona, ka ge se se be se tla e thibela go tsebišwa bjalo ka lenaneo la kgonthe ke theknolotši ya go thuša.

Dithepo

Hlokomela .nav-tabssehlopha se hloka sehlopha sa .navmotheo.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Dipilisi

Tšea yona HTML yeo, eupša diriša .nav-pillsgo e na le moo:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Dipilisi le tšona di ka kgoboketšwa ka go otlologa. E no oketša ka .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Go lokafaditšwe

Dira gabonolo gore dithepo goba dipilisi di lekana le bophara bja motswadi wa tšona go diskrini tše di nago le bophara go feta 768px ka .nav-justified. Ka diskrini tše nnyane, dikgokagano tša nav di a kgoboketšwa.

Dikgokagano tša navbar nav tše di lokafaditšwego ga bjale ga di thekgwe.

Safari le arabela lokafalitsoeng navs

Go tloga ka v9.1.2, Safari e bontšha phošo yeo go yona go fetoša bogolo bja sephephediši sa gago ka go rapalala go bakago diphošo tša go tšweletša ka go nav yeo e lokafaditšwego tšeo di hlakotšwego ge di hlabolla. Phošo ye e bontšhwa gape mohlaleng wa nav wo o lokafaditšwego .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Dikgokagano tše di golofetšego

Bakeng sa karolo efe goba efe ya nav (dithepo goba dipilisi), oketša .disabledbakeng sa dikgokagano tše bohlokwa le go se be le ditlamorago tša go hover .

Kgokagano tshebetso ga se ya amega

Sehlopha se se tla fetoša feela <a>ponagalo ya 's, e sego go šoma ga yona. Diriša JavaScript ya tlwaelo go šitiša dikgokagano mo.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Go diriša dilo tšeo di theogago

Oketša dimenu tša go theoga ka HTML ye nnyane ya tlaleletšo le plugin ya JavaScript ya go theoga .

Dithepo tšeo di nago le dilo tšeo di theogago

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Dipilisi tšeo di nago le di- dropdown

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Di-navbar ke dikarolo tša meta tše di arabelago tšeo di šomago bjalo ka dihlogo tša go sepelasepela tša tirišo ya gago goba sebaka. Di thoma di phuhlame (gomme di a fetošwa) ka go dipono tša sellathekeng gomme tša ba tše di rapaletšego ge bophara bja lefelo la go lebelela bjo bo lego gona bo oketšega.

Dikgokagano tša navbar nav tše di lokafaditšwego ga bjale ga di thekgwe.

Diteng tše di tlalago

Ka ge Bootstrap e sa tsebe gore diteng ka go navbar ya gago di nyaka sekgoba se se kaakang, o ka thulana le ditaba ka go phuthela diteng mothalong wa bobedi. Go rarolla se, o ka:

Fokotša palo goba bophara bja dilo tša navbar.
Pata dilo tše itšego tša navbar ka bogolo bjo itšego bja skrine o diriša diklase tša mohola tše di arabelago .
Fetoša ntlha yeo ka yona navbar ya gago e fetogago magareng ga mokgwa wa go phuhlama le wa go rapalala. Tlwaetša @grid-float-breakpointphetogo goba o tlaleletše potšišo ya gago ya boraditaba.

Go fetola ntlha ya go kgaotša ya navbar ya sellathekeng yeo e phuhlamego

Navbar e phuhlama ka gare ga tebelelo ya yona ya sellathekeng ya go ema thwii ge lefelo la go lebelela le le tshesane go feta @grid-float-breakpoint, gomme e atologela go tebelelo ya yona ye e rapaletšego yeo e sego ya go sepela ge lefelo la go lebelela le le bonyenyane @grid-float-breakpointka bophara. Beakanya phetogo ye ka go mothopo wa Ka fase go laola ge navbar e phuhlama/e katološwa. The default boleng ke 768px(e nyenyane ka ho fetisisa "nyenyane" kapa "letlapa" skrine).

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Efa leina la navbar legato ka seswantšho sa gago ka go fapantšha sengwalwa ka <img>. Ka ge the .navbar-brande na le padding ya yona le bophagamo, o ka swanelwa ke go tloša CSS ye nngwe go ya ka seswantšho sa gago.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

Bea diteng tša foromo ka gare .navbar-formbakeng sa go logaganya ga maleba go ema thwii le boitshwaro bjo bo phuhlamego ka gare ga dipono tše tshesane. Šomiša dikgetho tša go logaganya go tšea sephetho sa gore e dula kae ka gare ga diteng tša navbar.

Bjalo ka dihlogo godimo, .navbar-formabelana bontši bja khoutu ya yona le .form-inlineka mixin. Ditaolo tše dingwe tša foromo, go swana le dihlopha tša tsenyo, di ka nyaka gore bophara bjo bo sa fetogego bo bontšhe gabotse ka gare ga navbar.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Ka mehla oketša dileibole

Babadi ba skrine ba tla ba le bothata ka diforomo tša gago ge o sa akaretše leina la tsenyo ye nngwe le ye nngwe. Bakeng sa diforomo te ta ka gare ga mothaladi, o ka uta dileibole o omia .sr-onlysehlopha. Go na le mekgwa ye mengwe ye mengwe ya go fa leina la theknolotši ya go thuša, go swana le aria-label, aria-labelledbygoba titleseka. Ge e le gore ga go le e tee ya tše yeo e lego gona, babadi ba skrine ba ka retologela go šomiša placeholderseka, ge e le gona, eupša ela hloko gore tšhomišo ya placeholderbjalo ka legato la mekgwa ye mengwe ya go swaya ga e eletšwe.

Oketša .navbar-btnsehlopha go <button>dielemente tšeo di sa dulego ka go a <form>go di tsenya bogareng ka go otlologa ka go navbar.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Phuthelela dithapo tša sengwalwa ka gare ga elemente ka .navbar-text, gantši godimo ga <p>thepo ya go eta pele gabotse le mmala.

<p class="navbar-text">Signed in as Mark Otto</p>

Bakeng sa batho ba diriša dikgokagano tša maemo tšeo di sego ka gare ga karolo ya go sepelasepela ya navbar ya ka mehla, diriša .navbar-linksehlopha go oketša mebala e swanetšego bakeng sa dikgetho tša navbar tša go se fetoge le tša go fetoga.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Lokiša dikgokagano tša nav, diforomo, dikonope, goba sengwalwa, o šomiša diklase tša .navbar-leftgoba .navbar-righttša mohola. Diklase ka bobedi di tla oketša go phaphamala ga CSS ka tsela ye e laeditšwego. Ka mohlala, go logaganya dikgokagano tša nav, di beye ka go arogana <ul>ka sehlopha sa utility ka go latelana se dirišitšwego.

Diklase tše ke diphetolelo tša mixin-ed tša .pull-leftle .pull-right, eupša di scoped go dipotšišo tša methopo ya ditaba bakeng sa go swara gabonolo dikarolo tša navbar go ralala le bogolo bja sedirišwa.

Oketša .navbar-fixed-tople go akaretša .containergoba .container-fluidgo bogareng le pad navbar dikagare.

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

Go nyakega go tlatša mmele

Navbar ye e sa fetogego e tla apeša diteng tša gago tše dingwe, ntle le ge o tlaleletša paddinggodimo ga <body>. Leka ditekanyetšo tša gago goba o šomiše seripa sa rena ka mo tlase. Keletšo: Ka go ikemela, navbar e 50px godimo.

body { padding-top: 70px; }

Kgonthiša gore o akaretša se ka morago ga CSS ya motheo ya Bootstrap.

Oketša .navbar-fixed-bottomle go akaretša .containergoba .container-fluidgo bogareng le pad navbar dikagare.

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

Go nyakega go tlatša mmele

Navbar ye e sa fetogego e tla apeša diteng tša gago tše dingwe, ntle le ge o tlaleletša paddingka fase ga <body>. Leka ditekanyetšo tša gago goba o šomiše seripa sa rena ka mo tlase. Keletšo: Ka go ikemela, navbar e 50px godimo.

body { padding-bottom: 70px; }

Kgonthiša gore o akaretša se ka morago ga CSS ya motheo ya Bootstrap.

Hlama navbar ya bophara bjo bo tletšego yeo e sepelago go tloga le letlakala ka go tlaleletša .navbar-static-tople go akaretša .containergoba .container-fluidgo ya bogareng le diteng tša navbar ya pad.

Go fapana le .navbar-fixed-*diklase, ga go nyakege gore o fetoše padding le ge e le efe go body.

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

Fetoša ponagalo ya navbar ka go tlaleletša .navbar-inverse.

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

Dikgapetla tša borotho

Bontšha lefelo la letlakala la bjale ka gare ga tatelano ya go sepelasepela.

Dikaroganyo di tlaleletšwa ka go iketla ka go CSS ka :beforele content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Go ngwala matlakala

Fana ka dikgokagano tša matlakala bakeng sa sebaka sa gago goba tirišo ka karolo ya matlakala a mantši, goba selo se sengwe se bonolo sa go dira matlakala .

Go beakanya matlakala ka go se fetoge

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

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Go swaya karolo ya matlakala

Karolo ya matlakala e swanetše go phuthelwa ka <nav>elemente go e hlaola bjalo ka karolo ya go sepelasepela go babadi ba skrine le theknolotši ye nngwe ya go thuša. Go tlaleletša, ka ge letlakala le na le kgonagalo ya go ba le karolo ya go feta e tee ya go sepelasepela ye bjalo (go swana le go sepelasepela ga mathomo ka go hlogo, goba go sepelasepela ga bara ya ka thoko), go eletšwa go fa tlhalošo aria-labelya <nav>yeo e bontšhago morero wa yona. Ka mohlala, ge e ba karolo ya matlakala e dirišwa go sepelasepela magareng ga sete ya dipoelo tša nyakišišo, leina la maleba e ka ba aria-label="Search results pages".

Bogolofadi le mafolofolo e re

Dikgokagano di customizable bakeng sa maemo a fapaneng. Šomiša .disabledbakeng sa dikgokagano tšeo di sa kgotlego le .activego bontšha letlakala la bjale.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

Re kgothaletša gore o fapantšha ditshetledi tše di šomago goba tše di golofetšego bakeng sa <span>, goba o tlogele ankora tabeng ya metsu ya peleng/ye e latelago, go tloša mošomo wa go klika mola o boloka mekgwa yeo e reretšwego.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Go lekanyetša bogolo

Fancy kgolo goba e nyenyane pagination? Oketša .pagination-lggoba .pagination-smbakeng sa bogolo bja tlaleletšo.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

Pager ya go dira dilo

Dikgokagano tša ka pela tša peleng le tše di latelago bakeng sa diphethagatšo tše bonolo tša matlakala ka go swaya seetša le mekgwa. 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.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Dikgokagano tše di logaganywago

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Boemo bja go golofala bja boikgethelo

Dikgokagano tša Pager gape di šomiša .disabledsehlopha sa utility ya kakaretšo go tšwa go pagination.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Mohlala

Mohlala wa hlogo ye Mpsha

<h3>Example heading <span class="label label-default">New</span></h3>

Diphetogo tše di lego gona

Oketša efe goba efe ya dihlopha tša sefetoši tše di boletšwego ka mo tlase go fetoša ponagalo ya leina.

Default Katlego ya Mathomo Tshedimošo Temošo Kotsi

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Na o na le ditone tša dileibole?

Mathata a go fetolela a ka tšwelela ge o na le masome a dileibole tša ka gare ga mothaladi ka gare ga setshelo se se sesane, ye nngwe le ye nngwe e na le inline-blockelemente ya yona (go swana le leswao). Tsela ya go dikologa se ke go beakanya display: inline-block;. Bakeng sa taba e dikologilego le mohlala, bona #13219 .

Hlaola gabonolo dilo tše mpsha goba tšeo di sa balwago ka go oketša a <span class="badge">go dikgokagano, Bootstrap navs, le tše dingwe.

Lepokisi la go tsena42.

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Go iphuhlama

Ge go se na dilo tše mpsha goba tšeo di sa balwago, dipetšhe di tla fo phuhlama (ka :emptymokgethi wa CSS) ge feela go se na diteng tšeo di lego gona ka gare.

Go sepelelana ga sefapano sa sephephediši

Dibetšhe di ka se iketle go Internet Explorer 8 ka gobane e hloka thekgo ya :emptymokgethi.

E ikamahanya le maemo a mafolofolo a nav

Mekgwa ye e agetšwego ka gare e akaretšwa bakeng sa go bea dipetšhe maemong a mafolofolo ka go dinamelwa tša dipilisi.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

Karolo ye bobebe, ye e fetofetogago yeo ka boikgethelo e ka katološago lefelo ka moka la go lebelela go bontšha diteng tša bohlokwa mo saeteng ya gago.

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

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Go dira gore jumbotron e be le bophara bjo bo tletšego, gomme e se na dikhutlo tše di kgokologilego, e bee ka ntle ga .containers ka moka gomme go e na le moo o tlaleletše ka .containergare.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Kgapetla ye bonolo ya h1go sekgoba ka tshwanelo le go arola dikarolo ta diteng letlakaleng. E ka diriša elemente ya h1's default small, gammogo le bontši bja dikarolo tše dingwe (ka mekgwa ya tlaleletšo).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Atološa tshepedišo ya keriti ya Bootstrap ka karolo ya seswantšho se senyenyane go bontšha gabonolo digridi tša diswantšho, dibidio, sengwalwa, le tše dingwe.

Ge e ba o nyaka tlhagišo ya go swana le ya Pinterest ya diswantšho tše dinyenyane tša botelele bjo bo fapanego le/goba bophara, o tla swanelwa ke go diriša plugin ya motho wa boraro e bjalo ka Masonry , Isotope , goba Salvattore .

Mohlala wa default

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.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Diteng tša tlwaelo

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.

Kunope Kunope

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.

Kunope Kunope

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.

Kunope Kunope

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Fana ka melaetša ya ditshwaotshwao tša seemo bakeng sa ditiro tše di tlwaelegilego tša modiriši ka seatla sa melaetša ya temošo ye e lego gona le ye e fetofetogago.

Mehlala

Phuthelela sengwalwa sefe goba sefe le konope ya go raka ya boikgethelo ka gare .alertle ye nngwe ya diklase te nne ta diteng (mohlala, .alert-success) ya melaetša ya temošo ya motheo.

Ga go na sehlopha sa go se fetoge

Ditemošo ga di na diklase tša go se fetoge, ke fela diklase tša motheo le tša sefetoši. Temošo ya bohlokwa ya go se fetoge ga e dire tlhaologanyo ye kgolo, ka fao o swanetše go laetša mohuta ka sehlopha sa seemo. Kgetha go tšwa go katlego, info, temošo, goba kotsi.

O šomile gabotse! O bala molaetša wo o bohlokwa wa temošo ka katlego.

Dihlogo di godimo! Tlhokomedišo ye e nyaka tlhokomelo ya gago, eupša ga se ya bohlokwa kudu.

Temošo! Better check yourself, ga o bonagale gabotse kudu.

Ao snap! Fetoša dilo tše mmalwa godimo gomme o leke go romela gape.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Ditemošo tšeo di lahlwago

Aga godimo ga temošo efe goba efe ka go oketša konope ya boikhethelo .alert-dismissiblele ya go tswalela.

E nyaka plugin ya temošo ya JavaScript

Bakeng sa ditemošo tše di šomago ka botlalo, tše di lahlwago, o swanetše go diriša ditemošo tša JavaScript plugin .

Temošo! Better check yourself, ga o bonagale gabotse kudu.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Netefatša boitshwaro bjo bo swanetšego go ralala le didirišwa ka moka

Kgonthiša gore o šomiša <button>elemente ka data-dismiss="alert"seka sa datha.

Dikgokagano ka ditemošo

Šomiša .alert-linksehlopha sa utility go fa ka pela dikgokagano tša mebala ye e swanago ka gare ga temošo efe goba efe.

O šomile gabotse! O bala molaetša wo wa bohlokwa wa temošo ka katlego .

Dihlogo godimo! This alert needs your attention , eupša ga se bohlokwa kudu.

Temošo! Better check yourself, ga o bonagale o le botse kudu .

Ao snap! Fetoša dilo tše mmalwa godimo gomme o leke go romela gape.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Fana ka ditshwaotshwao tša moragorago ka ga tšwelopele ya tshepedišo ya mošomo goba tiro ka dibara tša tšwelopele tše bonolo eupša e le tše di fetofetogago.

Go sepelelana ga sefapano sa sephephediši

Dibara tša tšwelopele di šomiša diphetogo tša CSS3 le ditshwantšho tša go phela go fihlelela tše dingwe tša ditlamorago tša tšona. Dikarolo tše ga di thekgwe go Internet Explorer 9 le ka fase goba diphetolelo tša kgale tša Firefox. Opera 12 ga e thekge ditshwantšho tša go phela.

Go sepelelana ga Pholisi ya Tšhireletšo ya Diteng (CSP).

Ge e le gore weposaete ya gago e na le Pholisi ya Tšhireletšo ya Diteng (CSP) yeo e sa dumelelego style-src 'unsafe-inline', gona o ka se kgone go šomiša styledika tša ka gare ga mothaladi go beakanya bophara bja bara ya tšwelopele bjalo ka ge go bontšhitšwe mehlaleng ya rena ka mo tlase. Mekgwa e mengwe ya go beakanya bophara bjo bo sepelelanago le di-CSP tše di tiilego e akaretša go diriša JavaScript e nyenyane ya tlwaelo (yeo e beakanyago element.style.width) goba go diriša diklase tša CSS tša tlwaelo.

Mohlala wa motheo

Default tšwelopele bareng.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Ka leina

Tloša sehlopha sa <span>ka .sr-onlygo tšwa ka gare ga baara ya tšwelopele go bontšha phesente ye e bonagalago.

60% ya .

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Go netefatša gore sengwalwa sa leibole se dula se balega le ge e le go diphesente tša fase, nagana ka go oketša a min-widthgo baara ya tšwelopele.

0% 1 .

2% e le .

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

Dikgetho tše dingwe tša seemo

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.

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

E na le methalo

E šomiša gradient go hlola seabe sa methalo. Ga e hwetšagale go IE9 le ka tlase.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

E di phelago

Oketša .activego .progress-bar-stripedgo phediša methalo go le letona go ya go le letshadi. Ga e hwetšagale go IE9 le ka tlase.

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

E kgobokeditšwe

Bea dibara tše ntši ka gare ga e tee .progressgo di kgoboketša.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

Mekgwa ya selo sa go se hlalošege sa go aga mehuta ye e fapanego ya dikarolo (go swana le ditshwayotshwayo tša blog, Di-Tweet, bj.bj.) tšeo di bontšhago seswantšho seo se logaganywago ka go le letshadi goba ka go le letona go bapa le diteng tša sengwalwa.

Methopo ya ditaba ya tlwaelo

Media ya maitirelo e bontšha selo sa media (diswantšho, bidio, modumo) ka go le letshadi goba ka go le letona la thibelo ya diteng.

Hlogo ya boraditaba

Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le khomodo. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ya go ba le ditho tša mmele. Donec lacinia congue felis ka faucibus.

Hlogo ya boraditaba

Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le khomodo. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ya go ba le ditho tša mmele. Donec lacinia congue felis ka faucibus.

Hlogo ya methopo ya ditaba ye e tsentšwego ka gare ga sehlaga

Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le khomodo. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ya go ba le ditho tša mmele. Donec lacinia congue felis ka faucibus.

Hlogo ya boraditaba

Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le khomodo. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis.

Hlogo ya boraditaba

Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le khomodo. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Diklase .pull-leftle .pull-rightgape di gona ebile di be di šomišwa peleng bjalo ka karolo ya karolo ya methopo ya ditaba, eupša di tlogetšwe bakeng sa tšhomišo yeo go tloga go v3.3.0. Di ka ba di lekana le .media-leftle .media-right, ntle le gore di .media-rightswanetše go bewa ka morago ga .media-bodyka go html.

Go logaganya ga boraditaba

Diswantšho goba methopo e mengwe ya ditaba e ka logaganywa godimo, bogareng goba tlase. Ya default e logagantšwe ka godimo.

Top lolamisiwa ga mecha ea litaba

Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le khomodo. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ya go ba le ditho tša mmele. Donec lacinia congue felis ka faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis e kgabišitšwego vel eu leo. Cum sociis natoque penatibus le magnis dis pelego montes, nascetur ya go segiša mus.

Methopo ya ditaba yeo e logaganywago bogareng

Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le khomodo. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ya go ba le ditho tša mmele. Donec lacinia congue felis ka faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis e kgabišitšwego vel eu leo. Cum sociis natoque penatibus le magnis dis pelego montes, nascetur ya go segiša mus.

Bottom lolamisiwa ga mecha ea litaba

Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le khomodo. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate ya go ba le ditho tša mmele. Donec lacinia congue felis ka faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis e kgabišitšwego vel eu leo. Cum sociis natoque penatibus le magnis dis pelego montes, nascetur ya go segiša mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

Lenaneo la boraditaba

Ka go se nene ga go swaya mo go oketšegilego, o ka diriša methopo ya ditaba ka gare ga lenaneo (e nago le mohola bakeng sa ditlhale tša ditshwayotshwayo goba mananeo a dihlogo).

Hlogo ya boraditaba

Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le khomodo. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis.

Hlogo ya methopo ya ditaba ye e tsentšwego ka gare ga sehlaga
Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le khomodo. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis.

Hlogo ya methopo ya ditaba ye e tsentšwego ka gare ga sehlaga
Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le khomodo. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis.

Hlogo ya methopo ya ditaba ye e tsentšwego ka gare ga sehlaga
Cras dula amet nibh libero, ka gravida nulla. Nulla vel metus scelerisque pele e le khomodo. Cras purus odio, vestibulum ka vulputate ka, tempus viverra turpis.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Dihlopha tša lenaneo ke karolo ye e fetofetogago le maemo le ye maatla ya go bontšha e sego fela mananeo a bonolo a dielemente, eupša ao a raraganego ka diteng tša tlwaelo.

Mohlala wa motheo

Sehlopha sa lenaneo la motheo kudu e fo ba lenaneo leo le sa rulaganywago ka dilo tša lenaneo, le diklase tše di swanetšego. Aga godimo ga yona ka dikgetho tše di latelago, goba CSS ya gago ka noši ge go nyakega.

Cras e le feela odio
Dapibus ac facilisis ka
Morbi leo le legolo
Porta ac consectetur e le e leng
Vestibulum ka eros

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Dipetšhe

Oketša karolo ya dipetšhe go selo sefe goba sefe sa sehlopha sa lenaneo gomme se tla bewa ka go iketla ka go le letona.

14.Cras e le feela odio
2.Dapibus ac facilisis ka
1.Morbi leo le legolo

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Dilo tše di kgokagantšwego

Kgokaganya diaetheme tša sehlopha sa lenaneo ka go šomiša dithepo tša ankora go e na le diaetheme tša lenaneo (seo gape se bolela motswadi <div>go e na le <ul>). Ga go nyakege gore batswadi ka o tee ka o tee go dikologa elemente e nngwe le e nngwe.

Cras e le feela odio Dapibus ac facilisis ka Morbi leo le legolo Porta ac consectetur e le e leng Vestibulum ka eros

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Dilo tša konope

Diaetheme tša sehlopha sa lenaneo e ka ba dikonope go e na le dilo tša lenaneo (seo gape se bolela motswadi <div>go e na le <ul>). Ga go nyakege gore batswadi ka o tee ka o tee go dikologa elemente e nngwe le e nngwe. O se ke wa šomiša .btndiklase tša maemo mo.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

Dilo tše di golofetšego

Oketša .disabledgo a .list-group-itemgo e grey go bonala e golofetše.

Cras e le feela odio Dapibus ac facilisis ka Morbi leo le legolo Porta ac consectetur e le e leng Vestibulum ka eros

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Diklase tša diteng

Šomiša diklase tša diteng go lokeletša diaetheme tša setaele, tša go se fetoge goba tše di kgokagantšwego. Gape e akaretša .activemmušo.

Dapibus ac facilisis ka
Cras dula amet nibh libero
Porta ac consectetur e le e leng
Vestibulum ka eros

Dapibus ac facilisis ka Cras dula amet nibh libero Porta ac consectetur e le e leng Vestibulum ka eros

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Diteng tša tlwaelo

Oketša mo e nyakilego go ba HTML efe goba efe ka gare, gaešita le bakeng sa dihlopha tša lenaneo tše di kgokagantšwego go swana le yeo e lego ka mo tlase.

Lokeletša hlogo ya selo sa sehlopha

Donec id elit e seng mi porta gravida ka eget metus. Maecenas sed diam eget risus varius blandit.

Lokeletša hlogo ya selo sa sehlopha

Donec id elit e seng mi porta gravida ka eget metus. Maecenas sed diam eget risus varius blandit.

Lokeletša hlogo ya selo sa sehlopha

Donec id elit e seng mi porta gravida ka eget metus. Maecenas sed diam eget risus varius blandit.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Le ge e se ka mehla go nyakegago, ka dinako tše dingwe o swanetše go tsenya DOM ya gago ka lepokising. Bakeng sa maemo ao, leka karolo ya phanele.

Mohlala wa motheo

Ka default, tsohle tse .paneletsa ke ho sebelisa ba bang ba motheo moeli le padding ho na le ba bang ba dikahare.

Mohlala wa phanele ya motheo

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panele le hlooho

Oketša gabonolo setshelo sa hlogo go phanele ya gago ka .panel-heading. O ka akaretša gape le efe goba efe <h1>- <h6>ka .panel-titlesehlopha go oketša hlogo yeo e setaeletšwego pele. Le ge go le bjalo, bogolo bja difonte bja <h1>- <h6>bo tlošwa ke .panel-heading.

Bakeng sa go tsenya mebala ya maleba ya dikgokagano, kgonthišetša gore o bea dikgokagano dihlogong ka gare ga .panel-title.

Phanele hlooho ntle le thaetlele

Diteng tša phanele

Thaetlele ya phanele

Diteng tša phanele

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panele le footer

Phuthelela dikonope goba sengwalwa sa bobedi ka go .panel-footer. Hlokomela gore dithalwa tša ka fase tša phanele ga di abe bohwa bja mebala le mellwane ge o šomiša diphetogo tša diteng ka ge di sa rerelwa go ba ka pele.

Diteng tša phanele

Panele ya tlase ya

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Dikgetho tše dingwe tša seemo

Go swana le dikarolo tše dingwe, dira gabonolo gore phanele e be le mohola kudu go seemo se se itšego ka go tlaleletša efe goba efe ya dihlopha tša mmušo wa seemo.

Thaetlele ya phanele

Diteng tša phanele

Thaetlele ya phanele

Diteng tša phanele

Thaetlele ya phanele

Diteng tša phanele

Thaetlele ya phanele

Diteng tša phanele

Thaetlele ya phanele

Diteng tša phanele

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Ka ditafole

Oketša efe goba efe yeo e sego ya mellwane .tableka gare ga phanele bakeng sa tlhamo ye e se nago selo. Ge go na le .panel-body, re tlaleletša mollwane wa tlaleletšo godimo ga tafola bakeng sa karoganyo.

Hlogo ya phanele

Ba bang ba default phanele dikahare mona. Nulla vitae elit libero, e lego pharetra e lego augue. Aenean lacinia bibendum e se nang letho. Aenean eu leo quam. Pellentesque e kgabišwa ke lacinia quam venenatis vestibulum. Nullam id dolor id nibh dikoloi tša dikoloi ut id elit.

# .	Leina	Sefane	Lebitso la mosebedisi
1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry o ile a re	Nonyana	@ twitter e le

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Ge e le gore ga go na mmele wa phanele, karolo e tloga go hlogo ya phanele go ya tafoleng ntle le tšhitišo.

Hlogo ya phanele

# .	Leina	Sefane	Lebitso la mosebedisi
1.	Mareka	Otto o ile a re	@mdo
2.	Jakobo	Thornton o ile a hlokomela	@lekhura
3.	Larry o ile a re	Nonyana	@ twitter e le

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Ka dihlopha tša lenaneo

Habonolo akaretša dihlopha tša lenaneo la bophara bjo bo tletšego ka gare ga phanele efe goba efe.

Hlogo ya phanele

Ba bang ba default phanele dikahare mona. Nulla vitae elit libero, e lego pharetra e lego augue. Aenean lacinia bibendum e se nang letho. Aenean eu leo quam. Pellentesque e kgabišwa ke lacinia quam venenatis vestibulum. Nullam id dolor id nibh dikoloi tša dikoloi ut id elit.

Cras e le feela odio
Dapibus ac facilisis ka
Morbi leo le legolo
Porta ac consectetur e le e leng
Vestibulum ka eros

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Dumelela diphensele go bona ditekanyo tša bidio goba pontšho ya diselaete go ya ka bophara bja boloko ya tšona yeo e nago le ka go hlama tekanyo ya ka gare yeo e tlago go lekalekantšha gabotse go sedirišwa sefe goba sefe.

Melawana e dirišwa thwii go <iframe>, <embed>, <video>, le <object>dielemente; ka boikgethelo šomiša sehlopha sa setlogolo se se lego pepeneneng .embed-responsive-itemge o nyaka go swana le setaele sa dika tše dingwe.

Pro-Keletšo! Ga go nyakege gore o akaretše frameborder="0"ka go s ya gago <iframe>ka ge re go fediša seo.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Default gabotse

Šomiša sediba bjalo ka khuetšo ye bonolo go elemente go e fa khuetšo ya go tsenya.

Bona, ke ka sedibeng!

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

Diklase tša boikgethelo

Taolo padding le dikhutlo potolohileng le tse peli boikhethelo mofetoledi dihlopha.

Bona, ke ka sedibeng se segolo!

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

Bona, ke ka sedibeng se senyenyane!

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

Dikarolo

Di-Glyphicon tša go ngwala

Di-glyph tšeo di lego gona

Tsela ya go diriša

O se ke wa hlakanya le dikarolo tše dingwe

Feela bakeng sa tshebediso ya ka elements lefeela

Go fetola lefelo la fonte ya leswao

Diaekhone tše di fihlelelwago

Mehlala

Di-dropdown tša go theoga

Mohlala

Go logaganya

E ka nyaka go bewa maemong a tlaleletšo

.pull-rightGo logaganya mo go sa dirišwego

Dihlogo tša dihlogo

Sekaroganyo

Diaetheme tša menu tše di golofetšego

Dihlopha tša konope

Tooltips & popovers ka dihlopha konopo hloka setting e khethehileng

Netefatša gore e nepagetše rolegomme o nee leina

Mohlala wa motheo

Baara ya didirišwa ya konope

Go lekanyetša bogolo

Go dira dihlaga

Phapano ya go ema thwii

Dihlopha tša konope tše di lokafaditšwego

Go swara mellwane

IE8 le mellwane

Ka <a>dielemente

Dikgokagano tšeo di šomago bjalo ka dikonope

Ka <button>dielemente

Dithepo tša go theoga tša konope

Go ithekga ka plugin

Di-drolodown tša konope e tee

Arola konopo dropdowns

Go lekanyetša bogolo

Phapano ya go theoga

Dihlopha tša go tsenya

Sengwalwa <input>s fela

Tooltips & popovers ka dihlopheng tsenyo hloka setting e khethehileng

O se ke wa hlakanya le dikarolo tše dingwe

Ka mehla oketša dileibole

Mohlala wa motheo

Go lekanyetša bogolo

Mapokisi a go hlahloba le ditlaleletšo tša radio

Ditlaleletšo tša konope

Dikonope tšeo di nago le dilo tšeo di theogago

Dikonope tše di arotšwego ka dikarolo

Dikonope tše dintši

Navs

Go šomiša navs bakeng sa diphanele tša thepo go nyaka plugin ya dithepo tša JavaScript

Dira gore di-nav tšeo di dirišwago bjalo ka go sepelasepela di fihlelelege

Dithepo

Dipilisi

Go lokafaditšwe

Safari le arabela lokafalitsoeng navs

Dikgokagano tše di golofetšego

Kgokagano tshebetso ga se ya amega

Go diriša dilo tšeo di theogago

Dithepo tšeo di nago le dilo tšeo di theogago

Dipilisi tšeo di nago le di- dropdown

Navbar

Navbar ya tlwaelo

Diteng tše di tlalago

E nyaka plugin ya JavaScript

Go fetola ntlha ya go kgaotša ya navbar ya sellathekeng yeo e phuhlamego

Dira gore di-navbar di fihlelelege

Setšoantšo sa lebitso

Diforomo

Ditemošo tša sedirišwa sa sellathekeng

Ka mehla oketša dileibole

Dikonope

Tšhomišo ye e itšego ya seemo

Sengwalwa

Dikgokagano tšeo e sego tša nav

Go logaganya dikarolo

Go logaganya dikarolo tše dintši ka go le letona

E tsepame go ya godimo

Go nyakega go tlatša mmele

E tsepame go ya tlase

`.pull-right`Go logaganya mo go sa dirišwego

Netefatša gore e nepagetše `role`gomme o nee leina

Ka `<a>`dielemente

Ka `<button>`dielemente

Sengwalwa `<input>`s fela