Hvis du aldrig har hørt om Bootstrap, en ramme udviklet af Twitter til at lave smukke websteder, går du glip af! Bootstrap gør det forholdsvis hurtigt og nemt at designe et websted uden meget viden i CSS (Cascading Style Sheets). Hvis du er ny til at programmere til internettet, behøver du ikke vide noget om CSS for at begynde at lære, hvordan Bootstrap fungerer; alt hvad du har brug for er et enkelt HTML-dokument. Vi vil tage et kig på Bootstrap og vise dig, hvad det handler om, hvordan det fungerer, og hvis det er en god mulighed for hvert websted, du bygger.
Indsættelse af Bootstrap API i din HTML-fil
Du har et par muligheder for at indsætte Bootstrap i din hovedprojektfil. Den første mulighed er at indsætte alle de nødvendige Bootstrap-filer i dit projekt. Du kan gøre dette ved at downloade pakken og uploade den til din projektmappe. Du er selvfølgelig nødt til at knytte den primære Bootstrap CSS-fil til dit dokument. Bootstraps officielle hjemmeside har en trinvis vejledning til, hvordan man gør dette.
Den anden mulighed er at springe over at downloade pakken og bruge et Content Delivery Network (CDN). En CDN giver dig mulighed for at linke de primære Bootstrap-filer til dit HTML-dokument uden nogensinde at downloade det. Dette er naturligvis ikke altid en god ting for professionelle websteder, da jeg ikke ville være for hurtig til at overlade min forretning eller porteføljeside til skæbne, hvis denne server nogensinde skulle gå ned. Det er bedst at have filerne i dit projekt, men med det formål at lære, klarer CDN sig fint.
For at indsætte Bootstrap i dit HTML-dokument skal du blot lægge følgende kode i
tag i dit HTML-dokument:Når disse links er indsat i dette hovedtag, skal du være klar til at begynde at bruge Bootstrap klasser. Dit dokument skal se sådan ud:
Bootstrap And Classes
Bootstrap-elementer er opdelt i klasser, som kun er en masse forudskrevne CSS, som du kan indsætte i din markering. Det er nemt at indsætte klasser i din markering, du skal bare vide navnet på den klasse, du vil bruge, og derefter anvende det på et af dine HTML-elementer ved hjælp af værdien class = ”classname”, som omtalt i en tidligere artikel.
Den vanskelige del er at finde ud af, hvordan alt dette fungerer sammen for at skabe noget smukt. Du kan tjekke alle de forskellige klasser, der er tilgængelige i Bootstrap, direkte fra den officielle dokumentation. Nu er det en anden historie at mestre Bootstrap. Det er ikke noget, vi eller andre kan lære dig. Du kan se tutorial efter tutorial, men for at blive god til at bruge rammen, kommer det med en masse prøve og fejl. Og det kræver, at du får praktisk brug af det i dine egne projekter.
Med det i tankerne beder jeg dig om at starte dit eget HTML-projekt på din computer ved hjælp af Atom eller en anden teksteditor, gennemgå, hvad HTML- og CSS-klasser handler om, og derefter begynde at lege med Bootstrap. Og hvis du kender tilstrækkelig markering, måske endda oprette dit eget portfolio-websted som en testøvelse.
Er Bootstrap en levedygtig mulighed for ethvert websted?
Bootstrap er en fantastisk ramme, men er det en levedygtig mulighed for alle websteder, du opretter? Det afhænger virkelig af udvikleren såvel som af kravene til projektet. I mange professionelle miljøer har du ikke rigtig et valg af hvilke teknologier du bruger, da det stort set vil være op til projektlederen. Hvis projektlederen vælger at bruge Bootstrap, vil du også kombinere det med et ton tilpasset CSS. Det er det, der generelt gør dit websted unikt og forskelligt fra andre websteder, der bruger Bootstrap.
Personligt ser jeg ikke Bootstrap som en fantastisk mulighed for hvert websted. Jo, det kan hjælpe og give nogle genveje, men jeg har i sidste ende fundet, at design fra grunden med CSS er den bedste rute, hovedsageligt på grund af den kontrol, du har over det. Men endnu en gang, hvis du lige er kommet i gang med webprogrammering, er det ikke en dårlig ting at bruge Bootstrap overhovedet, men stol ikke på det i din karriere.
Det er værd at bemærke, at hvis du er en nybegynderudvikler, bør du ikke bruge Bootstrap til alle projekter på din portefølje. Det kan komme på tværs af, at du måske er dygtig til API'et, men du kender ikke helt din vej rundt CSS. Når det er sagt, er det godt at have en anstændig blanding af begge på din portefølje (eller endda udelukkende CSS, da det er let at afhente Bootstrap).
Lukning
Det er alt, hvad Bootstrap er i en nøddeskal. Som jeg nævnte tidligere, opfordrer jeg dig til at starte dit eget HTML-projekt og tilføje nogle af de forskellige klasser til elementer for at begynde at lege med rammen. Du kan finde alle de forskellige komponenter, som Bootstrap tilbyder med forklaringer og kodeeksempler her.
Bootstrap er virkelig et pænt værktøj, men husk at ikke stole på det alene! Det er godt at være fortrolig med det og kende din vej rundt i rammerne, men også sørge for at dykke ned i CSS for virkelig at forstå, hvad der foregår bag kulisserne. Ikke kun det, men en solid viden i CSS komplimenter Bootstrap meget, så du virkelig kan lave nogle unikke og smukke websteder med din egen tilpasning.
