Labākās Bootstrap apmācības atsaucīgam tīmekļa dizainam

Bootstrap ir populāra tīmekļa izstrādes priekšējā daļa. Tas satur iepriekš izveidotus komponentus un dizaina elementus HTML satura veidošanai. Mūsdienu pārlūkprogrammas, piemēram, Chrome, Firefox, Opera, Safari un Internet Explorer, atbalsta Bootstrap.

Bootstrap ietver atsaucīgu režģa sistēmu dažādiem izkārtojumiem. Tas ir lielisks sākumpunkts, lai izveidotu mobilajām ierīcēm draudzīgu vietni. Tas ietver arī papildu JavaScript funkcionalitāti, piemēram, saliekamo saturu, karuseļus un modālus.

Versiju vēsture

Twitter sākotnēji izstrādāja Bootstrap ietvaru kā iekšēju rīku. Viņi to izlaida kā atvērtā koda projektu 2011. gada augustā.

Bootstrap 2 tika izlaists 2012. gada janvārī. Viena no galvenajām iezīmēm bija 12 kolonnu reaģējošās režģu sistēmas ieviešana. Bootstrap 3 parādījās 2013. gada augustā, pārejot uz plakanu dizainu un pieeju mobilajām ierīcēm. Bootstrap 4 ir pieejams beta versijā no 2017. gada augusta, un tagad tajā ietilpst Sass un Flexbox.

Bootstrap 4 tika izstrādāts divus gadus, pirms 2017. gadā tika izlaistas dažas beta versijas, savukārt pirmā stabilā versija tika izlaista 2018. gada janvārī. Dažas ievērojamas izmaiņas ietver:

  • Pārvietots no Less uz Sass;
  • Pārvietots uz Flexbox un uzlabotu režģa sistēmu;
  • Pievienotās kartes (aizstājot akas, sīktēlus un paneļus);
  • Un daudz vairāk!

Raksta tapšanas laikā Bootstrap jaunākais izlaidums ir 4.1.3. Ja vēlaties sekot līdzi jaunumiem par paziņojumiem, sekojiet tiem šeit.

Uzstādīšana

Bootstrap pievienošanai savam tīmekļa projektam ir divas galvenās iespējas. Varat izveidot saiti uz publiski pieejamiem avotiem vai tieši lejupielādēt sistēmu.

Saistīšana ar citu avotu

Jūs varat pievienot Sākumpalaišanas CSS, izmantojot elementu iekšpusē jūsu mājas lapā, ka atsauces Content Delivery Network (CDN):

Bootstrap JavaScript elementu pievienošana ir līdzīga elementiem, kas parasti tiek ievietoti taga apakšā. Iespējams, vispirms jums būs jāiekļauj dažas atkarības. Pievērsiet īpašu uzmanību norādītajam pasūtījumam:

Piezīme. Šie ir tikai piemēri, un tie var mainīties bez iepriekšēja brīdinājuma. Lūdzu, skatiet CDN, lai uzzinātu pašreizējās saites, kuras iekļaut jūsu projektā.

Lejupielādēt / instalēt

Bootstrap avota failus varat lejupielādēt un instalēt ar Bower, Composer, Meteor vai npm. Tas ļauj labāk kontrolēt un iespēju pēc nepieciešamības iekļaut vai izslēgt moduļus.

npm install bootstrap

gem 'bootstrap', '~> 4.1.3'

Piezīme. Šie ir tikai piemēri, un tie var mainīties bez iepriekšēja brīdinājuma. Lūdzu, skatiet tukšāko 'rel =' nofollow '> Bootstrap vietni, lai iegūtu visjaunākās saites.

Bootstrap režģa sistēma

Režģa sistēma ir elastīga, vispirms mobilā sistēma, lai ātri izveidotu visu formu un izmēru izkārtojumus, kas piemēroti visām ierīcēm. Tas ir balstīts uz 12 kolonnu izkārtojumu, un tam ir vairāki līmeņi, pa vienam katram multivides vaicājumu diapazonam.

Bootstrap nāk ar iepriekš definētām režģa klasēm, kuras varat izmantot marķējumā. Plašāku informāciju un piemērus skatiet vietnē //getbootstrap.com/docs/4.1/layout/grid/

Boostrap funkcijas

Vairāk informācijas:

Bootstrap ir detalizēta dokumentācija ar daudziem piemēriem un HTML veidne, lai sāktu darbu (šajā veidnē ir iekļauts tikai skripts; tajā nav tīkla režīma iestatījumu, ja to meklējat).

Turklāt jūs varat atrast gan bezmaksas, gan maksas tēmas, kas balstītas uz Bootstrap ietvaru, lai nodrošinātu pielāgotāku un stilīgāku izskatu.

Bootstrap resursi:

Bootstrap oficiālais emuārs

Bootstrap vietnes iedvesma

Vietņu vitrīna, kas izveidota, izmantojot Bootstrap

HTML linter projektiem, izmantojot Bootstrap

Bootstrap noformējuma elementi un koda fragmenti

Bootstrap kods, motīvs un pievienojumprogrammu resursi

Darba sākšana ar Bootstrap apmācību

Izmantojot Bootstrap, ir viegli izveidot pilnībā atsaucīgu vietni un tā ir sistēma, kuru vērts apgūt.

Kas ir atsaucīga vietne?

Reaģējoša vietne ir vietne, kas maina un pārkārto šos lapas elementus atkarībā no jūsu pārlūkprogrammas lieluma. Izmantojot atsaucīgu vietni, mainot pārlūkprogrammas lielumu, varat redzēt, ka izmaiņas notiek reāllaikā. Bootstrap padara jūsu vietni atsaucīgu jums.

Kā savai lapai pievienot Bootstrap

Bootstrap pievienošana savai lapai ir ātrs process, vienkārši pievienojiet šo kodu tagiem.

Starp bodykoda tagiem jums būs jāpievieno arī šāda informācija . Izmantojot bootstrap, jūs izmantosiet tagus. Izmantojot daudzas Bootstrap funkcijas, katram tagam tiks izmantots savs unikāls klašu kopums, kas tagam ļauj veikt savu uzdevumu. Citas šīs Bootstrap rokasgrāmatas sadaļas parādīs vairāk piemēru tam, kā Bootstrap izmanto tagus. ( tagi nav ekskluzīvi Bootstrap, tomēr Bootstrap tos izmanto.).

Zemāk ir kods, kas bodyjūsu koda tagiem tiktu pievienots, lai pabeigtu darba sākšanu. Paturiet prātā, ka, kamēr tas izveido konteineru, lapa joprojām būs tukša, līdz konteineram pievienosiet saturu.

Congratulations!

Bootstrap is now working on this page

Veidnes

Veidnes ir iepriekš uzbūvēti rīku komplekti, kas padara jaunu tīmekļa lapu vērpšanu par brīzi. Ja jums ir vispārēja ideja par vēlamo izkārtojumu vai vēlaties pārlūkot kopīgu ideju izkārtojuma veidņu bibliotēku, Bootstrap veidnes sākotnējā izveides procesā aizņem lielu daļu garlaicības un neapmierinātības. Šī palīdzība palīdz koncentrēties uz sīkākām projekta detaļām, nevis domāt, kāpēc CSS nesadarbojas.

Darba sākšana

Veidņu saites

Navigācijas josla

Bootstrap ietvars nodrošina funkciju zvanu navigācijas joslas. Īsāk sakot, navigācijas josla (saukta arī par navigācijas joslām) ir galvene lapas augšdaļā, lai parādītu navigācijas informāciju.

Kā izmantot

Lai izmantotu Bootstrap navigācijas joslas, tīmekļa lapas elementa augšpusē pievienojiet elementu. Lai pielāgotu navigācijas joslu displeju, varat pievienot dažādus stilus.

Kodu piemērs

Šis ir kods, kas nepieciešams, lai izveidotu pamata navigācijas joslu.

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

Navbar stili

Bootstrap nodrošina klašu komplektu Bootstrap ietvarā, lai veidotu jūsu navigācijas joslas. Šīs klases ir šādas:

Nolaižamo izvēlņu pievienošana navigācijas joslai

Navigācijas joslā varat iekļaut nolaižamo izvēlni. Lai šī funkcija darbotos, jums ir jāiekļauj Bootstrap javascript fails.

  • Drop down
    • Item 1
    • Item 2
    • Item 3
  • Pogu pievienošana navigācijas joslai

    Navigācijas joslā varat pievienot pogas. Esošās Bootstrap Button klases darbojas, taču jums klase navbar-btnjāiekļauj klases saraksta beigās.

    Button

    Veidlapu pievienošana navigācijas joslai

    Veidlapas var pievienot arī navigācijas joslai. To varētu izmantot tādiem uzdevumiem kā meklēšanas lauks, ātrās pieteikšanās lauks utt.

     Search 

    Elementu izlīdzināšana pa labi uz navigācijas joslas

    Dažos gadījumos navigācijas joslas elementus varētu vēlēties izlīdzināt pa labi (piemēram, pieteikšanās vai reģistrēšanās poga). Lai to izdarītu, jums būs jāizmanto navbar-rightklase.

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

    Navigācijas joslas parādīšana neatkarīgi no ritināšanas

    Dažos gadījumos navigācijas joslu ieteicams turēt ekrāna augšdaļā vai apakšā neatkarīgi no ritināšanas. Jums būs nepieciešams, lai pievienotu vai nu navbar-fixed-top, vai navbar-fixed-bottomklasi uz elementu.

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

    Sabrūk navigācijas josla

    Nelielā ekrānā (piemēram, tālrunī vai planšetdatorā) navigācijas josla aizņem pārāk daudz vietas. Par laimi pastāv iespēja sabrukt navigācijas joslu. To var paveikt, izmantojot šo piemēru.

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

    Navbar piemēri