Začetek
Pregled Bootstrapa, kako prenesti in uporabljati, osnovne predloge in primeri ter več.
Pregled Bootstrapa, kako prenesti in uporabljati, osnovne predloge in primeri ter več.
Bootstrap (trenutno v3.3.7) ponuja nekaj preprostih načinov za hiter začetek, od katerih je vsak privlačen za drugačno raven spretnosti in primer uporabe. Preberite, da vidite, kaj ustreza vašim posebnim potrebam.
Preveden in zmanjšan CSS, JavaScript in pisave. Vključeni niso nobeni dokumenti ali izvirne izvorne datoteke.
Source Less, JavaScript in datoteke s pisavami skupaj z našimi dokumenti. Potrebuje prevajalnik Less in nekaj nastavitev.
Bootstrap prenesen iz Less v Sass za preprosto vključitev v projekte Rails, Compass ali Sass.
Ljudje pri jsDelivr prijazno zagotavljajo podporo CDN za Bootstrapov CSS in JavaScript. Samo uporabite te povezave Bootstrap CDN .
Z Bowerjem lahko tudi namestite in upravljate Bootstrapov Less, CSS, JavaScript in pisave :
Bootstrap lahko namestite tudi z uporabo npm :
require('bootstrap')
bo naložil vse Bootstrapove vtičnike jQuery v objekt jQuery. Sam bootstrap
modul ne izvozi ničesar. Bootstrapove vtičnike jQuery lahko posamezno naložite tako, da naložite /js/*.js
datoteke v imenik najvišje ravni paketa.
Bootstrap package.json
vsebuje nekaj dodatnih metapodatkov pod naslednjimi ključi:
less
- pot do glavne izvorne datoteke Bootstrap Lessstyle
- pot do neminificiranega CSS Bootstrapa, ki je bil vnaprej preveden s privzetimi nastavitvami (brez prilagajanja)S Composerjem lahko tudi namestite in upravljate Bootstrapov Less, CSS, JavaScript in pisave :
Bootstrap uporablja Autoprefixer za obravnavo predpon prodajalca CSS . Če prevajate Bootstrap iz njegovega vira Less/Sass in ne uporabljate naše Gruntfile, boste morali Autoprefixer integrirati v svoj postopek gradnje sami. Če uporabljate vnaprej prevedeni Bootstrap ali našo Gruntfile, vam to ni treba skrbeti, ker je Autoprefixer že integriran v našo Gruntfile.
Bootstrap je mogoče prenesti v dveh oblikah, znotraj katerih boste našli naslednje imenike in datoteke, ki logično združujejo skupne vire in zagotavljajo tako prevedene kot pomanjšane različice.
Upoštevajte, da vsi vtičniki JavaScript zahtevajo vključitev jQuery, kot je prikazano v začetni predlogi . Posvetujte se z našimibower.json
, da vidite, katere različice jQuery so podprte.
Po prenosu razpakirajte stisnjeno mapo, da si ogledate strukturo (prevedenega) Bootstrapa. Videli boste nekaj takega:
To je najosnovnejša oblika Bootstrapa: vnaprej prevedene datoteke za hitro uporabo v skoraj vseh spletnih projektih. Nudimo preveden CSS in JS ( bootstrap.*
), kot tudi preveden in pomanjšan CSS in JS ( bootstrap.min.*
). Izvorni zemljevidi CSS ( bootstrap.*.map
) so na voljo za uporabo z orodji za razvijalce nekaterih brskalnikov. Vključene so pisave iz Glyphiconsa, kot tudi izbirna tema Bootstrap.
Prenos izvorne kode Bootstrap vključuje vnaprej preveden CSS, JavaScript in sredstva pisave, skupaj z izvornim Lessom, JavaScriptom in dokumentacijo. Natančneje, vključuje naslednje in še več:
, less/
, js/
in fonts/
so izvorna koda za naše pisave CSS, JS in ikone (oziroma). Mapa dist/
vključuje vse, kar je navedeno v predhodno prevedenem razdelku za prenos zgoraj. Mapa docs/
vključuje izvorno kodo za našo dokumentacijo in examples/
uporabo Bootstrapa. Poleg tega katera koli druga vključena datoteka nudi podporo za pakete, informacije o licencah in razvoj.
Bootstrap uporablja Grunt za svoj gradbeni sistem s priročnimi metodami za delo z ogrodjem. Tako sestavljamo kodo, izvajamo teste in drugo.
Če želite namestiti Grunt, morate najprej prenesti in namestiti node.js (ki vključuje npm). npm pomeni module, pakirane v vozliščih, in je način za upravljanje razvojnih odvisnosti prek node.js.
Nato iz ukazne vrstice:grunt-cli
globalno z npm install -g grunt-cli
./bootstrap/
imenika in zaženite npm install
. npm bo pogledal package.json
datoteko in samodejno namestil tam navedene potrebne lokalne odvisnosti.Ko končate, boste lahko izvajali različne ukaze Grunt iz ukazne vrstice.
grunt dist
(Samo prevedite CSS in JavaScript)Ponovno /dist/
ustvari imenik s prevedenimi in zmanjšanimi datotekami CSS in JavaScript. Kot uporabnik Bootstrapa je to običajno ukaz, ki ga želite.
grunt watch
(Gledaj)Spremlja izvorne datoteke Less in jih samodejno znova prevede v CSS vsakič, ko shranite spremembo.
grunt test
(Izvedi teste)Zažene JSHint in brezglavo izvaja teste QUnit v PhantomJS .
grunt docs
(Izdelajte in preizkusite sredstva dokumentov)Gradi in preizkuša CSS, JavaScript in druga sredstva, ki se uporabljajo pri izvajanju dokumentacije lokalno prek bundle exec jekyll serve
.
grunt
(Zgradite popolnoma vse in zaženite teste)Prevede in pomanjša CSS in JavaScript, zgradi spletno stran z dokumentacijo, zažene validator HTML5 z dokumenti, ponovno ustvari sredstva Customizerja in drugo. Zahteva Jekylla . Običajno je potrebno le, če vdirate v sam Bootstrap.
Če naletite na težave pri namestitvi odvisnosti ali izvajanju ukazov Grunt, najprej izbrišite /node_modules/
imenik, ki ga je ustvaril npm. Nato znova zaženite npm install
.
Začnite s to osnovno predlogo HTML ali spremenite te primere . Upamo, da boste prilagodili naše predloge in primere ter jih prilagodili svojim potrebam.
Kopirajte spodnji HTML, da začnete delati z minimalnim dokumentom Bootstrap.
Gradite na zgornji osnovni predlogi s številnimi komponentami Bootstrapa. Spodbujamo vas, da prilagodite in prilagodite Bootstrap, da bo ustrezal potrebam vašega posameznega projekta.
Pridobite izvorno kodo za vsak spodnji primer tako, da prenesete repozitorij Bootstrap . Primere najdete v docs/examples/
imeniku.
Osnovna struktura za skrbniško nadzorno ploščo s fiksno stransko vrstico in vrstico za krmarjenje.
Ustvarite navbar po meri z poravnanimi povezavami. Glavo pokonci! Ni preveč prijazen do Safarija.
Bootlint je uradno orodje Bootstrap HTML linter . Samodejno preveri več pogostih napak HTML na spletnih straneh, ki uporabljajo Bootstrap na dokaj "vanilla" način. Komponente/pripomočki Vanilla Bootstrap zahtevajo, da so njihovi deli DOM skladni z določenimi strukturami. Bootlint preveri, ali imajo primerki komponent Bootstrap pravilno strukturiran HTML. Razmislite o dodajanju Bootlinta v svojo verigo orodij za spletni razvoj Bootstrap, tako da nobena pogosta napaka ne upočasni razvoja vašega projekta.
Bodite na tekočem z razvojem Bootstrapa in se obrnite na skupnost s temi koristnimi viri.
irc.freenode.net
strežniku, na kanalu ##bootstrap .twitter-bootstrap-3
.bootstrap
na paketih, ki spreminjajo ali dodajajo funkcionalnost Bootstrapa pri distribuciji prek npm ali podobnih dostavnih mehanizmov za največjo odkritost.Prav tako lahko spremljate @getbootstrap na Twitterju za najnovejše trače in izjemne glasbene videe.
Bootstrap samodejno prilagodi vaše strani različnim velikostim zaslona. Tukaj je opisano, kako onemogočite to funkcijo, da bo vaša stran delovala kot ta primer neodzivnosti .
<meta>
, omenjeno v dokumentih CSSwidth
na .container
za vsako raven mreže z eno samo širino, na primer width: 970px !important;
Prepričajte se, da je to za privzetim Bootstrap CSS. Po želji se lahko izognete !important
z medijskimi poizvedbami ali kakšnim izbirnikom-fu..col-xs-*
razrede poleg ali namesto srednjih/velikih. Ne skrbite, izredno majhna mreža naprave se prilagaja vsem ločljivostim.Še vedno boste potrebovali Respond.js za IE8 (ker so naše medijske poizvedbe še vedno tam in jih je treba obdelati). To onemogoči vidike »mobilnega mesta« Bootstrapa.
Te korake smo uporabili na primeru. Preberite njegovo izvorno kodo, da si ogledate izvedene specifične spremembe.
Želite migrirati s starejše različice Bootstrapa na v3.x? Oglejte si naš vodnik za selitev .
Bootstrap je ustvarjen tako, da najbolje deluje v najnovejših namiznih in mobilnih brskalnikih, kar pomeni, da starejši brskalniki morda prikazujejo drugače oblikovane, čeprav popolnoma delujoče upodobitve določenih komponent.
Natančneje, podpiramo najnovejše različice naslednjih brskalnikov in platform.
Alternativni brskalniki, ki uporabljajo najnovejšo različico WebKit, Blink ali Gecko, neposredno ali prek API-ja spletnega pogleda platforme, niso izrecno podprti. Vendar bi se moral Bootstrap (v večini primerov) pravilno prikazati in delovati tudi v teh brskalnikih. Podrobnejše informacije o podpori so navedene spodaj.
Na splošno Bootstrap podpira najnovejše različice privzetih brskalnikov vsake glavne platforme. Upoštevajte, da brskalniki proxy (kot so Opera Mini, Turbo način Opera Mobile, UC Browser Mini, Amazon Silk) niso podprti.
Chrome | Firefox | Safari | |
---|---|---|---|
Android | Podprto | Podprto | N/A |
iOS | Podprto | Podprto | Podprto |
Podobno so podprte najnovejše različice večine namiznih brskalnikov.
Chrome | Firefox | internet Explorer | Opera | Safari | |
---|---|---|---|---|---|
Mac | Podprto | Podprto | N/A | Podprto | Podprto |
Windows | Podprto | Podprto | Podprto | Podprto | Ne podpira |
V sistemu Windows podpiramo Internet Explorer 8–11 .
Za Firefox poleg najnovejše normalne stabilne izdaje podpiramo tudi najnovejšo različico Firefoxa z razširjeno podporo (ESR) .
Neuradno naj bi Bootstrap izgledal in se dovolj dobro obnašal v Chromiumu in Chromu za Linux, Firefoxu za Linux in Internet Explorerju 7 ter Microsoft Edge, čeprav uradno nista podprta.
Za seznam nekaterih hroščev v brskalniku, s katerimi se mora spopasti Bootstrap, si oglejte naš Zid hroščev v brskalniku .
Podprta sta tudi Internet Explorer 8 in 9, vendar upoštevajte, da ti brskalniki ne podpirajo v celoti nekaterih lastnosti CSS3 in elementov HTML5. Poleg tega Internet Explorer 8 zahteva uporabo Respond.js za omogočanje podpore za medijske poizvedbe.
Funkcija | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Ne podpira | Podprto |
box-shadow |
Ne podpira | Podprto |
transform |
Ne podpira | Podprto, s -ms predpono |
transition |
Ne podpira | |
placeholder |
Ne podpira |
Obiščite Ali lahko uporabim ... za podrobnosti o podpori brskalnika za funkcije CSS3 in HTML5.
Pri uporabi Respond.js v razvojnih in produkcijskih okoljih za Internet Explorer 8 bodite pozorni na naslednja opozorila.
Uporaba Respond.js s CSS, ki gostuje na drugi (pod)domeni (na primer na CDN), zahteva nekaj dodatnih nastavitev. Za podrobnosti glejte dokumente Respond.js .
file://
Zaradi varnostnih pravil brskalnika Respond.js ne deluje s stranmi, ogledovanimi prek file://
protokola (na primer pri odpiranju lokalne datoteke HTML). Če želite preizkusiti odzivne funkcije v IE8, si oglejte svoje strani prek HTTP(S). Za podrobnosti glejte dokumente Respond.js .
@import
Respond.js ne deluje s CSS, ki je naveden prek @import
. Zlasti je znano, da nekatere konfiguracije Drupal uporabljajo @import
. Za podrobnosti glejte dokumente Respond.js .
IE8 ne podpira v celoti box-sizing: border-box;
v kombinaciji z min-width
, max-width
, min-height
ali max-height
. Iz tega razloga od v3.0.1 ne uporabljamo več max-width
na .container
s.
IE8 ima @font-face
v kombinaciji z :before
. Bootstrap uporablja to kombinacijo s svojimi Glyphicons. Če je stran shranjena v predpomnilniku in naložena brez miške nad oknom (tj. pritisnite gumb za osvežitev ali naložite nekaj v iframe), se stran upodobi, preden se naloži pisava. Če miškin kazalec premaknete nad stran (telo), boste prikazali nekatere ikone, če premaknete miškin kazalec nad preostale ikone, pa jih boste prav tako prikazali. Za podrobnosti glejte številko številke 13863 .
Bootstrap ni podprt v starih načinih združljivosti Internet Explorerja. Če želite biti prepričani, da uporabljate najnovejši način upodabljanja za IE, razmislite o vključitvi ustrezne <meta>
oznake na svoje strani:
Dokumentni način potrdite tako, da odprete orodja za odpravljanje napak: pritisnite F12in označite "Dokumentni način".
Ta oznaka je vključena v vso dokumentacijo in primere Bootstrapa, da se zagotovi najboljše možno upodabljanje v vsaki podprti različici Internet Explorerja.
Za več informacij glejte to vprašanje StackOverflow .
Internet Explorer 10 ne loči širine naprave od širine vidnega polja in zato ne uporablja pravilno medijskih poizvedb v Bootstrapovem CSS. Običajno bi samo dodali hiter delček CSS, da bi to popravili:
Vendar to ne deluje pri napravah z različicami sistema Windows Phone 8, starejšimi od posodobitve 3 (aka GDR3) , saj povzroči, da takšne naprave prikažejo večinoma namizni pogled namesto ozkega »telefonskega« pogleda. Če želite odpraviti to težavo, boste morali vključiti naslednji CSS in JavaScript, da se izognete napaki .
Za več informacij in navodila za uporabo preberite Windows Phone 8 in Device-Width .
Kot opozorilo, to vključujemo v vso dokumentacijo in primere Bootstrapa kot predstavitev.
Mehanizem za upodabljanje različic Safarija pred v7.1 za OS X in Safari za iOS v8.0 je imel nekaj težav s številom decimalnih mest, uporabljenih v naših .col-*-1
razredih mreže. Torej, če bi imeli 12 posameznih stolpcev mreže, bi opazili, da so bili kratki v primerjavi z drugimi vrsticami stolpcev. Poleg nadgradnje brskalnika Safari/iOS imate nekaj možnosti za rešitve:
.pull-right
v zadnji stolpec mreže, da dobite trdo desno poravnavoPodpora za overflow: hidden
element <body>
je v sistemih iOS in Android precej omejena. V ta namen, ko se pomaknete mimo vrha ali dna modala v katerem koli od brskalnikov teh naprav, se bo <body>
vsebina začela pomikati. Oglejte si napako Chrome #175502 (odpravljeno v Chromu v40) in napako WebKit #153852 .
Od iOS 9.3, medtem ko je modal odprt, če je začetni dotik poteze drsenja znotraj meje besedila <input>
ali <textarea>
, se <body>
bo pomikala vsebina pod modalom namesto samega modala. Oglejte si napako WebKit #153856 .
Upoštevajte tudi, da ima iOS napako upodabljanja, ki ne posodobi položaja fiksnih elementov, ko se sproži navidezna tipkovnica, če uporabljate fiksno vrstico za krmarjenje ali vnose znotraj modala. Nekaj rešitev za to vključuje preoblikovanje vaših elementov v position: absolute
ali priklic časovnika v fokusu, da poskusite ročno popraviti položaj. Tega ne obravnava Bootstrap, zato se sami odločite, katera rešitev je najboljša za vašo aplikacijo.
Element .dropdown-backdrop
se v sistemu iOS ne uporablja v navigaciji zaradi zapletenosti z-indeksiranja. Če želite zapreti spustne menije v vrsticah za krmarjenje, morate neposredno klikniti spustni element (ali kateri koli drug element, ki bo sprožil dogodek klika v sistemu iOS ).
Povečevanje strani neizogibno predstavlja artefakte upodabljanja v nekaterih komponentah, tako v Bootstrapu kot preostalem spletu. Glede na težavo jo bomo morda lahko odpravili (najprej poiščite in nato po potrebi odprite težavo). Vendar jih običajno ignoriramo, saj pogosto nimajo neposredne rešitve, razen hekerskih rešitev.
:hover
/ :focus
na mobilnikuČeprav resnično lebdenje ni mogoče na večini zaslonov na dotik, večina mobilnih brskalnikov posnema podporo za lebdenje in naredi :hover
"lepljivo". Z drugimi besedami, :hover
slogi se začnejo uporabljati po dotiku elementa in prenehajo veljati šele, ko se uporabnik dotakne drugega elementa. To lahko povzroči, da se stanja Bootstrapa :hover
nezaželeno "zataknejo" v takih brskalnikih. Tudi nekateri mobilni brskalniki naredijo :focus
podobno lepljivo. Trenutno ni preproste rešitve za te težave, razen popolne odstranitve takih slogov.
Tudi v nekaterih sodobnih brskalnikih je lahko tiskanje nenavadno.
Zlasti od Chroma v32 in ne glede na nastavitve robov Chrome pri reševanju medijskih poizvedb med tiskanjem spletne strani uporablja širino vidnega polja, ki je znatno ožja od fizične velikosti papirja. To lahko povzroči nepričakovano aktiviranje zelo majhne mreže Bootstrapa med tiskanjem. Za nekaj podrobnosti si oglejte težavo št. 12078 in napako Chrome št. 273306 . Predlagane rešitve:
@screen-*
spremenljivk Manj, tako da bo vaš papir za tiskalnik veljal za večjega od zelo majhnega.Poleg tega lahko od Safarija v8.0 s s fiksno širino .container
povzroči, da Safari pri tiskanju uporablja nenavadno majhno velikost pisave. Glejte #14868 in napako WebKit #138192 za več podrobnosti. Ena možna rešitev za to je dodajanje naslednjega CSS:
Android 4.1 (in očitno celo nekatere novejše izdaje) že takoj prejmejo aplikacijo Browser kot privzeti izbrani spletni brskalnik (v nasprotju s Chromom). Na žalost ima aplikacija Brskalnik veliko napak in nedoslednosti s CSS na splošno.
Na <select>
elementih standardni brskalnik Android ne bo prikazal stranskih kontrolnikov, če je uporabljen border-radius
in/ali border
. (Za podrobnosti si oglejte to vprašanje StackOverflow .) Uporabite spodnji delček kode, da odstranite žaljivi CSS in upodabljate <select>
element kot element brez sloga v brskalniku zaloge Android. Vohanje uporabniškega agenta se izogne motnjam v brskalnikih Chrome, Safari in Mozilla.
Želite videti primer? Oglejte si to predstavitev JS Bin.
Da bi zagotovil najboljšo možno izkušnjo starim brskalnikom in brskalnikom z napakami, Bootstrap na več mestih uporablja vdore v brskalnike CSS , da cilja posebne CSS na določene različice brskalnikov, da se izogne napakam v samih brskalnikih. Ti vdori razumljivo povzročijo, da se validatorji CSS pritožujejo, da so neveljavni. Na nekaj mestih uporabljamo tudi najsodobnejše funkcije CSS, ki še niso povsem standardizirane, vendar se uporabljajo zgolj za postopno izboljšavo.
Ta opozorila pri preverjanju veljavnosti v praksi niso pomembna, saj del našega CSS-ja, ki ni vdor, v celoti preveri veljavnost in deli, ki so vdori, ne motijo pravilnega delovanja dela, ki ni vdor, zato namenoma ignoriramo ta posebna opozorila.
Naši dokumenti HTML prav tako vsebujejo nekaj trivialnih in nepomembnih opozoril o preverjanju veljavnosti HTML, ker smo vključili rešitev za določeno napako Firefoxa .
Čeprav uradno ne podpiramo nobenih vtičnikov ali dodatkov tretjih oseb, ponujamo nekaj koristnih nasvetov, s katerimi se boste izognili morebitnim težavam pri vaših projektih.
Nekatera programska oprema tretjih oseb, vključno z Google Maps in Google Custom Search Engine, je v nasprotju z Bootstrapom zaradi * { box-sizing: border-box; }
pravila, zaradi katerega padding
ne vpliva na končno izračunano širino elementa. Izvedite več o modelu škatle in velikosti na CSS Tricks .
Odvisno od konteksta lahko po potrebi preglasite (1. možnost) ali ponastavite velikost polja za celotne regije (2. možnost).
Bootstrap sledi običajnim spletnim standardom in se lahko z minimalnim dodatnim naporom uporablja za ustvarjanje spletnih mest, ki so dostopna tistim, ki uporabljajo AT .
Če vaša navigacija vsebuje veliko povezav in je pred glavno vsebino v DOM, dodajte Skip to main content
povezavo pred navigacijo (za preprosto razlago glejte ta članek projekta A11Y o povezavah za preskok navigacije ). Uporaba .sr-only
razreda bo vizualno skrila povezavo za preskok, .sr-only-focusable
razred pa bo zagotovil, da postane povezava vidna, ko je fokusirana (za uporabnike s tipkovnico, ki vidijo).
Zaradi dolgotrajnih pomanjkljivosti/napak v Chromu (oglejte si težavo 262171 v Chromiumovem sledilniku hroščev ) in Internet Explorerju (oglejte si ta članek o povezavah na strani in vrstnem redu fokusa ), se boste morali prepričati, da je cilj vaše preskočne povezave se lahko vsaj programsko fokusira z dodajanjem tabindex="-1"
.
Poleg tega boste morda želeli izrecno onemogočiti vidno indikacijo fokusa na cilju (zlasti ker Chrome trenutno nastavi fokus na elemente z tabindex="-1"
, ko jih kliknete z miško) z #content:focus { outline: none; }
.
Upoštevajte, da bo ta napaka vplivala tudi na vse druge povezave na strani, ki jih morda uporablja vaše spletno mesto, zaradi česar bodo neuporabne za uporabnike tipkovnice. Razmislite o dodajanju podobnega popravka začasne vrzeli za vsa druga poimenovana sidra/identifikatorje fragmentov, ki delujejo kot cilji povezav.
Pri gnezdenju naslovov ( <h1>
- <h6>
) mora biti glava vašega primarnega dokumenta <h1>
. Naslednji naslovi morajo biti logično uporabljeni <h2>
- <h6>
tako, da lahko bralniki zaslona sestavijo kazalo vsebine vaših strani.
Več o tem na HTML CodeSniffer in AccessAbility Penn State .
Trenutno so nekatere od privzetih barvnih kombinacij, ki so na voljo v Bootstrapu (kot so različni stilizirani razredi gumbov, nekatere barve za označevanje kode, ki se uporabljajo za osnovne bloke kode , razred pomočnika za .bg-primary
kontekstno ozadje in privzeta barva povezave, kadar se uporablja na belem ozadju) imajo nizko kontrastno razmerje (pod priporočenim razmerjem 4,5:1 ). To lahko povzroči težave slabovidnim ali barvno slepim uporabnikom. Te privzete barve bo morda treba spremeniti, da se poveča njihov kontrast in čitljivost.
Bootstrap je izdan pod licenco MIT in je zaščiten z avtorskimi pravicami 2016 Twitter. Strnjeno na manjše koščke ga je mogoče opisati z naslednjimi pogoji.
Celotna licenca Bootstrap se nahaja v repozitoriju projekta za več informacij.
Člani skupnosti so prevedli dokumentacijo Bootstrapa v različne jezike. Nobeden ni uradno podprt in morda ni vedno posodobljen.
Ne pomagamo organizirati ali gostiti prevodov, le povezujemo jih.
Ste končali nov ali boljši prevod? Odprite zahtevo za vlečenje, da jo dodate na naš seznam.