Najbolji vodiči za Bootstrap za responzivni web dizajn

Bootstrap je popularan front-end okvir za web razvoj. Sadrži unaprijed izrađene komponente i elemente dizajna za oblikovanje HTML sadržaja. Moderni preglednici kao što su Chrome, Firefox, Opera, Safari i Internet Explorer podržavaju Bootstrap.

Bootstrap uključuje prilagodljivi mrežni sustav za različite izglede. Izvrsno je polazište za izradu web stranice prilagođene mobilnim uređajima. Također uključuje neobaveznu JavaScript funkcionalnost poput sklopivog sadržaja, vrtuljaka i modaliteta.

Povijest verzija

Twitter je izvorno razvio Bootstrap framework kao interni alat. Objavili su ga kao projekt otvorenog koda u kolovozu 2011. godine.

Bootstrap 2 objavljen je u siječnju 2012. Jedna od primarnih značajki bilo je uvođenje mrežnog sustava s 12 stupca reakcije. Bootstrap 3 pojavio se u kolovozu 2013. godine, prebacivši se na ravni dizajn i pristup koji je bio prvi za mobilne uređaje. Bootstrap 4 dostupan je u beta verziji od kolovoza 2017., a sada uključuje Sass i Flexbox.

Bootstrap 4 razvijao se dvije godine prije nego što je objavio neke beta verzije tijekom 2017. godine, dok je prvo stabilno izdanje izašlo u siječnju 2018. Neke značajne promjene uključuju:

  • Premješteno iz Less u Sass;
  • Premješteno u Flexbox i poboljšani mrežni sustav;
  • Dodane kartice (zamjena bunara, sličica i ploča);
  • I mnogo više!

U vrijeme pisanja ovog članka, posljednje izdanje Bootstrapa je 4.1.3. Ako želite pratiti sve vijesti o najavama, slijedite ih ovdje.

Montaža

Dvije su glavne opcije za dodavanje Bootstrapa u vaš web projekt. Možete se povezati na javno dostupne izvore ili izravno preuzeti okvir.

Povezivanje s drugim izvorom

Možete dodati Bootstrap CSS koristeći element unutar vaše web stranice koji se odnosi na mrežu za isporuku sadržaja (CDN):

Dodavanje JavaScript elemenata Bootstrapa slično je s elementima koji se obično postavljaju na dno vaše '' oznake. Možda ćete prvo trebati uključiti neke ovisnosti. Obratite posebnu pozornost na navedeni redoslijed:

Napomena: Ovo su samo primjeri i mogu se promijeniti bez najave. Pogledajte CDN za trenutne poveznice koje trebate uključiti u svoj projekt.

Preuzmi / instaliraj

Izvorne datoteke Bootstrapa možete preuzeti i instalirati s Bower, Composer, Meteor ili npm. To omogućuje veću kontrolu i mogućnost uključivanja ili isključivanja modula po potrebi.

npm install bootstrap

gem 'bootstrap', '~> 4.1.3'

Napomena: Ovo su samo primjeri i mogu se promijeniti bez najave. Pogledajte najnovije poveznice na praznom web mjestu Bootstrap 'rel =' nofollow '>.

Mrežni sustav Bootstrap

Mrežni sustav prvi je mobilni flexbox sustav za brzu izradu izgleda svih oblika i veličina prikladnih na svim uređajima. Temelji se na rasporedu od 12 stupaca i ima više slojeva, po jedan za svaki raspon medijskih upita.

Bootstrap dolazi s unaprijed definiranim mrežnim klasama za vašu upotrebu u označavanju. Pogledajte više detalja i primjera na //getbootstrap.com/docs/4.1/layout/grid/

Značajke Boostrap

Više informacija:

Bootstrap ima temeljitu dokumentaciju s mnogo primjera i HTML predložak za početak (ovaj predložak sadrži samo skriptu; ne sadrži postavku mrežnog sustava ako je to ono što tražite).

Osim toga, možete pronaći i besplatne i plaćene teme koje se nadograđuju na okvir Bootstrap kako bi pružili prilagođeniji i elegantniji izgled.

Resursi za pokretanje:

Službeni blog Bootstrapa

Inspiracija za Bootstrap stranicu

Izlog web stranica izrađenih pomoću Bootstrapa

HTML linter za projekte koji koriste Bootstrap

Elementi dizajna i isječci koda za Bootstrap

Kôd, tema i dodaci za Bootstrap

Početak rada s vodičem za Bootstrap

Korištenje Bootstrapa olakšava dizajn web stranice koja u potpunosti reagira i predstavlja okvir vrijedan učenja.

Što je responzivna web stranica?

Odzivno web mjesto je web mjesto koje mijenja veličinu i preuređuje te stavke na stranici, ovisno o veličini vašeg preglednika. Ako prilagodite web stranicu, ako promijenite veličinu preglednika, možete vidjeti da se promjene događaju u stvarnom vremenu. Bootstrap čini vaše web mjesto prilagodljivim za vas.

Kako dodati Bootstrap na svoju stranicu

Dodavanje bootstrapa na stranicu brz je postupak, samo dodajte sljedeće oznakama u kodu.

Također ćete morati dodati sljedeće između bodyoznaka u kodu. S bootstrapom ćete koristiti oznake. Kada koristite mnoge značajke Bootstrapa, svaka će oznaka primijeniti svoj vlastiti jedinstveni skup klasa koji omogućuje oznaci da izvršava svoj zadatak. Ostali dijelovi ovog vodiča za Bootstrap pokazat će još primjera kako Bootstrap koristi oznake. ( oznake nisu ekskluzivne za Bootstrap, ali ih Bootstrap koristi.).

Ispod je kôd koji će dodati bodyoznakama u vašem kodu da biste započeli s radom. Imajte na umu da će dok ovo stvara spremnik stranica i dalje ostati prazna dok u spremnik ne dodate sadržaj.

Congratulations!

Bootstrap is now working on this page

Predlošci

Predlošci su unaprijed izrađeni alati koji predanje nove web stranice čine laganim. Ako imate opću ideju o željenom izgledu ili ako želite pregledavati biblioteku uobičajenih predložaka izgleda za ideje, Bootstrap predlošci oduzimaju velik dio zamornosti i frustracija iz početnog postupka izrade. Ova vam pomoć pomaže da se usredotočite na preciznije detalje projekta, umjesto da se pitate zašto CSS ne surađuje.

Početak rada

Poveznice predloška

Navigacijska traka

Okvir Bootstrap pruža vam navigacijske trake poziva. Ukratko, navigacijska traka (koja se naziva i navbars) je zaglavlje na vrhu stranice za prikaz navigacijskih podataka.

Kako koristiti

Da biste koristili navigacijske trake Bootstrap, dodajte element na vrh unutar elementa vaše web stranice. Postoje različiti stilovi koje možete dodati da biste prilagodili prikaz svojih navigacijskih traka.

Primjer koda

Ovo je kôd potreban za izradu osnovne navigacijske trake.

 Site Name 
      
  • Home
  • Page 1
  • Page 2
  • Page 3

Navbar stilovi

Bootstrap pruža skup klasa u okviru Bootstrap za oblikovanje vaših navigacijskih traka. Ti su razredi sljedeći:

Dodavanje padajućih izbornika na navigacijsku traku

U navigacijsku traku možete uključiti padajući izbornik. Ova značajka zahtijeva da uključite Javascript datoteku Bootstrapa kako bi mogla raditi.

  • Drop down
    • Item 1
    • Item 2
    • Item 3
  • Dodavanje gumba na navigacijsku traku

    Možete dodati gumbe na navigacijskoj traci. Postojeće klase gumba navbar-btnza pokretanje sustava rade, ali morat ćete uključiti klasu na kraj popisa klasa.

    Button

    Dodavanje obrazaca na navigacijsku traku

    Obrasce možete dodati i na navigacijsku traku. To se može koristiti za zadatke poput polja za pretraživanje, polja za brzu prijavu itd.

     Search 

    Poravnavanje elemenata udesno na navigacijskoj traci

    U nekim ćete slučajevima možda htjeti poravnati elemente na navigacijskoj traci udesno (na primjer gumb za prijavu ili prijavu.). Da biste to učinili, morat ćete upotrijebiti navbar-rightrazred.

     Site Name 
          
    • Home
    • Page 1
    • Page 2
    • Page 3
    • Action Link #1
    • Action Link #2

    Prikazivanje navbar-a neovisno od pomicanja

    U nekim ćete slučajevima možda htjeti zadržati navigacijsku traku pri vrhu ili dnu zaslona, ​​bez obzira na pomicanje. Elementu ćete morati dodati navbar-fixed-topili navbar-fixed-bottomklasu ili .

     Site Name 
          
    • Home
    • Page 1
    • Page 2
    • Page 3

    Sažimanje navbar-a

    Na malom zaslonu (poput telefona ili tableta) navigacijska traka zauzet će previše prostora. Srećom postoji mogućnost sažimanja navbar-a. To možete postići pomoću sljedećeg primjera.

     Site Name 
          
    • Home
    • Page 1
    • Page 2
    • Page 3

    Primjeri Navbara