Skinuti

Bootstrap (trenutno v3.4.1) ima nekoliko jednostavnih načina da brzo započnete, od kojih je svaki privlačan za različit nivo vještine i slučaj upotrebe. Pročitajte da vidite šta odgovara vašim posebnim potrebama.

jsDelivr

Ljudi iz jsDelivr-a ljubazno pružaju CDN podršku za Bootstrap-ov 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 Bootstrapom Less, CSS, JavaScript i fontovima koristeći Bower :

bower install bootstrap

Instalirajte sa npm

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

npm install bootstrap@3

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

Bootstrap package.jsonsadrži neke dodatne metapodatke pod sljedećim tipkama:

• less- putanja do glavne izvorne datoteke Bootstrapa Less
• style- put do Bootstrap-ovog neminimiziranog CSS-a koji je unaprijed kompajliran korištenjem zadanih postavki (bez prilagođavanja)

Instalirajte pomoću Composer-a

Također možete instalirati i upravljati Bootstrapom Less, CSS, JavaScript i fontovima koristeći Composer :

composer require twbs/bootstrap

Potreban je automatski prefiks za Less/Sass

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

Šta je uključeno

Bootstrap se može preuzeti u dva oblika, unutar kojih ćete pronaći sljedeće direktorije i datoteke, logički grupisajući uobičajene resurse i pružajući kompajlirane i minimizirane varijacije.

Prekompilirani Bootstrap

Nakon preuzimanja, raspakirajte komprimirani folder da vidite strukturu (prevedenog) 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 kompajlirane datoteke za brzu upotrebu u gotovo svakom web projektu. Pružamo kompajlirane CSS i JS ( bootstrap.*), kao i kompajlirane i minimizirane CSS i JS ( bootstrap.min.*). CSS izvorne mape ( bootstrap.*.map) dostupne su za korištenje sa programskim alatima određenih pretraživača. Fontovi iz Glyphicons su uključeni, kao i opciona Bootstrap tema.

Bootstrap izvorni kod

Preuzimanje izvornog koda za Bootstrap uključuje unaprijed kompajlirane CSS, JavaScript i fontove, zajedno sa izvornim Lessom, JavaScript-om i dokumentacijom. Konkretnije, uključuje sljedeće i više:

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

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

Prevođenje CSS-a i JavaScript-a

Bootstrap koristi Grunt za svoj sistem izgradnje, sa pogodnim metodama za rad sa okvirom. Tako kompajliramo naš kod, pokrećemo testove i još mnogo toga.

Instaliranje Grunta

Da biste instalirali Grunt, prvo morate preuzeti i instalirati node.js (koji uključuje npm). npm je skraćenica za module upakovane u čvorovima i način je upravljanja razvojnim ovisnostima putem node.js.

1. Instalirajte grunt-cliglobalno sa npm install -g grunt-cli.
2. Idite do korijenskog /bootstrap/direktorija, a zatim pokrenite npm install. npm će pogledati package.jsondatoteku i automatski instalirati potrebne lokalne zavisnosti navedene tamo.

Kada završite, moći ćete da pokrenete različite Grunt komande koje ste dobili iz komandne linije.

Dostupne Grunt komande

grunt dist(Samo kompajlirajte CSS i JavaScript)

Regenerira /dist/direktorij sa kompajliranim i minimiziranim CSS i JavaScript datotekama. Kao korisnik Bootstrapa, ovo je obično komanda koju želite.

grunt watch(Gledajte)

Gleda izvorne datoteke Less-a i automatski ih ponovo kompajlira u CSS kad god sačuvate promjenu.

grunt test(Pokreni testove)

Pokreće JSHint i pokreće QUnit testove u pravim pretraživačima zahvaljujući Karmi .

grunt docs(Izgradite i testirajte materijale dokumenata)

Gradi i testira CSS, JavaScript i druga sredstva koja se koriste kada se dokumentacija pokreće lokalno preko bundle exec jekyll serve.

grunt(Napravi apsolutno sve i pokreni testove)

Kompajlira i minimizira CSS i JavaScript, pravi veb lokaciju za dokumentaciju, pokreće HTML5 validator u odnosu na dokumente, regeneriše sredstva za prilagođavanje i još mnogo toga. Potreban je Jekyll . Obično je potrebno samo ako hakujete sam Bootstrap.

Rješavanje problema

Ako naiđete na probleme sa instaliranjem zavisnosti ili pokretanjem Grunt komandi, prvo obrišite /node_modules/direktorijum koji je generisao npm. Zatim, ponovite npm install.

Osnovni šablon

Počnite s ovim osnovnim HTML predloškom ili modificirajte ove primjere . Nadamo se da ćete prilagoditi naše predloške i primjere, prilagođavajući ih svojim potrebama.

Kopirajte HTML ispod da biste počeli raditi 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

Nadogradite osnovni predložak iznad s mnogim komponentama Bootstrapa. Preporučujemo vam da prilagodite i prilagodite Bootstrap kako bi odgovarao potrebama vašeg individualnog projekta.

Preuzmite izvorni kod za svaki primjer ispod preuzimanjem Bootstrap spremišta . Primjeri se mogu naći u docs/examples/imeniku.

Korištenje okvira

Početni šablon

Ništa osim osnova: kompajlirani CSS i JavaScript zajedno sa kontejnerom.

Bootstrap tema

Učitajte opcionalnu Bootstrap temu za vizuelno poboljšano iskustvo.

Mreže

Više primjera rasporeda mreže sa sva četiri nivoa, ugniježđenja i još mnogo toga.

Jumbotron

Izgradite oko jumbotrona pomoću navigacijske trake i nekih osnovnih stupaca mreže.

Uski jumbotron

Napravite prilagođeniju stranicu sužavanjem zadanog kontejnera i jumbotrona.

Navbari u akciji

Navbar

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

Statička gornja navigacijska traka

Super osnovni predložak sa statičnom gornjom navigacijskom trakom zajedno s nekim dodatnim sadržajem.

Fiksna navigaciona traka

Super osnovni predložak sa fiksnom gornjom navigacijskom trakom zajedno s nekim dodatnim sadržajem.

Prilagođene komponente

Cover

Predložak na jednoj stranici za izradu jednostavnih i lijepih početnih stranica.

Carousel

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

Blog

Jednostavan izgled bloga u dvije kolone s prilagođenom navigacijom, zaglavljem i tipom.

Dashboard

Osnovna struktura za administrativnu kontrolnu tablu sa fiksnom bočnom trakom i navigacionom trakom.

Stranica za prijavu

Prilagođeni izgled i dizajn obrasca za jednostavnu prijavu.

Justified nav

Kreirajte prilagođenu navigacijsku traku s opravdanim vezama. Glavu gore! Nije previše prilagođeno Safariju.

Lepljivo podnožje

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

Lepljivo podnožje sa navigacionom trakom

Pričvrstite podnožje na dno okvira za prikaz s fiksnom navigacijskom trakom na vrhu.

Eksperimenti

Bootstrap koji ne reaguje

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

Van platna

Napravite promenljivi navigacioni meni van platna za upotrebu sa Bootstrapom.

Alati

Bootlint

Bootlint je službeni Bootstrap alat za HTML linter . Automatski provjerava nekoliko uobičajenih HTML grešaka na web stranicama koje koriste Bootstrap na prilično "vanilin" način. Komponente/widgeti Vanilla Bootstrapa zahtijevaju da njihovi dijelovi DOM-a budu u skladu sa određenim strukturama. Bootlint provjerava da li instance Bootstrap komponenti imaju ispravno strukturiran HTML. Razmislite o dodavanju Bootlint-a u svoj Bootstrap lanac alata za web razvoj tako da nijedna od uobičajenih grešaka ne uspori razvoj vašeg projekta.

Zajednica

Budite u toku sa razvojem Bootstrapa i obratite se zajednici pomoću ovih korisnih resursa.

• Pročitajte i pretplatite se na službeni Bootstrap blog .
• Razgovarajte sa kolegama Bootstrapperima koristeći IRC na irc.freenode.netserveru, na ##bootstrap kanalu .
• Za pomoć pri korištenju Bootstrapa, pitajte na StackOverflow pomoću oznaketwitter-bootstrap-3 .
• Programeri bi trebali koristiti ključnu riječ bootstrapna paketima koji modificiraju ili dodaju funkcionalnost Bootstrapa prilikom distribucije putem npm- a ili sličnih mehanizama isporuke radi maksimalne vidljivosti.
• Pronađite inspirativne primjere ljudi koji grade s Bootstrapom na Bootstrap Expo -u .

Također možete pratiti @getbootstrap na Twitteru za najnovije tračeve i sjajne muzičke spotove.

Onemogućavanje odziva

Bootstrap automatski prilagođava vaše stranice različitim veličinama ekrana. Evo kako onemogućiti ovu funkciju da vaša stranica radi kao ovaj primjer koji ne reagira .

Koraci za onemogućavanje odziva stranice

1. Izostavite okvir za prikaz <meta>koji se spominje u CSS dokumentima
2. Zaobiđite widthon .containerza svaki sloj mreže sa jednom širinom, na primjer width: 970px !important;Budite sigurni da ovo dolazi nakon zadanog Bootstrap CSS-a. Opciono možete izbjeći !importants medijskim upitima ili nekim selektorom-fu.
3. Ako koristite navigacijske trake, uklonite sva ponašanja navigacijske trake koja se skuplja i širi.
4. Za rasporede mreže, koristite .col-xs-*klase pored ili umjesto srednjih/velikih. Ne brinite, izuzetno mala mreža uređaja prilagođava se na sve rezolucije.

I dalje će vam trebati Respond.js za IE8 (pošto su naši medijski upiti još uvijek tu i treba ih obraditi). Ovo onemogućava aspekte "mobilnog sajta" Bootstrapa.

Bootstrap predložak s onemogućenim odzivom

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

Pogledajte primjer koji ne reaguje

Podrška za pretraživače i uređaje

Bootstrap je napravljen da najbolje radi u najnovijim desktop i mobilnim pretraživačima, što znači da stariji pretraživači mogu prikazivati ​​drugačije stilizovane, iako potpuno funkcionalne, prikaze određenih komponenti.

Podržani pretraživači

Konkretno, podržavamo najnovije verzije sljedećih pretraživača i platformi.

Alternativni pretraživači koji koriste najnoviju verziju WebKit-a, Blink-a ili Gecko-a, bilo direktno ili preko API-ja za web prikaz platforme, nisu eksplicitno podržani. Međutim, Bootstrap bi (u većini slučajeva) trebao da se prikazuje i ispravno funkcioniše i u ovim pretraživačima. Konkretnije informacije o podršci date su u nastavku.

Mobilni uređaji

Uopšteno govoreći, Bootstrap podržava najnovije verzije zadanih pretraživača svake glavne platforme. Imajte na umu da proxy pretraživači (kao što su Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) nisu podržani.

Desktop pretraživači

Slično, podržane su najnovije verzije većine desktop pretraživača.

Na Windows -u podržavamo Internet Explorer 8-11 .

Za Firefox, pored najnovijeg normalnog stabilnog izdanja, podržavamo i najnoviju verziju Firefoxa s proširenom podrškom (ESR) .

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

Za listu nekih grešaka pretraživača sa kojima se Bootstrap mora boriti, pogledajte naš Zid grešaka pretraživača .

Internet Explorer 8 i 9

Internet Explorer 8 i 9 su takođe podržani, međutim, imajte na umu da neka CSS3 svojstva i HTML5 elementi nisu u potpunosti podržani od strane ovih pretraživača. Osim toga, Internet Explorer 8 zahtijeva korištenje Respond.js da omogući podršku za medijske upite.

Posetite Mogu li da koristim... za detalje o podršci pretraživača za CSS3 i HTML5 funkcije.

Internet Explorer 8 i Respond.js

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

Respond.js i CSS za više domena

Upotreba Respond.js-a sa CSS-om koji se nalazi na drugoj (pod)domeni (na primjer, na CDN-u) zahtijeva dodatno podešavanje. Pogledajte Respond.js dokumente za detalje.

Respond.js ifile://

Zbog sigurnosnih pravila pretraživača, Respond.js ne radi sa stranicama koje se pregledaju putem file://protokola (kao kada se otvara lokalni HTML fajl). Da biste testirali responzivne funkcije u IE8, pregledajte svoje stranice preko HTTP(S). Pogledajte Respond.js dokumente za detalje.

Respond.js i@import

Respond.js ne radi sa CSS-om na koji se upućuje preko @import. Konkretno, poznato je da neke Drupal konfiguracije koriste @import. Pogledajte Respond.js dokumente za detalje.

Internet Explorer 8 i veličina kutije

IE8 ne podržava u potpunosti box-sizing: border-box;u kombinaciji sa 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 sa @font-facekada se kombinuje sa :before. Bootstrap koristi tu kombinaciju sa svojim Glifikonima. Ako je stranica keširana i učitana bez prelaska miša preko prozora (tj. pritisnite dugme za osvježavanje ili učitajte nešto u iframe) tada se stranica prikazuje prije nego što se font učita. Prelazak pokazivača miša preko stranice (telo) će prikazati neke od ikona, a prelazak miša preko preostalih ikona će prikazati i one. Vidite problem #13863 za detalje.

IE kompatibilni načini

Bootstrap nije podržan u starim režimima kompatibilnosti sa Internet Explorerom. Da 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 režim dokumenta otvaranjem alata za otklanjanje grešaka: pritisnite F12i označite "Režim dokumenta".

Ova oznaka je uključena u svu Bootstrap 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 Windows 8 i Windows Phone 8

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

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

Međutim, ovo ne radi za uređaje koji koriste Windows Phone 8 verzije starije od ažuriranja 3 (aka GDR3) , jer uzrokuje da takvi uređaji prikazuju uglavnom prikaz radne površine umjesto uskog prikaza "telefona". Da biste ovo riješili, morat ćete uključiti sljedeće CSS i JavaScript da biste zaobišli greš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 uputstva za upotrebu pročitajte Windows Phone 8 i Device-Width .

Kao predodžbu, ovo uključujemo u svu Bootstrapovu dokumentaciju i primjere kao demonstraciju.

Safari postotno zaokruživanje

Mašina za renderiranje verzija Safarija prije v7.1 za OS X i Safari za iOS v8.0 imala je problema s brojem decimalnih mjesta korištenih u našim .col-*-1grid klasama. Dakle, ako imate 12 pojedinačnih kolona mreže, primijetili biste da su oni bili kratki u odnosu na druge redove kolona. Osim nadogradnje Safari/iOS-a, imate neke opcije za zaobilaženje:

• Dodajte .pull-rightu svoju posljednju kolonu mreže da dobijete poravnanje tvrdo udesno
• Podesite svoje procente ručno kako biste dobili savršeno zaokruživanje za Safari (teže od prve opcije)

Modali, navigacijske trake i virtuelne tastature

Prelivanje i pomicanje

Podrška za overflow: hiddenelement <body>je prilično ograničena u iOS-u i Androidu. U tu svrhu, kada skrolujete pored vrha ili dna modalnog u pretraživaču bilo kojeg od tih uređaja, <body>sadržaj će početi da se pomera. Pogledajte Chrome grešku #175502 (popravljeno u Chromeu v40) i WebKit grešku #153852 .

iOS tekstualna polja i pomicanje

Od iOS 9.3, dok je modal otvoren, ako je početni dodir geste pomicanja unutar granice tekstualnog <input>ili <textarea>, <body>sadržaj ispod modalnog će se pomicati umjesto samog modalnog. Pogledajte WebKit grešku #153856 .

Virtuelne tastature

Također, imajte na umu da ako koristite fiksnu navigacijsku traku ili koristite unose unutar modalnog, iOS ima grešku u renderiranju koja ne ažurira poziciju fiksnih elemenata kada se pokrene virtualna tastatura. Nekoliko zaobilaznih rješenja za ovo uključuje transformaciju vaših elemenata u position: absoluteili pozivanje tajmera u fokusu kako biste pokušali ručno ispraviti pozicioniranje. Bootstrap to ne rješava, tako da je na vama da odlučite koje je rješenje najbolje za vašu aplikaciju.

Padajući meni za Navbar

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

Zumiranje pretraživača

Zumiranje stranice neizbježno predstavlja artefakte renderiranja u nekim komponentama, kako u Bootstrapu, tako iu 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, mi smo skloni da ih ignorišemo jer često nemaju direktno rešenje osim hakovačkih rešenja.

Sticky :hover/ :focusna mobilnom

Iako pravo lebdenje nije moguće na većini ekrana osetljivih na dodir, većina mobilnih pretraživača oponaša podršku za lebdenje i čini ih :hover"lepljivim". Drugim riječima, :hoverstilovi se počinju primjenjivati ​​nakon dodirivanja elementa i prestaju primjenjivati ​​tek nakon što korisnik dodirne neki drugi element. Ovo može uzrokovati da se Bootstrapova :hoverstanja nepoželjno "zaglave" na takvim pretraživačima. Neki mobilni pretraživači takođe čine :focusslično ljepljivim. Trenutno ne postoji jednostavno rješenje za ove probleme osim potpunog uklanjanja takvih stilova.

Štampanje

Čak i u nekim modernim pretraživačima, štampanje može biti neobično.

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 kada rješava medijske upite dok ispisuje web stranicu. Ovo može dovesti do toga da se Bootstrap-ova ekstra mala mreža neočekivano aktivira prilikom štampanja. Pogledajte problem #12078 i Chrome grešku #273306 za neke detalje. Predložena rješenja:

• Prihvatite izuzetno malu mrežu i pobrinite se da vaša stranica ispod nje izgleda prihvatljivo.
• Prilagodite vrijednosti @screen-*varijabli Manje tako da se papir vašeg pisača smatra većim nego ekstra malim.
• Dodajte prilagođene medijske upite da promijenite granične tačke veličine mreže samo za medije za štampanje.

Također, od Safarija v8.0, fiksna širina .containers može uzrokovati da Safari koristi neobično malu veličinu fonta prilikom ispisa. Pogledajte #14868 i WebKit grešku #138192 za više detalja. Jedno moguće rješenje za ovo je dodavanje sljedećeg CSS-a:

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

Android pretraživač

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

Odaberite menije

Na <select>elementima, Android pretraživač neće prikazati bočne kontrole ako postoji border-radiusi/ili borderprimijenjeno. (Pogledajte ovo StackOverflow pitanje za detalje.) Koristite isječak koda ispod da biste uklonili uvredljivi CSS i <select>prikazali kao element bez stila na Android pretraživaču. Korisnički agent njuškanje izbjegava smetnje u 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 JS Bin demo.

Validatori

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

Ova upozorenja o validaciji nisu bitna u praksi jer dio našeg CSS-a koji nije hakovan u potpunosti potvrđuje valjanost, a dijelovi koji nisu hakovani ne ometaju pravilno funkcioniranje dijela koji nije hakiran, stoga namjerno ignorišemo ova posebna upozorenja.

Naši HTML dokumenti također imaju neka trivijalna i beznačajna upozorenja o validaciji HTML-a zbog toga što smo uključili zaobilazno rješenje za određenu Firefox grešku .

Podrška treće strane

Iako službeno ne podržavamo dodatke ili dodatke trećih strana, nudimo neke korisne savjete kako bismo izbjegli potencijalne probleme u vašim projektima.

Veličina kutije

Neki softver trećih strana, uključujući Google Maps i Google Custom Search Engine, sukobljavaju se s Bootstrapom zbog * { box-sizing: border-box; }, pravilo koje to čini da paddingne utječe na konačnu izračunatu širinu elementa. Saznajte više o modelu kutije i veličini na CSS Tricks .

U zavisnosti od konteksta, možete nadjačati po potrebi (opcija 1) ili resetovati veličinu kutije za čitave regione (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 prati uobičajene web standarde i – uz minimalan dodatni napor – može se koristiti za kreiranje web lokacija koje su dostupne onima koji koriste AT .

Preskoči navigaciju

Ako vaša navigacija sadrži mnogo veza i dolazi ispred glavnog sadržaja u DOM-u, dodajte Skip to main contentvezu prije navigacije (za jednostavno objašnjenje pogledajte ovaj članak projekta A11Y o preskakanju navigacijskih veza ). Korišćenje .sr-onlyklase će vizuelno sakriti vezu za preskakanje, a .sr-only-focusableklasa će osigurati da veza postane vidljiva kada se fokusira (za videće korisnike tastature).

<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žđenja naslova ( <h1>- <h6>), vaše primarno zaglavlje dokumenta treba biti <h1>. Naredni naslovi bi trebali logično koristiti <h2>- <h6>tako da čitači ekrana mogu sastaviti sadržaj za vaše stranice.

Saznajte više na HTML CodeSniffer i Penn State's AccessAbility .

Kontrast boja

Trenutno, neke od zadanih kombinacija boja dostupne u Bootstrapu (kao što su različite stilizirane klase dugmadi, 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 ). Ovo može uzrokovati probleme korisnicima sa slabim vidom ili koji su slijepi za boje. Ove zadane boje će možda morati biti izmijenjene kako bi se povećao njihov kontrast i čitljivost.

Dodatni resursi

• "HTML Codesniffer" bookmarklet za identifikaciju problema pristupačnosti
• Chromeovo proširenje alata za razvojne programere pristupačnosti
• Analizator kontrasta boja
• Projekat A11Y
• MDN dokumentacija o pristupačnosti

Česta pitanja o licenci

Bootstrap je objavljen pod MIT licencom i zaštićen je autorskim pravom Twitter-a 2019. Svedeno na manje komade, može se opisati sledećim uslovima.

Zahtijeva da:

• Ostavite licencu i obavijest o autorskim pravima uključene u Bootstrapove CSS i JavaScript datoteke kada ih koristite u svojim radovima

Omogućava vam da:

• Besplatno preuzmite i koristite Bootstrap, u cijelosti ili djelomično, za lične, privatne, interne ili komercijalne svrhe kompanije
• Koristite Bootstrap u paketima ili distribucijama koje kreirate
• Izmijenite izvorni kod
• Dajte podlicencu za modifikaciju i distribuciju Bootstrapa trećim stranama koje nisu uključene u licencu

Zabranjuje vam da:

• Držite autore i vlasnike licenci odgovornim za štetu jer se Bootstrap isporučuje bez garancije
• Držite odgovornim kreatore ili nosioce autorskih prava za Bootstrap
• Redistribuirajte bilo koji dio Bootstrapa bez odgovarajuće atribucije
• Koristite sve oznake u vlasništvu Twitter-a na bilo koji način koji može naznačiti ili implicirati da Twitter podržava vašu distribuciju
• Koristite sve oznake u vlasništvu Twitter-a na bilo koji način koji može naznačiti ili implicirati da ste vi kreirali dotični Twitter softver

Ne zahtijeva da:

• Uključite izvor samog Bootstrapa, ili bilo koje modifikacije koje ste možda napravili na njemu, u bilo koju redistribuciju koju možete sastaviti koja uključuje
• Pošaljite promjene koje napravite na Bootstrap-u nazad u Bootstrap projekat (iako se takve povratne informacije ohrabruju)

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

Prevodi

Članovi zajednice su preveli Bootstrapovu dokumentaciju na različite jezike. Nijedan nije zvanično podržan i možda nije uvijek ažuran.

• Bootstrap 中文文档 (kineski)
• Bootstrap na Dansk (danski)
• Bootstrap en Français (francuski)
• Bootstrap auf Deutsch (njemački)
• Bootstrap na talijanskom (italijanskom)
• Bootstrap 한국어 (korejski)
• Bootstrap em Português do Brasil (brazilski portugalski)
• Bootstrap po-russki (ruski)
• Bootstrap en Español (španski)
• Türkçe Bootstrap (turski)
• Bootstrap ukrajinski (ukrajinski)
• Bootstrap bằng tiếng Việt (vijetnamski)

Mi ne pomažemo u organizaciji ili hostingu prijevoda, mi samo povezujemo sa njima.

Završili ste novi ili bolji prijevod? Otvorite zahtjev za povlačenjem da ga dodate na našu listu.