Glifikonai

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.

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

Išskleidžiamieji meniu

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

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>

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.

Gali prireikti papildomos padėties nustatymo

Išskleidžiamieji meniu automatiškai išdėstomi naudojant CSS įprastoje dokumento eigoje. Tai reiškia, kad išskleidžiamuosius meniu gali apkarpyti tėvai, turintys tam tikrų overflowsavybių, arba jie gali būti rodomi už peržiūros srities ribų. Išspręskite šias problemas, kai jos iškyla.

Nebenaudojamas .pull-rightlygiavimas

Nuo 3.1.0 versijos .pull-rightišskleidžiamieji meniu nebenaudojami. Norėdami sulygiuoti meniu dešinėje, naudokite .dropdown-menu-right. Dešinėje naršymo juostoje esantys navigacijos komponentai naudoja šios klasės mišriąją versiją, kad automatiškai sulygiuotų meniu. Norėdami jo nepaisyti, naudokite .dropdown-menu-left.

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

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>

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>

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>

Mygtukų grupės

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>

Mygtukų įrankių juosta

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.

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

Mygtukų išskleidžiamieji meniu

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>

Įvesties grupės

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.

@

@example.com

$ .00

https://example.com/users/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

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>

Navs

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

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>

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>

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>

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>

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>

Navigacijos juosta

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:

  1. Sumažinkite naršymo juostos elementų kiekį arba plotį.
  2. Slėpti tam tikrus naršymo juostos elementus tam tikruose ekrano dydžiuose naudodami reaguojančias naudingumo klases .
  3. 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ą.

Reikia JavaScript įskiepio

Jei „JavaScript“ išjungta, o peržiūros sritis yra pakankamai siaura, kad naršymo juosta susitrauktų, naršymo juostos išplėsti ir turinio peržiūrėti bus neįmanoma .navbar-collapse.

Interaktyvi naršymo juosta reikalauja, kad sutraukimo papildinys būtų įtrauktas į jūsų „Bootstrap“ versiją.

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

Padarykite naršymo juostas pasiekiamas

Būtinai naudokite <nav>elementą arba, jei naudojate bendresnį elementą, pvz., <div>, pridėkite a role="navigation"prie kiekvienos naršymo juostos, kad jis būtų aiškiai identifikuotas kaip orientyras pagalbinių technologijų naudotojams.

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

Mobiliojo įrenginio įspėjimai

Yra keletas įspėjimų, susijusių su formos valdiklių naudojimu fiksuotuose mobiliųjų įrenginių elementuose. Daugiau informacijos rasite mūsų naršyklės palaikymo dokumentuose .

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>

Kontekstui būdingas naudojimas

Kaip ir standartinės mygtukų klasės , .navbar-btngali būti naudojami <a>ir <input>elementuose. Tačiau nei standartinės mygtukų klasės, nei .navbar-btnstandartinės mygtukų klasės neturėtų būti naudojamos <a>elementuose, esančiuose .navbar-nav.

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.

Teisingai suderinti kelis komponentus

Šiuo metu naršymo juostoms taikomi kelių .navbar-rightklasių apribojimai. .navbar-rightNorėdami tinkamai išdėstyti turinį, paskutiniame elemente naudojame neigiamą paraštę . Kai tą klasę naudoja keli elementai, šios paraštės neveikia taip, kaip numatyta.

Peržiūrėsime tai, kai galėsime perrašyti tą komponentą 4 versijoje.

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>

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>

Etiketės

Pavyzdys

Pavyzdys antraštė Nauja

Pavyzdys antraštė Nauja

Pavyzdys antraštė Nauja

Pavyzdys antraštė Nauja

Pavyzdys antraštė Nauja
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 .

Ženkliukai

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>

Džumbotronas

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>

Puslapio antraštė

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>

Miniatiūros

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

100 % x 200

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

100 % x 200

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

100 % x 200

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>

Perspėjimai

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.

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

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

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

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

Pažangos juostos

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.

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

40 % baigta (sėkmė)
20% baigta
60 % baigta (įspėjimas)
80 % baigta (pavojus)
<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.

40 % baigta (sėkmė)
20% baigta
60 % baigta (įspėjimas)
80 % baigta (pavojus)
<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.

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

35 % baigta (sėkmė)
20 % baigta (įspėjimas)
10 % baigta (pavojus)
<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>

Žiniasklaidos objektas

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šo grupė

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

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

<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 sukurtumėte numatytųjų arba susietų sąrašo elementų stilių. Taip pat apima .activevalst.

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

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

Plokštės

While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.

Basic example

By default, all the .panel does is apply some basic border and padding to contain some content.

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

Panel with heading

Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading. However, the font sizes of <h1>-<h6> are overridden by .panel-heading.

For proper link coloring, be sure to place links in headings within .panel-title.

Panel heading without title
Panel content

Panel title

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

Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

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

Contextual alternatives

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

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

With tables

Add any non-bordered .table within a panel for a seamless design. If there is a .panel-body, we add an extra border to the top of the table for separation.

Panel heading

Some default panel content here. 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.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @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>

If there is no panel body, the component moves from panel header to table without interruption.

Panel heading
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

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

With list groups

Easily include full-width list groups within any panel.

Panel heading

Some default panel content here. 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
  • Vestibulum at eros
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Responsive embed

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

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>

Šuliniai

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>