Glyphs la heli karo

Waxaa ku jira in ka badan 250 glyphs oo qaab fareed ah oo ka socda Glyphicon Halflings. Glyphicons Halflings caadiyan bilaash laguma heli karo, laakiin abuurahoodu wuxuu ka dhigay inay bilaash ku helaan Bootstrap. Mahadsanid ahaan, waxaan kaliya ku weydiineynaa inaad ku darto xiriiriyaha Glyphicons mar kasta oo ay suurtagal tahay.

glyphicon glyphicon-asterisk
glyphicon-plus
glyphicon glyphicon-euro
glyphicon-eur
glyphicon glyphicon-laga jaray
glyphicon glyphicon-cloud
glyphicon glyphicon-baqshad
qalin glyphicon glyphicon-qalin
glyphicon glyphicon-galaas
glyphicon glyphicon-music
glyphicon glyphicon-search
glyphicon glyphicon-wadnaha
Glyphicon-xiddigle
glyphicon glyphicon-xiddig-madhan
glyphicon glyphicon-user
Glyphicon glyphicon-filim
glyphicon glyphicon-th-weyn
glyphicon glyphicon-th
glyphicon glyphicon-th-liiska
glyphicon glyphicon-ok
glyphicon glyphicon-saar
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon-off
glyphicon glyphicon-signal
glyphicon-cog
glyphicon glyphicon-qashin
glyphicon glyphicon-guriga
glyphicon glyphicon-file
glyphicon glyphicon-time
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon glyphicon-soo dejiso
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-ciyaar-goobo
glyphicon glyphicon-ku celi
glyphicon glyphicon-cusbooneysii
glyphicon glyphicon-liiska-alt
glyphicon glyphicon-quful
glyphicon glyphicon-calan
glyphicon glyphicon-macaacadaha dhegaha
glyphicon glyphicon-mugga-off
glyphicon glyphicon-mug-hoos
glyphicon glyphicon-mugga kor u kaca
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-buug
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-camera
glyphicon glyphicon-font
glyphicon glyphicon-dhirran
glyphicon glyphicon-italic
glyphicon glyphicon-qoraalka-dhererka
glyphicon glyphicon-qoraal-ballac
glyphicon glyphicon-align-bidix
glyphicon glyphicon-align-center
glyphicon glyphicon-align-midig
glyphicon glyphicon-align-justify
liiska glyphicon
glyphicon glyphicon-jidh-bidix
glyphicon glyphicon-indent-midig
glyphicon glyphicon-facetime-video
glyphicon glyphicon-sawir
glyphicon glyphicon-map-marker
glyphicon glyphicon-hagaajin
Glyphicon-midab leh
glyphicon glyphicon-wax ka beddel
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-dhaqdhaqaaq
glyphicon glyphicon-tallaabo-dib u dhac
glyphicon glyphicon-dhakhso-dib u dhac
glyphicon glyphicon-dib u dhac
glyphicon glyphicon-ciyaar
glyphicon glyphicon-hakin
glyphicon glyphicon-joojin
glyphicon glyphicon-hore
glyphicon glyphicon-dhakhso-hore
glyphicon glyphicon-tallaabo-hore
glyphicon glyphicon-saar
glyphicon glyphicon-chevron-bidix
glyphicon glyphicon-chevron-midig
glyphicon glyphicon-plus-calaamad
glyphicon glyphicon-laga jaray calaamad
glyphicon glyphicon-saar-calaamad
glyphicon glyphicon-ok-calaamad
glyphicon glyphicon-calaamad su'aal
glyphicon glyphicon-info-calaamadaha
glyphicon glyphicon-screenshot
glyphicon glyphicon-saar-goobo
glyphicon glyphicon-ok-goobo
glyphicon glyphicon-ban-goobo
glyphicon glyphicon- fallaadho-bidix
glyphicon glyphicon- fallaadho-midig
glyphicon glyphicon-arrow-kor
glyphicon glyphicon-falaar-hoos
glyphicon glyphicon-share-alt
glyphicon glyphicon-cabbir-buuxa
glyphicon glyphicon-cabbir-yar
glyphicon glyphicon-calaamad-calaamad
glyphicon glyphicon-hadiyad
caleen glyphicon-caleemo
glyphicon glyphicon-dabka
glyphicon glyphicon-il-furan
glyphicon glyphicon-indho-dhow
glyphicon glyphicon-calaamadaha digniinta
glyphicon glyphicon-diyaarad
glyphicon glyphicon-kalandarka
glyphicon glyphicon- random
glyphicon glyphicon-faallo
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-hoos
glyphicon glyphicon-retweet
glyphicon glyphicon-kaarto wax-iibso
glyphicon glyphicon-folder-u dhow
glyphicon glyphicon-folder-furan
glyphicon glyphicon-cabbir-toos ah
glyphicon glyphicon-cabbir-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-gambale
shahaadada glyphicon glyphicon-shahaadada
glyphicon glyphicon-suul-sare
glyphicon glyphicon-suul-hoos
glyphicon glyphicon-gacan-midig
glyphicon glyphicon-gacan-bidix
glyphicon glyphicon-gacan-sare
glyphicon glyphicon-gacan-hoos
glyphicon glyphicon-goobo- falaarta-midig
glyphicon glyphicon-goobo- falaar-bidix
glyphicon glyphicon-goobo- falaarta-sare
glyphicon glyphicon-goobo- falaar-hoos
Glyphicon-globe
glyphicon wrench
glyphicon glyphicon-hawlaha
glyphicon glyphicon- filter
glyphicon glyphicon-koob kooban
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-wadnaha-madhan
isku xirka glyphicon
Glyphicon-taleefan
glyphicon glyphicon-pushpin
glyphicon-usd
glyphicon glyphicon-gbp
nooca glyphicon glyphicon
glyphicon glyphicon-ku-soo-saar-alifbeetada
glyphicon glyphicon-qaab-alfabeed-alt
glyphicon glyphicon-ku-soo-celcelis ahaan
glyphicon glyphicon-ku-soo-celcelis-alt
glyphicon glyphicon-qaabeeya-sifo
glyphicon glyphicon-qaab-sifayaal-alt
glyphicon glyphicon-aan la hubin
glyphicon glyphicon-balaadhi
glyphicon glyphicon-hoos u dumay
glyphicon glyphicon-burbur
glyphicon glyphicon-gal-in
glyphicon-flash
glyphicon glyphicon-gal-out
glyphicon glyphicon-daaqad cusub
glyphicon glyphicon-rikoob
glyphicon glyphicon- badbaadi
glyphicon glyphicon-furan
glyphicon glyphicon-la badbaadiyey
glyphicon glyphicon-soo dejinta
glyphicon glyphicon-dhoofinta
glyphicon glyphicon-dir
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-la badbaadiyey
glyphicon glyphicon-floppy-saar
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-furan
glyphicon glyphicon-credit-card
glyphicon glyphicon- wareejinta
glyphicon glyphicon-cutlery
glyphicon glyphicon-madaxa
glyphicon glyphicon-cadaadsan
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
munaaradda glyphicon glyphicon-tawer
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subtitles
glyphicon glyphicon-cod-stereo
glyphicon glyphicon-cod-dolby
glyphicon glyphicon-cod-5-1
glyphicon glyphicon-cod-6-1
glyphicon glyphicon-cod-7-1
glyphicon glyphicon-copyright-calaamad
glyphicon glyphicon-calaamad-diiwaangelin
glyphicon glyphicon-cloud-soo dejiso
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-geed-conifer
glyphicon glyphicon-geed-goyn
glyphicon glyphicon-cd
glyphicon glyphicon-save-faylka
glyphicon glyphicon-faylka furan
glyphicon glyphicon-kor u kaca
glyphicon glyphicon-koobi
glyphicon koollada
glyphicon glyphicon-digniin
glyphicon glyphicon-equalizer
glyphicon glyphicon-king
glyphicon glyphicon-boqorad
glyphicon glyphicon-pawn
glyphicon glyphicon-Bishob
glyphicon glyphicon-knight
glyphicon glyphicon-ilmo-formula
glyphicon glyphicon-tent
glyphicon glyphicon-madow
glyphicon glyphicon-sariir
glyphicon glyphicon-tufaax
glyphicon glyphicon-masixi
glyphicon glyphicon-hourglass
glyphicon glyphicon-laambad
glyphicon glyphicon-koobi ah
glyphicon glyphicon-piggy-bangi
glyphicon glyphicon- maqas
Glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon-ruble
glyphicon-rubuc
glyphicon glyphicon-miisaanka
glyphicon glyphicon-barafka-lolly
glyphicon glyphicon-baraf-nacas-dhadhan
glyphicon glyphicon-waxbarasho
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-daaqadda
glyphicon glyphicon-saliid
glyphicon glyphicon-hadhuudh
muraayadaha indhaha ee glyphicon
glyphicon glyphicon-qoraalka cabbirka
glyphicon glyphicon-qoraalka-midabka
glyphicon glyphicon-qoraalka-saldhigga
glyphicon glyphicon-object-align-top
glyphicon glyphicon-shay-align-hoose
glyphicon glyphicon-shay-align-horizontal
glyphicon glyphicon-shay-align-bidix
glyphicon glyphicon-shay-align-vertical
glyphicon glyphicon-shay-align-midig
glyphicon glyphicon-saddex-xagal-midig
glyphicon glyphicon-triangle-bidix
glyphicon glyphicon-saddex-xagal-hoos
glyphicon glyphicon-saddex-xagalka-sare
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-bidix
glyphicon glyphicon-menu-midig
glyphicon glyphicon-menu-hoos
glyphicon glyphicon-menu-up

Sida loo isticmaalo

Sababaha waxqabadka awgood, dhammaan summada waxay u baahan yihiin fasalka aasaasiga ah iyo fasalka astaanta gaarka ah. Si aad u isticmaasho, dhig koodka soo socda meel kasta. Hubi inaad ka tagto meel bannaan oo u dhaxaysa summada iyo qoraalka si loogu dhejiyo habboon.

Ha isku darin qaybaha kale

Fasallada astaanta si toos ah looguma dari karo qaybaha kale. Waa inaan loo isticmaalin fasalo kale oo isku mid ah. Bedelkeeda, ku dar buul <span>oo dabaq fasallada summada <span>.

Kaliya loo isticmaalo walxaha madhan

Fasallada astaanta waa in loo adeegsadaa oo keliya walxo aan ku jirin wax qoraal ah oo aan lahayn canaasiir ilmo.

Beddelida goobta farta summada

Bootstrap waxay u malaynaysaa in faylalka farta sumadda ahi ay ku jiri doonaan ../fonts/tusaha, marka loo eego faylalka CSS ee la soo ururiyey. Dhaqaaqidda ama beddelka magaca faylashaas farta waxa ay la macno tahay in la cusboonaysiiyo CSS saddex siyaabood midkood:

Beddel @icon-font-pathiyo/ama @icon-font-namedoorsoomayaasha isha faylal yar.
Ka faa'iidayso URL-yada qaraabada ah ee uu bixiyo isku-dubaridaha Yar.
Beddel url()waddooyinka CSS-ka la soo ururiyey.

Isticmaal ikhtiyaar kasta oo ku habboon hagaajintaada gaarka ah.

Astaamaha la heli karo

Noocyada casriga ah ee tignoolajiyada caawinta ayaa ku dhawaaqi doona nuxurka CSS soo saaray, iyo sidoo kale xuruuf gaar ah oo Unicode ah. Si looga fogaado wax-soo-saarka aan loogu talo-gelin iyo jahawareerka ee akhristayaasha shaashadda (gaar ahaan marka calaamadaha loo isticmaalo qurxinta kaliya), waxaan ku qarinnaa aria-hidden="true"sifada.

Haddii aad isticmaalayso summada si aad u gudbiso macnaha (halkii aad ka ahaan lahayd walxaha qurxinta oo keliya), hubi in macnahan sidoo kale loo gudbiyo tignoolajiyada caawinta - tusaale ahaan, ku dar waxyaabo dheeraad ah, muuqaal ahaan u qarsoon .sr-onlyfasalka.

Haddii aad abuurayso kontaroolo aan lahayn qoraal kale (sida <button>kan ka kooban summada), waa inaad had iyo jeer bixisaa macluumaad kale si aad u aqoonsato ujeedada xakamaynta, si ay macno ugu samayso isticmaalayaasha tignoolajiyada caawinta. Xaaladdan, waxaad ku dari kartaa aria-labelsifo kontoroolka laftiisa.

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

Tusaalooyinka

U isticmaal badhamada, kooxaha badhanka si aad u heshid bar, navigation, ama foomka la sii diyaariyay.

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

Astaanta loo isticmaalo digniinta si loo gudbiyo inay tahay fariin qalad ah, oo wata .sr-onlyqoraal dheeri ah si loogu gudbiyo tilmaantan isticmaalayaasha tignoolajiyada caawinta.

Geli ciwaan email sax ah

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

La beddeli karo, liiska macnaha guud ee muujinaya liisaska isku xirka. Lagu sameeyay is dhexgal leh hoos udhaca JavaScript plugin .

Tusaale

Ku duub kiciyeyaasha hoos u dhaca iyo liiska hoos u dhaca gudaha .dropdown, ama shay kale oo sheegaya position: relative;. Markaa ku dar HTML-ka menu-ka.

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

Liiska hoos-u-dhaca waa la bedeli karaa si kor loogu ballaariyo (halkii hoos loo dhigi lahaa) iyadoo lagu darayo .dropupwaalidka.

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

Toosin

Sida caadiga ah, liiska hoos u dhaca waxa si toos ah loo dhigayaa 100% xagga sare iyo dhinaca bidix ee waalidkiisa. Ku dar .dropdown-menu-righta .dropdown-menuto midig toosi liiska hoos u dhaca.

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

Madax

Ku dar madax si aad u calaamadiso qaybaha ficillada ee liiska hoos u dhaca.

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

Qaybiye

Ku dar qaybiye si aad u kala saartid xiriiriyeyaasha taxanaha ah ee liiska hoos u dhaca.

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

Walxaha liiska naafada

Ku dar .disabledhoos <li>-hoosaadka si aad u joojiso xidhiidhka

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

Isku ururi badhamada taxane ah oo wada socda hal xariiq oo leh kooxda badhanka. Ku dar raadiyaha JavaScript ee ikhtiyaarka ah iyo habdhaqanka qaabka sanduuqa hubinta adigoo isticmaalaya badhamadayada plugin .

Aaladaha iyo soo-bandhigidda kooxaha badhanka waxay u baahan yihiin goob gaar ah

Markaad isticmaalayso tibaaxaha ama popovers ee canaasirta ku jirta a .btn-group, waa inaad qeexdaa ikhtiyaarka container: 'body'aad kaga fogaanayso waxyeelada aan loo baahnayn (sida curiyaha sii kordhaya iyo/ama luminaya geesaheeda wareegsan marka qalabka caarada ama popover la kiciyo).

Xaqiiji sax `role`oo bixi calaamad

Si tignoolajiyada caawinta - sida akhristayaasha shaashadda - si ay u gudbiyaan in badhamada taxane ah la kooxeeyay, sifo ku habboon roleayaa loo baahan yahay in la bixiyo. Kooxaha badhanka, tani waxay noqonaysaa role="group", halka aaladaha ay tahay inay lahaadaan a role="toolbar".

Mid ka reeban ayaa ah kooxo ka kooban hal koontarool oo keliya (tusaale kooxaha badhamada xaq u leh ee leh <button>canaasirta) ama hoos u dhaca.

Intaa waxaa dheer, kooxaha iyo aaladaha waa in la siiyaa calaamad cad, maadaama inta badan tignoolajiyada caawinta aysan ku dhawaaqi doonin iyaga, inkastoo ay jirto rolesifo sax ah. Tusaalooyinka halkan lagu soo bandhigay, waxaan isticmaalnaa aria-label, laakiin beddelka sida aria-labelledbysidoo kale waa la isticmaali karaa.

Tusaalaha aasaasiga ah

Ku duub badhamada taxane ah .btngudaha .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>

Isku-dubbarid isku-dar ah <div class="btn-group">qaybo <div class="btn-toolbar">aad u adag.

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

Cabbirka

Halkii aad ka codsan lahayd fasalada cabbirka badhanka badhanka kasta oo koox ah, ku dar .btn-group-*mid kasta .btn-group, oo ay ku jirto marka buul kooxo badan.

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

Buul

Meel .btn-groupkale .btn-groupgeli marka aad rabto liiska hoos-u-dhaca ee lagu qasay badhammo taxane ah.

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

Kala duwanaansho toosan

Samee badhamada u muuqda kuwo toosan oo is dulsaaran halkii ay ahaan lahaayeen kuwo toosan. Hoos u dhigida badhanka kala qaybsan halkan lagama taageero.

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

Kooxaha badhanka ee xaq u leh

Samee koox badhammo ah oo kala fidsan cabbir siman si ay u fidiyaan dhammaan ballaca waalidkeed. Sidoo kale waxay la shaqaysaa hoos u dhigida badhanka ee kooxda badhanka.

Xakamaynta xuduudaha

Sababtoo ah HTML iyo CSS-da gaarka ah ee loo isticmaalo in lagu caddeeyo badhamada (kuwaas oo kala ah display: table-cell), soohdimaha u dhexeeya waa la labanlaabmaa. Kooxaha badhanka caadiga ah, margin-left: -1pxayaa loo isticmaalaa in lagu xidho xuduudaha halkii laga saari lahaa. Si kastaba ha ahaatee, marginkuma shaqeeyo display: table-cell. Natiijo ahaan, iyadoo ku xiran is-beddelkaada Bootstrap, waxaa laga yaabaa inaad rabto inaad ka saarto ama dib u midabayso xuduudaha.

IE8 iyo xuduudaha

Internet Explorer 8 kuma sameeyo xudduudaha badhamada koox badhan la caddeeyey, hadday shiran tahay iyo haddii ay tahay <a>curiye <button>. Si aad taas u hesho, ku duub badhan kasta mid kale.btn-group .

Fiiri #12476 wixii macluumaad dheeraad ah.

`<a>`Curiyayaasha leh

Kaliya ku duub taxane .btns ah .btn-group.btn-group-justified.

Bidix Dhexe Sax

Bidix Dhexe

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

Xidhiidhada u shaqeeya sidii badhamada

Haddii <a>canaasiirta loo isticmaalo in ay u dhaqmaan sida badhamada - kicinta shaqada bogga, halkii aad u socon lahayd dukumeenti kale ama qayb ka mid ah bogga hadda - waa in sidoo kale la siiyaa ku habboon role="button".

`<button>`Curiyayaasha leh

Si aad u isticmaasho kooxaha badhamada xaq u leh ee leh <button>canaasirta, waa inaad ku duubtaa badhan kasta koox badheed . Inta badan daalacashada si sax ah uma dabaqaan CSS-kayaga si loo caddeeyo <button>walxaha, laakiin maadaama aan taageerno badhanka hoos u dhaca, waxaan ka shaqayn karnaa taas.

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

Isticmaal badhan kasta si aad u kiciso liiska hoos u dhaca adiga oo gelinaya gudaha a .btn-groupoo bixisa calaamadaynta liiska saxda ah.

Ku tiirsanaanta plugin

Hoos-u-dhacyada badhanka waxay u baahan yihiin plugin -ka hoos -u-dhaca in lagu daro nooca Bootstrap kaaga.

Hoos u dhigida badhanka kelida ah

U rog badhan hoos u-rogid leh qaar ka mid ah isbeddellada calaamadaynta.

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

Hoos udhaca badhanka

Si la mid ah, samee badhanka kala qaybsan ee hoos u dhaca oo leh isla isbeddelo calaamadayn ah, oo leh badhan gaar ah.

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

Cabbirka

Hoos-u-dhacyada badhanka waxay la shaqeeyaan badhamada cabbirrada oo dhan.

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

Kala duwanaanshiyaha daadinta

Kici liiska hoos-u-dhaca ee ka sarreeya walxaha adiga oo ku daraya .dropupwaalidka.

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

Kordhi kontaroolada foomka adoo ku daraya qoraal ama badhamada ka hor, ka dib, ama labada dhinac ee qoraal kasta oo ku salaysan <input>. Isticmaal ama .input-groupsi aad ugu diyaariso ama ugu dhejiso curiyayaasha hal ..input-group-addon.input-group-btn.form-control

Qoraal `<input>`kaliya

Ka fogow isticmaalka <select>curiyeyaasha halkan maadaama aan si buuxda loogu qaabayn karin daalacashada WebKit.

Ka fogow isticmaalka <textarea>curiyeyaasha halkan sababtoo ah rowssifadooda lama ixtiraami doono xaaladaha qaarkood.

Tilmaamaha qalabka & kor u kaca ee kooxaha wax gelinta waxay u baahan yihiin goob gaar ah

Markaad isticmaalayso tibaaxaha ama popovers curiyayaasha gudaha .input-group, waa inaad qeexdaa ikhtiyaarka container: 'body'aad kaga fogaanayso waxyeelada aan loo baahnayn (sida curiyaha sii kordhaya iyo/ama luminaya geesihiisa wareegsan marka qalabka caarada ama popover la kiciyo).

Ha isku darin qaybaha kale

Si toos ah ha isugu darin kooxaha qaab ama fasalada tiirarka si toos ah iyo kooxaha wax gelinta. Bedelkeeda, buul kooxda wax gelinta gudaha kooxda foomka ama shay la xidhiidha grid.

Had iyo jeer ku dar calaamadaha

Akhristayaasha shaashadda waxay dhib kala kulmi doonaan foomamkaaga haddii aadan ku darin calaamadda wax kasta oo la geli karo. Kooxahan wax gelinta, hubi in sumad kasta oo dheeri ah ama shaqeyn ah loo gudbiyo tignoolajiyada caawinta.

Farsamada saxda ah ee loo isticmaali karo (waxyaabaha muuqda <label>, <label>walxaha qarsoon iyadoo la isticmaalayo .sr-onlyfasalka, ama isticmaalka aria-label, aria-labelledby, aria-describedby, titleama placeholdersifada) iyo macluumaadka dheeraadka ah ee loo baahan doono in la gudbiyo ayaa kala duwanaan doona iyadoo ku xiran nooca saxda ah ee widget interface ee aad fulineyso. Tusaalooyinka qaybtan waxay bixiyaan dhowr la soo jeediyay, habab kiis gaar ah.

Tusaalaha aasaasiga ah

Dhig hal add-on ama badhan labada dhinac ee gelinta. Waxa kale oo aad mid ku dhejin kartaa labada dhinac ee gelinta.

Ma taageerno wax-ku-kordhin badan ( .input-group-addonama .input-group-btn) dhinac keliya ah.

Ma taageerno kontaroolada badan ee qaab-kooxeedka hal koox.

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

Cabbirka

Ku dar fasalada qaabaynta qaabka qaraabada ah .input-grouplafteeda iyo waxa ku jira si toos ah ayaa loo cabbiri doonaa—looma baahna in lagu soo celiyo fasalada cabbirka foomka ee shay kasta.

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

Sanduuqyada hubinta iyo addons raadiyaha

Dhig sanduuq kasta ama ikhtiyaarka raadiyaha gudaha addonka kooxda gelinta halkii aad ka qori lahayd qoraalka.

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

Button addons

Badhamada kooxaha wax gelinta waa xoogaa kala duwan yihiin waxayna u baahan yihiin hal heer oo dheeraad ah oo buul ah. Halkii .input-group-addon, waxaad u baahan doontaa inaad isticmaasho .input-group-btnsi aad u duubto badhamada. Tan waxaa loo baahan yahay iyadoo ay ugu wacan tahay qaababka browser-ka caadiga ah oo aan laga gudbi karin.

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

Badhamada hoos u dhaca

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

Badhamada qaybsan

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

Badhamada badan

Halka aad ku yeelan karto kaliya hal wax-ku-kordhin dhinac kasta, waxaad yeelan kartaa badhammo badan gudaha hal .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 ee laga heli karo Bootstrap waxay leeyihiin calaamado la wadaago, laga bilaabo .navfasalka aasaasiga ah, iyo sidoo kale dawladaha la wadaago. Isku beddel fasallada wax ka beddelka si aad u kala beddesho qaab kasta.

Isticmaalka navs ee muraayadaha tab waxay u baahan tahay plugin tabs JavaScript

Tabaha leh meelaha la taaban karo, waa inaad isticmaashaa tabs JavaScript plugin . Calaamadeyntu waxay sidoo kale u baahan doontaa rolesifooyin dheeri ah iyo ARIA - eeg calaamadaynta tusaalaha plugin wixii faahfaahin dheeraad ah.

Ka dhig maraakiibta loo isticmaalo hagidda mid la heli karo

Haddii aad isticmaalayso navs si aad u bixiso navigation bar, hubi inaad ku darto role="navigation"weelka ugu macquulsan ee waalidka ee <ul>, ama ku duub shay <nav>hareeraha oo dhan. Ha ku darin doorka <ul>laftiisa, sababtoo ah tani waxay ka hortagi doontaa in lagu dhawaaqo liiska dhabta ah ee tignoolajiyada caawinta.

Tabs

Ogow .nav-tabsfasalku wuxuu u baahan yahay .navfasalka aasaasiga ah.

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

Kiniinnada

Qaado HTML isku mid ah, laakiin isticmaal .nav-pillsbeddelka:

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

Kaniiniyada sidoo kale si toos ah ayaa loo rari karaa. Kaliya ku dar .nav-stacked.

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

Xaq loo yeelay

Si sahal ah uga samee tabs ama kaniiniyada balaca siman ee waalidkood shaashadaha ka balaadhan 768px oo leh .nav-justified. Shaashado yaryar, isku xirka nav ayaa is dulsaaran.

Xidhiidhiyayaasha navbar navbar ee xaqqa ah hadda lama taageero

Safari iyo navs xaq u jawaabaya

Laga bilaabo v9.1.2, Safari waxa ay soo bandhigtay cilad kaas oo dib u habeynta biraawsarkaaga si toos ah u keenaysa khaladaad ku jira nav xaq ah oo la nadiifiyo marka dib loo cusbooneysiiyo. Cayayaankan waxa kale oo lagu muujiyay tusaalaha nav ee la caddeeyey .

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

Xiriirinta naafada

Qayb kasta oo nav ah (tabs ama kaniiniyada), .disabledku dar xiriiriyeyaasha cawl oo wax saameyn ah ma leh .

Shaqada isku xidhka ma saamayn

Fasalkani wuxuu kaliya bedeli doonaa <a>muuqaalka, ma beddeli doono shaqeyntiisa. Isticmaal JavaScript caadadii si aad u joojiso xiriirinta halkan.

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

Isticmaalka hoos u dhaca

Ku dar liiska hoos-u-dhaca oo leh HTML yar oo dheeri ah iyo dul-dhigayaasha JavaScript plugin .

Tabs leh hoos u dhac

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

Kiniinnada hoos u dhaca

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

Navbars waa qaybaha meta ka jawaaba oo u adeega sida madax-wareejin codsigaaga ama goobtaada. Waxay bilaabaan inay burburaan (oo waa la rogi karaa) muuqaallada mobilada waxayna noqdaan kuwo toosan marka ballaca daawashada la heli karo uu kordho.

Xidhiidhiyayaasha navbar navbar ee xaqqa ah hadda lama taageero

Mawduuc qulqulaya

Mar haddii Bootstrap aanu garanayn inta ay le'eg tahay boosaska ku jira waxa ku jira navbar kaaga, waxa laga yaabaa inaad la kulanto arrimo la xidhiidha nuxurka isku duubida safka labaad. Si taas loo xalliyo, waxaad awoodaa:

Iska yaree qaddarka ama ballaca alaabta navbar.
Qari walxaha navbar ee cabbirada shaashadaha qaarkood adoo isticmaalaya fasalo utility ah oo ka jawaabaya .
Beddel barta uu navbar kaaga u dhexeeyo qaabka burburay iyo qaabka jiifka. Habbee @grid-float-breakpointdoorsoomaha ama ku dar su'aalahaaga warbaahineed.

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

Ku beddel astaanta navbar sawirkaaga adiga oo u beddelaya qoraalka mid <img>. Maadaama .navbar-branduu suufku leeyahay dhererkiisa iyo dhererkiisa, waxa laga yaabaa inaad u baahato inaad tirtirto qaar CSS ah iyadoo ku xidhan sawirkaaga.

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

Dhig foomka foomka gudaha .navbar-formsi toos ah toosan iyo hab-dhaqan burburay ee meelaha cidhiidhiga ah. Isticmaal ikhtiyaarka toosinta si aad u go'aansato meesha ay ku nooshahay nuxurka navbar.

Sida kor u kaca, .navbar-formwaxay la wadaagtaa in badan oo ka mid ah koodkeeda iyada oo .form-inlineloo marayo mixin. Qaar ka mid ah kontaroolada qaabka, sida kooxaha wax gelinta, ayaa laga yaabaa inay u baahdaan ballaadhka go'an si loogu muujiyo si sax ah gudaha 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>

Had iyo jeer ku dar calaamadaha

Akhristayaasha shaashadda waxay dhib kala kulmi doonaan foomamkaaga haddii aadan ku darin calaamadda wax kasta oo la geli karo. Foomamkaan khadka tooska ah, waxaad qarin kartaa summada adigoo isticmaalaya .sr-onlyfasalka. Waxaa jira habab kale oo kale oo lagu bixiyo summada tignoolajiyada caawinta, sida aria-label, aria-labelledbyama titlesifada. Haddii kuwan midkoodna aanu jirin, akhristayaasha shaashadda waxa laga yaabaa inay adeegsadaan placeholdersifada, haddii ay jiraan, laakiin ogow isticmaalka placeholderbeddelka hababka calaamadaynta kale aan lagula talin.

Ku dar .navbar-btnfasalka <button>canaasiirta aan deganayn a <form>si toos ah u dhexda navbar.

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

Ku duub xargaha qoraalka curiye leh .navbar-text, badiyaa <p>sumad si loogu hoggaansamo iyo midab habboon.

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

Dadka isticmaala isku xirka caadiga ah ee aan ku jirin qaybta navbar caadiga ah, isticmaal .navbar-linkfasalka si aad ugu darto midabada saxda ah ee ikhtiyaarka navbar ee caadiga ah iyo kuwa rogan.

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

Isku hagaaji xiriiriyayaasha, foomamka, badhamada, ama qoraalka, adoo isticmaalaya .navbar-leftfasalada .navbar-rightutility. Labada fasalba waxay ku dari doonaan sabayn CSS jihada la cayimay. Tusaale ahaan, si aad isku xidhidhiyaha nav, u geliso meel gooni ah <ul>oo ay la socoto fasalka utility ee la dabaqay.

Fasaladani waa noocyo isku dhafan oo ah .pull-leftiyo .pull-right, laakiin waxay ku kooban yihiin weydiimaha warbaahinta si fudud loogu maareeyo qaybaha navbar ee cabbirrada qalabka.

Ku dar .navbar-fixed-topoo ku dar a .containerama .container-fluiddhexda iyo nuxurka navbar.

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

suufka jirka ayaa loo baahan yahay

Navbar go'an ayaa dulmari doona macluumaadkaaga kale, ilaa aad paddingku darto sare ee <body>. Isku day qiyamkaaga ama isticmaal qaybtayada hoose. Talo: Sida caadiga ah, navbarku waa 50px sare.

body { padding-top: 70px; }

Hubi inaad ku darto tan ka dib Bootstrap-ka CSS ee xudunta u ah.

Ku dar .navbar-fixed-bottomoo ku dar a .containerama .container-fluiddhexda iyo nuxurka navbar.

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

suufka jirka ayaa loo baahan yahay

Navbar go'an ayaa dulmari doona macluumaadkaaga kale, ilaa aad paddingku darto gunta <body>. Isku day qiyamkaaga ama isticmaal qaybtayada hoose. Talo: Sida caadiga ah, navbarku waa 50px sare.

body { padding-bottom: 70px; }

Hubi inaad ku darto tan ka dib Bootstrap-ka CSS ee xudunta u ah.

Samee navbar ballac buuxa oo la socda bogga adiga oo ku dara oo ku .navbar-static-topdar a .containerama .container-fluiddhexda iyo nuxurka navbar suuf.

Si ka duwan .navbar-fixed-*fasalada, uma baahnid inaad wax ka bedesho suufka body.

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

Wax ka beddel muuqaalka navbar adiga oo ku daraya .navbar-inverse.

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

Burburka rootiga

Tilmaan bogga hadda meesha uu ku yaalo ee kala sareynta hagaha.

Kala soocida ayaa si toos ah loogu daraa CSS iyada oo loo marayo :beforeiyo content.

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

Pagination

Sii xiriirinta boggaaga ama abkaaga qaybta boggaga badan, ama beddelka bogag fudud .

Bogga asalka ah

Pagination fudud oo ay dhiirigelisay Rdio, ku fiican abka iyo natiijooyinka raadinta. Baloogga weyni way adag tahay in la waayo, si fudud ayaa loo miisaami karaa, wuxuuna bixiyaa meelo badan oo gujis ah.

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

Calaamadeynta qaybta bogga

Qaybta bogga waa in lagu duuduubaa <nav>curiye si loo aqoonsado inay tahay qayb hagista si loo eego akhristayaasha iyo tignoolajiyada kale ee caawinta. Intaa waxaa dheer, sida bogga ay u badan tahay in uu leeyahay wax ka badan hal qayb oo ah qaybta hagidda (sida navigation hoose ee madaxa, ama navigation dhinaca), waxaa habboon in la bixiyo sharraxaad aria-labeltaas <nav>oo ka tarjumaysa ujeeddadeeda. Tusaale ahaan, haddii qaybta pagination-ka loo isticmaalo in lagu dhex maro natiijooyinka raadinta, calaamad ku habboon waxay noqon kartaa aria-label="Search results pages".

Naafada iyo gobolada firfircoon

Xiriirinta waa kuwo lagu habeyn karo duruufo kala duwan. U isticmaal .disabledxiriiriyeyaasha aan la gujin karin iyo .activesi aad u muujiso bogga hadda jira.

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

Waxaan kugula talineynaa inaad u beddesho barroosinnada firfircoon ama naafada ah <span>, ama ka dhaaf barroosinka kiiska fallaadhihii hore/xiga, si aad meesha uga saarto shaqeynta gujinta iyadoo la ilaalinayo qaababka loogu talagalay.

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

Cabbirka

Ma jeceshahay bogag ka weyn ama ka yar? Ku dar .pagination-lgama .pagination-smcabbiro dheeraad ah.

<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

Xidhiidhada degdega ah ee hore iyo kan xiga ee hirgelinta pagination fudud oo leh calaamad iftiin iyo qaabab. Waxay u fiican tahay bogagga fudud sida blogyada ama majaladaha.

Tusaale ahaan

Sida caadiga ah, pager-ku wuxuu isku xiraa.

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

Xiriirinta toosan

Haddii kale, waxaad isku toosin kartaa xiriiriye kasta dhinacyada:

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

Xaalad naafada ah

Xiriirinta Pager sidoo kale waxay isticmaalaan .disabledfasalka utility guud ee bogga.

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

Tusaale

Tusaalaha ciwaanka Cusub

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

Kala duwanaansho la heli karo

Ku dar mid ka mid ah fasallada wax ka beddelka ee hoos ku xusan si aad u bedesho muuqaalka calaamadda.

Khatarta Digniinta ee Guusha Hore ee Hore

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

Ma haysaa calaamado badan?

Dhibaatooyinka soo bandhigida waxay soo bixi karaan marka aad ku haysato daraasiin calaamado khadka ah oo ku jira weel cidhiidhi ah, mid walbana ka kooban yahay shay u gaar inline-blockah (sida astaanta). Habka ku xeeran tani waa dejinta display: inline-block;. Macnaha guud iyo tusaale, eeg #13219 .

Si fudud u muuji walxaha cusub ama aan la <span class="badge">akhriyin adiga oo ku dara xiriiriyeyaasha, Bootstrap navs, iyo in ka badan.

Inbox42

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

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

Is-burburinta

Marka aanay jirin waxyaabo cusub ama aan la akhriyin, calaamaduhu si fudud ayay u dumayaan (iyada oo loo sii marayo :emptyxulashada CSS) waase haddii aanay waxba ka jirin.

Waafaqsanaanta browser-ka

Calaamaduhu iskuma dumi doonaan Internet Explorer 8 sababtoo ah waxay ka maqan tahay taageerada :emptyxulashada

La qabsada gobolada nav ee firfircoon

Hababka la dhex dhisay ayaa lagu daray in calaamado lagu dhejiyo gobolada firfircoon ee socodka kiniinka.

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

Qayb khafiif ah, qayb dabacsan oo si ikhtiyaari ah u fidin karta dhammaan daawashada si ay u muujiso nuxurka muhiimka ah ee goobtaada.

Hello, adduunyo!

Tani waa unug fudud oo halyey ah, qayb fudud oo qaabka jumbotron ah oo loogu yeedhayo feejignaan dheeri ah nuxurka ama macluumaadka.

Wax dheeri ah baro

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

Si aad u samayso jumbotron ballac buuxa, oo aan lahayn geeso wareegsan, dhig meel ka baxsan dhammaan .containers oo beddelkeeda ku dar .containergudaha.

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

Qolf fudud oo loogu talagalay in h1si habboon loo baneeyo oo u qaybiyo qaybaha nuxurka bogga. Waxay ka faa'iidaysan kartaa qaybta h1caadiga smallah, iyo sidoo kale inta badan qaybaha kale (oo leh qaabab dheeraad ah).

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

Kordhi nidaamka shabaqlaha Bootstrap oo leh qaybta thumbnail si aad si sahal ah ugu muujiso xadhkaha sawirada, fiidyaha, qoraalka, iyo in ka badan.

Haddii aad raadinayso soo bandhigida Pinterest-sida sawirka thumbnails ee dhererka kala duwan iyo/ama ballaca, waxaad u baahan doontaa inaad isticmaasho plugin dhinac saddexaad ah sida Masonry , Isotope , ama Salvattore .

Tusaale ahaan

Sida caadiga ah, Bootstrap's thumbnails waxaa loogu talagalay inay soo bandhigaan sawirro ku xiran oo leh calaamado loo baahan yahay ugu yar.

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

Waxyaabaha gaarka ah

Waxoogaa calaamad ah oo dheeri ah, waxaa suurtogal ah in lagu daro nooc kasta oo ka mid ah waxyaabaha HTML sida cinwaannada, cutubyada, ama badhamada thumbnails.

Calaamadda thumbnail

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id un mi porta gravida iyo eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

badhanka badhanka

Calaamadda thumbnail

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id un mi porta gravida iyo eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

badhanka badhanka

Calaamadda thumbnail

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id un mi porta gravida iyo eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

badhanka badhanka

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

Bixi fariimaha jawaab celinta macnaha guud ee ficilada isticmaale ee caadiga ah oo leh farriimaha digniinta ee la heli karo oo dabacsan.

Tusaalooyinka

Ku duub qoraal kasta iyo badhanka cayrinta ikhtiyaarka ah .alertiyo mid ka mid ah afarta fasal ee macnaha guud (tusaale, .alert-success) fariimaha digniinta aasaasiga ah.

No class default

Ogeysiisyadu ma laha fasallada caadiga ah, kaliya fasallada saldhigga iyo beddelka. Digniinta cawlan ee caadiga ahi macno badan ma samaynayso, markaa waxaa lagaa rabaa inaad ku qeexdo nooc adigoo isticmaalaya fasalka macnaha guud. Ka dooro guusha, macluumaadka, digniinta, ama khatarta.

Si fiican ayaa loo sameeyay! Waxaad si guul leh u akhriday fariintan digniinta ah ee muhiimka ah.

Madaxa kor u qaad! Digniintan ayaa u baahan dareenkaaga, laakiin aad muhiim uma aha.

Digniin! Si fiican isu hubso, si fiican uma eegtid.

Alla degdeg! Waxoogaa beddel oo isku day inaad mar kale soo gudbiso.

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

Ogeysiisyada aan la joojin karin

.alert-dismissibleKu dhis digniin kasta adiga oo ku dara badhanka ikhtiyaarka ah oo dhaw.

Wuxuu u baahan yahay furaha digniinta JavaScript

Si aad si buuxda ugu shaqeyso, digniinaha la eryi karo, waa inaad isticmaashaa ogeysiisyada JavaScript plugin .

Digniin! Si fiican isu hubso, si fiican uma eegtid.

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

Hubi habdhaqanka saxda ah ee dhammaan qalabka

Hubi inaad isticmaasho <button>curiyaha leh sifada data-dismiss="alert"xogta.

Xiriirinta digniinaha

Isticmaal .alert-linkfasalka utility si aad si deg deg ah u bixiso iskuxiryada midabada leh ee digniin kasta.

Si fiican ayaa loo sameeyay! Waxaad si guul leh u akhriday fariintan digniinta ah ee muhiimka ah .

Madaxa kor u qaad! Digniintan ayaa u baahan dareenkaaga , laakiin aad muhiim uma aha.

Digniin! Si fiican isu hubso, si fiican uma eegtid .

Alla degdeg! Waxoogaa beddel oo isku day inaad mar kale soo gudbiso.

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

Bixi jawaab celin casri ah oo ku saabsan horumarka socodka shaqada ama ficilka leh baararka horumarka fudud ee haddana dabacsan.

Waafaqsanaanta browser-ka

Baararka horusocodku waxay isticmaalaan beddelka CSS3 iyo animations si ay u gaaraan qaar ka mid ah saameyntooda. Tilmaamahaan laguma taageero Internet Explorer 9 iyo wixii ka hooseeya ama noocyadii hore ee Firefox. Opera 12 ma taageerto animations.

Waafaqsanaanta Siyaasadda Badbaadada Macluumaadka (CSP).

Haddii website-kaagu leeyahay Siyaasadda Amniga Maaddada (CSP) oo aan ogolayn style-src 'unsafe-inline', markaa ma awoodi doontid inaad isticmaasho stylesifooyinka khadka si aad u dejiso ballaadhka bar horumarka sida ku cad tusaalayaashayada hoose. Hababka kale ee lagu dejiyo ballaadhka ku habboon CSP-yada adag waxaa ka mid ah adeegsiga JavaScript-yar oo caadadii ah (kaas oo dhigay element.style.width) ama adeegsiga fasallada CSS ee caadiga ah.

Tusaalaha aasaasiga ah

Bar horumarka asalka ah.

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

Sumad leh

Ka saar fasalka <span>dhexdiisa .sr-onlybarta horumarka si aad u muujiso boqolkiiba muuqda.

60%

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

Si loo hubiyo in qoraalka calaamaduhu uu ahaado mid la akhriyi karo xitaa boqolleyda hoose, ka fiirso ku darista min-widthbar horumarka.

0%

2%

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

Beddelka macnaha guud

Baararka horusocodku waxay isticmaalaan qaar ka mid ah badhanka isku midka ah iyo xiisadaha digniinta ee qaababka joogtada ah.

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

Xariifnimo

Wuxuu isticmaalaa gradient si uu u abuuro saamayn xariijimo ah. Lagama heli karo IE9 iyo wixii ka hooseeya.

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

Animation

Ku dar .activesi .progress-bar-stripedaad u dhaqaajiso xariijimaha midig ilaa bidix. Lagama heli karo IE9 iyo wixii ka hooseeya.

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

Is dulsaaran

Dhig baararka badan oo isku mid .progressah si aad isugu dhejiso.

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

Qaababka shayga la taaban karo ee lagu dhisayo noocyo kala duwan oo ka kooban (sida faallooyinka blogka, Tweets, iwm) kuwaas oo leh muuqaal bidix ama midig ku toosan oo ay weheliso nuxur qoraal ah.

Warbaahinta caadiga ah

Warbaahinta caadiga ah waxay soo bandhigtaa shay warbaahin (sawir, muuqaal, maqal) dhanka bidix ama midig ee block content.

Ciwaanka warbaahinta

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Ciwaanka warbaahinta

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Ciwaanka warbaahineed ee Nsted

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Ciwaanka warbaahinta

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Ciwaanka warbaahinta

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, 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>

Fasallada .pull-leftiyo .pull-rightsidoo kale waa jiraan oo hore ayaa loo isticmaali jiray qayb ka mid ah qaybta warbaahinta, laakiin waa laga saaray isticmaalkaas sida v3.3.0. Waxay qiyaastii u dhigmaan .media-leftiyo .media-right, marka laga reebo kuwa .media-rightla gelinayo .media-bodyhtml ka dib.

Toosinta warbaahinta

Sawirada ama warbaahinta kale waxay noqon karaan kuwo toosan sare, dhexe, ama hoose. Qaabka ugu sarreeya ayaa toosan.

Warbaahinta sare ee toosan

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus iyo magnis dis parturient montes, nascetur ridiculus mus.

Warbaahinta isku toosan

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus iyo magnis dis parturient montes, nascetur ridiculus mus.

Warbaahinta toosan ee hoose

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus iyo magnis dis parturient montes, nascetur ridiculus 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>

Liiska warbaahinta

Iyada oo waxoogaa calaamadayn dheeraad ah, waxaad isticmaali kartaa warbaahinta liiska gudaha (waxtar u leh mawduucyada faallooyinka ama liisaska maqaallada).

Ciwaanka warbaahinta

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Ciwaanka warbaahineed ee Nsted
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Ciwaanka warbaahineed ee Nsted
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Ciwaanka warbaahineed ee Nsted
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, 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>

Kooxaha liisku waa qayb dabacsan oo awood badan si ay u soo bandhigaan liisaska fudud ee curiyeyaasha, laakiin kuwa adag oo leh nuxur gaar ah.

Tusaalaha aasaasiga ah

Kooxda liiska ugu aasaasiga ah waa liis aan la dalban oo ay ku jiraan shay liis ah, iyo fasalo habboon. Ku dul dhis xulashooyinka soo socda, ama CSS adiga kuu gaar ah haddii loo baahdo.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum iyo 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>

Calaamadaha

Ku dar qaybta calaamadaha shay kasta oo koox ah oo si toos ah ayaa loo dhigi doonaa midigta.

14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus

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

Alaabta ku xidhan

Isku xidh walxaha kooxda adigoo isticmaalaya summada barroosinka halkii aad ka isticmaali lahayd liiska shayada (taasi waxay sidoo kale ka dhigan tahay waalid <div>halkii laga isticmaali lahaa <ul>). Looma baahna waalid gaar ah oo ku wareegsan shay kasta.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum iyo 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>

Walxaha badhanka

Shayada liiska waxay noqon karaan badhammo halkii ay ka ahaan lahaayeen shayada liiska (taasi waxay sidoo kale ka dhigan tahay waalid <div>halkii ay ka ahaan lahaayeen <ul>). Looma baahna waalid gaar ah oo ku wareegsan shay kasta. Ha isticmaalin .btnfasallada caadiga ah halkan.

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

Alaabta naafada ah

Ku dar .disabledsi aad .list-group-itemu cawlan si ay ugu muuqato mid naafo ah.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum iyo 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>

Fasalada macnaha guud

U adeegso fasallada macnaha guud si aad u habayso shayada liiska, default ama ku xidhan. Sidoo kale waxaa ku jira .activegobolka.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum iyo eros

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum iyo 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>

Waxyaabaha gaarka ah

Ku dar ku dhawaad HTML kasta, xitaa kooxaha liiska ku xiran sida kan hoose.

Qor cinwaanka shayga kooxda

Donec id un mi porta gravida iyo eget metus. Maecenas sed diam eget risus varius blandit.

Qor cinwaanka shayga kooxda

Donec id un mi porta gravida iyo eget metus. Maecenas sed diam eget risus varius blandit.

Qor cinwaanka shayga kooxda

Donec id un mi porta gravida iyo 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>

Iyadoo aan had iyo jeer loo baahnayn, mararka qaarkood waxaad u baahan tahay inaad DOMkaaga ku riddo sanduuq. Xaaladahaas, isku day qaybta guddida.

Tusaalaha aasaasiga ah

Sida caadiga ah, waxa la .panelsameeyo oo dhan waa in lagu dabaqo qaar ka mid ah xudduudaha aasaasiga ah iyo suufka si ay ugu jiraan waxyaabo qaar.

Tusaalaha guddiga aasaasiga ah

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

Guddi ciwaan leh

Si sahal ah ugu dar weelka ciwaanka golekaaga leh .panel-heading. Waxa kale oo aad ku dari kartaa mid kasta <h1>- <h6>oo leh .panel-titlefasal si aad ugu darto cinwaan hore loo qaabeeyey. Si kastaba ha ahaatee, cabbirka farta <h1>- <h6>waa la dhaafiyay .panel-heading.

Isku xirka saxda ah ee midabaynta, hubi inaad ku dhejiso ciwaannada ciwaannada gudaha .panel-title.

Guddigu wuxuu ku socdaa cinwaan la'aan

Nuxurka guddiga

Cinwaanka guddiga

Nuxurka guddiga

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

Guddi lug leh

Ku duub badhamada ama qoraalka sare ee .panel-footer. Ogsoonow in cagaha guddiyadu aysan dhaxlin midabada iyo xuduudaha marka la isticmaalayo kala duwanaanshiyaha macnaha guud maadaama aan loogu talagalin inay ku jiraan safka hore.

Nuxurka guddiga

footer panel

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

Beddelka macnaha guud

Si la mid ah qaybaha kale, si fudud uga dhig guddi macno badan u leh xaalad gaar ah adiga oo ku daraya mid ka mid ah fasallada xaaladda guud.

Cinwaanka guddiga

Nuxurka guddiga

Cinwaanka guddiga

Nuxurka guddiga

Cinwaanka guddiga

Nuxurka guddiga

Cinwaanka guddiga

Nuxurka guddiga

Cinwaanka guddiga

Nuxurka guddiga

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

Miisaska leh

Ku dar wax kasta oo aan xuduud lahayn .tablegudaha guddi nakhshad aan xad lahayn. Haddii uu jiro a .panel-body, waxaan ku darnaa xuduud dheeraad ah xagga sare ee miiska si loo kala saaro.

Ciwaanka guddiga

Qaar ka mid ah nuxurka guddiga caadiga ah halkan. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Magaca koowaad	Magaca Dambe	Magaca isticmaale
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry	Shimbirka	@twitter

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

Haddii aanu jirin guddi guddi, qaybtu waxay ka guurtaa madaxa guddiga una guurto miiska iyada oo aan la joojin.

Ciwaanka guddiga

#	Magaca koowaad	Magaca Dambe	Magaca isticmaale
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry	Shimbirka	@twitter

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

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

Iyadoo kooxaha liiska

Si fudud ugu dar kooxaha liiska ballaca buuxa ee guddi kasta.

Ciwaanka guddiga

Qaar ka mid ah nuxurka guddiga caadiga ah halkan. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum iyo 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>

U oggolow daalacashada inay go'aamiyaan cabbirka muuqaalka ama muuqaalka iyadoo ku saleysan ballaadhka xannibaadda ay ku jiraan adigoo abuuraya saamiga gudaha ah oo si habboon u cabbiraya qalab kasta.

Xeerarka waxaa si toos ah loogu dabaqaa <iframe>, <embed>, <video>, iyo <object>canaasiirta; Ikhtiyaar ahaan isticmaal fasalka farcanka ee cad .embed-responsive-itemmarka aad rabto inaad la mid noqoto habaynta sifooyinka kale.

Talo-siin! Uma baahnid inaad frameborder="0"ku darto s-gaaga <iframe>marka aanu taas adiga kugu dhaafno.

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

Sida ugu fiican

Isticmaal ceelka si sahlan oo saameyn ku leh curiyaha si aad u siiso saameyn gelinta.

Bal eeg, ceel baan ku jiraa!

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

fasallada ikhtiyaariga ah

Xakamaynta suufka iyo geesaha wareegsan oo leh laba fasal wax-beddeleyaal ikhtiyaari ah.

Bal eeg, waxaan ku jiraa ceel weyn!

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

Bal eeg, waxaan ku jiraa ceel yar!

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

Qaybaha

Glyphicons

Glyphs la heli karo

Sida loo isticmaalo

Ha isku darin qaybaha kale

Kaliya loo isticmaalo walxaha madhan

Beddelida goobta farta summada

Astaamaha la heli karo

Tusaalooyinka

Hoos u dhac

Tusaale

Toosin

Waxa laga yaabaa inay u baahato meelayn dheeraad ah

Go'ay.pull-right go'ay

Madax

Qaybiye

Walxaha liiska naafada

Kooxaha badhanka

Aaladaha iyo soo-bandhigidda kooxaha badhanka waxay u baahan yihiin goob gaar ah

Xaqiiji sax roleoo bixi calaamad

Tusaalaha aasaasiga ah

Qalabka badhanka

Cabbirka

Buul

Kala duwanaansho toosan

Kooxaha badhanka ee xaq u leh

Xakamaynta xuduudaha

IE8 iyo xuduudaha

<a>Curiyayaasha leh

Xidhiidhada u shaqeeya sidii badhamada

<button>Curiyayaasha leh

Hoos u dhaca badhanka

Ku tiirsanaanta plugin

Hoos u dhigida badhanka kelida ah

Hoos udhaca badhanka

Cabbirka

Kala duwanaanshiyaha daadinta

Kooxaha wax gelinta

Qoraal <input>kaliya

Tilmaamaha qalabka & kor u kaca ee kooxaha wax gelinta waxay u baahan yihiin goob gaar ah

Ha isku darin qaybaha kale

Had iyo jeer ku dar calaamadaha

Tusaalaha aasaasiga ah

Cabbirka

Sanduuqyada hubinta iyo addons raadiyaha

Button addons

Badhamada hoos u dhaca

Badhamada qaybsan

Badhamada badan

Navs

Isticmaalka navs ee muraayadaha tab waxay u baahan tahay plugin tabs JavaScript

Ka dhig maraakiibta loo isticmaalo hagidda mid la heli karo

Tabs

Kiniinnada

Xaq loo yeelay

Safari iyo navs xaq u jawaabaya

Xiriirinta naafada

Shaqada isku xidhka ma saamayn

Isticmaalka hoos u dhaca

Tabs leh hoos u dhac

Kiniinnada hoos u dhaca

Navbar

Navbar asalka ah

Mawduuc qulqulaya

Wuxuu u baahan yahay plugin JavaScript

Beddelida barta goynta navbar mobaylka ee burburay

Samee navbars la heli karo

Sawirka astaanta

Foomamka

Digniinaha qalabka moobilka

Had iyo jeer ku dar calaamadaha

Badhamada

Isticmaalka gaarka ah ee macnaha guud

Qoraal

Xiriirinta aan nav ahayn

Isku toosinta qaybaha

Midig toosinta qaybo badan

Ku go'an xagga sare

suufka jirka ayaa loo baahan yahay

Ku go'an xagga hoose

Go'ay`.pull-right` go'ay

Xaqiiji sax `role`oo bixi calaamad

`<a>`Curiyayaasha leh

`<button>`Curiyayaasha leh

Qoraal `<input>`kaliya