logo   Om Bootstrap 4




bootstrapBootstrap 4 er reelt ikke et, men to produkter:

  • CSS bibliotek
    Et bibliotek med umiddelbart brugbare (men dog modificerbare) CSS-selektorer. I PDF-format fylder filen med biblioteket 145 sider.
    Grundkomceptet i CSS-biblioteket er, at det understøtter responsivt design.
  • Komponenter
    Ca. 20 komponenter med forskellige former for især brugerinterfaces. Komponenterne er alle bygget med javaScript og jQuery - og i visse tilfælde andre js-biblioteker.


CSS-delen kan anvendes uden komponentdelen, men ikke omvendt.


Begge dele kan anvendes enten baseret på CDN eller download.


Forskellene mellem Bootstrap 3 og Bootstrap 4 er så store, at en opgradering ikke vil være mulig.


Bootstrap 4 understøtter ikke en række ældre browsere. Er der behov for understøttelse af dem skal Bootstrap 3 benyttes.


Status

Fra august 2017 og en tid fremover vil Bootstrap 4 ikke være helt færdig, men skønnes dog brugbar.
Status for Bootstrap 4 vil en tid være:
Der vil ikke blive slettet funktionalitet.
Fejlbehæftet funktionalitet vil (formentlig) blive rettet.
Der kan blive tilføjet ny funktionalitet.

Yderligere tilpasninger vil være henvist til Bootstrap 5.




CSS bibliotek


Browsere er opbygget således, at de altid ved hvilken Viewport (skærmbredde i pixels) de arbejder på. Det benytter de, når de skal hente CSS-selektorer fra Bootstrap.


Bootstrap's CCS-fil indeholder to typer selektorer:

  • GLOBALE selektorer
    Selektorer, der er globalt anvendelige.
  • viewport selektorer
    Selektorer, der kun er anvendelige indenfor den afgrænsede viewport, hvoraf der er 5.




Responsivt design


At et site er opbygget responsivt indebærer, at dets design vises forskelligt alt efter bredden på den skærm sitet vises på. Et design kan eksempelvis bestå af elementer som en header, et mellemområde opdelt i to eller flere kolonner og en footer. Ved responsivt design vises dette design på skærme med den fornødne bredde. På skæærme med mindre bredde "stables" de enkelte designelementer imidlertid "efter behov" så de til sidst kan ende op som en enkelt kolonne.


Ofte vil et bredskærmsdesign enten fungere dårligt eller slet ikke når dets elementer stables. (Menuen kan eksempelvis være for bred til en smal skærm, og det vil være nødvendigt for brugeren at scrolle sidelæns for at bruge den).

Omvendt vil et "smalskærmsdesign" se helt forkert ud og ikke være hensigtsmæssig på en bred skærm.


Her kommer viewports ind i billedet. Ved fuld anvendelse af viewports kan man med Bootstrap lave indtil 6 forskellige designs hver især tilpasset en given (foruddefineret) skærmbredde.








Komponenter

-----------------------------------------------

CDN


Den første version af "index.xxx" til et nyt site kan (med lokale tilpasninger) kopieres fra denne tabel:


I HEAD er der CDN-link til den minifiede CSS-fil.


Nederst i BODY (skal formentlig på sigt indlejres i FOOTER) etablerer scripts opkobling til minifiede versioner af jQuery (slim-versionen. En slanket version af jQuery, der bl.a. mangler kode til uderstøttelse af Ajax), popper (til brug for dropdown komponentet) og Bootstrap komponenter.


Popper kan udelades, hvis jQuery-dropdown ikke skal benyttes. Er / bliver der behov for den fulde vesion af jQuery kan linket til ændres til den fulde jQuery version.


Det er nødvendigt at bibeholde den viste rækkefølge for linkene.


Alle fire filer er SSL-krypterede under hentning.




Download


Ved brug af Bootstrap etc. fra download kan ovennævnte index.xxx-dokument fortsat bruges, men linkene skal erstattes af stier til de relevante filer.


Bootstrap

Den ZIPpede pakke (bootstrap-4.0.0-beta-dist) med Bootstrap 4 koden (kompileret CSS og JS) kan hentes her:

Mapperne CSS og JS indeholder filerne:

CSSFiler i CSS mappe
JSFiler i JS mappe


Popper.js

Popper.js kan udenfor "package managers" kun anvendes som CDN.


jQuery

jQuery kan downloades her:



-------------------

Bootstrap 4 er tilgængelig som 'alpha'-version fra august 2015. Den efterfølgende beskrivelse af BS vil på forskellig vis bære præg deraf..


Bootstrap er et grid-baseret responsivt 'frontend framework'. Det er primært baseret på en ret ustruktureret CSS-fil, der i pdf-format fylder 118 sider. Endvidere avendes i et vist omfang javaScript / jQuery. Bootstrap er baseret på udvikling efter 'mobile first' princippet.


For at gøre den store CSS-fil mere håndterbar, er Bootstrap i stor udstrækning bygget op omkring godt 40 forskellige komponenter. De CSS-selektorer, der anvendes sammen med det enkelte komponent er beskrevet i en ganske god dokumentation.


Ud af komponenterne er der et der skiller sig ud, så udtrykket 'Grid og de andre' er passende. Selektorerne knyttet til Grid anvendes til at opbygge den responsive struktur / skelet på de enkelte HTML-sider. Selektorerne knyttet til de øvrige komponenter anvendes til at placere indhold i strukturen.


Bootstrap er glidende responsiv for skærmbredder (viewport) på >0 - 75 rem(1200 pixels). Denne bredde er delt op i fem klasser. Ved hjælp af 'breakpoints' knyttet til dem er det muligt at etablere fem forskellige design tilpasset udstyr med forskellig skærmbredde. Man kan derved etablere et site som 'trinvis dynamisk'.


Før man går igang med kodningen af et Bootstrap-baseret site er det nødvendigt / hensigtsmæssigt at foretage et ganske omfattende design af wireframes med tilhørende forklaringer - ikke blot af sitet som sådan (hvilke sider, der skal være), men også af, hvilke datafelter der skal vises på den enkelte side - og for hvilke af dem der skal være hvilken form for 'genbrug' (includes) på tværs af siderne.


Yderligere (og det er det nye ved responsive sites) skal det besluttes, hvor mange klasser, der skal arbejdes med (mindst xs og en af de andre). Det skal besluttes, om alle felter skal vises i alle klasser og hvordan felterne skal udformes i de enkelte klasser.


En yderligere udfordring er det, at det nok visuelt er nemmest at forholde sig til lg-formatet mens Bootstrap er beregnet til 'Mobile first' = xs-formatet først.


Ved ikke at tage de to ovennævnte punkter pænt alvorligt fra start, risikerer man et udviklingsforløb, der i bedste fald må betegnes som 'uskønt'.
























x
x