nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


Bootstrap 3 gebruiken met Sass

Bootstrap wordt geleverd met Responsive Grids en enkele algemene webcomponenten die we kunnen ophalen om snel een responsieve website te bouwen . Als je onze vorige berichten op Bootstrap hebt gezien, weet je waarschijnlijk dat Bootstrap-stijlen zijn samengesteld met LESS.

Hoewel LESS krachtiger is geworden met nieuwe functies die zijn geïntroduceerd in versie 1.5, zijn sommigen van u wellicht beter bekend met Sass / SCSS. Er kunnen ook enkele functies in Sass zijn waar je niet zonder kunt, maar ze zijn (nog) niet aanwezig in MINDER. Als je met Thomas McDonald aan Boostrap en met Sass wilt werken, kun je dat omdat Bootstrap is geporteerd naar Sass / SCSS .

Installatie

Er zijn een paar manieren om Bootstrap + Sass te gebruiken . Ten eerste, omdat het is opgenomen als een Ruby-edelsteen, kun je het via Terminal installeren met de volgende opdrachtregel:

 gem installeer bootstrap-sass 

Je kunt het ook samen met Compass gebruiken met onderstaande opdracht. Het is op dezelfde manier als hoe we Zurb Foundation installeren. Houd er echter rekening mee dat deze manier alleen de _variables.less bevat die Bootstrap-variabelen bevat, en styles.less waar u uw eigen stijlregels neerzet .

 compass create my-new-project -r bootstrap-sass - using bootstrap 

Als alternatief kunt u het eenvoudig downloaden van de Github-repo.

Wat is er nieuw in Bootstrap 3

Hier zijn een paar nieuwe functies gevonden in Bootstrap 3.

Plat ontwerp

De verandering die u direct kunt zien in de nieuwe versie, Bootstrap 3, is dat het nu om een ​​plat ontwerp gaat. De verlopen en schaduwen die we in de componenten van de vorige versie hebben gevonden, zijn nu verdwenen.

Grid in Bootstrap 3

Bootstrap introduceert ook een reeks nieuwe klassen en nieuwe rasterconstructies. In versie 3 zijn er grote, middelgrote, kleine en extra kleine rasters om tegemoet te komen aan verschillende viewportgroottes. Laten we het volgende HTML-voorbeeld bekijken:

Linker kolom

Middelste kolom

Rechterkolom

We hebben drie kolommen. Elke kolom heeft een gelijke breedte als deze in een grote viewport-grootte wordt bekeken (op een desktopscherm of liggend op de tablet). De grootte wordt toegepast met col-md-4 class.

Wanneer de schermgrootte kleiner wordt, wordt de kolombreedteverdeling aangepast met de col-sm-* -klasse, zodat de kolombreedte in de juiste verhouding kan blijven in plaats van alleen maar te worden gestapeld, zoals in de vorige versie van Bootstrap.

Nieuwe componenten

Er zijn ook enkele nieuwe componenten toegevoegd in versie 3. Dit omvat Pager (gebruikt voor het bouwen van Next-en-Prev type navigatie), List Group, Panels en Page Header .

Gebruik maken van Sass-functies

Technisch gezien kunnen we Bootstrap-klassen gewoon toevoegen aan de HTML-elementen om de lay-out van de website te maken, zoals we in het bovenstaande voorbeeld hebben gedaan. Maar bij het gebruik van CSS Pre-processors, zoals Sass, kunnen we sommige functies gebruiken om een ​​schonere en meer semantische HTML-structuur te bereiken in plaats van gevuld te zijn met betekenisloze klassenamen.

Gegeven het vorige voorbeeld, kunnen we zowel de structuur als klassenamen veranderen in iets als dit:

Dit is de inhoud.

Dit is de zijbalk.

Dit is de navigatie.

Binnen de stylesheet kunnen we de Sass @extend richtlijn gebruiken om de lay-out te bouwen. Met @extend worden de selectors @extend die dezelfde stijlregels delen.

 .main-area {@extend .row; } .column {@extend .col-md-4; } .content {@extend .col-xs-6; @extend .col-sm-6; } .sidebar {@extend .col-xs-4; @extend .col-sm-4; } .side-nav {@extend .col-sm-2; @extend .col-sm-2; } 

Als alternatief kunt u ook Sass @include die de stijlregels van mixins zal kopiëren en opnemen in onze class selectors.

 .main-area {@ include make-row; } .content {@ include make-xs-column (6); @ include make-sm-column (6); } .sidebar {@ include make-xs-column (4); @ include make-sm-column (4); } .side-nav {@include make-xs-column (2); @ include make-sm-column (2); } .column {@include make-md-column (4); } 

Bekijk het nu in de browser en u krijgt uw responsieve lay-out.

Conclusie

Bootstrap en Sass vormen absoluut een geweldige combinatie. Met Bootstrap kunt u binnen enkele uren een functionerende responsieve website bouwen . En functies in Sass zoals @extend en @include kunnen ons helpen slankere, programmeerbare en onderhoudbare CSS te schrijven . Voor meer informatie over Sass, kunt u dit artikel raadplegen: Aan de slag met Sass: installatie en de basisprincipes.

Dus, heb je Bootstrap + Sass geprobeerd?

Toegang krijgen tot Windows On-Screen Keyboard (OSK)

Toegang krijgen tot Windows On-Screen Keyboard (OSK)

Er is een groot aantal verschillende fysieke toetsenborden voor pc's beschikbaar op de markt. Windows wordt echter ook geleverd met een ingebouwd virtueel toetsenbord dat het toetsenbord op het scherm wordt genoemd. Deze tool Ease of Access kan in veel situaties een redder in nood zijn en weten hoe je hem moet gebruiken, kan je zeker helpen in het uur van je nood

(Technische en ontwerptips)

20 gratis PowerPoint-sjablonen om je presentatie leuker te maken

20 gratis PowerPoint-sjablonen om je presentatie leuker te maken

Je hebt waarschijnlijk geweldige TED-conferenties gezien met geweldige en overweldigende video's waarmee je rechtop gaat zitten en het woord van de spreker vasthoudt. In de meeste conferenties is het zelden interessant. De presentaties waar de meesten van ons doorheen moeten, zijn vaker wel dan niet, bestaande uit tekst en afbeeldingen gepleisterd over een standaard (soms te gemakkelijk herkenbaar) Powerpoint-thema

(Technische en ontwerptips)