Daugiau nei tuzinas daugkartinio naudojimo komponentų, sukurtų teikti ikonografiją, išskleidžiamuosius meniu, įvesties grupes, naršymą, įspėjimus ir daug daugiau.
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 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.
Pavyzdžiai
Naudokite juos mygtukuose, mygtukų grupėse įrankių juostai, naršymui arba pridėtoms formoms.
Piktograma, naudojama įspėjime , nurodanti , kad tai klaidos pranešimas, su papildomu .sr-onlytekstu, perteikiančiu šią užuominą pagalbinių technologijų naudotojams.
Apvyniokite išskleidžiamojo meniu aktyviklį ir išskleidžiamąjį meniu į .dropdownarba kitą elementą, kuris deklaruoja position: relative;. Tada pridėkite meniu HTML.
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.
Antraštės
Pridėkite antraštę prie veiksmų sekcijų žymėjimo bet kuriame išskleidžiamajame meniu.
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
Mygtukų įrankių juosta
Sujunkite rinkinius <div class="btn-group">į a <div class="btn-toolbar">, kad gautumėte sudėtingesnius komponentus.
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.
Lizdas
Įdėkite į .btn-groupkitą .btn-group, kai norite, kad išskleidžiamieji meniu būtų sumaišyti su mygtukų serija.
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.
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.
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ą.
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.
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ų.
Žymės langeliai ir radijo priedai
Vietoj teksto įdėkite bet kurį žymimąjį laukelį arba radijo parinktį į įvesties grupės priedą.
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.
Mygtukai su išskleidžiamaisiais meniu
Segmentuoti mygtukai
Keli mygtukai
Nors galite turėti tik vieną priedą kiekvienoje pusėje, galite turėti kelis mygtukus viename .input-group-btn.
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.
Skirtukai
Atminkite, kad .nav-tabsklasei reikalinga .navpagrindinė klasė.
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 .
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į.
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.
Prekės ženklo įvaizdis
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ą.
Formos
Į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.
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.
Mygtukai
Pridėkite .navbar-btnklasę prie <button>elementų, kurių nėra a <form>, kad vertikaliai centruotų juos naršymo juostoje.
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.
Tekstas
Apvyniokite teksto eilutes į elementą su .navbar-text, paprastai ant <p>žymos, kad būtų tinkama pradžia ir spalva.
Ne navigacijos nuorodos
Ž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.
Komponentų derinimas
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.
Tvirtinama viršuje
Pridėti .navbar-fixed-topir įtraukti .containerarba .container-fluidį centrą ir klaviatūros naršymo juostos turinį.
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.
Būtinai įtraukite tai po pagrindinio Bootstrap CSS.
Tvirtinama apačioje
Pridėti .navbar-fixed-bottomir įtraukti .containerarba .container-fluidį centrą ir klaviatūros naršymo juostos turinį.
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.
Būtinai įtraukite tai po pagrindinio Bootstrap CSS.
Statinis viršus
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.
Apversta naršymo juosta
Keiskite naršymo juostos išvaizdą pridėdami .navbar-inverse.
Duonos trupiniai
Nurodykite dabartinio puslapio vietą naršymo hierarchijoje.
Atskyrikliai automatiškai pridedami CSS naudojant :beforeir content.
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.
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".
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.
Dydžio nustatymas
Norite didesnio ar mažesnio puslapių skaičiaus? Pridėti .pagination-lgarba .pagination-smpapildomų dydžių.
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.
Sulygiuotos nuorodos
Arba galite lygiuoti kiekvieną nuorodą į šonus:
Neprivaloma išjungta būsena
Gaviklio nuorodose taip pat naudojama bendroji .disablednaudingumo klasė iš puslapių.
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
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
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.
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.
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).
Puslapio antraštės pavyzdys Antraštės potekstė
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.
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.
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.
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.
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ą.
Atsisakomi įspėjimai
Remkitės bet kokiu įspėjimu pridėdami pasirenkamą .alert-dismissibleir uždarymo mygtuką.
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
Su etikete
Pašalinkite <span>su .sr-onlyklasę iš eigos juostos, kad būtų rodomas matomas procentas.
60 %
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 %
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)
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)
Animuoti
Pridėti .activeprie .progress-bar-striped, kad animuotų juosteles iš dešinės į kairę. Nepasiekiamas IE9 ir senesnėse versijose.
45% baigta
Sukrauti
Įdėkite kelis strypus į tą patį .progress, kad juos sukrautumėte.
35 % baigta (sėkmė)
20 % baigta (įspėjimas)
10 % baigta (pavojus)
Ž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.
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.
Ž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.
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
Ž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
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ą.
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ų.
Išjungti elementai
Pridėkite .disabledprie a .list-group-item, kad jis būtų pilkas, kad būtų rodomas išjungtas.
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
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
Panel with footer
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
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
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
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
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
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.
Šuliniai
Numatytasis gerai
Naudokite šulinį kaip paprastą elemento efektą, kad suteiktumėte jam įterptinį efektą.
Žiūrėk, aš šulinyje!
Neprivalomi užsiėmimai
Valdykite paminkštinimus ir suapvalintus kampus su dviem pasirenkamomis modifikavimo klasėmis.