At arbejde med websider kræver meget mere end bare at kende de sprog, vi skal bruge. Der er en række milepæle, som vi skal opfylde for at udvikle et produkt med et enestående resultat. En af disse milepæle er designet og arrangementet af de elementer, der vil blive vist på skærmen.
Lad os forestille os, at vi skal designe en webside, hvis vi starter forfra, skal vi tage højde for, hvordan menuen, tabellerne, knapperne skal se ud, så enkle ting som de ikoner, vi vil placere på nogle handlingsknapper osv.
Som vi kan se, er det hårdt arbejde, især hvis vi vil have det til at se optimalt ud og have en appel, skal vi også være detaljerede for at give stedet et personligt præg, hvad nu hvis vi ikke er designere? Dette er det store spørgsmål, der er udviklere, der har et blinde øje, når det kommer til god smag og design, og denne type profiler er hæmmet for at få kvalitetsweboptrædener. Eller hvad hvis vi har god smag, men lidt tid til at designe?
For at løse disse to store krav har vi Bootstrap hvilket ikke er mere end a CSS ramme det giver os mulighed for at få det grundlæggende aspekt af vores side på én gang uden at skulle lide med designet, men bortset fra det hjælper det os også med grundlæggende effekter og en meget speciel måde at strukturere det indhold, vi skal præsentere.
Bootstrap fordeleDet ved vi allerede Bootstrap Det er en CSS ramme og det hjælper os med at etablere de grundlæggende aspekter for vores websted, men ud over at det har visse fordele med hensyn til dets brug, vil vi se nogle af de positive ting, det bringer os nedenfor. Bootstrap:
1. GenbrugMed Bootstrap Vi har mange komponenter som standard, så vi kan bruge dem uden ændringer i forskellige dele af vores websted og dermed reducere tiden og mængden af kode, vi bruger. Dette favoriserer også den modulære udvikling af vores applikationer.
2. KonsistensTakket være det faktum, at vi har mange komponenter fremstillet på en generisk måde, er koden konsekvent, det vil sige, den håndterer meget lignende strukturer, så når vi læser den eller vedligeholder applikationen, ved vi allerede, hvordan den fungerer meget enklere.
3. Fleksibelt designMobildesign er meget vigtigt og Bootstrap tager det i betragtning fra begyndelsen, har vi den fleksibilitet, at vores websted automatisk tilpasser sig forskellige opløsninger og skærmlayouter, hvilket sparer os for en masse arbejde fra at skulle designe mobilvisninger fra bunden.
4. FællesskabEt andet aspekt, der skal tages i betragtning, er dokumentationen, når vi bruger en tredjepartsramme er det meget vigtigt at have, hvor vi skal henvende os, når vi er i tvivl og i denne forstand Bootstrap Det kan ikke sammenlignes, da vi kan få næsten ethvert svar på vores tvivl uden store anstrengelser.
Ulemper ved BootstrapSelvom næsten alt er godt, skal vi også tale om ulemperne eller ikke så gode aspekter, som vi står over for, når vi bruger dette CSS rammeLad os se nogle af dens svagheder nedenfor.
1. Lidt originalHvis vi ikke tager lidt tid at lave vores design, kan vi forblive så lidt originale, hvis vi bruger det Bootstrap uden mere, selvom denne ramme er designet til det, på grund af den store adoption den har haft, er vi nødt til at arbejde lidt mere for ikke at ligne kopien af kopien.
2. LæringskurveSom alt andet skal vi igennem en læringskurve, hvis vi vil få mest muligt ud af det, problemet er, at hvis vi vil gå fra det grundlæggende aspekt til det avancerede, er chokket en smule stærkt.
3. Dårlig kompatibilitet mellem versionerNår der er en versionændring, mister den tidligere version meget gyldighed, og hvis vi vil opdatere, vil det koste os, især hvis vi har foretaget vigtige ændringer, så vores websted ser anderledes ud.
InstallationNår vi ved, hvad det er Bootstrap, og fordele og ulemper ved at bruge det i vores projekter, skal vi komme til den praktiske del af selvstudiet, nu skal vi lære, hvor vi kan få denne ramme fra, og hvordan vi kan inkludere den i vores projekt.
Få BootstrapDen første ting, vi skal gøre, er at skaffe de nødvendige filer til at inkludere Bootstrap i vores projekt, derfor skal vi besøge deres websted getbootstrap.com og downloade de nødvendige filer eller alternativt bruge en CDN for at undgå at være vært for filerne på vores server og reducere brugen af vores båndbredde.
Uanset valgmuligheden skal vi være på en side, der ligner den følgende, hvis vi klikker på den første download -knap, når vi besøger rammesiden:
FORSTØRRE
For at lette arbejdet, lad os antage, at vi har downloadet projektet, det kommer i en komprimeret fil, som vi skal udtrække på et sted, som vi kan bruge, og det burde være noget, der ligner følgende:
Som vi kan se, skal der inden for vores projekt være tre mapper, en til CSS, en anden for de kilder, der bruges, og endelig en for JS nødvendig. Med dette har vi allerede til rådighed Bootstrap, hvilket ikke er andet end at kopiere projektet til vores ressourcer -mappe.
Kom i gang med BootstrapDa vi har alle ressourcerne i vores besiddelse, skal vi inkludere det i vores design, for dette kan vi oprette en fil HTML og der foretager de nødvendige inklusioner, kan vi se dette mere detaljeret i følgende kode:
Installation af BootstrapSom vi kan se, var det eneste, vi gjorde, at inkludere tre filer, specifikt to .css og a .js, det er det, vi har brug for for at begynde at bruge hele strukturen. Hvis vi nu åbner vores fil med en browser, vil vi se, hvordan bogstavernes skrifttype er anderledes end det, vi normalt ville se med en etiket H1:
Bootstrap -gitteretFor at opnå organiseringen af vores designs, Bootstrap bruge et gitter eller gitter, dette er sammensat af 12 kolonner, så alt hvad vi ser på vores skærm skal organiseres på denne måde, med dette opnås det, at siden kan struktureres på en sådan måde, at vi kan gøre brug af de værktøjer, der tilbydes os på en meget gennemsigtig måde.
Selvfølgelig er det en tilpasningsproces, men det vigtige er, at vi kan lave kolonner, der grupperer flere, samt når vi arbejder med tabellerne over HTML at vi kan lave kolonner med flere joins med span -egenskaben. For at oprette et websted, der bruger denne struktur, skal vi kun have følgende:
En div med klassen beholder, inde i dette en div med klassen række, og til sidst inde i en eller flere div med klassen kål, lad os se i den følgende kode et eksempel på en side med 3 kolonner, for denne skal hver kolonne gruppere 4 for at tilføje i alt 12, hvilket er, hvad vi har forklaret, er standardværdien på Bootstrap.
Kolonner i BootstrapDette resulterer i en side, hvor de tre interne divs er i en enkelt række opdelt i tre lige store kolonner, som vi kan se på følgende billede:Eksempel på, hvordan man bruger kolonner i bootstrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam letter mit in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Heltal aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam just ex, request for efficitur vel, placerat sit amet purus. Cras id semper felis. Vær ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Heltal eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam letter mit in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Heltal aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam just ex, request for efficitur vel, placerat sit amet purus. Cras id semper felis. Vær ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Heltal eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam letter mit in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Heltal aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam just ex, request for efficitur vel, placerat sit amet purus. Cras id semper felis. Vær ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Heltal eu eleifend mauris.
FORSTØRRE
Denne struktur, på trods af at den ser lidt firkantet ud, er meget fleksibel, da vi kun skal lave et slags spil med containerne og deres søjler for at opnå de resultater, vi ønsker. Med dette afslutter vi denne vejledning, vi har effektivt taget vores første skridt med Bootstrap og nu kan vi begynde at drage fordel af dens fordele mere direkte på vores projekter eller webapplikationer.
