Bootstrap-funktioner

I denne anden artikel i serien lad os beskæftige os med Bootstrap-funktioner. Det er et komplet bibliotek af ressourcer til design af websteder og applikationer, herunder skabeloner og elementer til blandt andet formularer, skrifttyper og menuer.

I tidligere artikel vi argumenterede for, at der er tidspunkter, hvor indholdsadministratorer ikke er den bedste løsning, og det at skrive kode fra bunden til en hjemmeside er det rigtige alternativ. Det betyder dog ikke, at vi skal genopfinde hjulet. Brug af frameworks som Bootstrap reducerer designtiden markant og gør det nemmere at få resultater.

Bootstrap-funktioner

For at forstå funktionerne i Bootstrap skal vi forstå paradigmeskiftet i hjemmesidedesign.

da de dukkede op websteder skulle bare tilpasse sig de forskellige størrelser af skærme. Men med tiden er mobiltelefoner og tablets i stigende grad blevet det foretrukne adgangsmiddel for brugerne. udfordringen var at få siderne til at tilpasse sig de forskellige skærme, uden at brugeren skulle forstørre, formindske eller flytte indholdet for at kunne se det.

I princippet blev følgende fremgangsmåder vedtaget:

• Responsivt design: Designet er det samme, men tilpasses automatisk til skærmens størrelse. Denne tilgang har nogle problemer, såsom at brugeren kan blive tvunget til at zoome ind på visse dele af siden for at se dem.
• Progressiv fremgang: Det begynder med at designe webstedet til enheden med færre ressourcer (generelt mobiltelefonen, fordi den har en mindre skærm, en browser med mindre kompatibilitet for avancerede funktioner og ofte kræver brug af en dataplan for at oprette forbindelse). Når det er færdigt, baseret på dette design, tilføjes funktioner for at få versionen til tablets, notebooks og stationære computere.
• Gradvis nedbrydning: Det er den omvendte vej. Desktop-webstedet oprettes først, og funktioner fjernes, indtil en mobilvenlig version er opnået.

Da det altid er nemmere at tilføje end at fjerne, er den progressive fremgang den tendens, der formåede at sejre. B.ootstrap bruger f.eks. "mobile first"-tilgangen, det vil sige, at bunden af ​​designet altid er den version, der skal vises i den mindste skærmstørrelse, og så er de ændringer, der vil blive foretaget, når det overføres til de følgende størrelser.

En ekstra fordel ved at bruge Bootstrap har at gøre med, at Google prioriterer mobilvenlige sider i sine søgninger.

Et andet koncept, som vi skal tage højde for, er forskellen mellem frontend og backend design. Front-end design tager sig af alt, hvad brugeren ser, og alt, hvad de interagerer med. Backend grupperer, hvad der udføres på serveren. Et eksempel på førstnævnte er en webformular. Visning af en række muligheder vises som en rullemenu er frontend-design, at den valgte mulighed sendes med post eller tilføjes til en database er backend-design.

Bootstrap er en ramme, der kombinerer elementer af CSS-stil og Javascript-programmering for at styre gengivelsen og give interaktivitet til alle komponenterne på en side udviklet i HTML5.

Blandt de ting vi kan kontrollere med Bootstrap er:

• tilgængelighed: Komponenter såsom menuer eller dialogbokse er kompatible med skærmlæsere eller egnede til brug af personer med nedsat mobilitet.
• Knapper: Inklusive mål, stilarter, tilstande og gruppering.
• Formularer:  Herunder gengivelse, kontroltyper og inputvalidering.
• Billedsprog: Styrer oprindelsen, justeringen og skærmstørrelsen af ​​indsatte billeder.
• Navigationselementer: For eksempel skjulte sidebjælker eller lodrette eller vandrette menuer afhængigt af enheden.
• Typografi: Styr, hvordan forskellige dele af teksten vises.
• Layout: Justering af indholdsgengivelse afhængigt af enheden

I den næste artikel vil vi se nogle praktiske eksempler på dets brug.