logo   Om Bootstrap




bootstrapBootstrap 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å ca. 300 - 1200 pixels. Denne bredde er delt op i fire klasser. Ved hjælp af 'breakpoints' knyttet til dem er det muligt at etablere fire forskellige designs tilpasset udstyr med forskellig skærmbredde.


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'.




Egen CSS-fil


Trods den store Bootstrap-fil vil der være god brug for en egen CSS-fil til at løse:


  • de lokale opgaver Bootstrap ikke kan forventes at adressere.
  • tilretning / overstyring af Bootstrap når nødvendigt.
    img-responsiveinline-block
    .img-responsive
    {
    display: block;
    width: 100% \9;
    max-width: 100%;
    height: auto;
    }
    .inline-block
    {
    display:inline-block;
    }
    class="img-responsive inline-block"

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

Skal omstruktureres.




Bootstrap er et blandt mange front-end frameworks til Responsive Web Design - men nok det mest anvendte. Den nok væsentligste styrke ved Bootstrap - og årsag til den betydelige anvendelse af det - er, at det har indbygget god funktionalitet til at understøtte responsivt design.


Den centrale del af Bootstrap udgøres af en CSS-fil, der som print fylder ca. 118 sider.




Se filindhold



xbootstrap.jsjs-rutiner til de dele CSS ikke kan klare.
xbootstrap.cssKernen i Bootstrap til opbygning af RWD etc. 118 sider i pdf format.
xbootstrap-theme.cssIndeholder mest gradieringer til især baggrunde, knapper og menuer.


Filerne er her vist i normal version, men bør bruges i minified version.




Dokumentation


Bootstrap leverer en ganske hæderlig dokumentation der kan nås her .


xGetting started.
xForklaring til elementerne i CSS-kolonnen i Funktionalitet.
xForklaring til elementerne i Compoments-kolonnen i Funktionalitet.
xForklaring til elementerne i javaScript-kolonnen i Funktionalitet.
xForklaring på, hvordan man kan lave sin egen version af CSS-filen, hvis man synes den er for stor sammenlignet med den brug man gør af Bootstrap.
Den kan også (som online eller print( ca.28 sider)) være en uvurderlig oversigt over de selektorer, der er til rådighed, og hvilke der er relevante i en given sammenhæng.




Eksempler


På denne side kan ses eksempler på sites opbygget med Bootstrap x (dårlig navigation). Få bekræftet at 'Responsive' virker.




Tutorials


Bootstrap leverer en ganske hæderlig dokumentation der kan nås her .


xBootstrap 3 Grid Introduction
xBootstrap 3 Less Workflow Tutorial
xThe Subtle Magic Behind Why the Bootstrap 3 Grid Works




Bootstrap (BS)


Det efterfølgende på denne side vil primært være rettet mod anvendelsen af Bootstrap som responsivt front-end framework. Andre frameworks (hvoraf der er ganske mange) skønnes dog at have en del træk til fælles med Bootstrap.




Dynamisk skalerbarhed


@media


Havde det ikke været for CSS media queryen @media havde RWD i den nuværende form næppe været mulig. En af de ting queryen kan anvendes til er, som en 'if-sætning' at aflæse, hvor bred den aktuelle skærm er i pixels. F.eks:@media (min-width: 768px) {.lead { font-size: 21px;}


Med den viden er BS hele tiden i stand til at tilpasse sig den skærmbredde, der er til rådighed (dog ikke skærme på under 300px). Det er @media der styrer 'responsivenes'.


Størrelsen på det aktuelle skærmbillede kaldes 'viewport' (synsfelt).




Trinvis skalerbarhed


Grid / kolonner


Bredden på et tekstområde kan i BS ikke angives med pixels eller procent. I stedet bruges grid-teknologien (der burde hedde 'plankeværksteknologien').


BS er på tværs delt op i 12 kolonner. Kolonnerne bruges som breddeenhed i stedet for pixels / procent. Det medfører en del regeri, idet man altid skal sikre sig hhv. at have defineret alle 12 og aldrig af definere flere.


Antallet af kolonner anvendes til breddeangivelse i CSS-selektorer i HTML-koden.


Klasser


I BS er skærme opdelt i 4 klasser alt efter deres bredde:

Snitfladen mellem klasserne kaldes breakpoints. De udgør overgangen mellem de forskellige skaleringer for at dataene passer bedst til visning på hhv. en desktopskærm og en telefon. Der er således 4 måder at vise data på.


Kolonnesyntaks


Referencer til kolonner følger altid en specifik syntaks på 3 led med '-' som separator:

colklasseidentkolonnenummer
colmd3


En kolonneangivelse for en given klasseident gælder også automatisk for klasseidenter med større skærmbredde medmindre 'kæden' brydes.




Trinvis indholdsvalg


Indenfor hver klasse kan de samme data vises på forskellig måde eller visse data kan sættes ind i / tages ud af en specifik klasse. Det sidste gøres med:


.visible-xs-*.visible-sm-*.visible-md-*.visible-lg-*
.hidden-xs.hidden-sm.hidden-md.hidden-lg




Farver


Bootstrap er født med 6 farver til knapper etc. De har en 'risikostyret' navngivning. Knappernes farver graduerer svagt. De anførte farver er målt på midten.
Identerne indgår i navnene på de selektorer, hvori farverne anvendes.


NavnDefaultPrimarySuccessInfoWarningDanger
Identdefaultprimarysuccessinfowarningdanger
Farvekodeca. #f4f4f4ca. #377ba1ca. #4ca74cca. #41a1d8ca. #ec9c2eca. #cd413d

 logo   Bootstrap - Design og udvilking




Med indtil 4 integrerede sites og et krav om opbygning efter "mobile first"-metoden er det hensigtsmæssigt, at følge visse spilleregler ved en implementering af et "Bootstrap"-site.




Design


Før man går igang med en "Bootstrap"-designopgave, skal alle involverede være bekendt dermed og med fordelene og ulemperne derved:


Fordele:
- Responsivt design for både sider og "Components" etc.


Ulemper:
- 12te-dels opdelingen af viewports.
- at skulle bruge Components etc.
- Begrænsninger i farvevalg til Compoments etc.


Med indtil 4 "responsive" klasser i brug bør det på forhånd fravælges, at etablere 4 sæt wireframes med tilhørende forklaringer.


Istedet etableres et sæt godt gennemarbejdede og fortrinsvis håndtegnede wireframes med gode kommentarer tilknyttet. De baseres udelukkende på at beskrive klasse lg.


Det skal afklares, hvilke farver der anvendes til Components etc., samt hvor mange (og evt. hvilke) klasser sitet skal udvikles i.


Slutfasen af designopgaven er ikke færdig før udviklingen er færdig.


xssmmdlg
xs sm lg




CSS customize


Ny basis CSS-fil etableres efter behov en eller flere gange i løbet af projektet alt efter behov. Første gang isæt for tilpasning af Component-farver.




Udvikling


Udviklingen foretages ud fra en ganske udfordrende situation (en situation hvortil der ikke synes at være noget praktisk alternativ). Man skal først lave startniveauet ("mobile first"), men kender kun slutniveauet ("wireframes").


Løsningen må være, at man af overskuelighedshensyn anvender "vandret udvikling": Arbejder med og færdiggør et niveau (header, content, footer etc.) ad gangen op gennem alle klasser.


Efter at have etableret nogle få niveauer, vil man have etableret en god produktfornemmelse og et godt afstemningsgrundlag med designgruppen - og iterativ tilpasning kan foretages på et begrænset materiale.


Der bør / vil herefter være etableret en metode. Denne vil typisk føre til stigende produktivitet og mindre afhængighed (men ikke ophør af) dialog med udviklingsgruppen.


.

.




















x
x