Prenesi

Bootstrap (trenutno v3.4.1) 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.

jsDelivr

Ljudje pri jsDelivr prijazno zagotavljajo podporo CDN za Bootstrapov CSS in JavaScript. Samo uporabite te povezave jsDelivr .

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Namestite z Bowerjem

Z Bowerjem lahko tudi namestite in upravljate Bootstrapov Less, CSS, JavaScript in pisave :

bower install bootstrap

Namestite z npm

Bootstrap lahko namestite tudi z uporabo npm :

npm install bootstrap@3

require('bootstrap')bo naložil vse Bootstrapove vtičnike jQuery v objekt jQuery. Sam bootstrapmodul ne izvozi ničesar. Bootstrapove vtičnike jQuery lahko posamezno naložite tako, da naložite /js/*.jsdatoteke v imenik najvišje ravni paketa.

Bootstrap package.jsonvsebuje nekaj dodatnih metapodatkov pod naslednjimi ključi:

• less- pot do glavne izvorne datoteke Bootstrap Less
• style- pot do neminificiranega CSS Bootstrapa, ki je bil vnaprej preveden s privzetimi nastavitvami (brez prilagajanja)

Namestite s Composerjem

S Composerjem lahko tudi namestite in upravljate Bootstrapov Less, CSS, JavaScript in pisave :

composer require twbs/bootstrap

Samodejna predpona je potrebna za Less/Sass

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.

Kaj je vključeno

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.

Vnaprej preveden Bootstrap

Po prenosu razpakirajte stisnjeno mapo, da si ogledate strukturo (prevedenega) Bootstrapa. Videli boste nekaj takega:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

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.

Izvorna koda Bootstrap

Prenos izvorne kode Bootstrap vključuje vnaprej preveden CSS, JavaScript in sredstva pisave, skupaj z izvornim Less, JavaScriptom in dokumentacijo. Natančneje, vključuje naslednje in še več:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

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

Prevajanje CSS in JavaScript

Bootstrap uporablja Grunt za svoj gradbeni sistem s priročnimi metodami za delo z ogrodjem. Tako sestavljamo kodo, izvajamo teste in drugo.

Namestitev Grunta

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

1. Namestite grunt-cliglobalno z npm install -g grunt-cli.
2. Pomaknite se do korenskega /bootstrap/imenika in zaženite npm install. npm bo pogledal package.jsondatoteko in samodejno namestil tam navedene potrebne lokalne odvisnosti.

Ko končate, boste lahko izvajali različne ukaze Grunt iz ukazne vrstice.

Razpoložljivi ukazi Grunt

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)

Izvaja JSHint in izvaja teste QUnit v resničnih brskalnikih zahvaljujoč Karmi .

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.

Odpravljanje težav

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

Osnovna predloga

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.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Primeri

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.

Uporaba ogrodja

Začetna predloga

Nič drugega kot osnove: preveden CSS in JavaScript skupaj z vsebnikom.

Tema Bootstrap

Naložite izbirno temo Bootstrap za vizualno izboljšano izkušnjo.

Mreže

Več primerov mrežnih postavitev z vsemi štirimi nivoji, gnezdenjem in še več.

Jumbotron

Gradite okoli jumbotrona z navbarom in nekaj osnovnimi stolpci mreže.

Ozek jumbotron

Ustvarite bolj prilagojeno stran tako, da zožite privzeti vsebnik in jumbotron.

Navbars v akciji

Navbar

Super osnovna predloga, ki vključuje navbar skupaj z nekaj dodatne vsebine.

Statična zgornja vrstica za krmarjenje

Super osnovna predloga s statično zgornjo vrstico za krmarjenje in nekaj dodatne vsebine.

Popravljena vrstica za krmarjenje

Super osnovna predloga s fiksno zgornjo vrstico za krmarjenje in nekaj dodatne vsebine.

Komponente po meri

Pokrov

Enostranska predloga za izdelavo preprostih in lepih domačih strani.

Vrtiljak

Prilagodite navbar in vrtiljak, nato pa dodajte nekaj novih komponent.

Blog

Preprosta postavitev spletnega dnevnika v dveh stolpcih z navigacijo po meri, glavo in tipom.

Nadzorna plošča

Osnovna struktura za skrbniško nadzorno ploščo s fiksno stransko vrstico in vrstico za krmarjenje.

Stran za prijavo

Postavitev obrazca po meri in oblikovanje za preprost obrazec za prijavo.

Upravičeno nav

Ustvarite navbar po meri z poravnanimi povezavami. Glavo pokonci! Ni preveč prijazen do Safarija.

Lepljiva noga

Pripnite nogo na dno vidnega polja, ko je vsebina krajša od njega.

Lepljiva noga z vrstico za krmarjenje

Na dno vidnega polja pritrdite nogo s fiksno vrstico za krmarjenje na vrhu.

Poskusi

Neodziven Bootstrap

Preprosto onemogočite odzivnost Bootstrapa po naših dokumentih .

Izven platna

Zgradite preklopni navigacijski meni zunaj platna za uporabo z Bootstrapom.

Orodja

Bootlint

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.

Skupnost

Bodite na tekočem z razvojem Bootstrapa in se obrnite na skupnost s temi koristnimi viri.

• Preberite in se naročite na uradni blog Bootstrap .
• Klepetajte s kolegi Bootstrapperji z uporabo IRC v irc.freenode.netstrežniku, na kanalu ##bootstrap .
• Za pomoč pri uporabi Bootstrapa vprašajte na StackOverflow z uporabo oznaketwitter-bootstrap-3 .
• Razvijalci bi morali uporabiti ključno besedo bootstrapna paketih, ki spreminjajo ali dodajajo funkcionalnost Bootstrapa pri distribuciji prek npm ali podobnih dostavnih mehanizmov za največjo odkritost.
• Poiščite navdihujoče primere ljudi, ki gradijo z Bootstrapom na Bootstrap Expo .

Prav tako lahko spremljate @getbootstrap na Twitterju za najnovejše trače in izjemne glasbene videe.

Onemogočanje odzivnosti

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 .

Koraki za onemogočanje odzivnosti strani

1. Izpustite vidno polje <meta>, omenjeno v dokumentih CSS
2. Preglasite widthna .containerza 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 !importantz medijskimi poizvedbami ali kakšnim izbirnikom-fu.
3. Če uporabljate vrstice za krmarjenje, odstranite vse vedenje, ki se zrušijo in razširijo.
4. Za mrežne postavitve uporabite .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.

Predloga Bootstrap z onemogočeno odzivnostjo

Te korake smo uporabili na primeru. Preberite njegovo izvorno kodo in si oglejte izvedene specifične spremembe.

Oglejte si primer neodzivnosti

Podpora za brskalnike in naprave

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.

Podprti brskalniki

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.

Mobilne naprave

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.

Namizni brskalniki

Podobno so podprte najnovejše različice večine namiznih brskalnikov.

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 .

Internet Explorer 8 in 9

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.

Obiščite Ali lahko uporabim ... za podrobnosti o podpori brskalnika za funkcije CSS3 in HTML5.

Internet Explorer 8 in Respond.js

Pri uporabi Respond.js v razvojnih in produkcijskih okoljih za Internet Explorer 8 bodite pozorni na naslednja opozorila.

Respond.js in CSS med domenami

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 .

Respond.js infile://

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 .

Respond.js in@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 .

Internet Explorer 8 in velikost škatle

IE8 ne podpira v celoti box-sizing: border-box;v kombinaciji z min-width, max-width, min-heightali max-height. Iz tega razloga od v3.0.1 ne uporabljamo več max-widthna .containers.

Internet Explorer 8 in @font-face

IE8 ima @font-facev 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 .

Načini združljivosti IE

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:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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 v sistemih Windows 8 in Windows Phone 8

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:

@-ms-viewport       { width: device-width; }

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 .

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

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.

Zaokroževanje v odstotkih Safarija

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-*-1razredih 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:

• Dodajte .pull-rightv zadnji stolpec mreže, da dobite trdo desno poravnavo
• Ročno nastavite svoje odstotke, da dobite popolno zaokroževanje za Safari (težje kot prva možnost)

Modali, navbars in virtualne tipkovnice

Prelivanje in drsenje

Podpora za overflow: hiddenelement <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 .

Besedilna polja iOS in drsenje

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 .

Virtualne tipkovnice

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

Spustni meni Navbar

Element .dropdown-backdropse 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čanje brskalnika

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.

Lepljivo :hover/ :focusna 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, :hoverslogi 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 :hovernezaželeno "zataknejo" v takih brskalnikih. Tudi nekateri mobilni brskalniki naredijo :focuspodobno lepljivo. Trenutno ni preproste rešitve za te težave, razen popolne odstranitve takih slogov.

Tiskanje

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:

• Sprejmite izjemno majhno mrežo in poskrbite, da bo vaša stran pod njo videti sprejemljivo.
• Prilagodite vrednosti @screen-*spremenljivk Manj, tako da bo vaš papir za tiskalnik veljal za večjega od zelo majhnega.
• Dodajte medijske poizvedbe po meri, da spremenite prelomne točke velikosti mreže samo za tiskane medije.

Poleg tega lahko od Safarija v8.0 s s fiksno širino .containerpovzroč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:

@media print {
  .container {
    width: auto;
  }
}

Standardni brskalnik Android

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.

Izberite menije

Na <select>elementih standardni brskalnik Android ne bo prikazal stranskih kontrolnikov, če je uporabljen border-radiusin/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.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Želite videti primer? Oglejte si to predstavitev JS Bin.

Validatorji

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 .

Podpora tretjih oseb

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

Dimenzioniranje škatle

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

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Dostopnost

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 .

Preskoči navigacijo

Če vaša navigacija vsebuje veliko povezav in je pred glavno vsebino v DOM, dodajte Skip to main contentpovezavo pred navigacijo (za preprosto razlago glejte ta članek projekta A11Y o povezavah za preskok navigacije ). Uporaba .sr-onlyrazreda bo vizualno skrila povezavo za preskok, .sr-only-focusablerazred pa bo zagotovil, da postane povezava vidna, ko je fokusirana (za uporabnike s tipkovnico, ki vidijo).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

Ugnezdeni naslovi

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 .

Barvni kontrast

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.

Dodatni viri

• Zaznamek "HTML Codesniffer" za prepoznavanje težav s posebnimi potrebami
• Razširitev Chromovih orodij za razvijalce dostopnosti
• Analizator barvnega kontrasta
• Projekt A11Y
• Dokumentacija o dostopnosti MDN

Pogosta vprašanja o licencah

Bootstrap je izdan pod licenco MIT in je avtorsko zaščiten 2019 Twitter. Strnjeno na manjše koščke ga je mogoče opisati z naslednjimi pogoji.

Zahteva, da:

• Obvestilo o licenci in avtorskih pravicah imejte vključeno v datoteke CSS in JavaScript Bootstrapa, ko ju uporabljate v svojih delih

Omogoča vam, da:

• Prosto prenesite in uporabite Bootstrap, v celoti ali delno, za osebne, zasebne, interne namene podjetja ali komercialne namene
• Uporabite Bootstrap v paketih ali distribucijah, ki jih ustvarite
• Spremenite izvorno kodo
• Podelite podlicenco za spreminjanje in distribucijo Bootstrapa tretjim osebam, ki niso vključene v licenco

Prepoveduje vam:

• Avtorji in lastniki licenc naj bodo odgovorni za škodo, saj je Bootstrap na voljo brez garancije
• Ustvarjalci ali imetniki avtorskih pravic za Bootstrap naj bodo odgovorni
• Prerazporedite kateri koli del Bootstrapa brez ustreznega pripisa
• Uporabite kakršne koli znamke v lasti Twitterja na kakršen koli način, ki bi lahko navajal ali namigoval, da Twitter podpira vašo distribucijo
• Uporabite kakršne koli znamke v lasti Twitterja na kakršen koli način, ki bi lahko navajal ali namigoval, da ste ustvarili zadevno programsko opremo Twitter

Ne zahteva, da:

• Vključite izvorno kodo samega Bootstrapa ali kakršnih koli sprememb, ki ste jih morda naredili, v katero koli prerazporeditev, ki jo lahko sestavite in vključuje
• Pošljite spremembe, ki jih naredite v Bootstrap, nazaj v projekt Bootstrap (čeprav so takšne povratne informacije zaželene)

Celotna licenca Bootstrap se nahaja v repozitoriju projekta za več informacij.

Prevodi

Člani skupnosti so prevedli dokumentacijo Bootstrapa v različne jezike. Nobeden ni uradno podprt in morda ni vedno posodobljen.

• Bootstrap 中文文档 (kitajščina)
• Bootstrap på Dansk (danščina)
• Bootstrap en Français (francoščina)
• Bootstrap auf Deutsch (nemščina)
• Bootstrap in Italiano (italijanščina)
• Bootstrap 한국어 (korejščina)
• Bootstrap em Português do Brasil (brazilska portugalščina)
• Bootstrap по-русски (rusko)
• Bootstrap en Español (španščina)
• Türkçe Bootstrap (turščina)
• Bootstrap українською (ukrajinščina)
• Bootstrap bằng tiếng Việt (vietnamsko)

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.