De uitlijning van tekst binnen elk alinea- of div-blok kan worden ingesteld met behulp van de klassen: “text-left”, “text-center” en “text-right”.

U kunt standaardkleuren voor alineatekst instellen met behulp van verschillende kleurmarkeringsklassen, zoals "gedempt" - grijs, "tekstwaarschuwing" - rood, "tekstfout" - kastanjebruin, "tekstinfo" - lichtblauw en "tekst- succes” - groen.

Twitter Bootstrap ondersteunt standaard ook de tabelindeling. Hiervoor wordt de volgende code gebruikt:

U kunt afbeeldingen toevoegen met een gewone tag . Om uw ontwerpen er interessanter uit te laten zien, kunt u de klassen "img-rounded" toevoegen voor afbeeldingen met afgeronde hoeken, "img-circle" voor scrollende afbeeldingen en "img-polaroid" om een ​​schaduw en rand rond de omtrek van de afbeelding te creëren .

Om een ​​vervolgkeuzemenu aan een bestaande navigatiebalk toe te voegen (zoals weergegeven op de demopagina), moet u de volgende opmaak toevoegen binnen het "li"-element.

Om een ​​vervolgkeuzelijst te maken, moet u het bovenliggende element omsluiten met de klasse "dropdown" en vervolgens de opmaak "a" gebruiken om het in te voegen. Plaats vervolgens het lijstitem in dit element.

Ik heb je de basisprincipes laten zien van het gebruik van Twitter Bootstrap en hoe je met het systeem aan de slag kunt. Nu je weet hoe het werkt, hoop ik dat je het veel gemakkelijker zult vinden om te werken met de beschrijving van de raamwerkelementen uit de originele documentatie.

Als je het eenmaal hebt bestudeerd, zul je zeker veel nieuwe toepassingen voor jezelf ontdekken.

In het volgende artikel zal ik je vertellen over het maken van responsieve websites met Twitter Bootstrap.

De vertaling van het artikel “Twitter Bootstrap Tutorial – Omgaan met complexe ontwerpen” werd voorbereid door het vriendelijke projectteam.

Goed slecht

Het voordeel van het gebruik van CSS-frameworks is dat de lay-outontwerper niet hoeft na te denken over veel lay-outnuances waar de makers van de frameworks al voor hem hebben nagedacht. Dergelijke nuances omvatten compatibiliteit tussen browsers, ondersteuning voor verschillende schermresoluties en nog veel meer. De lay-outontwerper geeft alleen aan wat, hoe en wanneer getoond moet worden, de rest doet het raamwerk zelf. Deze aanpak kan de lay-out van de website aanzienlijk versnellen. De voordelen van Bootstrap zijn onder meer de populariteit ervan. Dit betekent dat het voor een andere codeontwerper gemakkelijker wordt om uw code te onderhouden.

Het nadeel van het gebruik van frameworks is dat de pagina de volledige extra stijlen van het framework moet dragen, zelfs als er maar een klein deel van wordt gebruikt. Het raamwerk is een uitstekend hulpmiddel voor het maken van prototypen en het maken van pagina's waarvoor het ontwerp secundair is, zoals beheerderspagina's. Als je een heel specifiek ontwerp hebt, kan het lastiger zijn om dit in een raamwerk op te zetten dan met native tools. Dit is echter ook mogelijk.

Daarna, om de Bootstrap-stijlen te wijzigen, moet je ze in je stijlen.css ongeveer als volgt wijzigen:

A ( kleur: #beceda; )
Een duidelijk nadeel deze aanpak is dat je handmatig zult moeten zoeken naar de benodigde stijlen die je wilt onderbreken en dit zal niet altijd triviaal zijn, omdat Sommige Bootstrap-opties zijn van toepassing op veel selectors in gewijzigde vorm, zoals via formules. De tool Aanpassen kan hierbij van enige hulp zijn; het helpt u uw wijzigingen correct te compileren, maar slechts één keer. Als u in de toekomst een parameter wilt wijzigen, moet u de gewijzigde waarden voor alle velden opnieuw invoeren om uw stijlen samen te stellen.

Bestaat een groot aantal van manieren om LESS-bestanden te compileren en Bootstrap laat dit over aan het oordeel van de ontwikkelaar. Bootstrap zelf gebruikt Grunt voor compilatie, misschien geeft u de voorkeur aan een plug-in voor JetBrains-producten, en aangezien het artikel op beginners is gericht, zullen we naar eenvoudigere oplossingen kijken. Dergelijke oplossingen zijn WinLess voor Windows, SimpLESS voor Mac of Koala voor Linux. Al deze programma's doen ongeveer hetzelfde: ze ontvangen een map met LESS-bestanden als invoer en luisteren naar wijzigingen daarin. Zodra u wijzigingen aanbrengt in een bestand, wordt het onmiddellijk gecompileerd gespecificeerde CSS bestand. Op deze manier hoeft u niet na elke wijziging een handmatige compilatie uit te voeren. Je wijzigt het LESS-bestand, slaat het op en ziet de wijzigingen direct op de site in een reeds gecompileerde, gecomprimeerde vorm.

• Hoe worden de afbeeldingen uitgesneden?
• Welke componenten zullen worden gebruikt?
• Wat zullen de belangrijkste stijlen zijn?
• Welke pagina-indeling krijgen we?

Bewaar de kaartafbeelding:

Laten we de logo's als volgt opslaan:

Afbeeldingen/logo.png
images/voettekst-logo.png

Herhalende achtergrondafbeeldingen moet in een minimaal stuk worden gesneden dat voldoende is om te vormen volledig beeld herhaling verticaal en horizontaal.

/images/bg.png
/images/h1-bg.png

Het is handig om sociale netwerkpictogrammen met dezelfde grootte in één bestand op te slaan en ze als sprites te gebruiken voor sneller laden. Meer details over het lijmen van afbeeldingen worden beschreven in het eerste deel. Het resultaat zijn twee bestanden:

/images/social.png
/images/social-small.png

Als u ons sjabloon bekijkt, ziet u dat we de volgende componenten nodig hebben:

Allereerst moet u variabelen toevoegen die niet in de Bootstrap-instellingen staan, zodat u ze in de toekomst kunt gebruiken. Voor ons is dit slechts een specifiek ontwerplettertype.

@brand-font: "Oswald", schreefloos;
Als u een sjabloon voor Russische sites wilt gebruiken, kunt u proberen het Oswald-lettertype te vervangen door het dichtstbijzijnde Cuprum, dat Cyrillisch ondersteunt.

Laten we nu de Bootstrap-instellingen vervangen door de onze:

Nu we klaar zijn met de variabelen, gaan we beginnen met het stylen van ons ontwerp in het bestand stijlen.less. Laten we eerst Bootstrap zelf en onze variabelen verbinden:

@import "bootstrap/bootstrap.less"; @import "variabelen.loos";
Niet alle standaardstijlen van Bootstrap kunnen worden gewijzigd met behulp van variabelen, dus laten we het handmatig doen:

P ( marge: 20px 0; ) .form-control ( box-shadow: geen; ) .btn ( lettertypefamilie: @brand-font; )
Hier hebben we de schaduw van de formulierelementen verwijderd en het specifieke paginalettertype voor de tekst in de knoppen gespecificeerd.

Vervolgens beschrijven we de pagina-achtergrond en de bovenste balk:

Lichaam (rand bovenaan: 5px effen #7e7e7e; achtergrondafbeelding: url(../images/bg.png); )
Verderop in de tekst wordt niet aangegeven in welk bestand de stijlen zijn geschreven. Houd er rekening mee dat we alle variabelen in het bestand variabelen.less opslaan, en dat de CSS-stijlen in style.less worden opgeslagen.

Witvierkant
Dit blok creëert een HTML5-documentstructuur. In de titel geven we de naam van onze pagina aan – Whitesquare. Met de viewport metatag geven we aan dat de paginabreedte mobiele toestellen ax is gelijk aan de schermbreedte en de initiële schaal is 100%. Vervolgens wordt het stijlenbestand meegeleverd. En voor versies Internet Explorer minder dan negen, we verbinden scripts waarmee we onze lay-out correct kunnen weergeven.

Laten we de volgende code aan de body toevoegen:

Hier komen we de eerste Bootstrap-component tegen: kolommen. Het bovenliggende element van de kolommen krijgt de klasse "row", en de kolomklassen beginnen met het voorvoegsel "col-", vervolgens de schermgrootte (xs, sm, md, lg) en eindigen met de relatieve breedte van de kolom .

Aan een kolom kunnen tegelijkertijd verschillende klassen worden toegewezen met waarden voor schermen, bijvoorbeeld class="col-xs-12 col-md-8". Deze klassen stellen eenvoudigweg de kolombreedte in als een percentage voor een specifieke schermgrootte. Als aan de kolom geen specifieke schermklasse is toegekend, wordt de klasse voor het minimaal specifieke scherm toegepast. Als deze niet is opgegeven, wordt er geen breedte toegepast en neemt het blok de maximaal mogelijke breedte in beslag.

Onze klassen “col-md-7” en “col-md-17” geven aan dat de blokken kolommen zijn met een breedte van 7 en 17 ten opzichte van de bovenliggende container. Standaard is de som van de kolombreedten in Bootstrap 12, maar we hebben dit aantal verdubbeld om de flexibiliteit te bereiken die we nodig hadden.

Body (… .wrapper (opvulling: 0 0 50px 0; ) header (opvulling: 20px 0; ) )
We hebben deze structuur in het lichaam geplaatst. Met de LESS-syntaxis kunt u regels in elkaar nesten, die vervolgens in de volgende constructies worden gecompileerd:

Body .wrapper (…) body header (…)
Deze aanpak maakt het mogelijk om te zien HTML-structuur rechtstreeks in de CSS en geeft enige "ruimte" aan de regels.

Plaats het logo in de header-tag:

Geen extra stijlen vereist.

Om een ​​zoekopdracht te maken, hebben we de volgende Bootstrap-componenten nodig: inlineformulier, gegroepeerde bedieningselementen en knop.
In de header-tag maken we een inline-formulier, rechts uitgelijnd. De velden van zo'n formulier moeten een klasse “form-control” en een label hebben.

We plaatsen de component “gegroepeerde besturingselementen” in het formulier. Door besturingselementen te groeperen, kunt u de ruimte tussen de tekstinvoer en de knop verwijderen en deze als het ware samenvoegen tot één element.
Het is een div met de klasse “input-group” en velden, en de knop van zo’n component wordt in een blok geplaatst met de klasse “input-group-btn”.

Omdat we het label voor het zoekveld niet hoeven weer te geven, verbergen we het met de klasse “sr-only”. Dit is nodig voor speciale schermlezers.

De klasse “btn-primary” is aan de knop toegevoegd, wat betekent dat dit de primaire knop van dit formulier is.

…Zoek GO
Het enige dat we nog hoeven te doen, is de breedte van het zoekformulier in de stijlen instellen.

Body ( … .wrapper ( … header ( … .form-search ( breedte: 200px; ) ) ) )

Om het menu weer te geven, neemt u de component “navigatiepaneel” en plaatst u daarin de component “navigatie”, een lijst met links. Voor navigatie is een klasse "navbar-nav" toegevoegd, die speciale navigatiestijlen binnen de navbar toepast.

• Thuis
• Over ons
• Diensten
• Partners
• Klanten
• Projecten
• Carrières
• Contact

/*navbar hoogte*/ @navbar-height: 37px; /*stel meer horizontale opvulling in*/ @nav-link-padding: 10px 30px; /*achtergrond voor menu-items*/ @navbar-default-bg: @panel-bg; /*tekstkleur in menu-items*/ @navbar-default-link-color: #b2b2b2; /*en bij het bewegen met de muis - hetzelfde*/ @navbar-default-link-hover-color: @navbar-default-link-color; /*achtergrond van het actieve menu-item is onze specifieke blauwe kleur*/ @navbar-default-link-active-bg: @brand-primary; /*tekstkleur van het actieve menu-item*/ @navbar-default-link-active-color: #fff;
Naast aanpasbare parameters zullen we aanvullende parameters in stijlen beschrijven - dit zijn hoofdletters en ons specifieke lettertype:

Body ( … .wrapper ( … .navbar a ( teksttransformatie: hoofdletters; lettertype: 14px @brand-font; ) ) )

De paginatitel wordt in een div geplaatst met de klasse "heading".

Over ons
En heeft de volgende stijlen:

Body ( … .wrapper ( … .heading ( hoogte: 40px; achtergrond: transparante url(../images/h1-bg.png); marge: 30px 0; opvulling-links: 20px; h1 (weergave: inline-block; kleur: #7e7e7e; lettertype: normaal 40px/40px "Oswald", schreefloos; achtergrond: url(../images/bg.png); marge: 0; opvulling: 0 10px; teksttransformatie: hoofdletters; ) ) ))
Hier tekenen we een grijze streep als achtergrond op de div, en voegen er een inline h1 in met het gewenste lettertype en de gewenste paginakleurachtergrond om de indruk te wekken van een transparante achtergrond voor de h1.

Bij het maken van een submenu zullen we de component “navigatie” niet gebruiken, omdat deze qua stijl niet erg geschikt voor ons is; de component “gegroepeerde lijst” is veel geschikter voor ons. Elk element van zo’n component heeft een klasse “list-group-item”.

Het submenu moet in de side-tag worden geplaatst. We maken een lijst met links op dezelfde manier als het hoofdmenu.

• Lorem ipsum
• Donec tincidunt laoreet
• Vestibulum elite
• Etiam pharetra
• Phasellus placerat
• Cras et nisi vitaal odio

@lijstgroep-bg: @paneel-bg; @lijstgroepgrens: @paneelbinnenrand;
En pas de volgende stijlen toe op het submenu:

Body ( … .wrapper ( … .submenu ( marge-onder: 30px; li ( weergave: lijstitem; lettertype: 300 14px @brand-font; lijststijl-positie: binnen; lijststijltype: vierkant; opvulling : 10px; teksttransformatie: hoofdletters; &.actief ( kleur: @brand-primary; ) a ( kleur: @tekstkleur; tekstdecoratie: geen; &:hover ( kleur: @tekstkleur; ) ) ) ) ) )
Eerst brengen we de standaardstijlen terug naar de lijstelementen, aangezien Bootstrap ze heeft vervangen door zijn eigen stijlen. Voeg een opvulling aan de onderkant toe. Submenu's gebruiken dunnere lettertypen en vierkante markeringen. En voor links stellen we kleuren en hoofdletters in en verwijderen we onderstrepingen. Het ampersand in de "&.active"-code wordt tijdens het compileren vervangen door de bovenliggende selector met behulp van de LESS-syntaxis: ".submenu li.active".

Om het weer te geven, zullen we de component “paneel” gebruiken, of liever de variant “panel-primary” om de titel in te kleuren. Deze component bevat een headerblok (panel-heading) en een paneelinhoudsblok (panel-body). We voegen de klasse “img-responsive” toe aan de kaartafbeelding, waardoor de afbeelding kan krimpen als de schermbreedte klein is.

… Onze kantoren
In Bootstrap-variabelen hebben we de kleur voor de achtergrond van het paneel al ingesteld (panel-bg), en nu zullen we aangeven dat het “primaire” paneel de standaard grijze rand van het paneel zal hebben, in plaats van de standaard blauwe:

@paneel-primaire-rand: @paneel-binnenrand;
Nu moet u in de sitestijlen de standaard paneelinstellingen wijzigen, die niet via variabelen worden gewijzigd:

Paneel ( box-shadow: geen; .panel-heading ( lettertype: 14px @brand-font; teksttransformatie: hoofdletters; opvulling: 10px; ) .panel-body ( opvulling: 10px; ) )
Hier hebben we de schaduw van de panelen verwijderd, onze eigen inspringingen toegevoegd en ons eigen koplettertype ingesteld.

Dit pagina-element lijkt het meest op de Jumbotron-component. Laten we het toevoegen aan de inhoudskolom:

“Quisque in enim velit, at dignissim est.” nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat.”

@jumbotron-bg: @brand-primair; @jumbotron-kleur: #fff;
En laten we onze stijlen beschrijven:

Body ( … .wrapper ( … .jumbotron ( randradius: 0; opvulling: 0; marge: 0; blockquote ( rand-links: geen; p ( lettertype: 300 cursief 33px @brand-font; teksttransformatie: hoofdletters; marge-onder: 0; ) klein (tekst uitlijnen: rechts; kleur: #1D8EA6; lettertype: 300 20px @brand-font; &:before (inhoud: ""; ) ) ) ) )
Daarin verwijderen we de hoekafronding, componentopvulling en citaatdecoraties die standaard door Bootstrap zijn ingesteld. We zullen ook stijlen voor onze lettertypen toevoegen.

Lorem ipsum dolor sit amet…

Donec vel nisl nibh…

Donec vel nisl nibh…

De klasse "thumbnail" verandert afbeeldingen in een component "thumbnail". Hij zal al het werk van het stileren van de afbeeldingen voor ons doen. Het enige dat we nog moeten doen, is de opvulling en randkleur instellen in de variabelen voor dit onderdeel:

@thumbnail-opvulling: 1px; @miniatuurrand: #c9c9c9;

Laten we bij het opmaken van dit blok eerst een titel toevoegen:

Ons team
met stijl:

Body ( … .wrapper ( … h2 ( achtergrond: geen herhaal scroll 0 0 #29C5E6; kleur: #fff; lettertype: 300 30px @brand-font; opvulling: 0 10px; teksttransformatie: hoofdletters; ) ) )
En dan voegen we een blok toe met de klasse ‘team’, die bestaat uit twee regels met werknemerskaarten. Elke kaart is een kolom. De kaart heeft een breedte die gelijk is aan vier kolommen van ons raster. Alle kaarten behalve de eerste in de rij hebben een linker inspringing, die is gemaakt door de klasse “col-md-offset-1”. De kaartinhoud bestaat uit een afbeelding en een beschrijving (.caption)

John Doe Saundra Pittsley

teamleider

artistiek directeur

senior ui-ontwerper

Body ( … .wrapper ( … .team ( .row ( marge-boven: 20px; .col ( witruimte: nowrap; .thumbnail ( marge-onder: 5px; ) ) .col-md-offset-1 ( marge- links: 3,7%; ) .caption ( h3 ( lettertype: 300 16px @brand-font; marge: 0; ) p ( lettertype: 300 14px @brand-font; kleur: @brand-primary; marge: 0; ) ) ) ))
Naast de inspringingen en lettertypestijlen die hier zijn ingesteld, hebben we de klasse “col-md-offset-1” gewijzigd. Hij moest het streepje op 3,7% zetten omdat... de standaardinkeping was te groot.

Laten we eerst een voettekstcontainer maken met deze blokken:

En pas het ontwerp erop toe:

Voettekst ( achtergrond: #7e7e7e; kleur: #dbdbdb; lettergrootte: 11px; .container ( hoogte: 110px; opvulling: 10px 0; ) )
De voetteksttag definieert een grijs gebied over de gehele breedte van het scherm, en de container daarin geeft een gecentreerd gebied weer op grotere schermen en specificeert de hoogte en opvulling van de voettekst. We gebruiken kolommen om blokken in de voettekst uit te lijnen.

Twitter-feed 23 oktober

In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper en nulla. In eget mi dui, zit een scelerisque nunc. Aeneën aug

Body ( ... voettekst ( ... .container ( ... h3 (rand-onder: 1px effen #919191; kleur: #ffffff; lettergrootte: 14px; regelhoogte: 21px; lettertypefamilie: @brand -font; marge: 0 0 10px; teksttransformatie: hoofdletters; ) p ( marge: 5px 0; ) .twitter ( p ( opvulling-rechts: 15px; ) tijd a ( kleur: #b4aeae; tekstdecoratie: onderstrepen; ) ) )
Voor alle voettekstkoppen stellen we lettertypen en inspringingen in, en creëren we ook een onderstreping via het onderste frame. Geef voor alinea's de inspringing aan. Voor de link die de datum weergeeft, stelt u de kleur in en onderstreept u deze.

Sitemap Thuis Over Diensten Partners Steun Contact
We stellen de links in op kleur, lettertype en ruimte ertussen.

Body ( ... voettekst ( ... .container ( ... a ( kleur: #dbdbdb; ) .sitemap a ( weergave: blok; lettergrootte: 12px; marge-onder: 5px; ) ) ) )

We voegen een reeks links in een blok met de ‘sociale’ klasse.

Sociale netwerken
En laten we ze stylen:

Body ( … voettekst ( … .container ( … .social ( .social-icon ( breedte: 30px; hoogte: 30px; achtergrond: url(../images/social.png) geen herhaling; weergave: inline-block; marge -rechts: 10px; ) .social-icon-small ( breedte: 16px; hoogte: 16px; achtergrond: url(../images/social-small.png) no-repeat; weergave: inline-block; marge: 5px 6px 0 0; ) .twitter ( achtergrondpositie: 0 0; ) .facebook ( achtergrondpositie: -30px 0; ) .google-plus ( achtergrondpositie: -60px 0; ) .vimeo ( achtergrondpositie: 0 0 ; ) .youtube ( achtergrondpositie: -16px 0; ) .flickr ( achtergrondpositie: -32px 0; ) .instagram ( achtergrondpositie: -48px 0; ) .rss ( achtergrondpositie: -64px 0; ) ) ) )
Hier hebben we de sprite-techniek gebruikt - waarbij één afbeeldingsbestand voor verschillende afbeeldingen wordt gebruikt. Alle links zijn onderverdeeld in grote iconen (.social-icon) en kleine (.social-icon-small). We hebben deze klassen zo ingesteld dat ze worden weergegeven als een inline blok met vaste maten en dezelfde achtergrond. En dan met met behulp van CSS Deze achtergrond hebben we verplaatst zodat op elke link de bijbehorende afbeelding wordt weergegeven.

Copyright 2012 Whitesquare. Een pcklab-creatie

Body ( … .footer ( … .container ( … .footer-logo ( float: rechts; marge-boven: 20px; lettergrootte: 10px; tekst-uitlijning: rechts; a ( tekstversiering: onderstrepen; ) ) ) ) )

Hiermee is de indeling voltooid. Het voltooide project kan worden gedownload

Welkom op de pagina's van de startgelukblog. Het geluk begint hier. Als u zo eenvoudig mogelijk een goede, competente website probeert te maken, maar de programma's, alle voorwaarden en code nog niet volledig begrijpt, dan is dit artikel iets voor u.

Adaptieve Bootstrap-indeling: hoe is alles met elkaar verbonden? Waarom heb je een raamwerk nodig, wat is het, hoe helpt het en maakt het het leven echt makkelijker? Ik zal je ook vertellen hoe je het programma maximaal kunt gebruiken zonder het toekomstige project te schaden, en waar je goede lessen kunt vinden. Nou, zullen we beginnen?

Ik neem aan dat niet al mijn lezers goed begrijpen wat een raamwerk is en dat ze het al zelf hebben gedownload en uitgezocht. Ik zal beginnen met informatie specifiek voor hen. Onlangs schreef ik over adaptieve lay-out en noemde Bootstrap een programma. Ik deed dit om de perceptie te vereenvoudigen, hoewel het raamwerk dat helemaal niet is.

Dit is een reeks applicaties, scripts of plug-ins, om zo te zeggen, die het gemakkelijker maken om speciale formulieren op de site te maken, carrousels met afbeeldingen, de site op mobiele apparaten te tonen of dit niet te doen, enzovoort.

Zoals je waarschijnlijk al weet, moet de programmeur voor elk van deze acties code bedenken en schrijven. Als u Bootstrap gebruikt, hoeft u dit niet te doen. U neemt eenvoudigweg een kant-en-klaar sjabloon en wijzigt deze naar wens. Als gevolg hiervan wordt de werktijd aanzienlijk verkort.

Naast het versnellen omvatten de prioriteiten van dit raamwerk ook het verminderen van de vereisten voor de webmaster. Idealiter wordt de site gemaakt door iemand die zeer goed thuis is in JavaScript en alles zelf kan schrijven. Als u met Bootstrap werkt, is uw kennis mogelijk niet zo diep. Basis niveau zal ruim voldoende zijn.

Je kunt op de website zien waar Bootstrap 3 toe in staat is met Russische documentatie in de secties css, JavaScript en componenten. Nadat u op het gewenste tabblad heeft geklikt, verschijnt aan de rechterkant een heel handig menu waarmee u naar de gewenste plaats in het document kunt gaan.

Specifieke voorbeelden hier laten zien hoe het deel van de code dat verantwoordelijk is voor een bepaalde actie eruit ziet, evenals het resultaat. U kunt de zichtbaarheid van de inhoud voor elk mobiel apparaat instellen. Machtigingen en andere instellingen zijn al voltooid.

De cursus zelf Oefen van A tot Z"Duurt ongeveer 17 uur. Gedurende deze tijd doe je belangrijke theoretische kennis op en oefen je vervolgens hoe je bepaalde elementen correct kunt gebruiken: welke elementen je uit de code moet verwijderen, wat er nodig is om de site sneller te laten werken, wat het is en nog veel meer.

Nou ja, nog een bonuscursus, TOP 4 add-ons voor Bootstrap die het raamwerk efficiënter zullen helpen werken.

Nou, dat lijkt alles te zijn. Schrijf u in voor de nieuwsbrief en leer meer over eenvoudige oplossingen voor complexe problemen en de juiste aanpak bij het werken met niet helemaal de juiste producten.