Pieejamie glifi

Ietver vairāk nekā 250 glifus fontu formātā no Glyphicon Halflings komplekta. Glyphicons Halflings parasti nav pieejami bez maksas, taču to veidotājs ir padarījis tos pieejamus Bootstrap bez maksas. Kā pateicību mēs tikai lūdzam jūs iekļaut saiti atpakaļ uz Glyphicons , kad vien iespējams.

Glyphicon Glyphicon-zvaigznīte
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-mākonis
glyphicon glyphicon-aploksne
glyphicon glyphicon-zīmulis
glifikons glifikons-stikls
glyphicon glyphicon-mūzika
glyphicon glyphicon-search
glifikons glifikons-sirds
glyphicon glyphicon-star
glyphicon glyphicon-star-tukša
glyphicon glyphicon-lietotājs
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-noņemt
glyphicon glyphicon-tuvināt
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-trash
glyphicon glyphicon-home
glyphicon glyphicon-file
glyphicon glyphicon-time
glyphicon glyphicon-ceļš
glyphicon glyphicon-download-alt
glyphicon glyphicon-lejupielādēt
glyphicon glyphicon-upload
glyphicon glyphicon-iesūtne
glyphicon glyphicon-play-circle
glyphicon glyphicon-atkārtot
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-flag
glyphicon glyphicon-austiņas
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-svītrkods
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-book
glyphicon glyphicon-grāmatzīme
glyphicon glyphicon-print
glyphicon glyphicon-kamera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
glyphicon glyphicon-attēls
glyphicon glyphicon-map-marker
glyphicon glyphicon-adjust
glyphicon glyphicon-tont
glyphicon glyphicon-rediģēt
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-pārvietoties
glyphicon glyphicon-solis-atpakaļ
glyphicon glyphicon-ātri atpakaļ
glyphicon glyphicon-atpakaļ
glyphicon glyphicon-play
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-fast-forward
glyphicon glyphicon-solis uz priekšu
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-sign
glyphicon glyphicon-noņemt-zīmi
glyphicon glyphicon-ok-sign
glyphicon glyphicon-jautājums-zīme
glyphicon glyphicon-info-sign
glyphicon glyphicon-screenshot
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-bultiņa-pa kreisi
glyphicon glyphicon-bultiņa-pa labi
glyphicon glyphicon-bultiņa-up
glyphicon glyphicon-bultiņa uz leju
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-izsaukuma-zīme
glyphicon glyphicon-dāvana
glifikons glyphicon-lapa
glyphicon glyphicon-uguns
glyphicon glyphicon-eye-open
glyphicon glyphicon-eye-close
glyphicon glyphicon-warning-sign
glifikons glyphicon-plakne
glyphicon glyphicon-kalendārs
glyphicon glyphicon-random
glyphicon glyphicon-comment
glifikons glifikons-magnēts
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-iepirkšanās grozs
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-resize-vertikāls
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glifikons glyphicon-bullhorn
glifikons glyphicon-bell
glyphicon glyphicon sertifikāts
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-rokas labā
glyphicon glyphicon-roka-kreisā
glyphicon glyphicon-rokas augšup
glyphicon glyphicon-roku uz leju
glyphicon glyphicon-circle-bultiņa-pa labi
glyphicon glyphicon-circle-bultiņa-pa kreisi
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-circle-bultiņa-lejup
glyphicon glyphicon-globe
glyphicon glyphicon-uzgriežņu atslēga
glyphicon glyphicon-uzdevumi
glyphicon glyphicon-filtrs
glyphicon glyphicon-portfelis
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
glyphicon glyphicon saspraudi
glyphicon glyphicon-heart-tukša
glyphicon glyphicon-link
glyphicon glyphicon-phone
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-alfabēts
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-atribūtus
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-neatzīmēts
glyphicon glyphicon-expand
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-rekords
glyphicon glyphicon-save
glyphicon glyphicon-open
glyphicon glyphicon saglabāts
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-sūtīt
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saglabāts
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-kredītkarte
glyphicon glyphicon-transfer
glyphicon glyphicon-galda piederumi
glyphicon glyphicon-header
glyphicon glyphicon-saspiests
glyphicon glyphicon-austiņas
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tornis
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subtitri
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-skujkoks
glyphicon glyphicon-tree-lapu koks
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
glyphicon glyphicon-kopija
glyphicon glyphicon-pasta
glyphicon glyphicon-alert
glyphicon glyphicon-ekvalaizers
glyphicon glyphicon-king
glyphicon glyphicon-karaliene
glifikons glifikons-baninieks
glyphicon glyphicon-bīskaps
glifikons glifikons-bruņinieks
glyphicon glyphicon-baby-formula
glyphicon glifikona telts
glyphicon glyphicon-tāfele
glyphicon glyphicon-gulta
glifikons glifikons-ābols
glyphicon glyphicon-dzēst
glyphicon glyphicon-smilšu pulkstenis
glyphicon glyphicon-lampa
glyphicon glyphicon-dublikāts
glyphicon glyphicon-cūciņa banka
glyphicon glyphicon-šķēres
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-jena
glyphicon glyphicon-jpy
glifikons glifikons-rublis
glyphicon glyphicon-rub
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ledus-lolly-garšoja
glyphicon glyphicon-izglītība
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburgers
glyphicon glyphicon-modal-window
glyphicon glifikona eļļa
glifikons glyphicon-grain
glyphicon glyphicon-saulesbrilles
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-trijstūris-labais
glyphicon glyphicon-trijstūris-pa kreisi
glyphicon glyphicon-trijstūris-apakšā
glyphicon glyphicon-trijstūris-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-apakšraksts
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

Kā izmantot

Veiktspējas apsvērumu dēļ visām ikonām ir nepieciešama pamata klase un atsevišķa ikonu klase. Lai izmantotu, ievietojiet tālāk norādīto kodu gandrīz jebkurā vietā. Noteikti atstājiet atstarpi starp ikonu un tekstu, lai nodrošinātu pareizu polsterējumu.

Nejaukt ar citiem komponentiem

Ikonu klases nevar tieši apvienot ar citiem komponentiem. Tos nedrīkst izmantot kopā ar citām klasēm tajā pašā elementā. Tā vietā pievienojiet ligzdotu <span>un lietojiet ikonu klases <span>.

Izmantošanai tikai uz tukšiem elementiem

Ikonu klases drīkst izmantot tikai elementiem, kas nesatur teksta saturu un kuriem nav pakārtotu elementu.

Ikonas fonta atrašanās vietas maiņa

Bootstrap pieņem, ka ikonu fontu faili atradīsies ../fonts/direktorijā attiecībā pret apkopotajiem CSS failiem. Šo fontu failu pārvietošana vai pārdēvēšana nozīmē CSS atjaunināšanu vienā no trim veidiem:

Mainiet @icon-font-pathun/vai @icon-font-namemainīgos avotā Mazāk failu.
Izmantojiet relatīvo URL opciju , ko nodrošina kompilators Mazāk.
Mainiet url()ceļus apkopotajā CSS.

Izmantojiet jebkuru opciju, kas vislabāk atbilst jūsu konkrētajam izstrādes iestatījumam.

Pieejamas ikonas

Mūsdienu palīgtehnoloģiju versijas paziņos par CSS ģenerētu saturu, kā arī konkrētām Unicode rakstzīmēm. Lai izvairītos no netīšas un mulsinošas izvades ekrāna lasītājos (jo īpaši, ja ikonas tiek izmantotas tikai dekorēšanai), mēs tās paslēpjam ar aria-hidden="true"atribūtu.

Ja izmantojat ikonu nozīmes izteikšanai (nevis tikai kā dekoratīvu elementu), pārliecinieties, ka šī nozīme tiek nodota arī palīgtehnoloģijām, piemēram, iekļaujiet papildu saturu, kas vizuāli ir paslēpts kopā ar .sr-onlyklasi.

Ja veidojat vadīklas bez cita teksta (piemēram, kurā ir <button>tikai ikona), vienmēr ir jānodrošina alternatīvs saturs, lai identificētu vadīklas mērķi, lai tas būtu saprotams palīgtehnoloģiju lietotājiem. Šajā gadījumā jūs varētu pievienot aria-labelatribūtu pašā vadīklā.

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

Piemēri

Izmantojiet tos pogās, pogu grupās rīkjoslai, navigācijai vai pievienotās veidlapas ievadei.

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

Ikona, ko izmanto brīdinājumā , lai norādītu, ka tas ir kļūdas ziņojums, ar papildu .sr-onlytekstu, lai sniegtu šo mājienu palīgtehnoloģiju lietotājiem.

ievadiet derīgu epasta adresi

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

Pārslēdzama, kontekstuāla izvēlne saišu sarakstu parādīšanai. Padarīts interaktīvs ar nolaižamo JavaScript spraudni .

Piemērs

Aptiniet nolaižamās izvēlnes aktivizētāju un nolaižamo izvēlni .dropdown, vai citā elementā, kas deklarē position: relative;. Pēc tam pievienojiet izvēlnes HTML.

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

Nolaižamās izvēlnes var mainīt, lai tās paplašinātu uz augšu (nevis uz leju), pievienojot .dropuptās vecākam.

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

Izlīdzināšana

Pēc noklusējuma nolaižamā izvēlne tiek automātiski novietota 100% no augšdaļas un tās vecākvārda kreisajā pusē. Pievienot nolaižamajā izvēlnē .dropdown-menu-rightlīdzi pa labi..dropdown-menu

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

Virsraksti

Pievienojiet galveni, lai apzīmētu darbību sadaļas jebkurā nolaižamajā izvēlnē.

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

Dalītājs

Pievienojiet sadalītāju, lai nolaižamajā izvēlnē atdalītu saišu sēriju.

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

Atspējotie izvēlnes vienumi

Pievienojiet nolaižamajā izvēlnē .disableda <li>, lai atspējotu saiti.

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

Grupējiet vairākas pogas vienā rindā ar pogu grupu. Pievienojiet izvēles JavaScript radio un izvēles rūtiņas stila darbību, izmantojot mūsu pogu spraudni .

Rīka padomiem un uznirstošajiem logiem pogu grupās ir nepieciešams īpašs iestatījums

Izmantojot rīka padomus vai uznirstošo logu elementiem .btn-group, jums ir jānorāda opcija container: 'body', lai izvairītos no nevēlamām blakusparādībām (piemēram, elementa paplašināšanās un/vai noapaļoto stūru zaudēšana, kad tiek aktivizēts rīka padoms vai uznirstošais logs).

Pārliecinieties, ka tas ir pareizi `role`, un norādiet etiķeti

Lai palīgtehnoloģijas, piemēram, ekrāna lasītāji, norādītu, ka vairākas pogas ir grupētas, ir jānodrošina atbilstošs roleatribūts. Pogu grupām tas būtu role="group", savukārt rīkjoslās jābūt role="toolbar".

Viens izņēmums ir grupas, kurās ir tikai viena vadīkla (piemēram, attaisnotās pogu grupas ar <button>elementiem) vai nolaižamā izvēlne.

Turklāt grupām un rīkjoslām ir jāpiešķir precīzs apzīmējums, jo pretējā gadījumā vairums palīgtehnoloģiju tās nepaziņos, neskatoties uz pareiza roleatribūta klātbūtni. Šeit sniegtajos piemēros mēs izmantojam , taču var izmantot arī aria-labeltādas alternatīvas kā .aria-labelledby

Pamatpiemērs

Aptiniet vairākas pogas .btnar .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>

Apvienojiet komplektus <div class="btn-group">a <div class="btn-toolbar">, lai iegūtu sarežģītākus komponentus.

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

Izmēru noteikšana

Tā vietā, lai katrai grupas pogai lietotu pogu izmēra klases, vienkārši pievienojiet katrai pogai .btn-group-*, .btn-grouptostarp tad, ja tiek ligzdotas vairākas grupas.

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

Ligzdošana

Ja vēlaties, lai nolaižamās izvēlnes būtu apvienotas ar virkni pogu, ievietojiet .btn-groupsimbolu citā ..btn-group

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

Vertikālā variācija

Padariet pogu komplektu vertikāli, nevis horizontāli. Sadalīšanas pogas nolaižamās izvēlnes šeit netiek atbalstītas.

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

Attaisnotas pogu grupas

Padariet pogu grupu izstieptas vienādos izmēros, lai aptvertu visu tās galvenās pogas platumu. Darbojas arī ar pogu nolaižamajām izvēlnēm pogu grupā.

Robežu apstrāde

Sakarā ar īpašo HTML un CSS, ko izmanto pogu attaisnošanai (proti display: table-cell, ), robežas starp tām tiek dubultotas. Parastās pogu grupās margin-left: -1pxtiek izmantots, lai saliktu apmales, nevis tās noņemtu. Tomēr marginnedarbojas ar display: table-cell. Tā rezultātā atkarībā no jūsu Bootstrap pielāgojumiem, iespējams, vēlēsities noņemt vai nomainīt apmales.

IE8 un robežas

Internet Explorer 8 nerenderē apmales pogām attaisnotu pogu grupā neatkarīgi no tā, vai tā ir ieslēgta <a>vai <button>elementi. Lai to apietu, aptiniet katru pogu citā .btn-group.

Plašāku informāciju skatiet #12476 .

Ar `<a>`elementiem

Vienkārši iesaiņojiet virkni .btns .btn-group.btn-group-justified.

Pa kreisi Vidus Pa labi

Pa kreisi Vidus

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

Saites, kas darbojas kā pogas

Ja <a>elementi tiek izmantoti, lai darbotos kā pogas, aktivizējot lapas funkcionalitāti, nevis pārejot uz citu dokumentu vai sadaļu pašreizējā lapā, tiem arī jāpiešķir atbilstošs role="button".

Ar `<button>`elementiem

Lai izmantotu attaisnotas pogu grupas ar <button>elementiem, katra poga ir jāiekļauj pogu grupā . Lielākā daļa pārlūkprogrammu nepareizi izmanto mūsu CSS <button>elementu pamatojumam, taču, tā kā mēs atbalstām pogu nolaižamās izvēlnes, mēs varam to apiet.

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

Izmantojiet jebkuru pogu, lai aktivizētu nolaižamo izvēlni, ievietojot to a .btn-groupun nodrošinot atbilstošu izvēlnes atzīmi.

Atkarība no spraudņa

Lai izmantotu pogu nolaižamo izvēlni , jūsu Bootstrap versijā ir jāiekļauj nolaižamā spraudnis .

Nolaižamās izvēlnes ar vienu pogu

Pārvērtiet pogu par nolaižamo izvēlni, veicot dažas pamata iezīmēšanas izmaiņas.

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

Sadalīšanas pogas nolaižamās izvēlnes

Līdzīgi izveidojiet sadalīto pogu nolaižamās izvēlnes ar tādām pašām iezīmēšanas izmaiņām, tikai ar atsevišķu pogu.

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

Izmēru noteikšana

Pogu nolaižamās izvēlnes darbojas ar visu izmēru pogām.

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

Nolaižamā variācija

Aktivizējiet nolaižamās izvēlnes virs elementiem, pievienojot .dropupto vecākam.

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

Paplašiniet veidlapas vadīklas, pievienojot tekstu vai pogas pirms, pēc vai abās pusēs jebkuram tekstam <input>. Izmantojiet .input-groupkopā ar .input-group-addonvai .input-group-btn, lai pievienotu vai pievienotu elementus vienam .form-control.

Tikai teksta `<input>`s

Izvairieties no lietošanas<select> elementus, jo WebKit pārlūkprogrammās tos nevar pilnībā noformēt.

Šeit nelietojiet <textarea>elementus, rowsjo dažos gadījumos to atribūts netiks ievērots.

Rīka padomiem un uznirstošajiem logiem ievades grupās ir nepieciešams īpašs iestatījums

Izmantojot rīka padomus vai uznirstošos logus elementos .input-group, jums ir jānorāda opcija container: 'body', lai izvairītos no nevēlamām blakusparādībām (piemēram, elementa paplašināšanās un/vai noapaļoto stūru zaudēšana, kad tiek aktivizēts rīka padoms vai uznirstošais logs).

Nejaukt ar citiem komponentiem

Nejauciet veidlapu grupas vai režģa kolonnu klases tieši ar ievades grupām. Tā vietā ievietojiet ievades grupu veidlapu grupā vai ar režģi saistītā elementā.

Vienmēr pievienojiet etiķetes

Ekrāna lasītājiem būs problēmas ar jūsu veidlapām, ja katrai ievadei neiekļausiet etiķeti. Nodrošiniet, lai šīm ievades grupām visas papildu etiķetes vai funkcionalitāte tiktu nodota palīgtehnoloģijām.

Precīzs izmantojamais paņēmiens (redzamie <label>elementi, <label>elementi, kas paslēpti, izmantojot .sr-onlyklasi vai atribūta aria-label, aria-labelledby, aria-describedby, titlevai placeholderatribūta izmantošana) un kāda papildu informācija būs jānodod, atšķirsies atkarībā no precīza ieviešamā interfeisa logrīka veida. Šīs sadaļas piemēros ir sniegtas dažas ieteiktas, katram gadījumam specifiskas pieejas.

Pamatpiemērs

Ievietojiet vienu papildinājumu vai pogu abās ievades pusēs. Varat arī novietot vienu abās ievades pusēs.

Mēs neatbalstām vairākus papildinājumus ( .input-group-addonvai .input-group-btn) vienā pusē.

Mēs neatbalstām vairākas veidlapas vadīklas vienā ievades grupā.

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

Izmēru noteikšana

Pievienojiet relatīvās veidlapas izmēru klases .input-grouppašam, un tajā esošā satura lielums tiks automātiski mainīts — nav nepieciešams atkārtot veidlapas vadīklas izmēru klases katram elementam.

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

Izvēles rūtiņas un radio papildinājumi

Teksta vietā ievades grupas papildinājumā ievietojiet jebkuru izvēles rūtiņu vai radio opciju.

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

Pogu papildinājumi

Ievades grupu pogas ir nedaudz atšķirīgas, un tām ir nepieciešams viens papildu ligzdošanas līmenis. Tā vietā , lai apvilktu pogas .input-group-addon, būs jāizmanto . .input-group-btnTas ir nepieciešams noklusējuma pārlūkprogrammas stilu dēļ, kurus nevar ignorēt.

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

Pogas ar nolaižamām izvēlnēm

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

Segmentētas pogas

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

Vairākas pogas

Lai gan katrā pusē var būt tikai viens papildinājums, vienā iekšpusē var būt vairākas pogas .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>

Pakalpojumā Bootstrap pieejamajām navigācijas ierīcēm ir kopīgs marķējums, sākot ar bāzes .navklasi, kā arī koplietotie stāvokļi. Mainiet modifikatoru klases, lai pārslēgtos starp katru stilu.

Lai izmantotu navigācijas elementus ciļņu paneļos, ir nepieciešams JavaScript ciļņu spraudnis

Cilnēm ar tabulēšanas apgabaliem ir jāizmanto ciļņu JavaScript spraudnis . Marķējumam būs nepieciešami arī papildu roleatribūti un ARIA — sīkāku informāciju skatiet spraudņa marķējuma piemērā .

Padariet pieejamus navigācijas sistēmas, kas tiek izmantotas kā navigācija

Ja izmantojat navigācijas joslu, lai nodrošinātu navigācijas joslu, noteikti pievienojiet role="navigation"loģiskākajam vecākkonteineram <ul>vai aptiniet <nav>elementu visā navigācijas joslā. Nepievienojiet lomu <ul>pašam, jo tas neļaus to paziņot kā īstu sarakstu, izmantojot palīgtehnoloģijas.

Cilnes

Ņemiet vērā, ka .nav-tabsklasei ir nepieciešama .navbāzes klase.

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

Tabletes

Izmantojiet to pašu HTML, bet .nav-pillstā vietā izmantojiet:

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

Tabletes ir arī vertikāli sakraujamas. Vienkārši pievienojiet .nav-stacked.

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

Pamatots

Ērti izveidojiet cilnes vai tabletes, kas vienādas ar to vecāku platumiem, ja ekrānos ir platāks par 768 pikseļiem, izmantojot .nav-justified. Mazākos ekrānos navigācijas saites ir sakrautas.

Attaisnotās navigācijas joslas navigācijas saites pašlaik netiek atbalstītas.

Safari un atsaucīgas pamatotas navigācijas sistēmas

Sākot ar versiju 9.1.2, pārlūkprogrammā Safari ir kļūda, kurā, mainot pārlūkprogrammas izmērus horizontāli, attaisnotajā navigācijā rodas renderēšanas kļūdas, kas tiek notīrītas pēc atsvaidzināšanas. Šī kļūda ir parādīta arī attaisnotās navigācijas piemērā .

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

Atspējotas saites

Jebkuram navigācijas komponentam (cilnēm vai tabletēm) pievienojiet .disabledpelēkām saitēm un bez kursora novietošanas efektiem .

Saites funkcionalitāte nav ietekmēta

Šī klase mainīs tikai <a>izskatu, nevis tā funkcionalitāti. Izmantojiet pielāgotu JavaScript, lai šeit atspējotu saites.

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

Izmantojot nolaižamās izvēlnes

Pievienojiet nolaižamās izvēlnes ar nelielu papildu HTML un nolaižamo JavaScript spraudni .

Cilnes ar nolaižamajām izvēlnēm

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

Tabletes ar nolaižamām izvēlnēm

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

Navigācijas joslas ir adaptīvi meta komponenti, kas kalpo kā jūsu lietojumprogrammas vai vietnes navigācijas galvenes. Mobilajos skatos tie sākas sakļauti (un ir pārslēdzami) un kļūst horizontāli, palielinoties pieejamajam skatvietas platumam.

Attaisnotās navigācijas joslas navigācijas saites pašlaik netiek atbalstītas.

Pārpildīts saturs

Tā kā Bootstrap nezina, cik daudz vietas ir nepieciešams saturam navigācijas joslā, var rasties problēmas ar satura ietīšanu otrajā rindā. Lai to atrisinātu, varat:

Samaziniet navigācijas joslas vienumu skaitu vai platumu.
Slēpt noteiktus navigācijas joslas vienumus noteiktos ekrāna izmēros, izmantojot adaptīvās utilītas klases .
Mainiet punktu, kurā navigācijas josla pārslēdzas starp sakļauto un horizontālo režīmu. Pielāgojiet @grid-float-breakpointmainīgo vai pievienojiet savu multivides vaicājumu.

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

Aizstājiet navigācijas joslas zīmolu ar savu attēlu, nomainot tekstu pret <img>. Tā kā tam .navbar-brandir savs polsterējums un augstums, iespējams, vajadzēs ignorēt dažus CSS atkarībā no attēla.

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

Ievietojiet veidlapas saturu, .navbar-formlai nodrošinātu pareizu vertikālo līdzinājumu un sakļautu darbību šauros skatu laukos. Izmantojiet līdzinājuma opcijas, lai izlemtu, kur tas atrodas navigācijas joslas saturā.

Uzmanību , .navbar-formlielu daļu sava koda koplieto ar .form-inline, izmantojot mixin. Dažām veidlapu vadīklām, piemēram, ievades grupām, var būt nepieciešams fiksēts platums, lai tās pareizi tiktu rādītas navigācijas joslā.

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

Vienmēr pievienojiet etiķetes

Ekrāna lasītājiem būs problēmas ar jūsu veidlapām, ja katrai ievadei neiekļausiet etiķeti. Šo iekļauto veidlapu etiķetes varat paslēpt, izmantojot .sr-onlyklasi. Ir arī citas alternatīvas metodes, kā nodrošināt marķējumu palīgtehnoloģijām, piemēram, aria-label, aria-labelledbyvai titleatribūts. Ja neviena no tām nav, ekrāna lasītāji var izmantot placeholderatribūtu, ja tāds ir, taču ņemiet vērā, ka placeholdernav ieteicams izmantot atribūtu kā citu marķēšanas metožu aizstājēju.

Pievienojiet .navbar-btnklasi <button>elementiem, kas neatrodas a <form>, lai tos vertikāli centrētu navigācijas joslā.

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

Aptiniet teksta virknes elementā ar .navbar-text, parasti uz <p>taga, lai nodrošinātu pareizu ievadu un krāsu.

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

Personām, kuras izmanto standarta saites, kas neietilpst parastajā navigācijas joslas komponentā, izmantojiet .navbar-linkklasi, lai pievienotu atbilstošās krāsas noklusējuma un apgrieztās navigācijas joslas opcijām.

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

Izlīdziniet navigācijas saites, veidlapas, pogas vai tekstu, izmantojot .navbar-leftvai .navbar-rightutilītu klases. Abas klases pievienos CSS pludiņu norādītajā virzienā. Piemēram, lai izlīdzinātu navigācijas saites, ievietojiet tās atsevišķi <ul>, izmantojot attiecīgo lietderības klasi.

Šīs klases ir jauktas versijas .pull-leftun .pull-right, taču tās ir piemērotas multivides vaicājumiem, lai vieglāk apstrādātu navigācijas joslas komponentus dažādos ierīču izmēros.

Pievienojiet .navbar-fixed-topun iekļaujiet .containervai .container-fluidcentrēšanai un spilventiņu navigācijas joslas saturu.

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

Nepieciešams ķermeņa polsterējums

Fiksētā navigācijas josla pārklāj jūsu citu saturu, ja vien to nepievienosit paddinglapas augšpusē <body>. Izmēģiniet savas vērtības vai izmantojiet tālāk esošo fragmentu. Padoms. Pēc noklusējuma navigācijas josla ir 50 pikseļus augsta.

body { padding-top: 70px; }

Noteikti iekļaujiet to aiz Bootstrap CSS pamata.

Pievienojiet .navbar-fixed-bottomun iekļaujiet .containervai .container-fluidcentrēšanai un spilventiņu navigācijas joslas saturu.

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

Nepieciešams ķermeņa polsterējums

Fiksētā navigācijas josla pārklāj jūsu citu saturu, ja vien jūs to paddingnepievienosit <body>. Izmēģiniet savas vērtības vai izmantojiet tālāk esošo fragmentu. Padoms. Pēc noklusējuma navigācijas josla ir 50 pikseļus augsta.

body { padding-bottom: 70px; }

Noteikti iekļaujiet to aiz Bootstrap CSS pamata.

Izveidojiet pilna platuma navigācijas joslu, kas ritinās līdz ar lapu, pievienojot .navbar-static-topun iekļaujot .containervai .container-fluidcentrēšanai un spilventiņu navigācijas joslas saturu.

Atšķirībā no .navbar-fixed-*klasēm, jums nav jāmaina polsterējums body.

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

Mainiet navigācijas joslas izskatu, pievienojot .navbar-inverse.

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

Maizes drupačas

Norādiet pašreizējās lapas atrašanās vietu navigācijas hierarhijā.

Atdalītāji tiek automātiski pievienoti CSS, izmantojot :beforeun content.

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

Lapu šķirošana

Nodrošiniet lappušu saites savai vietnei vai lietotnei, izmantojot vairāku lapu lappušu komponentu vai vienkāršāku peidžera alternatīvu .

Noklusējuma lappuse

Vienkārša lapošana, ko iedvesmojis Rdio, lieliski piemērota lietotnēm un meklēšanas rezultātiem. Lielo bloku ir grūti nepamanīt, tas ir viegli mērogojams un nodrošina lielus klikšķu apgabalus.

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

Lapu dalīšanas komponenta marķēšana

Lapu dalīšanas komponents ir jāiesaiņo <nav>elementā, lai to identificētu kā ekrāna lasītāju un citu palīgtehnoloģiju navigācijas sadaļu. Turklāt, tā kā lapā, visticamāk, jau ir vairāk nekā viena šāda navigācijas sadaļa (piemēram, galvenā navigācija galvenē vai sānjoslas navigācija), ir ieteicams sniegt aprakstu aria-label, <nav>kas atspoguļo tās mērķi. Piemēram, ja lappušu veidošanas komponents tiek izmantots, lai pārvietotos starp meklēšanas rezultātu kopu, piemērota etiķete varētu būt aria-label="Search results pages".

Atspējoti un aktīvi stāvokļi

Saites var pielāgot dažādiem apstākļiem. Izmantojiet .disabledneklikšķināmām saitēm un .activepašreizējās lapas norādīšanai.

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

Mēs iesakām nomainīt aktīvos vai atspējotos enkurus pret <span>vai izlaist enkuru iepriekšējās/nākamās bultiņas gadījumā, lai noņemtu klikšķu funkcionalitāti, vienlaikus saglabājot paredzētos stilus.

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

Izmēru noteikšana

Vai vēlaties lielāku vai mazāku lappušu skaitu? Pievienojiet .pagination-lgvai .pagination-smpapildu izmēriem.

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

Peidžeris

Ātras iepriekšējās un nākamās saites vienkāršai lappušu ievietošanai ar vieglu marķējumu un stiliem. Tas ir lieliski piemērots vienkāršām vietnēm, piemēram, emuāriem vai žurnāliem.

Noklusējuma piemērs

Pēc noklusējuma peidžeris centrē saites.

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

Izlīdzinātas saites

Varat arī izlīdzināt katru saiti sānos:

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

Izvēles atspējošanas stāvoklis

Peidžera saitēs tiek izmantota arī vispārējā .disabledlietderības klase no lappušu klāšanas.

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

Piemērs

Virsraksta piemērs Jauns

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

Pieejamās variācijas

Pievienojiet jebkuru no tālāk minētajām modifikatoru klasēm, lai mainītu etiķetes izskatu.

Noklusējuma primārās veiksmes informācijas brīdinājums Bīstams

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

Vai jums ir daudz etiķešu?

Renderēšanas problēmas var rasties, ja šaurā konteinerā ir desmitiem iekļautu uzlīmju, un katrā ir savs inline-blockelements (piemēram, ikona). Veids, kā to novērst, ir iestatīšana display: inline-block;. Kontekstu un piemēru skatiet #13219 .

Viegli iezīmējiet jaunus vai nelasītus vienumus, pievienojot <span class="badge">saitēm, Bootstrap navigācijas elementiem un citiem.

Iesūtne42

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

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

Pašsabrukšana

Ja nav jaunu vai nelasītu vienumu, emblēmas vienkārši sakļaujas (izmantojot CSS :emptyatlasītāju), ja tajā nav satura.

Saderība starp pārlūkprogrammām

Programmā Internet Explorer 8 emblēmas netiks pašas sakļautas, jo tajā netiek atbalstīts :emptyatlasītājs.

Pielāgojas aktīvajiem navigācijas stāvokļiem

Ir iekļauti iebūvētie stili, lai tablešu navigācijā ievietotu nozīmītes aktīvā stāvoklī.

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

Viegls, elastīgs komponents, kas pēc izvēles var paplašināt visu skata logu, lai parādītu jūsu vietnes galveno saturu.

Sveika pasaule!

Šī ir vienkārša varoņa vienība, vienkārša jumbotron stila sastāvdaļa, lai pievērstu papildu uzmanību piedāvātajam saturam vai informācijai.

Uzzināt vairāk

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

Lai padarītu jumbotronu pilnā platumā un bez noapaļotiem stūriem, novietojiet to ārpus visiem .containers un tā vietā pievienojiet iekšpusi .container.

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

Vienkāršs apvalks, h1lai lapas satura sadaļas atbilstoši atdalītu un segmentētu. Tas var izmantot h1noklusējuma smallelementu, kā arī lielāko daļu citu komponentu (ar papildu stiliem).

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

Paplašiniet Bootstrap režģa sistēmu ar sīktēlu komponentu, lai ērti parādītu attēlu, videoklipu, teksta un cita veida režģus.

Ja meklējat Pinterest līdzīgu dažāda augstuma un/vai platuma sīktēlu prezentāciju, jums būs jāizmanto trešās puses spraudnis, piemēram, Masonry , Isotope vai Salvattore .

Noklusējuma piemērs

Pēc noklusējuma Bootstrap sīktēli ir paredzēti, lai parādītu saistītos attēlus ar minimālu nepieciešamo marķējumu.

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

Pielāgots saturs

Izmantojot nelielu papildu marķējumu, ir iespējams sīktēliem pievienot jebkāda veida HTML saturu, piemēram, virsrakstus, rindkopas vai pogas.

Sīktēla etiķete

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

Poga Poga

Sīktēla etiķete

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

Poga Poga

Sīktēla etiķete

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

Poga Poga

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

Nodrošiniet kontekstuālus atgriezeniskās saites ziņojumus tipiskām lietotāja darbībām, izmantojot nedaudzus pieejamus un elastīgus brīdinājuma ziņojumus.

Piemēri

Aplauziet jebkuru tekstu un neobligāto noraidīšanas pogu .alertvienā no četrām kontekstuālajām klasēm (piemēram, .alert-success) pamata brīdinājuma ziņojumiem.

Nav noklusējuma klases

Brīdinājumiem nav noklusējuma klases, ir tikai bāzes un modifikatoru klases. Noklusējuma pelēkajam brīdinājumam nav pārāk lielas jēgas, tāpēc jums ir jānorāda veids, izmantojot kontekstuālo klasi. Izvēlieties panākumus, informāciju, brīdinājumus vai briesmas.

Labi padarīts! Jūs veiksmīgi izlasījāt šo svarīgo brīdinājuma ziņojumu.

Uzmanību! Šim brīdinājumam ir jāpievērš uzmanība, taču tas nav īpaši svarīgi.

Brīdinājums! Labāk pārbaudi sevi, tu neizskaties pārāk labi.

Ak! Mainiet dažas lietas un mēģiniet iesniegt vēlreiz.

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

Noraidāmie brīdinājumi

Izveidojiet jebkuru brīdinājumu, pievienojot izvēles .alert-dismissibleun aizvēršanas pogu.

Nepieciešams JavaScript brīdinājuma spraudnis

Lai pilnībā funkcionētu, noraidāmi brīdinājumi, ir jāizmanto brīdinājumu JavaScript spraudnis .

Brīdinājums! Labāk pārbaudi sevi, tu neizskaties pārāk labi.

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

Nodrošiniet pareizu darbību visās ierīcēs

Noteikti izmantojiet <button>elementu ar data-dismiss="alert"datu atribūtu.

Saites brīdinājumos

Izmantojiet .alert-linklietderības klasi, lai jebkurā brīdinājumā ātri nodrošinātu atbilstošas krāsas saites.

Labi padarīts! Jūs veiksmīgi izlasījāt šo svarīgo brīdinājuma ziņojumu .

Uzmanību! Šim brīdinājumam ir jāpievērš uzmanība , taču tas nav īpaši svarīgi.

Brīdinājums! Labāk pārbaudi sevi, tu neizskaties pārāk labi .

Ak! Mainiet dažas lietas un mēģiniet iesniegt vēlreiz.

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

Sniedziet jaunākās atsauksmes par darbplūsmas vai darbības gaitu, izmantojot vienkāršas, taču elastīgas progresa joslas.

Saderība starp pārlūkprogrammām

Progresa joslas izmanto CSS3 pārejas un animācijas, lai sasniegtu dažus to efektus. Šīs funkcijas netiek atbalstītas pārlūkprogrammā Internet Explorer 9 un jaunākās versijās vai vecākajās Firefox versijās. Opera 12 neatbalsta animācijas.

Satura drošības politikas (CSP) saderība

Ja jūsu vietnei ir satura drošības politika (CSP) , kas neatļauj style-src 'unsafe-inline', jūs nevarēsit izmantot iekļautos styleatribūtus, lai iestatītu norises joslas platumu, kā parādīts mūsu piemēros tālāk. Alternatīvas metodes platumu iestatīšanai, kas ir saderīgi ar stingriem CSP, ietver nelielu pielāgotu JavaScript izmantošanu (kas nosaka element.style.width) vai pielāgotu CSS klašu izmantošanu.

Pamatpiemērs

Noklusējuma progresa josla.

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

Ar etiķeti

Noņemiet <span>ar .sr-onlyklasi no norises joslas, lai parādītu redzamu procentuālo daļu.

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>

Lai nodrošinātu, ka etiķetes teksts paliek salasāms pat maziem procentiem, apsveriet iespēju pievienot min-widthprogresa joslai.

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>

Kontekstuālās alternatīvas

Progresa joslās tiek izmantotas dažas no tām pašām pogu un brīdinājumu klasēm, lai nodrošinātu konsekventus stilus.

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

Svītrains

Izmanto gradientu, lai radītu svītrainu efektu. Nav pieejams IE9 un jaunākās versijās.

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

Animēts

Pievienot .active, .progress-bar-stripedlai animētu svītras no labās uz kreiso pusi. Nav pieejams IE9 un jaunākās versijās.

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

Sakrauts

Novietojiet vairākus stieņus vienā .progress, lai tos sakrautu.

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

Abstraktie objektu stili dažāda veida komponentu veidošanai (piemēram, emuāra komentāri, tvīti u.c.), kuros līdzās teksta saturam ir līdzināts attēls pa kreisi vai pa labi.

Noklusējuma multivide

Noklusējuma multivide parāda multivides objektu (attēlus, video, audio) satura bloka kreisajā vai labajā pusē.

Multivides virsraksts

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

Multivides virsraksts

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

Ligzdotas multivides virsraksts

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

Multivides virsraksts

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

Multivides virsraksts

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

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

Klases .pull-leftun .pull-rightarī pastāv un iepriekš tika izmantotas kā daļa no multivides komponenta, taču no v3.3.0 ir novecojušas šim lietojumam. Tie ir aptuveni līdzvērtīgi .media-leftun .media-right, izņemot tos, .media-rightkas jāievieto aiz .media-bodyHTML.

Multivides izlīdzināšana

Attēlus vai citus datu nesējus var līdzināt augšā, vidū vai apakšā. Noklusējums ir līdzināts augšpusē.

Augšpusē līdzināts apdrukājamais materiāls

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

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

Vidēji līdzināta multivide

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

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

Apakšējā izlīdzinātais apdrukājamais materiāls

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

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

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

Mediju saraksts

Izmantojot nedaudz papildu marķējumu, varat izmantot multividi sarakstā (noderīgi komentāru pavedieniem vai rakstu sarakstiem).

Multivides virsraksts

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

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

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

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

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

Sarakstu grupas ir elastīgs un jaudīgs komponents, lai parādītu ne tikai vienkāršus elementu sarakstus, bet arī sarežģītus ar pielāgotu saturu.

Pamatpiemērs

Visvienkāršākā sarakstu grupa ir vienkārši nesakārtots saraksts ar saraksta vienumiem un atbilstošām klasēm. Veidojiet to, izmantojot tālāk norādītās opcijas vai pēc vajadzības savu CSS.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulums un eross

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

Nozīmītes

Pievienojiet emblēmu komponentu jebkuram saraksta grupas vienumam, un tas automātiski tiks novietots labajā pusē.

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

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

Saistītie vienumi

Saistīt saraksta grupas vienumus, saraksta vienumu vietā izmantojot enkura tagus (tas nozīmē arī vecāku <div>, nevis <ul>). Nav nepieciešami atsevišķi vecāki katram elementam.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulums un eross

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

Pogas vienumi

Saraksta grupas vienumi var būt pogas, nevis saraksta vienumi (tas nozīmē arī vecāku <div>, nevis <ul>). Nav nepieciešami atsevišķi vecāki katram elementam. Šeit neizmantojiet standarta .btnklases.

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

Atspējotie priekšmeti

Pievienojiet .disabledsimbolam a .list-group-item, lai to pelēkotu, lai parādītos atspējota.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulums un eross

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

Kontekstuālās klases

Izmantojiet kontekstuālās klases, lai veidotu saraksta vienumus — noklusējuma vai saistītos. Ietver arī .activestāvokli.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulums un eross

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulums un eross

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

Pielāgots saturs

Pievienojiet gandrīz jebkuru HTML, pat tādām saistīto sarakstu grupām kā tālāk.

Saraksta grupas vienumu virsraksts

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

Saraksta grupas vienumu virsraksts

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

Saraksta grupas vienumu virsraksts

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

Lai gan tas ne vienmēr ir nepieciešams, dažreiz jums ir jāievieto DOM kastē. Šādās situācijās izmēģiniet paneļa komponentu.

Pamatpiemērs

Pēc noklusējuma viss, kas jādara, .panelir izmantot dažas pamata apmales un polsterējumu, lai ietvertu kādu saturu.

Pamata paneļa piemērs

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

Panelis ar virsrakstu

Viegli pievienojiet virsrakstu konteineru savam panelim, izmantojot .panel-heading. Varat arī iekļaut jebkuru<h1> — <h6>ar .panel-titleklasi, lai pievienotu iepriekš izveidotu virsrakstu. Tomēr - fontu <h1>lielumus <h6>ignorē .panel-heading.

Lai saites būtu pareizi nokrāsotas, noteikti ievietojiet saites virsrakstos sadaļā .panel-title.

Paneļa virsraksts bez nosaukuma

Paneļa saturs

Paneļa nosaukums

Paneļa saturs

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

Panelis ar kājeni

Aptiniet pogas vai sekundāro tekstu .panel-footer. Ņemiet vērā, ka paneļu kājenes nepārmanto krāsas un apmales, ja tiek izmantotas kontekstuālās variācijas, jo tām nav jābūt priekšplānā.

Paneļa saturs

Paneļa kājene

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

Kontekstuālās alternatīvas

Tāpat kā citus komponentus, varat viegli padarīt paneli jēgpilnāku konkrētam kontekstam, pievienojot kādu no konteksta stāvokļa klasēm.

Paneļa nosaukums

Paneļa saturs

Paneļa nosaukums

Paneļa saturs

Paneļa nosaukums

Paneļa saturs

Paneļa nosaukums

Paneļa saturs

Paneļa nosaukums

Paneļa saturs

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

Ar galdiem

Pievienojiet .tablepaneļa iekšpusi bez apmales, lai izveidotu nevainojamu dizainu. Ja ir .panel-body, mēs pievienojam papildu apmali tabulas augšpusē atdalīšanai.

Paneļa virsraksts

Šeit ir kāds noklusējuma paneļa saturs. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Vārds	Uzvārds	Lietotājvārds
1	Atzīmēt	Otto	@mdo
2	Jēkabs	Torntons	@resns
3	Lerijs	putns	@twitter

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

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

Ja paneļa korpusa nav, komponents bez pārtraukuma pārvietojas no paneļa galvenes uz tabulu.

Paneļa virsraksts

#	Vārds	Uzvārds	Lietotājvārds
1	Atzīmēt	Otto	@mdo
2	Jēkabs	Torntons	@resns
3	Lerijs	putns	@twitter

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

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

Ar sarakstu grupām

Ērti iekļaujiet pilna platuma sarakstu grupas jebkurā panelī.

Paneļa virsraksts

Šeit ir kāds noklusējuma paneļa saturs. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulums un eross

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

Ļaujiet pārlūkprogrammām noteikt video vai slaidrādes izmērus, pamatojoties uz to saturošā bloka platumu, izveidojot raksturīgo attiecību, kas tiks pareizi mērogota jebkurā ierīcē.

Noteikumi tiek tieši piemēroti <iframe>, <embed>, <video>un <object>elementiem; pēc izvēles izmantojiet nepārprotamu pēcnācēju klasi .embed-responsive-item, ja vēlaties saskaņot citu atribūtu stilu.

Pro-Padoms! Jums nav jāiekļauj frameborder="0"jūsu <iframe>s, jo mēs to ignorējam jūsu vietā.

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

Noklusējums labi

Izmantojiet aku kā vienkāršu elementa efektu, lai piešķirtu tam ieliktu efektu.

Paskaties, es esmu akā!

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

Izvēles nodarbības

Kontroles polsterējums un noapaļoti stūri ar divām izvēles modifikatoru klasēm.

Paskaties, es esmu lielā akā!

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

Paskaties, es esmu mazā akā!

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

Sastāvdaļas

Glifikoni

Pieejamie glifi

Kā izmantot

Nejaukt ar citiem komponentiem

Izmantošanai tikai uz tukšiem elementiem

Ikonas fonta atrašanās vietas maiņa

Pieejamas ikonas

Piemēri

Nolaižamās izvēlnes

Piemērs

Izlīdzināšana

Var būt nepieciešama papildu pozicionēšana

Novecojis .pull-rightlīdzinājums

Virsraksti

Dalītājs

Atspējotie izvēlnes vienumi

Pogu grupas

Rīka padomiem un uznirstošajiem logiem pogu grupās ir nepieciešams īpašs iestatījums

Pārliecinieties, ka tas ir pareizi role, un norādiet etiķeti

Pamatpiemērs

Pogu rīkjosla

Izmēru noteikšana

Ligzdošana

Vertikālā variācija

Attaisnotas pogu grupas

Robežu apstrāde

IE8 un robežas

Ar <a>elementiem

Saites, kas darbojas kā pogas

Ar <button>elementiem

Pogu nolaižamās izvēlnes

Atkarība no spraudņa

Nolaižamās izvēlnes ar vienu pogu

Sadalīšanas pogas nolaižamās izvēlnes

Izmēru noteikšana

Nolaižamā variācija

Ievades grupas

Tikai teksta <input>s

Rīka padomiem un uznirstošajiem logiem ievades grupās ir nepieciešams īpašs iestatījums

Nejaukt ar citiem komponentiem

Vienmēr pievienojiet etiķetes

Pamatpiemērs

Izmēru noteikšana

Izvēles rūtiņas un radio papildinājumi

Pogu papildinājumi

Pogas ar nolaižamām izvēlnēm

Segmentētas pogas

Vairākas pogas

Navs

Lai izmantotu navigācijas elementus ciļņu paneļos, ir nepieciešams JavaScript ciļņu spraudnis

Padariet pieejamus navigācijas sistēmas, kas tiek izmantotas kā navigācija

Cilnes

Tabletes

Pamatots

Safari un atsaucīgas pamatotas navigācijas sistēmas

Atspējotas saites

Saites funkcionalitāte nav ietekmēta

Izmantojot nolaižamās izvēlnes

Cilnes ar nolaižamajām izvēlnēm

Tabletes ar nolaižamām izvēlnēm

Navigbar

Noklusējuma navigācijas josla

Pārpildīts saturs

Nepieciešams JavaScript spraudnis

Sakļautā mobilās navigācijas joslas pārtraukuma punkta maiņa

Padariet navigācijas joslas pieejamas

Zīmola tēls

Veidlapas

Mobilo ierīču brīdinājumi

Vienmēr pievienojiet etiķetes

Pogas

Kontekstam atbilstošs lietojums

Teksts

Saites, kas nav saistītas ar navigāciju

Komponentu izlīdzināšana

Vairāku komponentu pareiza līdzināšana

Fiksēts augšpusē

Nepieciešams ķermeņa polsterējums

Fiksēts apakšā

Novecojis `.pull-right`līdzinājums

Pārliecinieties, ka tas ir pareizi `role`, un norādiet etiķeti

Ar `<a>`elementiem

Ar `<button>`elementiem

Tikai teksta `<input>`s