Learning | Philipdev

philipdev.se
Guest

Learning | Bootstrap v4.3.1

Intro

Varför

Bootstrap är ett "open-source" verktyg för utveckling med HTML, CSS, and JS. Gör snabba prototyper eller bygg hela din app med Sass variabler & mixins, responsiva grid system, extensiva förbyggda komponenter, och kraftfulla plugins byggda på jQuery.

Bootstrap lär dig också ett bra sätt att namnge css klasser.
Ex: ge bakgrundsfärg till element. Istället för att namnge en klass till .info-box för att sedan ge den klassen en bakgrundsfärg. Istället kan man ha en .bg-main-color klass och applicera den klassen på alla element som du vill ska ha den bakgrundsfärgen. Detta skapar också en kännsla av sammhörighet på din sida. Det är bra för användarnas upplevelse.

Hur

Installera via CDN (kopiera in) eller NPM.

CDN

CSS

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

JS

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

NPM

CONSOLE

npm install bootstrap

gem install bootstrap -v 4.3.1

Nästa steg

Lättaste steget att starta är att gå till bootstraps egna sida och använda deras "Starter Template".

Layout

Bootstrap använder ett grid system och då är det viktigt i vilken ordning man sätter elementen.

Med de olika layout-klasserna, basics:

.container .row .col


                <div class="container">

                <div class="row">

                <div class="col">

                [Ditt innehåll här]

                </div>

                </div>

                </div>

philipdev.seGuest