Glifikoni

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.

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

Nolaižamās izvēlnes

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

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>

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

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

Nolaižamās izvēlnes tiek automātiski novietotas, izmantojot CSS, parastajā dokumenta plūsmā. Tas nozīmē, ka vecāki var apgriezt nolaižamās izvēlnes ar noteiktiem overflowrekvizītiem vai parādīties ārpus skata loga robežām. Risiniet šīs problēmas patstāvīgi, kad tās rodas.

Novecojis .pull-rightlīdzinājums

Sākot ar v3.1.0, .pull-rightnolaižamo izvēlņu darbība ir pārtraukta. Lai izvēlni līdzinātu pa labi, izmantojiet .dropdown-menu-right. Pa labi līdzinātie navigācijas komponenti navigācijas joslā izmanto šīs klases kombinēto versiju, lai automātiski līdzinātu izvēlni. Lai to ignorētu, izmantojiet .dropdown-menu-left.

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

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>

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>

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>

Pogu grupas

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>

Pogu rīkjosla

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.

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

Pogu nolaižamās izvēlnes

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>

Ievades grupas

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

Šeit nelietojiet <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 formas vadīklas vienā ievades grupā.

@

@example.com

$ .00

https://example.com/lietotāji/
<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>

Navs

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.

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

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>

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

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>

Pievienojiet nolaižamās izvēlnes ar nedaudz 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>

Navigbar

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:

  1. Samaziniet navigācijas joslas vienumu skaitu vai platumu.
  2. Slēpt noteiktus navigācijas joslas vienumus noteiktos ekrāna izmēros, izmantojot adaptīvās utilītas klases .
  3. 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.

Nepieciešams JavaScript spraudnis

Ja JavaScript ir atspējots un skata logs ir pietiekami šaurs, lai navigācijas josla sakļautos, nav iespējams izvērst navigācijas joslu un skatīt saturu.navbar-collapse .

Adaptīvajai navigācijas joslai ir nepieciešams, lai jūsu Bootstrap versijā būtu iekļauts sakukšanas spraudnis .

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

Navigācijas josla tiek sakļauta vertikālajā mobilajā skatā, ja skata logs ir šaurāks par @grid-float-breakpoint, un izvēršas horizontālā skatā, kas nav mobilais skats, ja skata logs ir vismaz @grid-float-breakpointplatumā. Pielāgojiet šo mainīgo avotā Mazāk, lai kontrolētu, kad navigācijas josla tiek sakļauta/izvērsta. Noklusējuma vērtība ir 768px(mazākais "mazais" vai "planšetdatora" ekrāns).

Padariet navigācijas joslas pieejamas

Noteikti izmantojiet <nav>elementu vai, ja izmantojat vispārīgāku elementu, piemēram, <div>, pievienojiet role="navigation"katrai navigācijas joslai, lai to skaidri identificētu kā orientieri palīgtehnoloģiju lietotājiem.

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

Mobilo ierīču brīdinājumi

Ir daži brīdinājumi attiecībā uz formas vadīklu izmantošanu fiksētajos elementos mobilajās ierīcēs. Detalizētu informāciju skatiet mūsu pārlūkprogrammas atbalsta dokumentos .

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>

Kontekstam atbilstošs lietojums

Tāpat kā standarta pogu klases , .navbar-btnvar izmantot uz <a>un <input>elementiem. Tomēr elementiem iekšā .navbar-btnnedrīkst izmantot ne standarta pogu klases , ne standarta pogas .<a>.navbar-nav

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.

Vairāku komponentu pareiza līdzināšana

Navigācijas joslām pašlaik ir ierobežojumi vairākām .navbar-rightklasēm. .navbar-rightLai pareizi izvietotu saturu, pēdējā elementā mēs izmantojam negatīvu piemale . Ja šo klasi izmanto vairāki elementi, šīs piemales nedarbojas, kā paredzēts.

Mēs to pārskatīsim, kad varēsim pārrakstīt šo komponentu versijā 4.

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>

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>

Etiķetes

Piemērs

Virsraksta piemērs Jauns

Virsraksta piemērs Jauns

Virsraksta piemērs Jauns

Virsraksta piemērs Jauns

Virsraksta piemērs Jauns
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 .

Nozīmītes

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>

Džumbotrons

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>

Lapas galvene

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>

Sīktēli

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.

100%x200

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

100%x200

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

100%x200

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>

Brīdinājumi

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.

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

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

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

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

Progresa joslas

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 neliela pielāgota JavaScript (kas nosaka element.style.width) vai pielāgotu CSS klašu izmantošanu.

Pamatpiemērs

Noklusējuma progresa josla.

60% pabeigti
<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.

40% pabeigti (veiksmīgi)
20% pabeigti
60% pabeigti (brīdinājums)
80% pabeigti (bīstami)
<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.

40% pabeigti (veiksmīgi)
20% pabeigti
60% pabeigti (brīdinājums)
80% pabeigti (bīstami)
<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.

45% pabeigti
<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.

35% pabeigti (veiksmīgi)
20% pabeigti (brīdinājums)
10% pabeigti (bīstami)
<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>

Mediju objekts

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>

Saraksta grupa

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.

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

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

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

Paneļi

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>

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

Atsaucīga iegulšana

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

Wells

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>