Glyphicons

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-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 jeni duke krijuar 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.

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

Dropdowns

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

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>

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.

Mund të kërkojë pozicionim shtesë

Dropdown pozicionohen automatikisht nëpërmjet CSS brenda rrjedhës normale të dokumentit. Kjo do të thotë se skedarët me rënie mund të priten nga prindërit me overflowveçori të caktuara ose të shfaqen jashtë kufijve të portës së shikimit. Trajtojini këto çështje vetë kur lindin.

Shtrirja .pull-righte vjetëruar

Që nga versioni 3.1.0, ne kemi zhvlerësuar .pull-rightmenutë me zbritje. Për të rreshtuar djathtas një menu, përdorni .dropdown-menu-right. Komponentët navigues të rreshtuar djathtas në shiritin e navigimit përdorin një version mixin të kësaj klase për të lidhur automatikisht menunë. Për ta anashkaluar atë, përdorni .dropdown-menu-left.

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

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>

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>

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>

Grupet e butonave

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ë roledhe 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 .btn.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>

Shiriti i veglave të butonave

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. Listat e butonave të ndarjes nuk mbështeten këtu.

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

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

Zbritje të butonave

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>

Grupet hyrëse

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.

@

@shembull.com

$ .00

https://example.com/users/
<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>

Navs

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.

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>

Merrni të njëjtin HTML, por përdorni .nav-pillsnë 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>

Bëjini me lehtësi skedat ose pilulat me gjerësi të barabarta me gjerësinë e prindit të tyre në ekrane 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ë pastrohen 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>

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>

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>

Navbar

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

  1. Zvogëloni sasinë ose gjerësinë e artikujve të shiritit navigues.
  2. Fshih disa artikuj të shiritit navigues në madhësi të caktuara të ekranit duke përdorur klasa të dobishme të përgjegjshme .
  3. 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.

Kërkon shtojcën JavaScript

Nëse JavaScript është i çaktivizuar dhe porta e shikimit është mjaft e ngushtë që shiriti i navigimit të shembet, do të jetë e pamundur të zgjerohet shiriti i navigimit dhe të shikohet përmbajtja brenda .navbar-collapse.

Shiriti navigues i përgjegjshëm kërkon që shtojca e kolapsit të përfshihet në versionin tuaj të Bootstrap.

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").

Bëni të aksesueshme shiritat e navigimit

Sigurohuni që të përdorni një <nav>element ose, nëse përdorni një element më të përgjithshëm si p.sh. <div>, shtoni një role="navigation"në çdo shirit navigimi për ta identifikuar atë në mënyrë eksplicite si një rajon historik për përdoruesit e teknologjive ndihmëse.

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

Paralajmërime për pajisjen celulare

Ka disa paralajmërime në lidhje me përdorimin e kontrolleve të formularit brenda elementeve fikse në pajisjet celulare. Shikoni dokumentet e mbështetjes së shfletuesit tonë për detaje.

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, ju 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 tij 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>

Përdorimi i kontekstit specifik

Ashtu si klasat standarde të butonave , .navbar-btnmund të përdoren në <a>dhe <input>elementë. Megjithatë, as .navbar-btnklasat standarde të butonave nuk duhet të përdoren në <a>elementet brenda .navbar-nav.

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ë rregullt të navigimit të shiritit navigues, përdorni .navbar-linkklasën për të shtuar ngjyrat e duhura për opsionet e parazgjedhura dhe të anasjellta të shiritit 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.

Rreshtimi djathtas i shumë komponentëve

Navbaret aktualisht kanë një kufizim me .navbar-rightklasa të shumta. Për të vendosur hapësirën e duhur, ne përdorim marzh negativ në .navbar-rightelementin e fundit. Kur ka shumë elementë që përdorin atë klasë, këto kufij nuk funksionojnë siç synohet.

Ne do ta rishikojmë këtë kur të mund ta rishkruajmë atë komponent në v4.

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ër më tepër, 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 rekomandojmë që 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>

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 opsionale e çaktivizuar

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>

Etiketat

Shembull

Shembull i titullit I ri

Shembull i titullit I ri

Shembull i titullit I ri

Shembull i titullit I ri

Shembull i titullit I ri
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 .

Shenjat

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>

Jumbotron

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>

Kreu i faqes

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>

Miniaturat

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 prezantim si Pinterest të miniaturave 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ë.

100% x 200

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

100% x 200

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

100% x 200

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>

Alarmet

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.

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

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

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

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

Shiritat e progresit

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.

60% e kompletuar
<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.

40% e përfunduar (sukses)
20% e kompletuar
60% e përfunduar (paralajmërim)
80% I plotë (rrezik)
<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ë.

40% e përfunduar (sukses)
20% e kompletuar
60% e përfunduar (paralajmërim)
80% I plotë (rrezik)
<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 .active.progress-bar-stripedpër të animuar vijat nga e djathta në të majtë. Nuk disponohet në IE9 dhe më poshtë.

45% e kompletuar
<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ë grumbulluara

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

35% e përfunduar (sukses)
20% e përfunduar (paralajmërim)
10% I plotë (rrezik)
<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>

Objekti mediatik

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>

Lista e grupit

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.

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

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

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

Panele

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>

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

Embed reaguese

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

Puset

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>