Glyphs në dispozicion

Përfshin mbi 250 glyphs në format font nga grupi Glyphicon Halflings. Glyphicons Halflings zakonisht nuk janë të disponueshme falas, por krijuesi i tyre i ka vënë ato në dispozicion për Bootstrap pa kosto. Si falënderim, ne ju kërkojmë vetëm që të përfshini një lidhje me Glyphicons sa herë që është e mundur.

glyphicon glyphicon-yll
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-re
glyphicon glyphicon-zarf
glyphicon glyphicon-laps
glyphicon glyphicon-xham
glyphicon glyphicon-muzikë
glyphicon glyphicon-kërkim
glyphicon glyphicon-zemër
glyphicon glyphicon-yll
glyphicon glyphicon-yll-zbrazët
glyphicon glyphicon-përdorues
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-heq
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-sinjal
glyphicon glyphicon-cog
glyphicon glyphicon-plehra
glyphicon glyphicon-shtëpi
glyphicon glyphicon-file
glyphicon glyphicon-kohë
glyphicon glyphicon-rrugë
glyphicon glyphicon-shkarko-alt
glyphicon glyphicon-shkarko
glyphicon glyphicon-ngarkim
glyphicon glyphicon-inbox
glyphicon glyphicon-luaj-rreth
glyphicon glyphicon-përsërit
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-flamur
glyphicon glyphicon-kufje
glyphicon glyphicon-volume-off
glyphicon glyphicon-ulim-volumi
glyphicon glyphicon-volum-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barkodi
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-libër
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-kamerë
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-tekst-lartësi
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-qendër
glyphicon glyphicon-align-right
glyphicon glyphicon-rreshtoj-justifikoj
glyphicon glyphicon-listë
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-djathtas
glyphicon glyphicon-facetime-video
glyphicon glyphicon-foto
glyphicon glyphicon-hartë-shënues
glyphicon glyphicon-rregulloj
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-kontroll
glyphicon glyphicon-lëviz
glyphicon glyphicon-hap-prapa
glyphicon glyphicon-fast-backward
glyphicon glyphicon-mbrapsht
glyphicon glyphicon-luaj
glyphicon glyphicon-pauzë
glyphicon glyphicon-stop
glyphicon glyphicon-përpara
glyphicon glyphicon-fast-forward
glyphicon glyphicon-hap-përpara
glyphicon glyphicon-nxjerr
glyphicon glyphicon-chevron-majtas
glyphicon glyphicon-chevron-djathtas
glyphicon glyphicon-plus-shenjë
glyphicon glyphicon-minus-shenjë
glyphicon glyphicon-remove-shenjë
glyphicon glyphicon-ok-shenjë
glyphicon glyphicon-pyetje-shenjë
glyphicon glyphicon-info-shenjë
glyphicon glyphicon-screenshot
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-rreth
glyphicon glyphicon-ban-rreth
glyphicon glyphicon-shigjeta-majtas
glyphicon glyphicon-shigjeta-djathtas
glyphicon glyphicon-shigjeta-lart
glyphicon glyphicon-shigjeta-poshtë
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-plotë
glyphicon glyphicon-ripërmasa-i vogël
glyphicon glyphicon-shenjë-çuditëse
glyphicon glyphicon-dhuratë
glyphicon glyphicon-fletë
glyphicon glyphicon-zjarr
glyphicon glyphicon-eye-hapur
glyphicon glyphicon-sy-mbyll
glyphicon glyphicon-paralajmërim-shenjë
glyphicon glyphicon-plan
glyphicon glyphicon-kalendar
glyphicon glyphicon-i rastësishëm
glyphicon glyphicon-koment
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-poshtë
glyphicon glyphicon-retweet
glyphicon glyphicon-karrocë
glyphicon glyphicon-folder-mbyll
glyphicon glyphicon-folder-hapur
glyphicon glyphicon-ndryshoj madhësinë-vertikale
glyphicon glyphicon-ripërmasa-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-zile
glyphicon glyphicon-certifikatë
glyphicon glyphicon-bravo
glyphicon glyphicon-thumbs-poshtë
glyphicon glyphicon-dorë-djathtas
glyphicon glyphicon-dorë-majtas
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-rreth-shigjeta-djathtas
glyphicon glyphicon-rreth-shigjeta-majtas
glyphicon glyphicon-rreth-shigjeta-lart
glyphicon glyphicon-rreth-shigjeta-poshtë
glyphicon glyphicon-glob
glyphicon glyphicon-pikëllim
glyphicon glyphicon-detyra
glyphicon glyphicon-filter
glyphicon glyphicon-çantë
glyphicon glyphicon-ekran i plotë
glyphicon glyphicon-dashboard
glyphicon glyphicon-kapëse letre
glyphicon glyphicon-zemër-zbrazët
glyphicon glyphicon-lidhje
glyphicon glyphicon-telefon
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-rendi
glyphicon glyphicon-rendit sipas alfabetit
glyphicon glyphicon-rendit sipas alfabetit-alt
glyphicon glyphicon-rendi-sipas renditjes
glyphicon glyphicon-rendi-sipas-order-alt
glyphicon glyphicon-rendit sipas atributeve
glyphicon glyphicon-rendit-nga-atributet-alt
glyphicon glyphicon-i pakontrolluar
glyphicon glyphicon-zgjeroj
glyphicon glyphicon-kolaps-poshtë
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-rekord
glyphicon glyphicon-ruaj
glyphicon glyphicon-i hapur
glyphicon glyphicon-ruajtur
glyphicon glyphicon-import
glyphicon glyphicon-eksport
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-heq
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-hapur
glyphicon glyphicon-kredit-kartë
glyphicon glyphicon-transferim
glyphicon glyphicon-takëm
glyphicon glyphicon-header
glyphicon glyphicon-i ngjeshur
glyphicon glyphicon-kufje
glyphicon glyphicon-telefon-alt
glyphicon glyphicon-kullë
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-titra
glyphicon glyphicon-tingull-stereo
glyphicon glyphicon-tingull-dolby
glyphicon glyphicon-tingull-5-1
glyphicon glyphicon-tingull-6-1
glyphicon glyphicon-tingull-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-re-shkarkim
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-pemë-halore
glyphicon glyphicon-pemë-gjethore
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-skedar i hapur
glyphicon glyphicon-level-lart
glyphicon glyphicon-kopje
glyphicon glyphicon-paste
glyphicon glyphicon-alert
glyphicon glyphicon-equalizer
glyphicon glyphicon-mbret
glyphicon glyphicon-mbretëresha
glyphicon glyphicon-push
glyphicon glyphicon-peshkop
glyphicon glyphicon-kalorës
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tendë
glyphicon glyphicon-dërrasë e zezë
glyphicon glyphicon-krevat
glyphicon glyphicon-mollë
glyphicon glyphicon-fshij
glyphicon glyphicon-hourglass
glyphicon glyphicon-llambë
glyphicon glyphicon-duplicate
glyphicon glyphicon-derrkuc-bank
glyphicon glyphicon-gërshërë
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-jen
glyphicon glyphicon-jpy
glyphicon glyphicon-rubla
glyphicon glyphicon-fërkim
glyphicon glyphicon-shkallë
glyphicon glyphicon-akull-lolly
glyphicon glyphicon-akull-me shije lolly
glyphicon glyphicon-edukim
glyphicon glyphicon-opsion-horizontal
glyphicon glyphicon-opsion-vertikal
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-dritare
glyphicon glyphicon-vaj
glyphicon glyphicon-kokërr
glyphicon glyphicon-syze dielli
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-tekst-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-fund
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-trekëndësh-djathtas
glyphicon glyphicon-trekëndësh-majtas
glyphicon glyphicon-trekëndësh-fund
glyphicon glyphicon-trekëndësh-majë
glyphicon glyphicon-konsol
glyphicon glyphicon-mbishkrim
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-majtas
glyphicon glyphicon-menu-djathtas
glyphicon glyphicon-menu-poshtë
glyphicon glyphicon-menu-up

Si të përdorni

Për arsye të performancës, të gjitha ikonat kërkojnë një klasë bazë dhe një klasë ikonash individuale. Për ta përdorur, vendosni kodin e mëposhtëm pothuajse kudo. Sigurohuni që të lini një hapësirë midis ikonës dhe tekstit për mbushjen e duhur.

Mos përzieni me përbërës të tjerë

Klasat e ikonave nuk mund të kombinohen drejtpërdrejt me komponentë të tjerë. Ato nuk duhet të përdoren së bashku me klasa të tjera në të njëjtin element. Në vend të kësaj, shtoni një të mbivendosur <span>dhe aplikoni klasat e ikonave në <span>.

Vetëm për përdorim në elemente boshe

Klasat e ikonave duhet të përdoren vetëm në elementë që nuk përmbajnë përmbajtje teksti dhe nuk kanë elementë fëmijë.

Ndryshimi i vendndodhjes së fontit të ikonës

Bootstrap supozon se skedarët e shkronjave të ikonave do të vendosen në ../fonts/drejtori, në lidhje me skedarët e përpiluar CSS. Zhvendosja ose riemërtimi i atyre skedarëve të shkronjave nënkupton përditësimin e CSS në një nga tre mënyrat:

Ndryshoni @icon-font-pathdhe/ose @icon-font-namevariablat në skedarët e burimit Më pak.
Përdorni opsionin përkatës të URL-ve të ofruar nga përpiluesi Less.
Ndryshoni url()shtigjet në CSS të përpiluar.

Përdorni çfarëdo opsioni që i përshtatet më së miri konfigurimit tuaj specifik të zhvillimit.

Ikonat e aksesueshme

Versionet moderne të teknologjive ndihmëse do të shpallin përmbajtje të krijuar nga CSS, si dhe karaktere specifike të Unicode. Për të shmangur daljen e paqëllimshme dhe konfuze në lexuesit e ekranit (veçanërisht kur ikonat përdoren thjesht për dekorim), ne i fshehim ato me aria-hidden="true"atributin.

Nëse jeni duke përdorur një ikonë për të përcjellë kuptimin (në vend se vetëm si një element dekorativ), sigurohuni që ky kuptim të përcillet edhe tek teknologjitë ndihmëse - për shembull, përfshini përmbajtje shtesë, të fshehura vizualisht me .sr-onlyklasën.

Nëse po krijoni kontrolle pa tekst tjetër (si p.sh. një <button>që përmban vetëm një ikonë), duhet të siguroni gjithmonë përmbajtje alternative për të identifikuar qëllimin e kontrollit, në mënyrë që të ketë kuptim për përdoruesit e teknologjive ndihmëse. Në këtë rast, mund të shtoni një aria-labelatribut në vetë kontrollin.

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

Shembuj

Përdorini ato në butona, grupe butonash për një shirit veglash, navigim ose hyrje të formularit të paracaktuar.

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

Një ikonë e përdorur në një sinjalizim për të përcjellë se është një mesazh gabimi, me .sr-onlytekst shtesë për t'ua përcjellë këtë aluzion përdoruesve të teknologjive ndihmëse.

Fut një adresë të vlefshme emaili

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

Meny e ndërrueshme, kontekstuale për shfaqjen e listave të lidhjeve. Bërë ndërveprues me shtojcën me zbritje JavaScript .

Shembull

Mbështilleni aktivizuesin e listës me zbritje dhe menynë rënëse brenda .dropdown, ose një element tjetër që deklaron position: relative;. Pastaj shtoni HTML-në e menysë.

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

Menytë rënëse mund të ndryshohen për t'u zgjeruar lart (në vend të poshtë) duke shtuar .dropupte prindi.

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

Radhitje

Si parazgjedhje, një meny rënëse pozicionohet automatikisht 100% nga lart dhe përgjatë anës së majtë të prindit të saj. Shtoni .dropdown-menu-rightnë a .dropdown-menunë të djathtë, rreshtoni menunë rënëse.

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

Titujt

Shtoni një kokë për të etiketuar seksionet e veprimeve në çdo meny rënëse.

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

Ndarëse

Shtoni një ndarës në një seri të veçantë lidhjesh në një meny rënëse.

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

Artikujt e menysë të çaktivizuar

Shto .disablednë a <li>në listën rënëse për të çaktivizuar lidhjen.

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

Gruponi një seri butonash së bashku në një rresht të vetëm me grupin e butonave. Shtoni sjelljen opsionale të radios JavaScript dhe stilin e kutisë së kontrollit me shtojcën tonë të butonave .

Këshillat e veglave dhe popovers në grupet e butonave kërkojnë cilësim të veçantë

Kur përdorni këshilla veglash ose popover në elementë brenda një .btn-group, do të duhet të specifikoni opsionin container: 'body'për të shmangur efektet anësore të padëshiruara (si p.sh. zgjerimi i elementit dhe/ose humbja e qosheve të tij të rrumbullakosura kur aktivizohet këshilla e veglave ose popover).

Sigurohuni të saktë `role`dhe jepni një etiketë

Në mënyrë që teknologjitë ndihmëse - të tilla si lexuesit e ekranit - të përcjellin se një seri butonash është grupuar, roleduhet të sigurohet një atribut i duhur. Për grupet e butonave, kjo do të ishte role="group", ndërsa shiritat e veglave duhet të kenë një role="toolbar".

Një përjashtim janë grupet që përmbajnë vetëm një kontroll të vetëm (për shembull grupet e butonave të justifikuara me <button>elementë) ose një listë rënëse.

Përveç kësaj, grupeve dhe shiritave të veglave duhet t'u jepet një etiketë e qartë, pasi shumica e teknologjive ndihmëse përndryshe nuk do t'i shpallin ato, pavarësisht nga prania e roleatributit të saktë. Në shembujt e dhënë këtu, ne përdorim aria-label, por alternativa të tilla si aria-labelledbymund të përdoren gjithashtu.

Shembull themelor

Mbështillni një seri butonash me .btnnë .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>

Kombinoni grupe <div class="btn-group">në një <div class="btn-toolbar">për komponentë më komplekse.

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

Përmasat

Në vend që të aplikoni klasa për madhësinë e butonave për çdo buton në një grup, thjesht shtoni .btn-group-*në secilin .btn-group, duke përfshirë edhe kur vendosni grupe të shumta.

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

Folezimi

Vendosni një .btn-groupbrenda një tjetri .btn-groupkur dëshironi që menutë rënëse të përzihen me një seri butonash.

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

Variacion vertikal

Bëni që një grup butonash të shfaqen vertikalisht dhe jo horizontalisht. Këtu nuk mbështeten renditjet e butonit të ndarjes.

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

Grupet e butonave të justifikuara

Bëni një grup butonash të shtrirë në madhësi të barabarta për të shtrirë të gjithë gjerësinë e prindit të tij. Gjithashtu funksionon me zbritjet e butonave brenda grupit të butonave.

Trajtimi i kufijve

Për shkak të HTML dhe CSS specifike të përdorura për të justifikuar butonat (domethënë display: table-cell), kufijtë midis tyre janë dyfishuar. Në grupet e butonave të rregullt, margin-left: -1pxpërdoret për të grumbulluar kufijtë në vend që t'i heqin ato. Megjithatë, marginnuk funksionon me display: table-cell. Si rezultat, në varësi të personalizimeve tuaja në Bootstrap, mund të dëshironi të hiqni ose t'i ringjyrni kufijtë.

IE8 dhe kufijtë

Internet Explorer 8 nuk i jep kufijtë e butonave në një grup butonash të justifikuar, pavarësisht nëse është i ndezur <a>ose <button>elementë. Për ta kapërcyer atë, mbështillni çdo buton me një tjetër .btn-group.

Shihni #12476 për më shumë informacion.

Me `<a>`elemente

Thjesht mbështillni një seri .btns në .btn-group.btn-group-justified.

Majtas E mesme E drejta

Majtas E mesme

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

Lidhjet që veprojnë si butona

Nëse <a>elementët përdoren për të vepruar si butona - duke aktivizuar funksionalitetin brenda faqes, në vend që të lundrojnë në një dokument ose seksion tjetër brenda faqes aktuale - atyre gjithashtu duhet t'u jepet një role="button".

Me `<button>`elemente

Për të përdorur grupe të justifikuara të butonave me <button>elementë, duhet ta mbështillni çdo buton në një grup butonash . Shumica e shfletuesve nuk e zbatojnë siç duhet CSS-në tonë për justifikimin e <button>elementeve, por duke qenë se ne mbështesim zbritjet e butonave, ne mund ta zgjidhim këtë.

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

Përdorni çdo buton për të aktivizuar një menu dropdown duke e vendosur atë brenda një .btn-groupdhe duke siguruar shënimin e duhur të menusë.

Varësia e shtojcave

Zbritja e butonave kërkon që shtojca me zbritje të përfshihet në versionin tuaj të Bootstrap.

Zbritje me një buton të vetëm

Kthejeni një buton në një çelës me disa ndryshime bazë të shënimit.

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

Zbritje të butonave të ndarjes

Në mënyrë të ngjashme, krijoni zbritje të butonave të ndarjes me të njëjtat ndryshime të shënjimit, vetëm me një buton të veçantë.

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

Përmasat

Lëshimet e butonave funksionojnë me butona të të gjitha madhësive.

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

Variacion në rënie

Aktivizoni menytë rënëse sipër elementeve duke shtuar .dropupte prindi.

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

Zgjeroni kontrollet e formularit duke shtuar tekst ose butona përpara, pas ose në të dyja anët e çdo teksti të bazuar <input>. Përdorni .input-groupme një .input-group-addonose .input-group-btnpër të shtuar ose për të shtuar elementë në një të vetme .form-control.

`<input>`Vetëm tekstuale

Shmangni përdorimin <select>e elementeve këtu pasi ato nuk mund të stilohen plotësisht në shfletuesit WebKit.

Shmangni përdorimin <textarea>e elementeve këtu pasi rowsatributi i tyre nuk do të respektohet në disa raste.

Këshillat e veglave dhe popovers në grupet e hyrjes kërkojnë cilësim të veçantë

Kur përdorni këshilla veglash ose popover në elementë brenda një .input-group, do të duhet të specifikoni opsionin container: 'body'për të shmangur efektet anësore të padëshiruara (si p.sh. zgjerimi i elementit dhe/ose humbja e qosheve të rrumbullakosura kur aktivizohet këshilla e veglave ose popover).

Mos përzieni me përbërës të tjerë

Mos i përzieni grupet e formave ose klasat e kolonave të rrjetit drejtpërdrejt me grupet hyrëse. Në vend të kësaj, futni grupin e hyrjes brenda grupit të formës ose elementit të lidhur me rrjetin.

Gjithmonë shtoni etiketa

Lexuesit e ekranit do të kenë probleme me formularët tuaj nëse nuk përfshini një etiketë për çdo hyrje. Për këto grupe hyrëse, sigurohuni që çdo etiketë ose funksionalitet shtesë të përcillet tek teknologjitë ndihmëse.

Teknika e saktë që do të përdoret (elementë të dukshëm <label>, <label>elementë të fshehur duke përdorur .sr-onlyklasën, ose përdorimi i , , ose aria-labelatributit aria-labelledby) aria-describedbydhe çfarë informacioni shtesë do të duhet të transmetohet do të ndryshojnë në varësi të llojit të saktë të miniaplikacionit të ndërfaqes që po zbatoni. Shembujt në këtë seksion ofrojnë disa qasje të sugjeruara, specifike për rastin.titleplaceholder

Shembull themelor

Vendosni një shtesë ose buton në të dyja anët e hyrjes. Ju gjithashtu mund të vendosni një në të dy anët e hyrjes.

Ne nuk mbështesim shtesa të shumta ( .input-group-addonose .input-group-btn) në një anë të vetme.

Ne nuk mbështesim kontrolle të shumëfishta formash në një grup të vetëm hyrës.

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

Përmasat

Shtoni klasat relative të madhësisë së formës në .input-groupvetvete dhe përmbajtjet brenda do të ndryshojnë automatikisht - nuk ka nevojë të përsëriten klasat e madhësisë së kontrollit të formës në secilin element.

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

Kutitë e kontrollit dhe shtesat radio

Vendosni çdo kuti kontrolli ose opsion radioje brenda shtesës së një grupi hyrës në vend të tekstit.

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

Shtesa me butona

Butonat në grupet hyrëse janë paksa të ndryshëm dhe kërkojnë një nivel shtesë foleje. Në vend të .input-group-addon, do t'ju duhet të përdorni .input-group-btnpër të mbështjellë butonat. Kjo kërkohet për shkak të stileve të parazgjedhura të shfletuesit që nuk mund të anashkalohen.

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

Butonat me zbritje

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

Butonat e segmentuar

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

Butona të shumtë

Ndërsa mund të keni vetëm një shtesë për çdo anë, mund të keni shumë butona brenda një të vetme .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>

Navet e disponueshme në Bootstrap kanë shënime të përbashkëta, duke filluar me .navklasën bazë, si dhe gjendjet e përbashkëta. Ndërroni klasat e modifikuesve për të kaluar midis secilit stil.

Përdorimi i navigave për panelet e skedave kërkon shtojcën e skedave JavaScript

Për skedat me zona me skeda, duhet të përdorni shtojcën JavaScript të skedave . Shënimi do të kërkojë gjithashtu roleatribute shtesë dhe ARIA – shihni shembullin e shënimit të shtojcës për detaje të mëtejshme.

Bëni të aksesueshme navigimet e përdorura si navigacion

Nëse jeni duke përdorur navigacion për të siguruar një shirit navigimi, sigurohuni që të shtoni një role="navigation"në kontejnerin më logjik prind të <ul>, ose të mbështillni një <nav>element rreth të gjithë navigimit. Mos e shtoni rolin në <ul>vetvete, pasi kjo do të pengonte që ajo të shpallet si një listë aktuale nga teknologjitë ndihmëse.

Skedat

Vini re se .nav-tabsklasa kërkon .navklasën bazë.

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

Pilula

Merrni të njëjtin HTML, por përdorni.nav-pills në vend të kësaj:

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

Pilulat janë gjithashtu të grumbullueshme vertikalisht. Thjesht shtoni .nav-stacked.

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

I justifikuar

Bëjini me lehtësi skedat ose pilulat me gjerësi të barabarta me gjerësinë e prindit të tyre në ekranet më të gjera se 768 pikselë me.nav-justified . Në ekranet më të vogla, lidhjet e navigimit grumbullohen.

Lidhjet e justifikuara të navigimit të shiritit navigues aktualisht nuk mbështeten.

Navs Safari dhe të përgjegjshëm të justifikuar

Që nga v9.1.2, Safari shfaq një defekt në të cilin ndryshimi i madhësisë së shfletuesit tuaj horizontalisht shkakton gabime të paraqitjes në navigimin e justifikuar që fshihen pas rifreskimit. Ky gabim tregohet gjithashtu në shembullin e justifikuar nav .

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

Lidhje të çaktivizuara

Për çdo komponent navigimi (skedat ose pilula), shtoni .disabledpër lidhje gri dhe pa efekte të pezullimit .

Funksionaliteti i lidhjes nuk ndikohet

Kjo klasë do të ndryshojë vetëm pamjen e <a>'s, jo funksionalitetin e saj. Përdorni JavaScript të personalizuar për të çaktivizuar lidhjet këtu.

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

Përdorimi i pikave me rënie

Shtoni menytë rënëse me pak HTML shtesë dhe shtojcën JavaScript me zbritje .

Skedat me zbritje

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

Pilula me pika

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

Shiritat e navigimit janë meta komponentë të përgjegjshëm që shërbejnë si tituj navigimi për aplikacionin ose faqen tuaj. Ato fillojnë të shemben (dhe janë të ndërrueshme) në pamjet celulare dhe bëhen horizontale ndërsa gjerësia e disponueshme e pamjes rritet.

Lidhjet e justifikuara të navigimit të shiritit navigues aktualisht nuk mbështeten.

Përmbajtje e tejmbushur

Meqenëse Bootstrap nuk e di se sa hapësirë ka nevojë përmbajtja në shiritin tuaj navigues, mund të hasni probleme me mbështjelljen e përmbajtjes në një rresht të dytë. Për të zgjidhur këtë, ju mund të:

Zvogëloni sasinë ose gjerësinë e artikujve të shiritit navigues.
Fshih disa artikuj të shiritit navigues në madhësi të caktuara të ekranit duke përdorur klasa të dobishme të përgjegjshme .
Ndryshoni pikën në të cilën shiriti juaj navigues kalon ndërmjet modalitetit të palosur dhe atij horizontal. Personalizojeni @grid-float-breakpointvariablin ose shtoni pyetjen tuaj të medias.

Ndryshimi i pikës së ndërprerjes së shiritit celular të palosur

Shiriti i navigimit rrëzohet në pamjen e tij vertikale celulare kur porta e shikimit është më e ngushtë se @grid-float-breakpoint, dhe zgjerohet në pamjen e tij horizontale jo-lëvizëse kur porta e shikimit është të paktën @grid-float-breakpointnë gjerësi. Rregulloni këtë variabël në burimin Më pak për të kontrolluar kur shiriti i navigimit shembet/zgjerohet. Vlera e paracaktuar është 768px(ekrani më i vogël "i vogël" ose "tableti").

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

Zëvendësoni markën e navbarit me imazhin tuaj duke e ndërruar tekstin me një <img>. Meqenëse .navbar-brandka mbushjen dhe lartësinë e vet, mund t'ju duhet të anashkaloni disa CSS në varësi të imazhit tuaj.

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

Vendosni përmbajtjen e formularit brenda .navbar-formpër shtrirjen e duhur vertikale dhe sjelljen e palosur në porta të ngushta të shikimit. Përdorni opsionet e shtrirjes për të vendosur se ku qëndron brenda përmbajtjes së shiritit navigues.

Si një kokë lart, .navbar-formndan pjesën më të madhe të kodit të tij me .form-inlineanë të mixin. Disa kontrolle formash, si grupet e hyrjes, mund të kërkojnë që gjerësi fikse të shfaqen siç duhet brenda një shiriti navigimi.

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

Gjithmonë shtoni etiketa

Lexuesit e ekranit do të kenë probleme me formularët tuaj nëse nuk përfshini një etiketë për çdo hyrje. Për këto forma inline, mund t'i fshehni etiketat duke përdorur .sr-onlyklasën. Ka metoda të tjera alternative për të siguruar një etiketë për teknologjitë ndihmëse, të tilla si atributi aria-label, aria-labelledbyose . titleNëse asnjëra nga këto nuk është e pranishme, lexuesit e ekranit mund të përdorin placeholderatributin, nëse është i pranishëm, por vini re se përdorimi i placeholdersi zëvendësim për metodat e tjera të etiketimit nuk këshillohet.

Shtoni .navbar-btnklasën tek <button>elementët që nuk qëndrojnë në a <form>për t'i përqendruar vertikalisht në shiritin e navigimit.

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

Mbështillni vargjet e tekstit në një element me .navbar-text, zakonisht në një <p>etiketë për drejtimin dhe ngjyrën e duhur.

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

Për njerëzit që përdorin lidhje standarde që nuk janë brenda komponentit të zakonshëm të navigimit të shiritit të navigimit, përdorni .navbar-linkklasën për të shtuar ngjyrat e duhura për opsionet e parazgjedhura dhe të anasjellta të navigimit.

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

Lidhni lidhjet e navigimit, formularët, butonat ose tekstin, duke përdorur klasat .navbar-leftose shërbimet. .navbar-rightTë dyja klasat do të shtojnë një float CSS në drejtimin e specifikuar. Për shembull, për të lidhur lidhjet e navigimit, vendosini ato në një të veçantë <ul>me klasën përkatëse të shërbimeve të aplikuara.

Këto klasa janë versione të përziera të .pull-leftdhe .pull-right, por ato janë të shtrira në pyetjet e medias për trajtimin më të lehtë të komponentëve të shiritit navigues në përmasat e pajisjes.

Shtoni .navbar-fixed-topdhe përfshini një .containerose .container-fluidnë qendër dhe bllokoni përmbajtjen e shiritit të navigimit.

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

Kërkohet mbushje e trupit

Shiriti i fiksuar i navigimit do të mbivendosë përmbajtjen tuaj të tjera, përveç nëse e shtoni paddingnë krye të <body>. Provoni vlerat tuaja ose përdorni fragmentin tonë më poshtë. Këshillë: Si parazgjedhje, shiriti i navigimit është 50 pikselë i lartë.

body { padding-top: 70px; }

Sigurohuni që ta përfshini këtë pas CSS-së kryesore të Bootstrap.

Shtoni .navbar-fixed-bottomdhe përfshini një .containerose .container-fluidnë qendër dhe bllokoni përmbajtjen e shiritit të navigimit.

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

Kërkohet mbushje e trupit

Shiriti i navigimit fiks do të mbivendoset mbi përmbajtjen tuaj të tjera, përveç nëse e shtoni paddingnë fund të <body>. Provoni vlerat tuaja ose përdorni fragmentin tonë më poshtë. Këshillë: Si parazgjedhje, shiriti i navigimit është 50 pikselë i lartë.

body { padding-bottom: 70px; }

Sigurohuni që ta përfshini këtë pas CSS-së kryesore të Bootstrap.

Krijoni një shirit navigimi me gjerësi të plotë që largohet me faqen duke shtuar .navbar-static-topdhe përfshirë një .containerose .container-fluidnë qendër dhe përmbajtjen e shiritit të navigimit.

Ndryshe nga .navbar-fixed-*klasat, nuk keni nevojë të ndryshoni asnjë mbushje në body.

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

Ndryshoni pamjen e shiritit të navigimit duke shtuar .navbar-inverse.

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

Therrime buke

Tregoni vendndodhjen e faqes aktuale brenda një hierarkie lundrimi.

Ndarësit shtohen automatikisht në CSS përmes :beforedhe content.

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

Faqezim

Siguroni lidhjet e faqes për faqen ose aplikacionin tuaj me komponentin e faqezimit me shumë faqe ose alternativën më të thjeshtë të pager -it .

Faqja e parazgjedhur

Faqerojtje e thjeshtë e frymëzuar nga Rdio, e shkëlqyeshme për aplikacionet dhe rezultatet e kërkimit. Blloku i madh është i vështirë për t'u humbur, lehtësisht i shkallëzueshëm dhe ofron zona të mëdha klikimesh.

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

Etiketimi i komponentit të faqezimit

Komponenti i faqezimit duhet të mbështillet në një <nav>element për ta identifikuar atë si një seksion navigimi për lexuesit e ekranit dhe teknologjitë e tjera ndihmëse. Përveç kësaj, duke qenë se një faqe ka të ngjarë të ketë tashmë më shumë se një seksion të tillë navigimi (si p.sh. navigimi kryesor në kokë, ose navigimi i shiritit anësor), këshillohet që të jepet një përshkrues aria-labelpër atë <nav>që pasqyron qëllimin e saj. Për shembull, nëse komponenti i faqezimit përdoret për të lundruar midis një grupi rezultatesh kërkimi, një etiketë e përshtatshme mund të jetë aria-label="Search results pages".

Gjendjet me aftësi të kufizuara dhe aktive

Lidhjet janë të personalizueshme për rrethana të ndryshme. Përdorni .disabledpër lidhje të paklikueshme dhe .activepër të treguar faqen aktuale.

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

Ne ju rekomandojmë të ndërroni ankorat aktive ose të çaktivizuara për <span>, ose të hiqni ankorimin në rastin e shigjetave të mëparshme/tjetrës, për të hequr funksionalitetin e klikimeve duke ruajtur stilet e synuara.

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

Përmasat

Dëshironi faqezim më të madh apo më të vogël? Shtoni .pagination-lgose .pagination-smpër madhësi shtesë.

<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

Lidhje të shpejta të mëparshme dhe të ardhshme për zbatime të thjeshta të faqes me shënime dhe stile të lehta. Është i shkëlqyeshëm për sajte të thjeshta si blogje ose revista.

Shembulli i parazgjedhur

Si parazgjedhje, lidhjet përqendrojnë pager-in.

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

Lidhjet e rreshtuara

Përndryshe, ju mund të rreshtoni secilën lidhje në anët:

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

Gjendja e çaktivizuar opsionale

Lidhjet e Pager gjithashtu përdorin .disabledklasën e përgjithshme të shërbimeve nga 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>

Shembull

Shembull i titullit I ri

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

Variacionet e disponueshme

Shtoni ndonjë nga klasat e modifikuesve të përmendura më poshtë për të ndryshuar pamjen e një etikete.

Rreziku i paralajmërimit të parazgjedhur të informacionit parësor të suksesit

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

Keni mijëra etiketa?

Problemet e paraqitjes mund të lindin kur keni dhjetëra etiketa inline brenda një kontejneri të ngushtë, secila përmban inline-blockelementin e vet (si një ikonë). Rruga rreth kësaj po vendoset display: inline-block;. Për kontekstin dhe një shembull, shihni #13219 .

Theksoni me lehtësi artikujt e rinj ose të palexuar duke shtuar një <span class="badge">te lidhjet, navigimet e Bootstrap dhe më shumë.

Inbox42

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

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

Vetë-kolaps

Kur nuk ka artikuj të rinj ose të palexuar, distinktivët thjesht do të shemben (nëpërmjet :emptypërzgjedhësit të CSS) me kusht që të mos ketë përmbajtje brenda.

Pajtueshmëria me shfletues

Shenjat nuk do të shemben vetë në Internet Explorer 8 sepse i mungon mbështetja për :emptypërzgjedhësin.

Përshtatet me gjendjet aktive të navigimit

Stilet e integruara janë përfshirë për vendosjen e distinktivëve në gjendje aktive në navigimet e pilulave.

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

Një komponent i lehtë, fleksibël që mund të zgjasë opsionalisht të gjithë pamjen për të shfaqur përmbajtjen kryesore në faqen tuaj.

Përshendetje Botë!

Kjo është një njësi e thjeshtë heroike, një komponent i thjeshtë i stilit jumbotron për të tërhequr vëmendje shtesë ndaj përmbajtjes ose informacionit të paraqitur.

Mëso më shumë

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

Për ta bërë jumbotronin me gjerësi të plotë dhe pa qoshe të rrumbullakosura, vendoseni jashtë të gjitha .containers dhe në vend të kësaj shtoni një .containerbrenda.

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

Një predhë e thjeshtë për h1të ndarë dhe segmentuar në mënyrë të përshtatshme seksionet e përmbajtjes në një faqe. Mund të përdorë elementin h1e paracaktuar të 's small, si dhe shumicën e komponentëve të tjerë (me stile shtesë).

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

Zgjeroni sistemin e rrjetit të Bootstrap me komponentin e miniaturës për të shfaqur lehtësisht rrjetet e imazheve, videove, tekstit dhe më shumë.

Nëse jeni duke kërkuar për prezantime si Pinterest të miniaturës me lartësi dhe/ose gjerësi të ndryshme, do t'ju duhet të përdorni një shtojcë të palëve të treta si Masonry , Isotope ose Salvattore .

Shembulli i parazgjedhur

Si parazgjedhje, miniaturat e Bootstrap janë krijuar për të shfaqur imazhe të lidhura me shënjimin minimal të kërkuar.

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

Përmbajtje e personalizuar

Me pak shënim shtesë, është e mundur të shtoni çdo lloj përmbajtjeje HTML si tituj, paragrafë ose butona në miniaturë.

Etiketa e miniaturës

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

Butoni Butoni

Etiketa e miniaturës

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

Butoni Butoni

Etiketa e miniaturës

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

Butoni Butoni

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

Siguroni mesazhe reagimi kontekstual për veprimet tipike të përdoruesit me një numër të vogël mesazhesh alarmi të disponueshme dhe fleksibël.

Shembuj

Mbështillni çdo tekst dhe një buton opsional të heqjes brenda .alertdhe një nga katër klasat kontekstuale (p.sh., .alert-success) për mesazhet bazë të alarmit.

Asnjë klasë e paracaktuar

Alarmet nuk kanë klasa të paracaktuara, vetëm klasa bazë dhe modifikues. Një sinjalizim gri i paracaktuar nuk ka shumë kuptim, kështu që ju kërkohet të specifikoni një lloj përmes klasës kontekstuale. Zgjidhni nga suksesi, informacioni, paralajmërimi ose rreziku.

Te lumte! Ju e lexoni me sukses këtë mesazh të rëndësishëm alarmi.

Kokat lart! Ky alarm kërkon vëmendjen tuaj, por nuk është shumë i rëndësishëm.

Paralajmërim! Më mirë kontrolloni veten, nuk po dukeni shumë mirë.

Dreqin! Ndrysho disa gjëra dhe provo të dorëzosh sërish.

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

Sinjalizime të shpërfillshme

Ndërtoni në çdo alarm duke shtuar një .alert-dismissiblebuton opsional dhe mbyllës.

Kërkon plugin alarmi JavaScript

Për funksionimin e plotë të sinjalizimeve të anulueshme, duhet të përdorni shtesën JavaScript të sinjalizimeve .

Paralajmërim! Më mirë kontrolloni veten, nuk po dukeni shumë mirë.

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

Siguroni sjelljen e duhur në të gjitha pajisjet

Sigurohuni që të përdorni <button>elementin me data-dismiss="alert"atributin e të dhënave.

Lidhje në sinjalizime

Përdorni .alert-linkklasën e shërbimeve për të siguruar shpejt lidhjet me ngjyra që përputhen brenda çdo sinjalizimi.

Te lumte! Ju e lexoni me sukses këtë mesazh të rëndësishëm alarmi .

Kokat lart! Ky alarm kërkon vëmendjen tuaj , por nuk është shumë i rëndësishëm.

Paralajmërim! Më mirë kontrolloni veten, nuk po dukeni shumë mirë .

Dreqin! Ndrysho disa gjëra dhe provo të dorëzosh sërish.

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

Jepni komente të përditësuara mbi ecurinë e një fluksi pune ose veprimi me shirita të thjeshtë por fleksibël të përparimit.

Pajtueshmëria me shfletues

Shiritat e progresit përdorin tranzicione dhe animacione CSS3 për të arritur disa nga efektet e tyre. Këto veçori nuk mbështeten në Internet Explorer 9 dhe versionet më poshtë ose më të vjetra të Firefox-it. Opera 12 nuk mbështet animacione.

Përputhshmëria e politikës së sigurisë së përmbajtjes (CSP).

Nëse faqja juaj e internetit ka një Politikë të Sigurisë së Përmbajtjes (CSP) e cila nuk e lejon style-src 'unsafe-inline', atëherë nuk do të mund të përdorni styleatributet inline për të vendosur gjerësinë e shiritit të përparimit siç tregohet në shembujt tanë më poshtë. Metodat alternative për vendosjen e gjerësive që janë në përputhje me CSP-të strikte përfshijnë përdorimin e një JavaScript të vogël të personalizuar (që vendos element.style.width) ose përdorimin e klasave të personalizuara CSS.

Shembull themelor

Shiriti i parazgjedhur i përparimit.

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

Me etiketë

Hiqni klasën <span>me .sr-onlynga brenda shiritit të përparimit për të treguar një përqindje të dukshme.

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>

Për të siguruar që teksti i etiketës të mbetet i lexueshëm edhe për përqindje të ulëta, merrni parasysh shtimin e një min-widthnë shiritin e përparimit.

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>

Alternativat kontekstuale

Shiritat e progresit përdorin disa nga të njëjtin buton dhe klasa alarmi për stile të qëndrueshme.

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

Me vija

Përdor një gradient për të krijuar një efekt me vija. Nuk disponohet në IE9 dhe më poshtë.

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

I animuar

Shtoni .activenë .progress-bar-stripedpër të animuar vijat nga e djathta në të majtë. Nuk disponohet në IE9 dhe më poshtë.

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

Të stivosur

Vendosni shufra të shumta në të njëjtën .progresspër t'i grumbulluar ato.

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

Stilet abstrakte të objekteve për ndërtimin e llojeve të ndryshme të komponentëve (si komentet në blog, Tweet, etj) që paraqesin një imazh të rreshtuar majtas ose djathtas së bashku me përmbajtjen tekstuale.

Media e parazgjedhur

Media e paracaktuar shfaq një objekt mediatik (imazhe, video, audio) në të majtë ose në të djathtë të një blloku të përmbajtjes.

Titulli i medias

Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis në faucibus.

Titulli i medias

Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis në faucibus.

Titulli i medias së mbivendosur

Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis në faucibus.

Titulli i medias

Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Titulli i medias

Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. 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>

Klasat .pull-leftdhe .pull-rightgjithashtu ekzistojnë dhe janë përdorur më parë si pjesë e komponentit të medias, por janë të vjetruara për atë përdorim që nga v3.3.0. Ato janë përafërsisht ekuivalente me .media-leftdhe .media-right, përveç që .media-rightduhet të vendosen pas .media-bodynë html.

Rreshtimi i medias

Imazhet ose mediat e tjera mund të rreshtohen lart, mes ose poshtë. Parazgjedhja është rreshtuar në krye.

Media e rreshtuar në krye

Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis në faucibus.

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

Media e rreshtuar në mes

Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis në faucibus.

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

Media e rreshtuar poshtë

Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis në faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient 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>

Lista e mediave

Me pak shënim shtesë, mund të përdorni media brenda listës (e dobishme për temat e komenteve ose listat e artikujve).

Titulli i medias

Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Titulli i medias së mbivendosur
Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Titulli i medias së mbivendosur
Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Titulli i medias së mbivendosur
Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. 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>

Grupet e listave janë një komponent fleksibël dhe i fuqishëm për të shfaqur jo vetëm listat e thjeshta të elementeve, por ato komplekse me përmbajtje të personalizuar.

Shembull themelor

Grupi më themelor i listës është thjesht një listë e parregulluar me artikuj të listës dhe klasat e duhura. Ndërtoni mbi të me opsionet që vijojnë, ose CSS-në tuaj sipas nevojës.

Cras justo odio
Lehtësimi i AC në
Morbi leo risus
Porta ac consectetur ac
Vestibulum dhe 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>

Shenjat

Shtoni komponentin e shënjave në çdo artikull të grupit të listës dhe ai automatikisht do të pozicionohet në të djathtë.

14Cras justo odio
2Lehtësimi i AC në
1Morbi leo risus

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

Artikuj të lidhur

Lidhni artikujt e grupit të listës duke përdorur etiketat ankoruese në vend të artikujve të listës (që do të thotë gjithashtu një prind <div>në vend të një <ul>). Nuk ka nevojë për prindër individualë rreth secilit element.

Cras justo odio Lehtësimi i AC në Morbi leo risus Porta ac consectetur ac Vestibulum dhe 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>

Artikujt e butonave

Artikujt e grupit të listës mund të jenë butona në vend të artikujve të listës (që do të thotë gjithashtu një prind <div>në vend të një <ul>). Nuk ka nevojë për prindër individualë rreth secilit element. Mos përdorni .btnklasat standarde këtu.

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

Artikuj me aftësi të kufizuara

Shto .disablednë një .list-group-itempër të gri atë për t'u shfaqur i paaftë.

Cras justo odio Lehtësimi i AC në Morbi leo risus Porta ac consectetur ac Vestibulum dhe 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>

Klasat kontekstuale

Përdorni klasa kontekstuale për të stiluar artikujt e listës, të paracaktuar ose të lidhur. Përfshin edhe .activeshtetin.

Lehtësimi i AC në
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum dhe eros

Lehtësimi i AC në Cras sit amet nibh libero Porta ac consectetur ac Vestibulum dhe 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>

Përmbajtje e personalizuar

Shtoni pothuajse çdo HTML brenda, edhe për grupet e listave të lidhura si ai më poshtë.

Lista e titullit të artikullit të grupit

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Lista e titullit të artikullit të grupit

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Lista e titullit të artikullit të grupit

Donec id elit non mi porta gravida at 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>

Edhe pse jo gjithmonë është e nevojshme, ndonjëherë ju duhet ta vendosni DOM-in tuaj në një kuti. Për ato situata, provoni komponentin e panelit.

Shembull themelor

Si parazgjedhje, gjithçka që .panelbën është të aplikojë disa kufij bazë dhe mbushje për të përmbajtur disa përmbajtje.

Shembull i panelit bazë

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

Paneli me titull

Shtoni me lehtësi një kontejnerë titulli në panelin tuaj me .panel-heading. Ju gjithashtu mund të përfshini ndonjë <h1>- <h6>me një .panel-titleklasë për të shtuar një titull të paracaktuar. Megjithatë, madhësitë e shkronjave <h1>- <h6>janë anashkaluar nga .panel-heading.

Për ngjyrosjen e duhur të lidhjeve, sigurohuni që të vendosni lidhjet në titujt brenda .panel-title.

Titulli i panelit pa titull

Përmbajtja e panelit

Titulli i panelit

Përmbajtja e panelit

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

Paneli me footer

Mbështillni butonat ose tekstin dytësor në .panel-footer. Vini re se fundet e paneleve nuk trashëgojnë ngjyra dhe kufij kur përdorin variacione kontekstuale pasi ato nuk janë menduar të jenë në plan të parë.

Përmbajtja e panelit

Fundi i panelit

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

Alternativat kontekstuale

Ashtu si komponentët e tjerë, lehtë e bëni një panel më kuptimplotë për një kontekst të caktuar duke shtuar ndonjë nga klasat e gjendjes kontekstuale.

Titulli i panelit

Përmbajtja e panelit

Titulli i panelit

Përmbajtja e panelit

Titulli i panelit

Përmbajtja e panelit

Titulli i panelit

Përmbajtja e panelit

Titulli i panelit

Përmbajtja e panelit

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

Me tavolina

Shtoni çdo pa kufi .tablebrenda një paneli për një dizajn pa probleme. Nëse ka një .panel-body, shtojmë një kufi shtesë në krye të tabelës për ndarje.

Titulli i panelit

Disa përmbajtje të parazgjedhur të panelit këtu. Nulla vitae elit libero, një 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.

#	Emri	Mbiemri	Emri i përdoruesit
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry	Zogu	@Cicëroj

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

Nëse nuk ka trup paneli, komponenti lëviz nga kreu i panelit në tabelë pa ndërprerje.

Titulli i panelit

#	Emri	Mbiemri	Emri i përdoruesit
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry	Zogu	@Cicëroj

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

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

Me grupe listash

Përfshini lehtësisht grupet e listës me gjerësi të plotë brenda çdo paneli.

Titulli i panelit

Disa përmbajtje të parazgjedhur të panelit këtu. Nulla vitae elit libero, një 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
Lehtësimi i AC në
Morbi leo risus
Porta ac consectetur ac
Vestibulum dhe 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>

Lejo që shfletuesit të përcaktojnë dimensionet e videos ose paraqitjes së diapozitivëve bazuar në gjerësinë e bllokut që përmban duke krijuar një raport të brendshëm që do të shkallëzohet siç duhet në çdo pajisje.

Rregullat zbatohen drejtpërdrejt në <iframe>, <embed>, <video>, dhe <object>elementë; opsionalisht përdorni një klasë të qartë pasardhëse .embed-responsive-itemkur dëshironi të përputheni me stilin për atributet e tjera.

Pro-Tip! Ju nuk keni nevojë të përfshini frameborder="0"në <iframe>s tuaj pasi ne e anashkalojmë atë për ju.

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

E paracaktuar mirë

Përdorni pusin si një efekt të thjeshtë në një element për t'i dhënë atij një efekt të futur.

Shiko, unë jam në një pus!

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

Klasat me dëshirë

Kontrolloni mbushjen dhe qoshet e rrumbullakosura me dy klasa modifikuese opsionale.

Shiko, unë jam në një pus të madh!

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

Shiko, unë jam në një pus të vogël!

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

Komponentët

Glyphicons

Glyphs në dispozicion

Si të përdorni

Mos përzieni me përbërës të tjerë

Vetëm për përdorim në elemente boshe

Ndryshimi i vendndodhjes së fontit të ikonës

Ikonat e aksesueshme

Shembuj

Dropdowns

Shembull

Radhitje

Mund të kërkojë pozicionim shtesë

Shtrirja .pull-righte vjetëruar

Titujt

Ndarëse

Artikujt e menysë të çaktivizuar

Grupet e butonave

Këshillat e veglave dhe popovers në grupet e butonave kërkojnë cilësim të veçantë

Sigurohuni të saktë roledhe jepni një etiketë

Shembull themelor

Shiriti i veglave të butonave

Përmasat

Folezimi

Variacion vertikal

Grupet e butonave të justifikuara

Trajtimi i kufijve

IE8 dhe kufijtë

Me <a>elemente

Lidhjet që veprojnë si butona

Me <button>elemente

Zbritje të butonave

Varësia e shtojcave

Zbritje me një buton të vetëm

Zbritje të butonave të ndarjes

Përmasat

Variacion në rënie

Grupet hyrëse

<input>Vetëm tekstuale

Këshillat e veglave dhe popovers në grupet e hyrjes kërkojnë cilësim të veçantë

Mos përzieni me përbërës të tjerë

Gjithmonë shtoni etiketa

Shembull themelor

Përmasat

Kutitë e kontrollit dhe shtesat radio

Shtesa me butona

Butonat me zbritje

Butonat e segmentuar

Butona të shumtë

Navs

Përdorimi i navigave për panelet e skedave kërkon shtojcën e skedave JavaScript

Bëni të aksesueshme navigimet e përdorura si navigacion

Skedat

Pilula

I justifikuar

Navs Safari dhe të përgjegjshëm të justifikuar

Lidhje të çaktivizuara

Funksionaliteti i lidhjes nuk ndikohet

Përdorimi i pikave me rënie

Skedat me zbritje

Pilula me pika

Navbar

Shiriti i parazgjedhur i navigimit

Përmbajtje e tejmbushur

Kërkon shtojcën JavaScript

Ndryshimi i pikës së ndërprerjes së shiritit celular të palosur

Bëni të aksesueshme shiritat e navigimit

Imazhi i Markes

Format

Paralajmërime për pajisjen celulare

Gjithmonë shtoni etiketa

Butonat

Përdorimi i kontekstit specifik

Teksti

Lidhje jo naviguese

Rreshtimi i komponentëve

Rreshtimi djathtas i shumë komponentëve

Fiksuar në krye

Kërkohet mbushje e trupit

Fiksuar në fund

Shtrirja `.pull-right`e vjetëruar

Sigurohuni të saktë `role`dhe jepni një etiketë

Me `<a>`elemente

Me `<button>`elemente

`<input>`Vetëm tekstuale