Galimi glifai

Apima daugiau nei 250 glifų šrifto formatu iš Glyphicon Halflings rinkinio. „Glyphicons Halflings“ paprastai nėra prieinama nemokamai, tačiau jų kūrėjas padarė juos nemokamai prieinamus „Bootstrap“. Atsidėkodami tik prašome, kai tik įmanoma, įtraukti nuorodą į Glyphicons .

glyphicon glifikonas-žvaigždutė
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-debesis
glyphicon glyphicon-vokas
glyphicon glyphicon-pieštukas
glyphicon glifikonas-stiklas
glyphicon glyphicon-muzika
glyphicon glyphicon-search
glyphicon glifikonas-širdis
glyphicon glyphicon-star
glyphicon glyphicon-star-tuščia
glyphicon glyphicon-vartotojas
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-pašalinti
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-trash
glyphicon glyphicon-namai
glyphicon glyphicon-file
glyphicon glyphicon-time
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon glyphicon atsisiuntimas
glyphicon glyphicon-įkėlimas
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-pakartoti
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
Glyphicon Glyphicon-lock
glyphicon glifikonas-vėliava
glyphicon glyphicon-ausinės
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-book
glyphicon glyphicon-žymė
glyphicon glyphicon-print
glyphicon glyphicon-kamera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-kursyvas
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-paveikslėlis
glyphicon glyphicon-map-marker
glyphicon glyphicon-adjust
glyphicon glyphicon-atspalvis
glyphicon glyphicon-taisyti
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-move
glyphicon glyphicon-žingsnis-atgal
glyphicon glyphicon-greitai atgal
glyphicon glyphicon-atgal
glyphicon glyphicon-play
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-greitas pirmyn
glyphicon glyphicon-žingsnis pirmyn
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-sign
glyphicon glyphicon-pašalinti-ženklą
glyphicon glyphicon-ok-sign
glyphicon glyphicon-klausimo ženklas
glyphicon glyphicon-info-sign
glyphicon glyphicon-screenshot
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-rodyklė į kairę
glyphicon glyphicon-rodyklė dešinėn
glyphicon glyphicon-arrow-up
glyphicon glyphicon-rodyklė žemyn
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-šauktukas-ženklas
glyphicon glyphicon-dovana
glyphicon glyphicon-lapas
glyphicon glyphicon-fire
glyphicon glyphicon-eye-atviras
glyphicon glyphicon-eye-close
glyphicon glyphicon-warning-sign
glyphicon glyphicon-plokštuma
glyphicon glyphicon-calendar
glyphicon glyphicon-random
glyphicon glyphicon-comment
Glyphicon Glyphicon-magnetas
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-pirkinių krepšelis
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-resize-vertikali
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon sertifikatas
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-ranka-dešinė
glyphicon glyphicon-ranka-kairėje
glyphicon glyphicon-ranka aukštyn
glyphicon glyphicon-hand-down
glyphicon glyphicon-circle-arrow-right
glyphicon glyphicon-circle-rodyklė į kairę
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-circle-rodyklė žemyn
glyphicon glyphicon-globe
glyphicon glyphicon-veržliaraktis
glyphicon glyphicon-užduotys
glyphicon glyphicon-filtras
glyphicon glyphicon-portfelis
glyphicon glyphicon-fullscreen
glyphicon glyphicon prietaisų skydelis
glyphicon glyphicon sąvaržėlė
glyphicon glyphicon-heart-tuščia
glyphicon glyphicon-link
glyphicon glyphicon-phone
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-rūšiuoti pagal abėcėlę
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-atributes
glyphicon glyphicon-sort-by-atributes-alt
glyphicon glyphicon-nepažymėtas
glyphicon glyphicon-expand
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-naujas langas
glyphicon glyphicon-record
glyphicon glyphicon-save
glyphicon glyphicon-atviras
Glyphicon Glyphicon išsaugotas
glyphicon glyphicon-importas
glyphicon glyphicon-export
glyphicon glyphicon-siųsti
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-kreditinė kortelė
glyphicon glyphicon-transfer
glyphicon glyphicon-stalo įrankiai
glyphicon glyphicon-header
glyphicon glyphicon suspaustas
glyphicon glyphicon-ausinės
glyphicon glyphicon-phone-alt
glyphicon glyphicon-bokštas
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subtitrai
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-debesų atsisiuntimas
glyphicon glyphicon-debesų įkėlimas
glyphicon glifikonas-medis-spygliuočiai
glyphicon glyphicon-tree-lapuoji
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
glyphicon glyphicon-copy
glyphicon glyphicon pasta
glyphicon glyphicon-alert
glyphicon glyphicon-ekvalaizeris
glyphicon glyphicon-king
glyphicon glyphicon-karalienė
glyphicon glifikonas-pėstininkas
glyphicon glyphicon-vyskupas
glyphicon glyphicon-riteris
glyphicon glyphicon-baby-formula
glyphicon glifikonas-palapinė
glyphicon glyphicon-lenta
Glyphicon Glyphicon-lova
glyphicon glyphicon-obuolys
glyphicon glyphicon-trinti
glyphicon glyphicon-smėlio laikrodis
glyphicon glyphicon lempa
glyphicon glyphicon-dublikatas
glyphicon glyphicon-piggy-bank
glyphicon glyphicon žirklės
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-jena
glyphicon glyphicon-jpy
glifikonas glifikonas-rublis
glyphicon glyphicon-rub
glyphicon glyphicon skalė
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ledo-lolly-skanavo
glyphicon glyphicon-education
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertikalus
glyphicon glyphicon-menu-mėsainis
glyphicon glyphicon-modal-langas
Glyphicon Glyphicon aliejus
Glyphicon Glyphicon-grain
glyphicon glyphicon-saulės akiniai
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-vertikali
glyphicon glyphicon-object-align-right
glyphicon glyphicon-triangle-right
glyphicon glyphicon-triangle-left
glyphicon glyphicon-triangle-bottom
glyphicon glyphicon-triangle-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

Kaip naudoti

Dėl našumo visoms piktogramoms reikalinga pagrindinė klasė ir atskira piktogramų klasė. Norėdami naudoti, įdėkite šį kodą beveik bet kur. Būtinai palikite tarpą tarp piktogramos ir teksto, kad būtų galima tinkamai užpildyti.

Nemaišykite su kitais komponentais

Piktogramų klasės negali būti tiesiogiai derinamos su kitais komponentais. Jie neturėtų būti naudojami kartu su kitomis to paties elemento klasėmis. Vietoj to pridėkite įdėtą <span>ir pritaikykite piktogramų klases <span>.

Skirta naudoti tik ant tuščių elementų

Piktogramų klasės turėtų būti naudojamos tik elementams, kuriuose nėra teksto turinio ir antrinių elementų.

Piktogramos šrifto vietos keitimas

Bootstrap daro prielaidą, kad piktogramų šriftų failai bus ../fonts/kataloge, palyginti su sudarytais CSS failais. Šių šriftų failų perkėlimas arba pervadinimas reiškia CSS atnaujinimą vienu iš trijų būdų:

Pakeiskite @icon-font-pathir (arba) @icon-font-namekintamuosius šaltinyje Less files.
Naudokite santykinių URL parinktį , kurią teikia mažiau kompiliatorius.
Pakeiskite url()kelius sukompiliuotame CSS.

Naudokite bet kurią parinktį, kuri geriausiai atitinka jūsų konkrečią kūrimo sąranką.

Prieinamos piktogramos

Šiuolaikinės pagalbinių technologijų versijos skelbs apie CSS sukurtą turinį, taip pat konkrečius Unikodo simbolius. Kad išvengtume netyčinės ir klaidinančios išvesties ekrano skaitytuvuose (ypač kai piktogramos naudojamos tik dekoravimui), jas paslepiame naudodami aria-hidden="true"atributą.

Jei naudojate piktogramą reikšmei perteikti (o ne tik kaip dekoratyvinį elementą), pasirūpinkite, kad ši reikšmė būtų perduota ir pagalbinėms technologijoms – pavyzdžiui, įtraukite papildomo turinio, vizualiai paslėpto .sr-onlyklasėje.

Jei kuriate valdiklius be jokio kito teksto (pvz., <button>kuriame yra tik piktograma), visada turėtumėte pateikti alternatyvų turinį, kad nustatytumėte valdiklio tikslą, kad jis būtų prasmingas pagalbinių technologijų naudotojams. Tokiu atveju galite pridėti aria-labelatributą pačiame valdiklyje.

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

Pavyzdžiai

Naudokite juos mygtukuose, mygtukų grupėse įrankių juostai, naršymui arba pridėtoms formoms.

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

Piktograma, naudojama įspėjime , nurodanti , kad tai klaidos pranešimas, su papildomu .sr-onlytekstu, perteikiančiu šią užuominą pagalbinių technologijų naudotojams.

Įveskite galiojantį el. pašto adresą

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

Perjungiamas kontekstinis meniu nuorodų sąrašams rodyti. Interaktyvus naudojant išskleidžiamąjį JavaScript papildinį .

Pavyzdys

Apvyniokite išskleidžiamojo meniu aktyviklį ir išskleidžiamąjį meniu į .dropdownarba kitą elementą, kuris deklaruoja position: relative;. Tada pridėkite meniu 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>

Išskleidžiamuosius meniu galima keisti, kad jie būtų išplėsti aukštyn (o ne žemyn), įtraukiant .dropupjuos į pirminį.

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

Lygiavimas

Pagal numatytuosius nustatymus išskleidžiamasis meniu automatiškai pateikiamas 100 % iš viršaus ir išilgai kairiosios pirminio puslapio pusės. Pridėti .dropdown-menu-rightprie a .dropdown-menuį dešinę lygiuoti išskleidžiamąjį meniu.

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

Antraštės

Pridėkite antraštę prie veiksmų sekcijų žymėjimo bet kuriame išskleidžiamajame meniu.

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

Skirstytuvas

Pridėkite skirstytuvą, kad atskirtumėte nuorodų serijas išskleidžiamajame meniu.

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

Išjungti meniu elementai

Pridėkite .disabledprie a <li>išskleidžiamajame meniu, kad išjungtumėte nuorodą.

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

Sugrupuokite mygtukų serijas vienoje eilutėje su mygtukų grupe. Pridėkite pasirenkamą „JavaScript“ radiją ir žymimąjį laukelį naudodami mūsų mygtukų papildinį .

Patarimams ir iššokantiems mygtukų grupėse reikia specialaus nustatymo

Naudodami patarimus ar iššokančius elementus elementuose .btn-group, turėsite nurodyti parinktį container: 'body', kad išvengtumėte nepageidaujamų šalutinių poveikių (pvz., elementas padidėtų ir (arba) prarastų užapvalintus kampus, kai suaktyvinamas patarimas arba iššokantis rodinys).

Įsitikinkite, kad teisinga `role`, ir pateikite etiketę

Kad pagalbinės technologijos, pvz., ekrano skaitytuvai, parodytų, kad mygtukų serija yra sugrupuota, reikia pateikti atitinkamą roleatributą. Mygtukų grupėms tai būtų role="group", o įrankių juostose turėtų būti role="toolbar".

Viena išimtis yra grupės, kuriose yra tik vienas valdiklis (pvz., išlygintos mygtukų grupės su <button>elementais) arba išskleidžiamasis meniu.

Be to, grupėms ir įrankių juostoms turėtų būti suteikta aiški etiketė, nes kitu atveju dauguma pagalbinių technologijų jų nepaskelbs, nepaisant tinkamo roleatributo buvimo. Čia pateiktuose pavyzdžiuose naudojame aria-label, bet taip pat aria-labelledbygali būti naudojamos tokios alternatyvos kaip.

Pagrindinis pavyzdys

Apvyniokite mygtukų seriją su .btn..btn-group

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Sujunkite rinkinius <div class="btn-group">į a <div class="btn-toolbar">, kad gautumėte sudėtingesnius 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>

Dydžio nustatymas

Užuot taikę mygtukų dydžio klases kiekvienam grupės mygtukui, tiesiog pridėkite .btn-group-*prie kiekvieno .btn-group, taip pat kai įdėta kelias grupes.

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

Lizdas

Įdėkite į .btn-groupkitą .btn-group, kai norite, kad išskleidžiamieji meniu būtų sumaišyti su mygtukų serija.

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

Vertikali variacija

Padarykite, kad mygtukų rinkinys būtų išdėstytas vertikaliai, o ne horizontaliai. Padalijimo mygtukų išskleidžiamieji meniu čia nepalaikomi.

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

Pagrįstos mygtukų grupės

Padarykite mygtukų grupę vienodo dydžio, kad apimtų visą pirminio mygtuko plotį. Taip pat veikia su mygtukų grupės išskleidžiamaisiais meniu.

Tvarkyti sienas

Dėl specifinio HTML ir CSS, naudojamo mygtukų pagrindimui (būtent display: table-cell), ribos tarp jų padvigubėja. Įprastose mygtukų grupėse margin-left: -1pxnaudojamas kraštinėms sukrauti, o ne jas pašalinti. Tačiau marginneveikia su display: table-cell. Todėl, atsižvelgiant į „Bootstrap“ tinkinimus, galbūt norėsite pašalinti arba iš naujo nuspalvinti kraštines.

IE8 ir kraštinės

„Internet Explorer 8“ nepateikia mygtukų kraštinių pagrįstoje mygtukų grupėje, nesvarbu, ar ji įjungta, <a>ar <button>elementai. Norėdami tai padaryti, kiekvieną mygtuką apvyniokite kitu .btn-group.

Daugiau informacijos rasite #12476 .

Su `<a>`elementais

Tiesiog suvyniokite eilę .btns .btn-group.btn-group-justified.

Kairė Vidurio Teisingai

Kairė Vidurio

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

Nuorodos, veikiančios kaip mygtukai

Jei <a>elementai naudojami kaip mygtukai – suaktyvina puslapio funkcijas, o ne pereina į kitą dokumentą ar skiltį dabartiniame puslapyje – jiems taip pat turėtų būti suteiktas atitinkamas role="button".

Su `<button>`elementais

Jei norite naudoti pagrįstas mygtukų grupes su <button>elementais, kiekvieną mygtuką turite apvynioti mygtukų grupe . Daugelis naršyklių netinkamai taiko mūsų CSS <button>elementams pateisinti, bet kadangi palaikome mygtukų išskleidžiamuosius meniu, galime tai apeiti.

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

Naudokite bet kurį mygtuką, kad suaktyvintumėte išskleidžiamąjį meniu, įtraukdami jį į a .btn-groupir nurodydami tinkamą meniu žymėjimą.

Priklausomybė nuo įskiepių

Išskleidžiamajame mygtukų meniu reikia, kad išskleidžiamojo meniu papildinys būtų įtrauktas į jūsų „Bootstrap“ versiją.

Vieno mygtuko išskleidžiamieji meniu

Paverskite mygtuką išskleidžiamuoju jungikliu atlikdami keletą pagrindinių žymėjimo pakeitimų.

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

Split mygtuko išskleidžiamieji meniu

Panašiai sukurkite padalinto mygtuko išskleidžiamuosius meniu su tais pačiais žymėjimo pakeitimais, tik naudodami atskirą mygtuką.

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

Dydžio nustatymas

Mygtukų išskleidžiamieji meniu veikia su visų dydžių mygtukais.

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

Nuleidžiamasis variantas

Suaktyvinkite išskleidžiamuosius meniu virš elementų pridėdami .dropupprie pirminio elemento.

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

Išplėskite formos valdiklius pridėdami teksto arba mygtukų prieš, po arba abiejose teksto pusėse <input>. Naudokite .input-groupsu .input-group-addonarba .input-group-btn, jei norite pridėti arba pridėti elementus prie vieno .form-control.

Tik tekstiniai `<input>`s

Čia nenaudokite <select>elementų, nes WebKit naršyklėse jų negalima visiškai sukurti.

Venkite <textarea>čia naudoti elementų, nes rowskai kuriais atvejais jų atributas nebus laikomasi.

Įvesties grupių patarimai ir iššokantys langai reikalauja specialaus nustatymo

Naudodami patarimus ar iššokančius elementus elementuose .input-group, turėsite nurodyti parinktį container: 'body', kad išvengtumėte nepageidaujamų šalutinių poveikių (pvz., elementas padidėtų ir (arba) prarastų užapvalintus kampus, kai suaktyvinamas patarimas arba iššokantis rodinys).

Nemaišykite su kitais komponentais

Nemaišykite formų grupių arba tinklelio stulpelių klasių tiesiogiai su įvesties grupėmis. Vietoj to, įdėkite įvesties grupę formos grupės arba su tinkleliu susijusio elemento viduje.

Visada pridėkite etiketes

Ekrano skaitytuvai turės problemų su formomis, jei neįtrauksite kiekvienos įvesties etiketės. Šioms įvesties grupėms užtikrinkite, kad bet kokia papildoma etiketė ar funkcijos būtų perduotos pagalbinėms technologijoms.

Tiksli naudotina technika (matomi <label>elementai, <label>elementai, paslėpti naudojant .sr-onlyklasę arba aria-label, aria-labelledby, aria-describedby, titlearba placeholderatributo naudojimas) ir kokią papildomą informaciją reikės perduoti, priklausys nuo tikslaus įdiegto sąsajos valdiklio tipo. Šiame skyriuje pateiktuose pavyzdžiuose pateikiami keli siūlomi konkrečiam atvejui taikomi metodai.

Pagrindinis pavyzdys

Įdėkite vieną priedą arba mygtuką abiejose įvesties pusėse. Taip pat galite įdėti vieną iš abiejų įvesties pusių.

Mes nepalaikome kelių priedų ( .input-group-addonarba .input-group-btn) vienoje pusėje.

Mes nepalaikome kelių formų valdiklių vienoje įvesties grupėje.

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

Dydžio nustatymas

Pridėkite santykines formos dydžio klases, .input-groupo turinio dydis bus automatiškai pakeistas – nereikės kartoti kiekvieno elemento formos valdiklio dydžio klasių.

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

Žymės langeliai ir radijo priedai

Vietoj teksto įdėkite bet kurį žymimąjį laukelį arba radijo parinktį į įvesties grupės priedą.

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

Mygtukų priedai

Įvesties grupių mygtukai šiek tiek skiriasi ir reikalauja vieno papildomo įdėjimo lygio. Vietoj .input-group-addon, turėsite naudoti .input-group-btnmygtukams apvynioti. Tai būtina dėl numatytųjų naršyklės stilių, kurių negalima nepaisyti.

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

Mygtukai su išskleidžiamaisiais meniu

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

Segmentuoti mygtukai

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

Keli mygtukai

Nors galite turėti tik vieną priedą kiekvienoje pusėje, galite turėti kelis mygtukus viename .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>

„Bootstrap“ pasiekiamos navigacijos sistemos turi bendrą žymėjimą, pradedant bazine .navklase, ir bendromis būsenomis. Sukeiskite modifikatorių klases, kad perjungtumėte kiekvieną stilių.

Norint naudoti skirtukų skydelių navigaciją, reikalingas „JavaScript“ skirtukų papildinys

Jei norite naudoti skirtukus su skirtukų sritimis, turite naudoti skirtukų JavaScript papildinį . Žymėjimui taip pat reikės papildomų roleir ARIA atributų – daugiau informacijos rasite papildinio žymėjimo pavyzdyje .

Padarykite naršymo elementus, naudojamus kaip navigaciją, pasiekiamus

Jei naršymo juostai pateikti naudojate naršymo elementus, būtinai pridėkite role="navigation"prie logiškiausio pirminio sudėtinio rodinio <ul>arba apvyniokite <nav>elementą aplink visą naršymą. Nepridėkite vaidmens prie <ul>paties vaidmens, nes tai neleis jo paskelbti kaip tikrojo pagalbinių technologijų sąrašo.

Skirtukai

Atminkite, kad .nav-tabsklasei reikalinga .navpagrindinė klasė.

<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

Paimkite tą patį HTML, bet .nav-pillsvietoj jo naudokite:

<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 taip pat galima sukrauti vertikaliai. Tiesiog pridėkite .nav-stacked.

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

Pateisinamas

Lengvai padarykite skirtukus arba tabletes vienodo pločio pirminiams ekranams, didesniems nei 768 piks. naudodami .nav-justified. Mažesniuose ekranuose navigacijos nuorodos yra sukrautos.

Pagrįstos naršymo juostos naršymo nuorodos šiuo metu nepalaikomos.

„Safari“ ir reaguojančios pagrįstos navigacijos

Nuo 9.1.2 versijos „Safari“ turi klaidą, dėl kurios pakeitus naršyklės dydį horizontaliai, pagrįstoje navigacijoje atsiranda atvaizdavimo klaidų, kurios pašalinamos atnaujinus. Ši klaida taip pat rodoma pagrįstos navigacijos pavyzdyje .

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

Išjungtos nuorodos

Prie bet kurio navigacijos komponento (skirtukų ar tablečių) pridėkite .disabled, kad būtų pilkos nuorodos ir nebūtų užvedimo efektų .

Nuorodos funkcionalumas neturi įtakos

Ši klasė pakeis tik <a>išvaizdą, o ne jo funkcionalumą. Norėdami čia išjungti nuorodas, naudokite tinkintą JavaScript.

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

Naudojant išskleidžiamuosius meniu

Pridėkite išskleidžiamųjų meniu naudodami šiek tiek papildomo HTML ir išskleidžiamąjį JavaScript papildinį .

Skirtukai su išskleidžiamaisiais meniu

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

Tabletės su išskleidžiamaisiais meniu

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

Naršymo juostos yra reaguojantys meta komponentai, kurie naudojami kaip jūsų programos ar svetainės naršymo antraštės. Jie pradedami sutraukti (ir juos galima perjungti) mobiliuosiuose rodiniuose ir tampa horizontalūs, kai galimos peržiūros srities plotis didėja.

Pagrįstos naršymo juostos naršymo nuorodos šiuo metu nepalaikomos.

Perpildytas turinys

Kadangi „Bootstrap“ nežino, kiek vietos reikia naršymo juostos turiniui, gali kilti problemų dėl turinio perkėlimo į antrą eilutę. Norėdami tai išspręsti, galite:

Sumažinkite naršymo juostos elementų kiekį arba plotį.
Slėpti tam tikrus naršymo juostos elementus tam tikruose ekrano dydžiuose naudodami reaguojančias naudingumo klases .
Pakeiskite tašką, kuriame naršymo juosta persijungia iš sutraukto ir horizontalaus režimo. Tinkinkite @grid-float-breakpointkintamąjį arba pridėkite savo medijos užklausą.

Sutrauktos mobiliosios naršymo juostos pertraukos taško keitimas

Naršymo juosta susitraukia į vertikalų mobilųjį vaizdą, kai peržiūros sritis yra siauresnė nei @grid-float-breakpoint, ir išplečiama į horizontalųjį ne mobilųjį vaizdą, kai peržiūros sritis yra bent @grid-float-breakpointpločio. Koreguokite šį kintamąjį šaltinyje Mažiau, kad valdytumėte, kada naršymo juosta susitraukia / išsiskleidžia. Numatytoji reikšmė yra 768px(mažiausias „mažas“ arba „planšetinio kompiuterio“ ekranas).

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

Pakeiskite naršymo juostos prekės ženklą savo vaizdu, pakeisdami tekstą į <img>. Kadangi jis .navbar-brandturi savo užpildą ir aukštį, gali tekti nepaisyti kai kurių CSS, atsižvelgiant į jūsų vaizdą.

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

Įdėkite formos turinį, .navbar-formkad siaurose peržiūros srityse būtų tinkamai išlygiuota vertikaliai ir sutraukta. Naudokite lygiavimo parinktis, kad nuspręstumėte, kur jis yra naršymo juostos turinyje.

Kaip įspėti, .navbar-formdidžiąją dalį savo kodo dalijasi su .form-inlineper mixin. Kai kuriems formų valdikliams, pvz., įvesties grupėms, gali reikėti fiksuoto pločio, kad naršymo juostoje būtų tinkamai rodoma.

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

Visada pridėkite etiketes

Ekrano skaitytuvai turės problemų su formomis, jei neįtrauksite kiekvienos įvesties etiketės. Šių eilutinių formų etiketes galite paslėpti naudodami .sr-onlyklasę. Yra ir kitų alternatyvių metodų, kaip suteikti etiketę pagalbinėms technologijoms, pvz., aria-label, aria-labelledbyarba titleatributas. Jei nė vieno iš jų nėra, ekrano skaitytuvai gali naudoti placeholderatributą, jei yra, tačiau atminkite, kad naudoti placeholderkaip kitų ženklinimo metodų pakaitalą nepatartina.

Pridėkite .navbar-btnklasę prie <button>elementų, kurių nėra a <form>, kad vertikaliai centruotų juos naršymo juostoje.

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

Apvyniokite teksto eilutes į elementą su .navbar-text, paprastai ant <p>žymos, kad būtų tinkama pradžia ir spalva.

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

Žmonėms, naudojantiems standartines nuorodas, kurių nėra įprastame naršymo juostos komponente, naudokite .navbar-linkklasę, kad pridėtumėte tinkamas spalvas numatytosioms ir atvirkštinėms naršymo juostos parinktims.

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

Sulygiuokite naršymo nuorodas, formas, mygtukus ar tekstą naudodami .navbar-leftarba .navbar-rightnaudingumo klases. Abi klasės pridės CSS plūdę nurodyta kryptimi. Pavyzdžiui, norėdami suderinti navigacines nuorodas, sudėkite jas į atskirą <ul>atitinkamą naudingumo klasę.

Šios klasės yra mišrios ir versijos .pull-left, .pull-righttačiau jos taikomos medijos užklausoms, kad būtų lengviau tvarkyti naršymo juostos komponentus įvairių dydžių įrenginiuose.

Pridėti .navbar-fixed-topir įtraukti .containerarba .container-fluidį centrą ir klaviatūros naršymo juostos turinį.

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

Būtinas kūno paminkštinimas

Pataisyta naršymo juosta perdengs kitą turinį, nebent pridėsite paddingprie <body>. Išbandykite savo vertybes arba naudokite toliau pateiktą fragmentą. Patarimas: pagal numatytuosius nustatymus naršymo juosta yra 50 pikselių aukščio.

body { padding-top: 70px; }

Būtinai įtraukite tai po pagrindinio Bootstrap CSS.

Pridėti .navbar-fixed-bottomir įtraukti .containerarba .container-fluidį centrą ir klaviatūros naršymo juostos turinį.

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

Būtinas kūno paminkštinimas

Pataisyta naršymo juosta perdengs kitą turinį, nebent pridėsite stulpelio paddingapačioje <body>. Išbandykite savo vertybes arba naudokite toliau pateiktą fragmentą. Patarimas: pagal numatytuosius nustatymus naršymo juosta yra 50 pikselių aukščio.

body { padding-bottom: 70px; }

Būtinai įtraukite tai po pagrindinio Bootstrap CSS.

Sukurkite viso pločio naršymo juostą, kuri slinktų kartu su puslapiu, pridėdami .navbar-static-topir įtraukdami .containerarba .container-fluidį centrą ir klaviatūros naršymo juostos turinį.

Skirtingai nei .navbar-fixed-*klasėse, jums nereikia keisti jokių užpildų ant body.

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

Keiskite naršymo juostos išvaizdą pridėdami .navbar-inverse.

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

Duonos trupiniai

Nurodykite dabartinio puslapio vietą naršymo hierarchijoje.

Atskyrikliai automatiškai pridedami CSS naudojant :beforeir content.

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

Puslapių rašymas

Pateikite svetainės ar programos puslapių rūšiavimo nuorodas naudodami kelių puslapių puslapių rūšiavimo komponentą arba paprastesnę puslapių gaviklio alternatyvą .

Numatytasis puslapių spausdinimas

Paprastas puslapių rūšiavimas, įkvėptas Rdio, puikiai tinka programoms ir paieškos rezultatams. Didelis blokas yra sunkiai nepastebimas, lengvai keičiamas ir suteikia dideles paspaudimų sritis.

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

Puslapių spausdinimo komponento žymėjimas

Puslapių kūrimo komponentas turėtų būti įvyniotas į <nav>elementą, kad būtų galima jį identifikuoti kaip ekrano skaitytuvų ir kitų pagalbinių technologijų naršymo skyrių. Be to, kadangi tikėtina, kad puslapyje jau yra daugiau nei viena tokia naršymo skiltis (pvz., pagrindinė naršymas antraštėje arba šoninės juostos naršymas), patartina pateikti aprašą aria-label, <nav>atspindintį jo paskirtį. Pavyzdžiui, jei puslapių rūšiavimo komponentas naudojamas naršyti tarp paieškos rezultatų rinkinio, tinkama etiketė gali būti aria-label="Search results pages".

Išjungtos ir aktyvios būsenos

Nuorodos pritaikomos įvairioms aplinkybėms. Naudokite .disablednespaudžiamoms nuorodoms ir .activedabartiniam puslapiui nurodyti.

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

Rekomenduojame pakeisti aktyvius arba išjungtus prierašus į <span>, arba praleisti inkarą, jei rodomos ankstesnės / kitos rodyklės, kad pašalintumėte spustelėjimo funkciją išlaikant numatytus stilius.

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

Dydžio nustatymas

Norite didesnio ar mažesnio puslapių skaičiaus? Pridėti .pagination-lgarba .pagination-smpapildomų dydžių.

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

Gaviklis

Greitos ankstesnės ir kitos nuorodos, skirtos paprastam puslapių rūšiavimui su lengvu žymėjimu ir stiliais. Tai puikiai tinka paprastoms svetainėms, pvz., tinklaraščiams ar žurnalams.

Numatytasis pavyzdys

Pagal numatytuosius nustatymus gaviklis sutelkia nuorodas.

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

Sulygiuotos nuorodos

Arba galite lygiuoti kiekvieną nuorodą į šonus:

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

Neprivaloma išjungta būsena

Gaviklio nuorodose taip pat naudojama bendroji .disablednaudingumo klasė iš puslapių.

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

Pavyzdys

Pavyzdys antraštė Nauja

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

Galimi variantai

Pridėkite bet kurią iš toliau nurodytų modifikatorių klasių, kad pakeistumėte etiketės išvaizdą.

Numatytoji pirminė sėkmės informacija įspėjimas Pavojus

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

Turite daugybę etikečių?

Pateikimo problemų gali kilti, kai siaurame konteineryje yra daugybė įterptųjų etikečių, kurių kiekvienoje yra atskiras inline-blockelementas (pvz., piktograma). Tai yra nustatymas display: inline-block;. Konteksto ir pavyzdžio ieškokite #13219 .

Lengvai paryškinkite naujus ar neskaitytus elementus pridėdami <span class="badge">prie nuorodų, įkrovos navigacijos ir kt.

Pašto dėžutę42

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

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

Savaime griūva

Jei nėra naujų ar neskaitytų elementų, ženkleliai tiesiog sutraukiami (naudojant CSS :emptyparinkiklį), jei nėra turinio.

Suderinamumas tarp naršyklių

„Internet Explorer 8“ ženkleliai savaime nesugrius, nes joje nepalaikomas :emptyparinkiklis.

Prisitaiko prie aktyvių navigacijos būsenų

Įtraukti įtaisytieji stiliai, skirti ženkleliams įjungti į aktyvias būsenas tablečių naršymo priemonėse.

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

Lengvas, lankstus komponentas, galintis pasirinktinai išplėsti visą peržiūros sritį, kad būtų parodytas pagrindinis jūsų svetainės turinys.

Labas pasauli!

Tai paprastas herojus, paprastas jumbotrono stiliaus komponentas, skirtas atkreipti ypatingą dėmesį į rodomą turinį ar informaciją.

Sužinokite daugiau

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

Jei norite, kad jumbotronas būtų viso pločio ir be užapvalintų kampų, padėkite jį už visų .containers ribų ir pridėkite vidų .container.

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

Paprastas apvalkalas, skirtas h1tinkamai atskirti ir segmentuoti turinio dalis puslapyje. Jis gali naudoti h1numatytąjį smallelementą, taip pat daugumą kitų komponentų (su papildomais stiliais).

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

Išplėskite „Bootstrap“ tinklelio sistemą naudodami miniatiūrų komponentą, kad galėtumėte lengvai rodyti vaizdų, vaizdo įrašų, teksto ir kt. tinklelius.

Jei ieškote į Pinterest panašaus įvairaus aukščio ir (arba) pločio miniatiūrų pateikimo, turėsite naudoti trečiosios šalies įskiepį, pvz., Masonry , Isotope arba Salvattore .

Numatytasis pavyzdys

Pagal numatytuosius nustatymus „Bootstrap“ miniatiūros yra skirtos rodyti susietus vaizdus su minimaliu reikalingu žymėjimu.

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

Pasirinktinis turinys

Naudojant šiek tiek papildomo žymėjimo, į miniatiūras galima pridėti bet kokio HTML turinio, pvz., antraščių, pastraipų ar mygtukų.

Miniatiūros etiketė

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

Mygtukas Mygtukas

Miniatiūros etiketė

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

Mygtukas Mygtukas

Miniatiūros etiketė

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

Mygtukas Mygtukas

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

Pateikite kontekstinius grįžtamojo ryšio pranešimus apie tipiškus vartotojo veiksmus naudodami keletą galimų ir lanksčių įspėjimų pranešimų.

Pavyzdžiai

Apvyniokite bet kokį tekstą ir pasirenkamą atsisakymo mygtuką .alertir vieną iš keturių kontekstinių klasių (pvz., .alert-success) pagrindiniams įspėjimo pranešimams.

Nėra numatytosios klasės

Įspėjimai neturi numatytųjų klasių, tik bazines ir modifikavimo klases. Numatytasis pilkas įspėjimas nėra per daug prasmingas, todėl turite nurodyti tipą kontekstinėje klasėje. Pasirinkite iš sėkmės, informacijos, įspėjimo ar pavojaus.

Šauniai padirbėta! Sėkmingai perskaitėte šį svarbų įspėjimo pranešimą.

Galvas aukštyn! Šis įspėjimas reikalauja jūsų dėmesio, bet jis nėra labai svarbus.

Įspėjimas! Geriau patikrink save, tu neatrodai labai gerai.

Oi! Pakeiskite kelis dalykus ir bandykite pateikti dar kartą.

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

Atsisakomi įspėjimai

Remkitės bet kokiu įspėjimu pridėdami pasirenkamą .alert-dismissibleir uždarymo mygtuką.

Reikia „JavaScript“ įspėjimo papildinio

Norėdami visiškai veikti, atmesti įspėjimus, turite naudoti įspėjimų JavaScript papildinį .

Įspėjimas! Geriau patikrink save, tu neatrodai labai gerai.

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

Užtikrinkite tinkamą elgesį visuose įrenginiuose

Būtinai naudokite <button>elementą su data-dismiss="alert"duomenų atributu.

Nuorodos įspėjimuose

Naudokite .alert-linknaudingumo klasę, kad greitai pateiktumėte atitinkamas spalvotas nuorodas bet kuriame įspėjime.

Šauniai padirbėta! Sėkmingai perskaitėte šį svarbų įspėjimo pranešimą .

Galvas aukštyn! Į šį įspėjimą reikia atkreipti dėmesį , bet jis nėra itin svarbus.

Įspėjimas! Geriau pasižiūrėk, tu nelabai gerai atrodai .

Oi! Pakeiskite kelis dalykus ir bandykite pateikti dar kartą.

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

Pateikite naujausius atsiliepimus apie darbo eigos ar veiksmo eigą naudodami paprastas, bet lanksčias eigos juostas.

Suderinamumas tarp naršyklių

Pažangos juostose naudojami CSS3 perėjimai ir animacijos, kad pasiektų kai kuriuos jų efektus. Šios funkcijos nepalaikomos „Internet Explorer 9“ ir senesnėse arba senesnėse „Firefox“ versijose. „Opera 12“ nepalaiko animacijų.

Turinio saugos politikos (CSP) suderinamumas

Jei jūsų svetainėje taikoma turinio saugos politika (CSP) , kuri neleidžia style-src 'unsafe-inline', negalėsite naudoti įterptųjų styleatributų eigos juostos pločiui nustatyti, kaip parodyta toliau pateiktuose pavyzdžiuose. Alternatyvūs pločių, suderinamų su griežtais CSP, nustatymo metodai apima šiek tiek tinkinto JavaScript (kuris nustato element.style.width) arba tinkintų CSS klasių naudojimą.

Pagrindinis pavyzdys

Numatytoji eigos juosta.

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

Su etikete

Pašalinkite <span>su .sr-onlyklasę iš eigos juostos, kad būtų rodomas matomas procentas.

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>

Norėdami užtikrinti, kad etiketės tekstas būtų įskaitomas net ir esant mažam procentui, apsvarstykite galimybę pridėti min-widthprie eigos juostos.

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>

Kontekstinės alternatyvos

Pažangos juostose naudojami tie patys mygtukai ir įspėjimų klasės, kad būtų nuoseklūs stiliai.

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

Dryžuotas

Naudoja gradientą, kad sukurtų dryžuotą efektą. Nepasiekiamas IE9 ir senesnėse versijose.

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

Animuoti

Pridėti .activeprie .progress-bar-striped, kad animuotų juosteles iš dešinės į kairę. Nepasiekiamas IE9 ir senesnėse versijose.

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

Sukrauti

Įdėkite kelis strypus į tą patį .progress, kad juos sukrautumėte.

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

Abstrakčių objektų stiliai, skirti kurti įvairių tipų komponentus (pvz., tinklaraščio komentarus, tviterius ir kt.), kuriuose kartu su tekstiniu turiniu yra kairėje arba dešinėje išlygiuotas vaizdas.

Numatytoji laikmena

Numatytoji laikmena rodo medijos objektą (vaizdus, vaizdo įrašą, garsą) turinio bloko kairėje arba dešinėje.

Žiniasklaidos antraštė

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.

Žiniasklaidos antraštė

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.

Įdėtos medijos antraštė

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.

Žiniasklaidos antraštė

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.

Žiniasklaidos antraštė

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>

Klasės .pull-leftir .pull-righttaip pat egzistuoja ir anksčiau buvo naudojamos kaip medijos komponento dalis, tačiau nuo 3.3.0 yra nebenaudojamos šiam naudojimui. Jie yra maždaug lygiaverčiai .media-leftir .media-right, išskyrus tai, kad .media-rightjie turėtų būti dedami po .media-bodyhtml.

Medijos lygiavimas

Vaizdus ar kitą laikmeną galima lygiuoti viršuje, viduryje arba apačioje. Numatytoji vertė yra išlygiuota viršuje.

Į viršų išlygiuota laikmena

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.

Vidutiniškai sulygiuota laikmena

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.

Sulygiuota laikmena apačioje

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>

Žiniasklaidos sąrašas

Naudodami šiek tiek papildomo žymėjimo, galite naudoti laikmeną sąraše (naudinga komentarų temoms ar straipsnių sąrašams).

Žiniasklaidos antraštė

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.

Įdėtos medijos antraštė
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.

Įdėtos medijos antraštė
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.

Įdėtos medijos antraštė
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>

Sąrašų grupės yra lankstus ir galingas komponentas, skirtas rodyti ne tik paprastus elementų sąrašus, bet ir sudėtingus su pasirinktiniu turiniu.

Pagrindinis pavyzdys

Paprasčiausia sąrašų grupė yra tiesiog nesutvarkytas sąrašas su sąrašo elementais ir tinkamomis klasėmis. Remkitės juo naudodami toliau pateiktas parinktis arba, jei reikia, savo CSS.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulumas ir erosas

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

Ženkliukai

Pridėkite ženklelių komponentą prie bet kurio sąrašo grupės elemento ir jis automatiškai bus dešinėje.

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>

Susieti elementai

Susieti sąrašo grupės elementus naudodami prieraišo žymas, o ne sąrašo elementus (tai taip pat reiškia pirminį <div>, o ne <ul>). Nereikia atskirų tėvų aplink kiekvieną elementą.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulumas ir erosas

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

Mygtukų elementai

Sąrašo grupės elementai gali būti mygtukai, o ne sąrašo elementai (tai taip pat reiškia pirminį <div>, o ne <ul>). Nereikia atskirų tėvų aplink kiekvieną elementą. Čia nenaudokite standartinių .btnklasių.

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

Išjungti elementai

Pridėkite .disabledprie a .list-group-item, kad jis būtų pilkas, kad būtų rodomas išjungtas.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulumas ir erosas

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

Kontekstinės klasės

Naudokite kontekstines klases, kad stilizuotų sąrašo elementus, numatytuosius arba susietus. Taip pat apima .activevalst.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulumas ir erosas

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulumas ir erosas

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

Pasirinktinis turinys

Pridėkite beveik bet kokį HTML, net ir susietose sąrašų grupėse, pvz., toliau.

Sąrašo grupės elemento antraštė

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

Sąrašo grupės elemento antraštė

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

Sąrašo grupės elemento antraštė

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

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Nors ne visada būtina, kartais reikia įdėti savo DOM į dėžutę. Tokiose situacijose išbandykite skydelio komponentą.

Pagrindinis pavyzdys

Pagal numatytuosius nustatymus viskas, ką reikia padaryti .panel, yra taikyti tam tikrą pagrindinę kraštinę ir užpildymą, kad būtų tam tikras turinys.

Pagrindinio skydelio pavyzdys

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

Skydas su antrašte

Lengvai pridėkite antraštės sudėtinį rodinį prie skydelio naudodami .panel-heading. Taip pat galite įtraukti bet kurią <h1>– <h6>su .panel-titleklase, kad pridėtumėte iš anksto sukurtą antraštę. Tačiau šrifto dydžius <h1>- <h6>nepaiso .panel-heading.

Norėdami tinkamai spalvinti nuorodas, būtinai įdėkite nuorodas į antraštes .panel-title.

Skydelio antraštė be pavadinimo

Skydelio turinys

Skydelio pavadinimas

Skydelio turinys

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

Skydas su porašte

Apvyniokite mygtukus arba antrinį tekstą į .panel-footer. Atminkite, kad skydelio poraštės nepaveldi spalvų ir kraštinių, kai naudojami kontekstiniai variantai, nes jie neturi būti pirmame plane.

Skydelio turinys

Skydelio poraštė

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

Kontekstinės alternatyvos

Kaip ir kiti komponentai, lengvai padarykite skydelį prasmingesnį konkrečiam kontekstui pridėdami bet kurią iš kontekstinės būsenos klasių.

Skydelio pavadinimas

Skydelio turinys

Skydelio pavadinimas

Skydelio turinys

Skydelio pavadinimas

Skydelio turinys

Skydelio pavadinimas

Skydelio turinys

Skydelio pavadinimas

Skydelio turinys

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

Su stalais

.tableNorėdami sukurti vientisą dizainą, skydelyje pridėkite bet kokį rėmelį . Jei yra .panel-body, lentelės viršuje pridedame papildomą kraštinę, kad būtų galima atskirti.

Skydelio antraštė

Čia yra numatytasis skydelio turinys. 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.

#	Pirmas vardas	Pavardė	Vartotojo vardas
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris	paukštis	@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>

Jei skydelio korpuso nėra, komponentas nepertraukiamai perkeliamas iš skydelio antraštės į lentelę.

Skydelio antraštė

#	Pirmas vardas	Pavardė	Vartotojo vardas
1	ženklas	Otto	@mdo
2	Jokūbas	Torntonas	@riebus
3	Laris	paukštis	@twitter

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

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

Su sąrašo grupėmis

Lengvai įtraukite viso pločio sąrašų grupes į bet kurį skydelį.

Skydelio antraštė

Čia yra numatytasis skydelio turinys. 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
Vestibulumas ir erosas

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

Leiskite naršyklėms nustatyti vaizdo įrašo arba skaidrių demonstravimo matmenis pagal juose esančio bloko plotį, sukuriant vidinį santykį, kuris bus tinkamai keičiamas bet kuriame įrenginyje.

Taisyklės tiesiogiai taikomos <iframe>, <embed>, <video>ir <object>elementams; pasirinktinai naudokite aiškią palikuonių klasę .embed-responsive-item, kai norite suderinti kitų atributų stilių.

Pro-Patarimas! Nereikia įtraukti frameborder="0"į savo <iframe>s, nes mes tai nepaisome už jus.

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

Numatytasis gerai

Naudokite šulinį kaip paprastą elemento efektą, kad suteiktumėte jam įterptinį efektą.

Žiūrėk, aš šulinyje!

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

Neprivalomi užsiėmimai

Valdykite paminkštinimus ir suapvalintus kampus su dviem pasirenkamomis modifikavimo klasėmis.

Žiūrėk, aš dideliame šulinyje!

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

Žiūrėk, aš mažame šulinyje!

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

Komponentai

Glifikonai

Galimi glifai

Kaip naudoti

Nemaišykite su kitais komponentais

Skirta naudoti tik ant tuščių elementų

Piktogramos šrifto vietos keitimas

Prieinamos piktogramos

Pavyzdžiai

Išskleidžiamieji meniu

Pavyzdys

Lygiavimas

Gali prireikti papildomos padėties nustatymo

Nebenaudojamas .pull-rightlygiavimas

Antraštės

Skirstytuvas

Išjungti meniu elementai

Mygtukų grupės

Patarimams ir iššokantiems mygtukų grupėse reikia specialaus nustatymo

Įsitikinkite, kad teisinga role, ir pateikite etiketę

Pagrindinis pavyzdys

Mygtukų įrankių juosta

Dydžio nustatymas

Lizdas

Vertikali variacija

Pagrįstos mygtukų grupės

Tvarkyti sienas

IE8 ir kraštinės

Su <a>elementais

Nuorodos, veikiančios kaip mygtukai

Su <button>elementais

Mygtukų išskleidžiamieji meniu

Priklausomybė nuo įskiepių

Vieno mygtuko išskleidžiamieji meniu

Split mygtuko išskleidžiamieji meniu

Dydžio nustatymas

Nuleidžiamasis variantas

Įvesties grupės

Tik tekstiniai <input>s

Įvesties grupių patarimai ir iššokantys langai reikalauja specialaus nustatymo

Nemaišykite su kitais komponentais

Visada pridėkite etiketes

Pagrindinis pavyzdys

Dydžio nustatymas

Žymės langeliai ir radijo priedai

Mygtukų priedai

Mygtukai su išskleidžiamaisiais meniu

Segmentuoti mygtukai

Keli mygtukai

Navs

Norint naudoti skirtukų skydelių navigaciją, reikalingas „JavaScript“ skirtukų papildinys

Padarykite naršymo elementus, naudojamus kaip navigaciją, pasiekiamus

Skirtukai

Tabletes

Pateisinamas

„Safari“ ir reaguojančios pagrįstos navigacijos

Išjungtos nuorodos

Nuorodos funkcionalumas neturi įtakos

Naudojant išskleidžiamuosius meniu

Skirtukai su išskleidžiamaisiais meniu

Tabletės su išskleidžiamaisiais meniu

Navigacijos juosta

Numatytoji naršymo juosta

Perpildytas turinys

Reikia JavaScript įskiepio

Sutrauktos mobiliosios naršymo juostos pertraukos taško keitimas

Padarykite naršymo juostas pasiekiamas

Prekės ženklo įvaizdis

Formos

Mobiliojo įrenginio įspėjimai

Visada pridėkite etiketes

Mygtukai

Kontekstui būdingas naudojimas

Tekstas

Ne navigacijos nuorodos

Komponentų derinimas

Teisingai suderinti kelis komponentus

Tvirtinama viršuje

Būtinas kūno paminkštinimas

Tvirtinama apačioje

Nebenaudojamas `.pull-right`lygiavimas

Įsitikinkite, kad teisinga `role`, ir pateikite etiketę

Su `<a>`elementais

Su `<button>`elementais

Tik tekstiniai `<input>`s