preuzimanje datoteka

Bootstrap (trenutno v3.4.1) ima nekoliko jednostavnih načina za brzi početak, od kojih je svaki privlačan različitoj razini vještina i slučaju korištenja. Pročitajte kako biste vidjeli što odgovara vašim posebnim potrebama.

jsDelivr

Ljudi iz jsDelivr-a ljubazno pružaju CDN podršku za Bootstrapov CSS i JavaScript. Samo koristite ove jsDelivr veze.

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

Instalirajte s Bowerom

Također možete instalirati i upravljati Bootstrapovim Lessom, CSS-om, JavaScriptom i fontovima koristeći Bower :

bower install bootstrap

Instaliraj s npm-om

Također možete instalirati Bootstrap koristeći npm :

npm install bootstrap@3

require('bootstrap')će učitati sve Bootstrapove jQuery dodatke na jQuery objekt. Sam bootstrapmodul ne izvozi ništa. Možete pojedinačno ručno učitati Bootstrapove jQuery dodatke učitavanjem /js/*.jsdatoteka u direktoriju najviše razine paketa.

Bootstrap package.jsonsadrži neke dodatne metapodatke pod sljedećim ključevima:

• less- put do Bootstrapove glavne izvorne datoteke Less
• style- put do Bootstrapovog neminificiranog CSS-a koji je unaprijed kompajliran korištenjem zadanih postavki (bez prilagodbe)

Instaliraj s Composerom

Također možete instalirati i upravljati Bootstrapovim Lessom, CSS-om, JavaScriptom i fontovima koristeći Composer :

composer require twbs/bootstrap

Automatski prefiks potreban za Less/Sass

Bootstrap koristi Autoprefixer za rješavanje prefiksa dobavljača CSS- a . Ako kompajlirate Bootstrap iz Less/Sass izvora i ne koristite našu Gruntfile, morat ćete sami integrirati Autoprefixer u svoj proces izgradnje. Ako koristite unaprijed kompajlirani Bootstrap ili koristite našu Gruntfile, ne morate brinuti o tome jer je Autoprefixer već integriran u našu Gruntfile.

Što je uključeno

Bootstrap je moguće preuzeti u dva oblika, unutar kojih ćete pronaći sljedeće direktorije i datoteke, logički grupirajući zajedničke resurse i pružajući kompajlirane i umanjene varijacije.

Prekompilirani Bootstrap

Nakon preuzimanja, raspakirajte komprimiranu mapu da vidite strukturu (kompiliranog) Bootstrapa. Vidjet ćete nešto poput ovoga:

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

Ovo je najosnovniji oblik Bootstrapa: unaprijed kompilirane datoteke za brzu upotrebu u gotovo svakom web projektu. Nudimo kompilirani CSS i JS ( bootstrap.*), kao i kompilirani i umanjeni CSS i JS ( bootstrap.min.*). Izvorne karte CSS -a ( bootstrap.*.map) dostupne su za korištenje s razvojnim alatima određenih preglednika. Uključeni su fontovi iz Glyphiconsa, kao i izborna Bootstrap tema.

Bootstrap izvorni kod

Preuzimanje Bootstrap izvornog koda uključuje unaprijed kompajlirani CSS, JavaScript i elemente fonta, zajedno s izvornim Lessom, JavaScriptom i dokumentacijom. Točnije, uključuje sljedeće i više od toga:

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

, less/, js/i fonts/izvorni su kod za naše CSS, JS i fontove ikona (respektivno). dist/Mapa uključuje sve što je navedeno u prethodno kompiliranom odjeljku za preuzimanje . docs/Mapa uključuje izvorni kod za našu dokumentaciju i korištenje examples/Bootstrapa. Osim toga, svaka druga uključena datoteka pruža podršku za pakete, podatke o licenci i razvoj.

Kompajliranje CSS-a i JavaScripta

Bootstrap koristi Grunt za svoj sustav izrade, s prikladnim metodama za rad s okvirom. To je način na koji kompajliramo naš kod, izvodimo testove i još mnogo toga.

Instaliranje Grunta

Da biste instalirali Grunt, prvo morate preuzeti i instalirati node.js (koji uključuje npm). npm je kratica za node packaged modules i način je upravljanja razvojnim ovisnostima putem node.js.

1. Instaliraj grunt-cliglobalno s npm install -g grunt-cli.
2. Dođite do korijenskog /bootstrap/direktorija, zatim pokrenite npm install. npm će pogledati package.jsondatoteku i automatski instalirati tamo navedene potrebne lokalne ovisnosti.

Kada završite, moći ćete pokrenuti razne Grunt naredbe iz naredbenog retka.

Dostupne Grunt naredbe

grunt dist(Samo prevedite CSS i JavaScript)

Regenerira /dist/direktorij s kompajliranim i umanjenim CSS i JavaScript datotekama. Kao korisnik Bootstrapa, ovo je obično naredba koju želite.

grunt watch(Gledati)

Promatra izvorne datoteke Less i automatski ih ponovno kompajlira u CSS kad god spremite promjenu.

grunt test(Pokreni testove)

Pokreće JSHint i pokreće QUnit testove u pravim preglednicima zahvaljujući Karmi .

grunt docs(Izradite i testirajte sredstva dokumenata)

Gradi i testira CSS, JavaScript i druga sredstva koja se koriste prilikom pokretanja dokumentacije lokalno putem bundle exec jekyll serve.

grunt(Izgradite apsolutno sve i pokrenite testove)

Sastavlja i minimizira CSS i JavaScript, izrađuje web stranicu s dokumentacijom, pokreće HTML5 validator prema dokumentima, regenerira sredstva Customizer-a i još mnogo toga. Zahtijeva Jekylla . Obično je potrebno samo ako hakirate sam Bootstrap.

Rješavanje problema

Ako naiđete na probleme s instaliranjem ovisnosti ili izvođenjem Grunt naredbi, prvo izbrišite /node_modules/direktorij koji je generirao npm. Zatim ponovite npm install.

Osnovni predložak

Započnite s ovim osnovnim HTML predloškom ili izmijenite ove primjere . Nadamo se da ćete naše predloške i primjere prilagoditi svojim potrebama.

Kopirajte HTML u nastavku da biste započeli rad s minimalnim Bootstrap dokumentom.

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

Primjeri

Izgradite na osnovnom predlošku iznad s mnogim komponentama Bootstrapa. Potičemo vas da prilagodite i prilagodite Bootstrap kako bi odgovarao potrebama vašeg individualnog projekta.

Preuzmite izvorni kod za svaki primjer u nastavku preuzimanjem repozitorija Bootstrap . Primjeri se mogu naći u docs/examples/imeniku.

Korištenje okvira

Početni predložak

Ništa osim osnova: kompilirani CSS i JavaScript zajedno sa spremnikom.

Bootstrap tema

Učitajte neobaveznu temu Bootstrap za vizualno poboljšano iskustvo.

Rešetke

Višestruki primjeri rasporeda rešetki sa sva četiri nivoa, ugniježđivanjem i više.

Jumbotron

Gradite oko jumbotrona s navigacijskom trakom i nekim osnovnim stupcima mreže.

Uski jumbotron

Izradite prilagođeniju stranicu sužavanjem zadanog spremnika i jumbotrona.

Navigacijske trake u akciji

Navigacijska traka

Super osnovni predložak koji uključuje navigacijsku traku zajedno s dodatnim sadržajem.

Statička gornja navigacijska traka

Super osnovni predložak sa statičnom gornjom navigacijskom trakom uz dodatni sadržaj.

Fiksna navigacijska traka

Super osnovni predložak s fiksnom gornjom navigacijskom trakom uz dodatni sadržaj.

Prilagođene komponente

Pokriti

Jednostrani predložak za izradu jednostavnih i lijepih početnih stranica.

Karusel

Prilagodite navigacijsku traku i vrtuljak, a zatim dodajte neke nove komponente.

Blog

Jednostavan izgled bloga u dva stupca s prilagođenom navigacijom, zaglavljem i tipom.

Nadzorna ploča

Osnovna struktura za nadzornu ploču administratora s fiksnom bočnom i navigacijskom trakom.

Stranica za prijavu

Prilagođeni izgled obrasca i dizajn za jednostavan obrazac za prijavu.

Opravdana nav

Stvorite prilagođenu navigacijsku traku s poravnatim vezama. Glavu gore! Nije baš prilagođen Safariju.

Ljepljivo podnožje

Pričvrstite podnožje na dno prozora kada je sadržaj kraći od njega.

Ljepljivo podnožje s navigacijskom trakom

Pričvrstite podnožje na dno prozora s fiksnom navigacijskom trakom na vrhu.

Eksperimenti

Bootstrap koji ne reagira

Jednostavno onemogućite odziv Bootstrapa prema našim dokumentima .

Izvan platna

Izgradite navigacijski izbornik izvan platna koji se može mijenjati za korištenje s Bootstrapom.

Alati

Bootlint

Bootlint je službenialat Bootstrap HTML linter . Automatski provjerava nekoliko uobičajenih HTML pogrešaka na web stranicama koje koriste Bootstrap na prilično "vanilla" način. Komponente/widgeti Vanilla Bootstrapa zahtijevaju da se njihovi dijelovi DOM-a prilagode određenim strukturama. Bootlint provjerava imaju li instance komponenti Bootstrapa ispravno strukturiran HTML. Razmislite o dodavanju Bootlinta u svoj lanac alata za web razvoj Bootstrap kako nijedna uobičajena pogreška ne bi usporila razvoj vašeg projekta.

Zajednica

Budite u tijeku s razvojem Bootstrapa i obratite se zajednici pomoću ovih korisnih resursa.

• Pročitajte i pretplatite se na službeni Bootstrap blog .
• Razgovarajte s kolegama Bootstrapperima koristeći IRC na irc.freenode.netposlužitelju, na ##bootstrap kanalu .
• Za pomoć pri korištenju Bootstrapa pitajte na StackOverflowu pomoću oznaketwitter-bootstrap-3 .
• Programeri bi trebali koristiti ključnu riječ bootstrapna paketima koji mijenjaju ili dodaju funkcionalnost Bootstrapa kada distribuiraju putem npm- a ili sličnih mehanizama isporuke za maksimalnu vidljivost.
• Pronađite nadahnjujuće primjere ljudi koji grade s Bootstrapom na Bootstrap Expo .

Također možete pratiti @getbootstrap na Twitteru za najnovije tračeve i sjajne glazbene videe.

Onemogućavanje odziva

Bootstrap automatski prilagođava vaše stranice različitim veličinama zaslona. Evo kako onemogućiti ovu značajku tako da vaša stranica radi kao u ovom primjeru koji ne reagira .

Koraci za onemogućavanje responzivnosti stranice

1. Izostavite okvir za prikaz koji <meta>se spominje u CSS dokumentima
2. Nadjačajte widthna .containerza svaku razinu rešetke s jednom širinom, na primjer width: 970px !important;Provjerite dolazi li ovo nakon zadanog Bootstrap CSS-a. Po želji možete izbjeći !importants medijskim upitima ili nekim selektorom.
3. Ako koristite navigacijske trake, uklonite sva ponašanja skupljanja i širenja navigacijske trake.
4. Za rasporede rešetki koristite .col-xs-*klase uz srednje/velike ili umjesto njih. Ne brinite, izuzetno mala mreža uređaja skalira se na sve rezolucije.

I dalje ćete trebati Respond.js za IE8 (budući da su naši medijski upiti još uvijek tu i treba ih obraditi). Ovo onemogućuje aspekte "mobilne stranice" Bootstrapa.

Bootstrap predložak s onemogućenim odzivom

Primijenili smo ove korake na primjer. Pročitajte njegov izvorni kod da vidite implementirane specifične promjene.

Pogledajte primjer koji ne reagira

Podrška za preglednik i uređaj

Bootstrap je napravljen da najbolje radi u najnovijim preglednicima za stolna i mobilna računala, što znači da bi stariji preglednici mogli prikazati drugačije stilizirane, iako potpuno funkcionalne, prikaze određenih komponenti.

Podržani preglednici

Točnije, podržavamo najnovije verzije sljedećih preglednika i platformi.

Alternativni preglednici koji koriste najnoviju verziju WebKita, Blinka ili Gecka, bilo izravno ili putem API-ja za web pregled platforme, nisu izričito podržani. Međutim, Bootstrap bi se (u većini slučajeva) trebao ispravno prikazivati ​​i funkcionirati iu ovim preglednicima. Konkretnije informacije o podršci navedene su u nastavku.

Mobilni uredaji

Općenito govoreći, Bootstrap podržava najnovije verzije zadanih preglednika svake glavne platforme. Imajte na umu da proxy preglednici (kao što su Opera Mini, Turbo način rada Opera Mobile, UC Browser Mini, Amazon Silk) nisu podržani.

Preglednici stolnih računala

Slično tome, podržane su najnovije verzije većine preglednika stolnih računala.

U sustavu Windows podržavamo Internet Explorer 8-11 .

Za Firefox, uz najnovije normalno stabilno izdanje, također podržavamo najnoviju verziju Firefoxa s proširenom podrškom (ESR) .

Neslužbeno, Bootstrap bi trebao izgledati i ponašati se dovoljno dobro u Chromiumu i Chromeu za Linux, Firefoxu za Linux i Internet Exploreru 7, kao i Microsoft Edgeu, iako nisu službeno podržani.

Za popis nekih grešaka u pregledniku s kojima se Bootstrap mora uhvatiti u koštac, pogledajte naš Zid grešaka u pregledniku .

Internet Explorer 8 i 9

Internet Explorer 8 i 9 također su podržani, međutim, imajte na umu da ovi preglednici ne podržavaju u potpunosti neka svojstva CSS3 i HTML5 elemente. Osim toga, Internet Explorer 8 zahtijeva korištenje Respond.js za omogućavanje podrške za medijske upite.

Posjetite Mogu li koristiti... za detalje o podršci preglednika za značajke CSS3 i HTML5.

Internet Explorer 8 i Respond.js

Pripazite na sljedeća upozorenja kada koristite Respond.js u svojim razvojnim i proizvodnim okruženjima za Internet Explorer 8.

Respond.js i CSS među domenama

Korištenje Respond.js s CSS-om hostiranim na drugoj (pod)domeni (na primjer, na CDN-u) zahtijeva dodatna podešavanja. Pojedinosti potražite u dokumentima Respond.js .

Odgovori.js ifile://

Zbog sigurnosnih pravila preglednika, Respond.js ne radi sa stranicama koje se gledaju putem file://protokola (kao kod otvaranja lokalne HTML datoteke). Za testiranje responzivnih značajki u IE8 pregledajte svoje stranice putem HTTP(S-a). Pojedinosti potražite u dokumentima Respond.js .

Odgovori.js i@import

Respond.js ne radi s CSS-om koji je referenciran putem @import. Konkretno, poznato je da neke Drupal konfiguracije koriste @import. Pojedinosti potražite u dokumentima Respond.js .

Internet Explorer 8 i veličina okvira

IE8 ne podržava u potpunosti box-sizing: border-box;u kombinaciji s min-width, max-width, min-heightili max-height. Iz tog razloga, od v3.0.1, više ne koristimo max-widthna .containers.

Internet Explorer 8 i @font-face

IE8 ima nekih problema @font-facekada se kombinira s :before. Bootstrap koristi tu kombinaciju sa svojim Glyphiconsima. Ako je stranica spremljena u predmemoriju i učitana bez prelaska miša preko prozora (tj. pritisnite gumb za osvježavanje ili učitajte nešto u iframe), tada se stranica renderira prije učitavanja fonta. Postavljanje pokazivača miša iznad stranice (tijela) prikazat će neke od ikona, a zadržavanje pokazivača iznad preostalih ikona također će ih prikazati. Vidi problem #13863 za detalje.

IE načini kompatibilnosti

Bootstrap nije podržan u starim načinima kompatibilnosti Internet Explorera. Kako biste bili sigurni da koristite najnoviji način prikazivanja za IE, razmislite o uključivanju odgovarajuće <meta>oznake na svoje stranice:

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

Potvrdite način dokumenta otvaranjem alata za otklanjanje pogrešaka: pritisnite F12i označite "Način dokumenta".

Ova je oznaka uključena u svu Bootstrapovu dokumentaciju i primjere kako bi se osiguralo najbolje moguće prikazivanje u svakoj podržanoj verziji Internet Explorera.

Pogledajte ovo StackOverflow pitanje za više informacija.

Internet Explorer 10 u sustavima Windows 8 i Windows Phone 8

Internet Explorer 10 ne razlikuje širinu uređaja od širine okvira za prikaz i stoga ne primjenjuje ispravno medijske upite u Bootstrapovom CSS-u. Obično biste samo dodali brzi isječak CSS-a da to popravite:

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

Međutim, to ne radi za uređaje koji pokreću verzije Windows Phone 8 starije od Ažuriranja 3 (aka GDR3) , jer uzrokuje da takvi uređaji prikazuju uglavnom prikaz radne površine umjesto uskog "telefonskog" prikaza. Da biste to riješili, morat ćete uključiti sljedeći CSS i JavaScript kako biste zaobišli pogrešku .

@-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 više informacija i smjernice za korištenje pročitajte Windows Phone 8 i Device-Width .

Kao napomenu, ovo uključujemo u svu Bootstrapovu dokumentaciju i primjere kao demonstraciju.

Safari postotak zaokruživanja

Motor za renderiranje verzija Safarija prije v7.1 za OS X i Safarija za iOS v8.0 imao je problema s brojem decimalnih mjesta korištenih u našim .col-*-1klasama mreže. Dakle, ako imate 12 pojedinačnih stupaca rešetke, primijetili biste da su bili manji u usporedbi s drugim redovima stupaca. Osim nadogradnje Safarija/iOS-a, imate nekoliko opcija za zaobilazna rješenja:

• Dodajte .pull-rightsvom zadnjem stupcu rešetke da biste dobili oštro desno poravnanje
• Podesite svoje postotke ručno kako biste dobili savršeno zaokruživanje za Safari (teže od prve opcije)

Modali, navigacijske trake i virtualne tipkovnice

Prelijevanje i pomicanje

Podrška za overflow: hiddenon <body>element prilično je ograničena u iOS-u i Androidu. U tu svrhu, kada se pomaknete preko vrha ili dna modala u bilo kojem od preglednika tih uređaja, <body>sadržaj će se početi pomicati. Pogledajte Chrome bug #175502 (ispravljen u Chrome v40) i WebKit bug #153852 .

iOS tekstualna polja i pomicanje

Od iOS-a 9.3, dok je modal otvoren, ako je početni dodir geste pomicanja unutar granice teksta <input>ili <textarea>, <body>sadržaj ispod modala će se pomicati umjesto samog modala. Pogledajte WebKit bug #153856 .

Virtualne tipkovnice

Također imajte na umu da ako koristite fiksnu navigacijsku traku ili unose unutar modala, iOS ima grešku u renderiranju koja ne ažurira položaj fiksnih elemenata kada se aktivira virtualna tipkovnica. Nekoliko rješenja za to uključuje pretvaranje vaših elemenata u position: absoluteili pozivanje mjerača vremena u fokusu kako biste pokušali ručno ispraviti pozicioniranje. Time se ne bavi Bootstrap, pa je na vama da odlučite koje je rješenje najbolje za vašu aplikaciju.

Padajući izbornik navigacijske trake

Element .dropdown-backdropse ne koristi na iOS-u u navigaciji zbog složenosti z-indeksiranja. Stoga, da biste zatvorili padajuće izbornike u navigacijskim trakama, morate izravno kliknuti element padajućeg izbornika (ili bilo koji drugi element koji će aktivirati događaj klika u iOS -u ).

Zumiranje preglednika

Zumiranje stranice neizbježno predstavlja artefakte renderiranja u nekim komponentama, kako u Bootstrapu tako i na ostatku weba. Ovisno o problemu, možda ćemo ga moći riješiti (prvo pretražite, a zatim otvorite problem ako je potrebno). Međutim, skloni smo ih ignorirati jer često nemaju izravno rješenje osim hakiranih rješenja.

Ljepljivo :hover/ :focusna mobitelu

Iako stvarno lebdenje nije moguće na većini zaslona osjetljivih na dodir, većina mobilnih preglednika emulira podršku za lebdenje i čini ga :hover"ljepljivim". Drugim riječima, :hoverstilovi se počinju primjenjivati ​​nakon dodirivanja elementa i prestaju se primjenjivati ​​tek nakon što korisnik dodirne neki drugi element. To može uzrokovati nepoželjno "zaglavljivanje" stanja Bootstrapa :hoverna takvim preglednicima. Neki mobilni preglednici također čine :focusslično ljepljivim. Trenutačno ne postoji jednostavno rješenje za te probleme osim potpunog uklanjanja takvih stilova.

Ispis

Čak iu nekim modernim preglednicima ispis može biti neobičan.

Konkretno, od Chrome v32 i bez obzira na postavke margina, Chrome koristi širinu okvira za prikaz znatno užu od fizičke veličine papira prilikom rješavanja medijskih upita tijekom ispisa web stranice. To može rezultirati neočekivanom aktivacijom Bootstrapove ekstra male rešetke prilikom ispisa. Pogledajte problem #12078 i Chrome bug #273306 za neke pojedinosti. Predložena rješenja:

• Prihvatite izuzetno malu rešetku i pobrinite se da vaša stranica ispod nje izgleda prihvatljivo.
• Prilagodite vrijednosti @screen-*varijabli Less tako da se vaš papir za pisač smatra većim od ekstra malog.
• Dodajte prilagođene medijske upite za promjenu prijelomnih točaka veličine mreže samo za ispisne medije.

Također, od Safarija v8.0, .containers fiksne širine može uzrokovati da Safari koristi neuobičajeno malu veličinu slova prilikom ispisa. Pogledajte #14868 i WebKit bug #138192 za više detalja. Jedno potencijalno rješenje za to je dodavanje sljedećeg CSS-a:

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

Android dionički preglednik

Izvan kutije, Android 4.1 (a čak i neka novija izdanja očito) isporučuju se s aplikacijom Browser kao zadanim web preglednikom po izboru (za razliku od Chromea). Nažalost, aplikacija Preglednik općenito ima puno grešaka i nedosljednosti s CSS-om.

Odaberite izbornike

Na <select>elementima, Android dionički preglednik neće prikazati bočne kontrole ako postoji border-radiusi/ili borderprimijenjeno. (Pogledajte ovo StackOverflow pitanje za detalje.) Upotrijebite isječak koda u nastavku da biste uklonili CSS koji vrijeđa i prikazali <select>kao nestilizirani element u Androidovom pregledniku. Njuškanje korisničkog agenta izbjegava smetnje s preglednicima Chrome, Safari i 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 li vidjeti primjer? Pogledajte ovaj demo JS Bin.

Validatori

Kako bi pružio najbolje moguće iskustvo starim preglednicima s greškama, Bootstrap koristi hakove CSS preglednika na nekoliko mjesta kako bi ciljao poseban CSS na određene verzije preglednika kako bi zaobišao pogreške u samim preglednicima. Ovi hakovi razumljivo uzrokuju da se CSS validatori žale da su nevažeći. Na nekoliko mjesta također koristimo najnovije CSS značajke koje još nisu u potpunosti standardizirane, ali se koriste isključivo za progresivno poboljšanje.

Ova upozorenja za provjeru valjanosti nisu važna u praksi budući da nehakirani dio našeg CSS-a u potpunosti provjerava valjanost i hakirani dijelovi ne ometaju ispravno funkcioniranje nehakiranog dijela, stoga namjerno ignoriramo ova posebna upozorenja.

Naši HTML dokumenti također imaju neka trivijalna i beznačajna upozorenja o provjeri valjanosti HTML-a zbog našeg uključivanja rješenja za određenu pogrešku Firefoxa .

Podrška treće strane

Iako službeno ne podržavamo dodatke ili dodatke trećih strana, nudimo neke korisne savjete koji će vam pomoći u izbjegavanju potencijalnih problema u vašim projektima.

Dimenzioniranje kutije

Neki softveri treće strane, uključujući Google karte i Google Custom Search Engine, sukobljavaju se s Bootstrapom zbog * { box-sizing: border-box; }, pravila prema kojem paddingne utječe na konačnu izračunatu širinu elementa. Saznajte više o modelu okvira i dimenzioniranju na CSS Tricks .

Ovisno o kontekstu, možete nadjačati prema potrebi (Opcija 1) ili poništiti veličinu okvira za cijele regije (Opcija 2).

/* 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();
}

Pristupačnost

Bootstrap slijedi uobičajene web standarde i—uz minimalan dodatni napor—može se koristiti za stvaranje stranica koje su dostupne onima koji koriste AT .

Preskoči navigaciju

Ako vaša navigacija sadrži mnogo veza i dolazi prije glavnog sadržaja u DOM-u, dodajte Skip to main contentvezu prije navigacije (za jednostavno objašnjenje pogledajte ovaj članak projekta A11Y o vezama za preskakanje navigacije ). Korištenje .sr-onlyklase vizualno će sakriti vezu za preskakanje, a .sr-only-focusableklasa će osigurati da veza postane vidljiva nakon fokusiranja (za korisnike tipkovnice koji vide).

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

Ugniježđeni naslovi

Prilikom ugniježđivanja naslova ( <h1>- <h6>), zaglavlje vašeg primarnog dokumenta treba biti <h1>. Sljedeći naslovi trebali bi se koristiti logično <h2>- <h6>tako da čitači zaslona mogu sastaviti tablicu sadržaja za vaše stranice.

Saznajte više na HTML CodeSniffer i AccessAbility Penn Statea .

Kontrast boja

Trenutačno su neke od zadanih kombinacija boja dostupne u Bootstrapu (kao što su različite stilizirane klase gumba, neke od boja za isticanje koda koje se koriste za osnovne blokove koda , .bg-primary kontekstualna pomoćna klasa pozadine i zadana boja veze kada se koristi na bijeloj pozadini) imaju nizak omjer kontrasta (ispod preporučenog omjera od 4,5:1 ). To može uzrokovati probleme slabovidnim korisnicima ili onima koji su slijepi za boje. Ove zadane boje možda će trebati izmijeniti kako bi se povećao njihov kontrast i čitljivost.

Dodatna sredstva

• "HTML Codesniffer" bookmarklet za identificiranje problema s pristupačnošću
• Chromeovo proširenje alata za razvojne programere pristupačnosti
• Analizator kontrasta boja
• Projekt A11Y
• MDN dokumentacija o pristupačnosti

Često postavljana pitanja o licenci

Bootstrap je objavljen pod MIT licencom i zaštićen je autorskim pravima 2019 Twitter. Svedeno na manje komade, može se opisati sljedećim uvjetima.

Zahtijeva da:

• Zadržite licencu i obavijest o autorskom pravu uključenom u Bootstrapove CSS i JavaScript datoteke kada ih koristite u svojim radovima

Omogućuje vam da:

• Besplatno preuzmite i koristite Bootstrap, u cijelosti ili djelomično, za osobne, privatne, unutarnje tvrtke ili komercijalne svrhe
• Koristite Bootstrap u paketima ili distribucijama koje izradite
• Izmijenite izvorni kod
• Dodijelite podlicencu za izmjenu i distribuciju Bootstrapa trećim stranama koje nisu uključene u licencu

Zabranjuje vam da:

• Držite autore i vlasnike licence odgovornima za štetu jer se Bootstrap isporučuje bez jamstva
• Kreatore ili nositelje autorskih prava Bootstrapa smatrati odgovornima
• Redistribuirati bilo koji dio Bootstrapa bez odgovarajuće atribucije
• Koristite sve oznake u vlasništvu Twittera na bilo koji način koji bi mogao navesti ili implicirati da Twitter podržava vašu distribuciju
• Koristite sve oznake u vlasništvu Twittera na bilo koji način koji bi mogao navesti ili implicirati da ste vi kreirali dotični Twitter softver

Ne zahtijeva od vas sljedeće:

• Uključite izvor samog Bootstrapa ili bilo koje izmjene koje ste možda napravili na njemu u bilo koju redistribuciju koju možete sastaviti a koja ga uključuje
• Pošaljite promjene koje napravite u Bootstrapu natrag u Bootstrap projekt (iako se takve povratne informacije potiču)

Puna Bootstrap licenca nalazi se u repozitoriju projekta za više informacija.

Prijevodi

Članovi zajednice preveli su Bootstrapovu dokumentaciju na razne jezike. Nijedan nije službeno podržan i možda neće uvijek biti ažuran.

• Bootstrap 中文文档 (kineski)
• Bootstrap på Dansk (danski)
• Bootstrap en Français (francuski)
• Bootstrap auf Deutsch (njemački)
• Bootstrap in Italiano (talijanski)
• Bootstrap 한국어 (korejski)
• Bootstrap em Português do Brasil (brazilski portugalski)
• Bootstrap po-russki (ruski)
• Bootstrap en Español (španjolski)
• Türkçe Bootstrap (turski)
• Bootstrap ukraí̈nsʹkoû (ukrajinski)
• Bootstrap bằng tiếng Việt (vijetnamski)

Ne pomažemo organizirati niti ugošćujemo prijevode, samo se povezujemo s njima.

Jeste li završili novi ili bolji prijevod? Otvorite zahtjev za povlačenje da biste ga dodali na naš popis.