Hoe te lay-outen met behulp van bootstrap. Over de responsieve functies van Bootstrap. Russische Bootstrap-documentatie

Bootstrap is momenteel het meest gebruikte raamwerk. Toen hij voor het eerst verscheen, werd hij uitstekende keuze zowel voor website-ontwikkelaars als amateurs, vanwege de eenvoud.

Iedereen die het weet, tenminste in algemene schets, HTML en CSS kunnen dit raamwerk nu gaan gebruiken.

In dit artikel zullen we dit overwegen basisconcept zoals een bootstrap-raster - het is de basis van dit raamwerk.

1. Rijen en kolommen

Ik heb bewust een deel van de titel in het Engels gelaten zodat er minder verwarring zou ontstaan (rijen - rijen, kolommen - kolommen)

Het raster bestaat uit zowel rijen als kolommen, waardoor u elementen op de pagina kunt plaatsen zoals u dat wilt.

Rijen bestaan uit blokken van één niveau. Dit betekent dat wanneer we creëren nieuwe rij(rij) het neemt de gehele breedte in beslag van het element waarin het zich bevindt.

Horizontale uitlijning gebeurt met behulp van kolommen. Kinderen van een rij kunnen alleen een kolom zijn. Het plaatsen van inhoud in een rij zonder kolom kan de lay-out verstoren

Uw inhoud Correct geplaatste inhoud

Opmerking: Kolommen en rijen hebben een speciale relatie. Elke kolom heeft links en rechts een opvulling van 15 px, dus de inhoud erin is dat ook gelijke streepjes rond de randen. Dergelijke regels "verplaatsen" kolommen 15 px weg van de rij, en dit kan de lay-out verbreken. Om dit te voorkomen, is er een negatieve opvulling ingesteld voor de rij, waardoor je buitenste elementen kunt plaatsen zonder in te springen vanaf de ouder, en dat is de reden waarom een kolom moet altijd in een rij worden geplaatst.

2.Rij gescheiden door 12

Rij gedeeld door 12 gelijke delen. Wanneer we een kolom in een rij gaan plaatsen, moeten we de breedte opgeven: de breedte die de kolom zal innemen. Dit wordt gedaan door de class div aan het blok toe te voegen col-md-nummer, waarbij het getal een geheel getal van 1 tot en met 12 kan zijn. Afhankelijk van dit getal zal de kolom een bepaald percentage van de totale rijbreedte in beslag nemen. Bijvoorbeeld: 6 is 50% van de rijbreedte, aangezien 6/12 = 0,5, 3 - 25% (3/12), enz.

Hele rijbreedte 25% 25% 50%

3. Kolomomloop

Houd er altijd rekening mee dat er slechts 12 vrije kolommen op rij zijn. Als je elementen in een rij plaatst die in totaal meer dan 12 zijn, dan worden de laatste kolommen die niet passen naar de volgende regel verplaatst.

In het voorbeeld hebben de eerste 2 kolommen respectievelijk een breedte van 8 en 4, wat neerkomt op 12. De eerste rij raakt dus vol en het element dat daarop volgt, wordt naar de volgende rij verplaatst.

Deze kolom met breedte 9 wordt naar de volgende regel verplaatst

4. Klassen voor schermformaten

Vergeet niet dat we schreven .col-md-nummer in de tweede stap? Dit -md- betekent gemiddelde schermgroottes (van het woord medium - gemiddeld). Bootstrap bevat standaardklassen voor gebruik verschillende maten scherm:

xs- (Extra klein) - Extra kleine schermen, zoals smartphones, gebruik ze als volgt: .col-xs-nummer

sm- (Kleine schermen) - Kleine schermen, zoals tablets. Gebruik: .col-sm-nummer

md- (Medium) - Middelgrote schermformaten, dit zijn lage dpi-schermen en laptops. Het gebruik is hetzelfde als in de voorgaande voorbeelden: .col-md-nummer

LG - (Groot) - Grote schermen met hoge resolutie. .col-lg-nummer

Bootstrap berekent de schermresolutie en dpi (dots per inch of pixeldichtheid) en geeft volgens deze berekening aan in welke klasse actief is op dit moment. Dit is een complete manier om zowel de positie als de weergave van inhoud in het algemeen voor elk apparaat te regelen.

Dit blok neemt op een middelgroot scherm de helft van de breedte in beslag, en op een heel klein scherm de gehele breedte.

5.Clearfix

In sommige gevallen komt het voor dat twee kolommen van verschillende hoogte zijn gepland, en het kan problematisch zijn om het volgende element weer te geven, dat eronder zou moeten staan. Om dit te voorkomen is er een klasse duidelijk fix. Het plaatst alle volgende kolommen op een nieuwe regel.

Deze kolom is hoger dan alle andere

6. Offsets zijn je vrienden

Aanvankelijk zijn alle kolommen links uitgelijnd en volgen ze elkaar strikt op. Als het aantal kolommen minder dan 12 is, is er aan de rechterkant vrije ruimte.

Om links en/of rechts een inspringing te creëren. Toepassen op elk blok met een klassenkolom .col-md-offset-2 zal dit blok naar rechts verschuiven met de grootte van twee lege kolommen. Dezelfde regel geldt voor andere schermformaten, d.w.z. col-xs-2, col-sm-2 en andere.

7. Push- en Pull-lessen

Met de klassen .push en .pull kunnen we blokbinding opnieuw toewijzen, afhankelijk van het apparaatscherm. De klasse .push verplaatst de kolom naar rechts en de klasse .pull verplaatst de kolom naar links. Het verschil tussen deze klasse en offset is dat ze position: relatief hebben, waardoor de resterende blokken niet worden verschoven.

De push- en pull-klassen hebben de volgende syntaxis: .col-size-push(pull)-number. De maten zijn hetzelfde als in punt 4 - xs, sm, md, lg. Het getal is het aantal kolommen dat we willen verplaatsen.

Op laptops wordt deze tekst rechts van de afbeelding weergegeven, op XS-schermen staat de afbeelding rechts en de tekst links

Conclusie

Dat zijn alle basisprincipes die u moet weten om het bootstrapraster in uw projecten te gaan gebruiken. Op basis van deze zeven punten kunt u eenvoudig markeringen voor elk mobiel apparaat maken zonder mediaquery's te gebruiken.

Vereist HTML5-doctype

Bootstrap gebruikt HTML-elementen en CSS-eigenschappen waarvoor het HTML5-doctype vereist is. Neem het op in al uw projecten.

Ontwerp en koppelingen

De belangrijkste componenten van Bootstrap omvatten weergave-elementen, stijl en linkstijlen. In het bijzonder:

De marge van het lichaamselement verwijderd
Geïnstalleerd wit achtergrond achtergrondkleur: wit; voor lichaam
We gebruiken de attributen @baseFontFamily , @baseFontSize en @baseLineHeight als de belangrijkste
Stel de basiskleur van de link in met @linkColor en pas onderstreping alleen toe op de selector:hover

Je kunt deze stijlen vinden op scaffolding.less.

Instellingen resetten met Normaliseren

In Bootstrap 2 gebruikten we oude reset browserstandaarden met Normalize.css, project van Nicolaas Gallagher die ook HTML5 Boilerplate bevat. Omdat we Normalize vaak gebruiken in onze reset.less , hebben we enkele elementen specifiek voor Bootstrap verwijderd.

Standaard ontwerprasterdemo

Het hoofdlay-outraster bestaat uit 12 kolommen en biedt containerbreedtes van 940px zonder actieve dynamische functies. Bij het toevoegen dynamisch bestand Het CSS-raster kan zich uitstrekken van 724px tot 1170px breed, afhankelijk van uw monitor. Op beeldschermen die minder dan 767 px breed zijn, worden de kolommen zwevend en verticaal uitgelijnd.

Basis HTML-raster

Voor een eenvoudige lay-out met twee kolommen maakt u een klasse .row en voegt u het juiste aantal columns.span* toe. Aangezien dit een raster met 12 kolommen is, heeft elke span van twee .span* 12 kolommen en worden er altijd 12 kolommen aan elke rij toegevoegd (of welk aantal kolommen dan ook is opgegeven in het bovenliggende element).

...

In dit voorbeeld hebben we .span4 en .span8 gemaakt en 12 kolommen en één doorlopende rij.

Kolommen verplaatsen

Verplaats de kolommen naar rechts met klassen.offset* . Elke klasse vergroot de linkermarge van een kolom met de grootte van de kolom zelf. Met .offset4 wordt .span4 bijvoorbeeld vier kolommen verplaatst.

...

Kolomindeling

Als u inhoud wilt opmaken met behulp van het standaardraster, voegt u een nieuwe klasse .row toe en stelt u de afstand .span* in voor kolommen binnen een bestaande .span*-kolom. Lay-outrijen moeten bestaan uit een reeks kolommen, die wordt opgeteld bij het aantal bovenliggende kolommen.

Kolom niveau 1

Niveau 2

Kolom niveau 1

Niveau 2

Drijvende Mesh-demonstratie

Een zwevend raster gebruikt percentages om kolombreedtes aan te geven in plaats van pixels. Een zwevend raster heeft dezelfde dynamische mogelijkheden als een vast raster en biedt de gewenste verhoudingen voor schermresoluties van verschillende apparaten.

Basis HTML met zwevend raster

Zorgt ervoor dat elke rij zweeft door .row te veranderen in .row-fluid . De kolommen blijven hetzelfde, waardoor er eenvoudig kan worden gewisseld tussen vaste en zwevende ontwerppatronen.

...

Zwevende beweging

Op dezelfde manier geïnstalleerd als in een vast raster: voeg de klasse .offset* toe aan een willekeurige kolom om meerdere kolommen te verplaatsen.

...

Zwevende lay-out

De lay-out van een zwevend raster is iets anders: het aantal lay-outkolommen mag niet overeenkomen met het aantal bovenliggende kolommen. In plaats daarvan wordt elk niveau van gestapelde kolommen "gereset" omdat elke rij 100% van de eigenschappen van de bovenliggende kolom overneemt.

Niveau 1 van kolom

Niveau 2

Indelingen Vaste indeling

Basisindeling met vaste breedte (optioneel dynamisch) met slechts één vereiste: .

Zwevende markeringen

Maak een zwevende pagina met twee kolommen met behulp van . Ideaal voor toepassingen en documentatie.

Responsief ontwerp Schakel responsieve mogelijkheden in

Neem het op in uw project responsieve css door de juiste metatags en extra stijlbladen aan uw document toe te voegen. Als u Bootstrap hebt gedownload van onze pagina, hoeft u alleen maar een metatag toe te voegen.

Aandacht! Standaard heeft Bootstrap geen responsieve mogelijkheden ingeschakeld, omdat dit niet overal vereist is. In plaats van dat ontwikkelaars deze functionaliteit elke keer uitschakelen, zou het logischer zijn om hen de mogelijkheid te geven deze functionaliteit in te schakelen wanneer dat nodig is.

Over de responsieve functies van Bootstrap

Mediaquery's wijzigen gewone CSS op basis van een grote verscheidenheid aan voorwaarden en relaties, formaten, weergavetypen, enz., maar richten zich meestal op min-width en max-width .

Wijzigt de breedte van kolommen in een raster
Lijnt waar nodig elementen verticaal uit in plaats van omloop te gebruiken.
Verandert de grootte van koppen en tekst voor een betere weergave op verschillende apparaten.

Gebruik de adaptieve mogelijkheden van Media Queries alleen om een mobiele versie van de site te maken. Voor grote projecten raden wij aan om een aparte versie van het ontwerp en de website te maken.

Ondersteunde apparaten

Bootstrap ondersteunt meerdere mediaquery's in één bestand, waardoor uw project op verschillende apparaten en schermresoluties kan werken. Dit omvat de volgende apparaten:

/* Groot bureaublad */

@media (min - breedte: 1200px) (...)

/* Staand tablet naar liggend en desktop */

@media (min - breedte: 768px) en (max - breedte: 979px) (...)

/* Liggende telefoon naar staande tablet */

@media (max - breedte: 767px) (...)

/* Liggende telefoons en omlaag */

@media (max - breedte: 480px) (...)

Extra adaptieve lessen

De hier getoonde klassentabel biedt de dynamiek voor verschillende apparaten en hoe deze werken in combinatie met het lay-outraster en mediaquery's (gescheiden per apparaat). Je kunt deze klassen vinden in responsive.less.

Klasse Telefoons 767px en minder Tablets 979px tot 768px Laptops en desktops Standaard.zichtbare telefoon .zichtbare tablet .visible-desktop .verborgen telefoon .verborgen tablet .verborgen bureaublad

Viden	Verborgen	Verborgen
Verborgen	Viden	Verborgen
Verborgen	Verborgen	Viden
Verborgen	Viden	Viden
Viden	Verborgen	Viden
Viden	Viden	Verborgen

Wanneer gebruiken?

Gebruik beperkte functionaliteit en vermijd het maken van totaal verschillende versies op dezelfde site. Gebruik in plaats daarvan deze functies om verschillende presentaties op verschillende apparaten te maken.

Adaptieve klassen testen

Pas het formaat van het venster in uw browser aan of voer de site op andere apparaten uit om responsieve klassen te testen.

Zichtbaar op…

Groene markeringen geven aan dat de klas zichtbaar is op dit scherm.

Telefoon? Telefoon
Tablet? Tablet
Bureaublad? Bureaublad

Verborgen op…

In dit geval geven groene markeringen aan dat de klasse niet op dit scherm wordt weergegeven.

Telefoon? Telefoon
Tablet? Tablet
Bureaublad? Bureaublad

De tweede helft van het artikel wordt al eenvoudiger waargenomen, er zijn meer voorbeelden met screenshots.

Bootstrap - wat is het?

Laten we dus beginnen met een belangrijke vraag. Bootstrap is een CSS- en JS-framework, in wezen een reeks bestanden met kant-en-klare geschreven code. Het doel van ontwikkelaars van vrijwel elk raamwerk is om de ontwikkeling van websites voor zichzelf en anderen die toegang hebben tot de tool te vereenvoudigen. In het geval van Bootstrap is het volledig gratis, dus je kunt het op elke gewenste manier gebruiken, de broncode bewerken en het raamwerk op elke gewenste manier aanpassen. Dat is geweldig.

Bootstrap installeren

Als u alleen de framework-bestanden aan een HTML-document hoeft te koppelen (bijvoorbeeld om te oefenen), downloadt u gewoon het framework van de officiële website getbootstrap.com, kopieert u de bestanden naar het project en verbindt u de bestanden die u nodig hebt. Ik zal het doen kort overzicht deze bestanden:

bootstrap.css en bootstrap.min.css - ongecomprimeerde en gecomprimeerde versies van de CSS-code van het framework. Het wordt aanbevolen om verbinding te maken met het werkproject gecomprimeerd bestand, op deze manier verbetert u uw downloadsnelheid enigszins. Maar als u van plan bent de code in een bestand te bekijken, sluit dan de ongecomprimeerde versie aan.

bootstrap.js en bootstrap.min.js - bestand met scripts

de map Fonts en de glyphicons-bestanden daarin zijn het Bootstrap-pictogramlettertype. Het heeft ongeveer 200 iconen. In de meeste gevallen zul je er genoeg van hebben, soms moet je anderen verbinden. We zullen het later over het pictogramlettertype hebben.

Dit standaard ingesteld kader. Sterker nog, u kunt het eenvoudig aanpassen en wijzigen zodat het bij u past. Gebruik bijvoorbeeld helemaal geen scripts of sluit slechts één raster aan. Over het algemeen zullen we hier ook over praten.

Russische Bootstrap-documentatie

Wanneer je getbootstrap bezoekt, heb je waarschijnlijk gemerkt dat alles hier in het Engels is. We kunnen Russische hulp gebruiken bij het raamwerk. Het is gemakkelijk te vinden. Om dit te doen, ga van startpagina naar het gedeelte Aan de slag. Scroll helemaal naar beneden, er zal een link naar vertalingen zijn. Zoek daar naar Russisch en klik erop. Dat is alles, nu bevindt u zich op de Russische versie van de site. Toegegeven, niet alles is hier vertaald, maar ergens rond de 70-80% is correct, dus je zult alles begrijpen.

Bootstrap-raster

Wat je ook zegt, maar vooral Bootstrap-element is een adaptief mesh. Over het algemeen zou het raamwerk zonder dit raamwerk bijna al zijn waarde verliezen, omdat je dankzij het raster snel adaptieve sjablonen kunt maken. Tegelijkertijd ben je misschien helemaal niet bekend met mediaquery's, je hebt ze niet nodig, omdat het raamwerk zorgt voor de implementatie van aanpassingsvermogen; je hoeft alleen maar de juiste klassen aan de blokken toe te wijzen.

Wat zijn deze klassen? Laten we naar de documentatie gaan, het zal ons veel helpen. Ga naar de sectie CSS - Rastersysteem. Algemene regels Werken met een raster is eenvoudig, ik zal ze nu opsommen.

Hoe werk je met een raster?

Zie het als een HTML-tabel. Als je ooit HTML-code voor tabellen hebt geschreven, weet je dat alle inhoud in de tabeltag is geplaatst, één rij in de tr-tag is geplaatst en vervolgens de cellen erin zijn geplaatst - td .

Alles is dus vergelijkbaar in het raster. De containerklasse dient als algemene container voor het elektriciteitsnet. Er zijn 2 opties voor het bootstrapraster: volledig rubber en toch een eindige maximale breedte. Dus als je de taak krijgt algemeen blok class container, heeft de site een maximale breedte van 1170 pixels. Het zal niet verder uitbreiden. Uiteraard zal de inhoud gecentreerd zijn.

Als u de containervloeistofklasse instelt, is het gaas volledig van rubber, dat wil zeggen dat er geen maatbeperkingen zijn. Als iemand bijvoorbeeld een website opent op een monitor van 1920 pixels breed, ziet hij deze in de volledige breedte.

Daarom is het eerste dat u moet doen bij het ontwikkelen van een website, beslissen hoe de sjabloon eruit zal zien: volledig rubber, of de breedte moet nog steeds beperkt zijn.

Geweldig, het containerblok moet een rij raster bevatten. Je moet alle blokken die op één lijn staan erin plaatsen. Dat wil zeggen, als we de meest typische sjabloon nemen: koptekst, hoofdgedeelte, rechterkolom en voettekst, dan zijn er 3 kolommen. De eerste heeft alleen de koptekst, de tweede de inhoud en de zijbalk, en de laatste de voettekst. De opmaak voor zo'n site zou ongeveer als volgt zijn:

Kap
Inhoud... en zijbalk
Voettekst

Maar voor nu dit onjuiste opmaak, omdat er niet genoeg is... wat? Dat klopt, cellen! In het geval van Bootstrap worden ze ook wel kolommen genoemd. Het bootstrapraster bestaat uit 12 kolommen. Het kan worden ingebed in elk blok van elke breedte, minimaal 1200 pixels, minimaal 100. Dit komt allemaal omdat de breedte van de kolommen niet in pixels wordt gespecificeerd, maar in percentages.

Hoe werkt dit 12-kolommensysteem?

Dus we komen bij het uiterste belangrijke kwestie verbonden met het raamwerk. Geloof me, als je dit begrijpt, is al het andere onzin. Het belangrijkste is om te begrijpen hoe het netwerk werkt en hoe snel adaptieve indeling zal voor u openstaan.

Om dit te doen, bladert u door de documentatie hieronder, daar vindt u een tabel met belangrijke rastereigenschappen.

Overigens zijn de kolommen zelf in Bootstrap gemarkeerd met de klasse col-, maar dit is een samengestelde klasse, dus ze schrijven nooit zomaar col-. Bootstrap heeft 4 speciale klassen die zijn ontworpen om de grootte van blokken op verschillende breedtes te regelen, hier zijn ze:

ld - voor grote schermen, meer dan 1200 pixels breed (desktopcomputers);

md - voor middelgrote schermen, breedte van 992 tot 1199 (computers, netbooks);

sm - voor kleine schermen, breedte van 768 tot 991 pixels (tablets);

xs - extra kleine schermen, breedte minder dan 768px.

Dit zijn de 4 klassen, maar om de grootte van de elementen te regelen, worden getallen van 1 tot 12 gebruikt, omdat er, zoals u zich herinnert, precies 12 kolommen in het raster staan.

Kap

Inhoud
Zijkolom

Voettekst

Het is vrij gemakkelijk te begrijpen. Allereerst maken we een header; deze hoeft helemaal niet in het raster te worden geplaatst, aangezien deze in ieder geval (meestal) 100% van de breedte in beslag neemt. Maar we zetten het er toch in. Wat is deze klasse col-md-12? Zoals ik je al vertelde, schrijft niemand simpelweg col-, met deze klasse vertellen we in wezen aan de browser:
Dit is een cel | kolom
Op middelgrote apparaten (MD-klasse) moet de breedte 12 van de 12 kolommen zijn, dat wil zeggen 100% van de rijbreedte.
Maar hoe zit het met de breedte op andere apparaten? Op grote (lg) schermen zal het ook 100% zijn, omdat de waarden voor grote schermen worden overgenomen, maar voor kleinere niet. Het is simpel: als je col-xs-4 schreef, dan zou de kolombreedte op alle apparaten 33% zijn, en als col-lg-4 , dan alleen op grote apparaten. Dit is de functie, onthoud het.

Wat gebeurt er dan als de breedtewaarde niet wordt opgeslagen op kleinere schermen? Het wordt gereset. Hier is hoe het gebeurt:
col-sm-4 - op kleine schermen zal het blok 33% van de breedte in beslag nemen, het zal hetzelfde zijn op md- en lg-schermen, maar op xs, dat wil zeggen de kleinste, wordt de breedte gereset naar 100%. Onthoud dus nog een eenvoudige regel: als er niets is gespecificeerd voor kleinere schermen, wordt het blok daarop met een breedte van 100% weergegeven.

Inhoud
Zijkolom

In wezen vertellen we de browser:
Laat het inhoudsblok 8 van de 12 kolommen breed zijn en deze situatie zal zich voordoen op kleine, middelgrote en grote schermen(voor kleine schermen is het voldoende om op te geven; voor grote schermen wordt, zoals u zich herinnert, de waarde overgenomen). Maar op de kleinste schermen zal het blok 100% bezet zijn. Dit klopt; op mobiele apparaten verschijnen sites meestal in 1 kolom.
Laat de zijkolom een derde van de breedte van de rij zijn op dezelfde kleine, middelgrote en grote schermen. Welnu, op de kleinste schermen wordt, zoals je al hebt begrepen, de breedte ook teruggezet op 100%. Zo simpel is het.

Nou, er is niets om met de voettekst om te gaan. Welnu, we hebben de basisprincipes besproken van hoe het elektriciteitsnet werkt, maar we moeten nog zien hoe het werkt...

Bootstrap genest raster

Feit is dat we de sjabloon nu alleen in hoofdblokken hebben verdeeld, maar binnenin kunnen ze ook in kolommen worden verdeeld. De inhoud kan bijvoorbeeld producten in meerdere kolommen weergeven. Wat moet ik doen? Het is heel eenvoudig: we creëren binnenin precies hetzelfde raster. Het wordt genest, maar bevat ook 12 kolommen. Als we dit allemaal samenvatten, komen we tot deze conclusie:
Er kan een onbeperkt aantal rasters in elk blok aanwezig zijn. In een blok met producten is er bijvoorbeeld een raster voor het scheiden van producten; in het blok met één product zelf kunt u een ander raster maken om bijvoorbeeld prijzen, beschikbaarheidsinformatie en aanvullende informatie te scheiden. informatie.

Nu zullen we proberen een ander raster binnen het inhoudsblok te maken om producten in 3 kolommen te rangschikken. Laten we dus het blok nemen waarin we inhoud hebben:

Inhoud

En wij schrijven daarin:

Productcatalogus:

Productnaam

Productbeschrijving

Zoals je kunt zien, hebben we een nieuw raster in de inhoud gemaakt - we plaatsen er een rij in, en in de rij staan al 3 blokken met producten. Kopieer gewoon het col-sm-4-blok met de productkaart en plak het nog 2 keer, dit is wat je krijgt (je kunt elke productfoto maken, ik heb een grote genomen):

Nog eentje gemist belangrijk punt Om ervoor te zorgen dat de afbeeldingen zich kunnen aanpassen aan de blokken waarin ze zich bevinden, moet elk ervan de klasse img-responsive krijgen. Als je, net als ik, denkt dat dit lastig is, schrijf dan gewoon in je eigen style.css als volgt:

Img( max. breedte: 100%; hoogte: auto; weergave: blok; )

Dat is alles, sla deze code op en koppel uw CSS-bestand aan het project. Nu zijn de afbeeldingen standaard adaptief.

Nou, is dat redelijk vlot verlopen? Ja, maar zonder bootstrap zou je langer moeten lijden. Het enige is dat wanneer u een raster binnen een blok maakt, u niet langer een blok hoeft te maken met de containerklasse erin. Waarom is dit niet nodig? Ja, want het blok waarin het raster wordt gemaakt, fungeert als container.

U kunt dus in elk blok zoveel kolommen maken als u wilt en een sjabloon van elke complexiteit maken. En dit alles gaat veel sneller dan zonder Bootstrap, omdat je alle CSS helemaal opnieuw moet schrijven.

Responsieve hulpprogramma's

Dit is een andere geweldige functie van bootstrap. Het bestaat uit het feit dat je alle blokken op de gewenste breedte kunt verbergen of zichtbaar maken. Verberg bijvoorbeeld de zijkolom volledig op smalle schermen, voeg wat nieuwe elementen toe op mobiele apparaten, voeg een kolom toe brede schermen enz.

Er zijn veel toepassingsmogelijkheden, maar ik heb je niet verteld over het belangrijkste: hoe gebruik je deze hulpprogramma's? Om dit te doen, voegt u gewoon klassen toe het gewenste blok. Als u het wilt verbergen, geeft u gewoon de volgende klasse op:

Voettekst

Wat zit erin in dit geval zal de klasse verborgen-xs maken? Het verbergt de voettekst op extra kleine apparaten. Op alle anderen zal het blok zichtbaar zijn.

Als u het daarentegen alleen op de kleinste schermen wilt weergeven, moet u de klasse zichtbaar-xs-block gebruiken. In dit geval wordt het blok verborgen op alle schermen, behalve op de smalste schermen. Adaptieve hulpprogrammaklassen worden dus als volgt geschreven:

Het woord verborgen of zichtbaar, afhankelijk van wat je nodig hebt

Een afkorting xs, sm, md of lg die aangeeft op welke schermen het blok moet worden verborgen of weergegeven.

Voor zichtbaar moet u ook een van de drie waarden toevoegen: block - geef het element weer als een blokelement, inline-block - als een inline-blokelement, inline - inline.

Nou, een paar voorbeelden om het duidelijk te maken:

verborgen-xs verborgen-lg - verbergt het element op de kleinste en grootste schermen. Zoals u kunt zien, kunt u meerdere klassen opgeven, gescheiden door een spatie.

zichtbaar-xs-inline zichtbaar-md-blok - op kleine en grote schermen wordt het element helemaal niet weergegeven. Op extra kleine letters is het een kleine letter, en op middelgrote letters is het een blok.

zichtbaar-lg-blok - het element zal alleen zichtbaar zijn op de grootste schermen, op alle andere zal het verborgen zijn

Dit is hoe het allemaal werkt. Dat is het precies en niet anders. Ik hoop dat je dit begrijpt. Laten we het in de praktijk brengen. We hebben een testsjabloon, zij het een zeer primitieve.

Taak: de zijkolom laten verdwijnen op kleine schermen, en ook één product op de kleinste schermen. En zodat op xs-apparaten de producten al in 2 kolommen staan, niet in 3.

Probeer het zelf te doen en bewerk alleen de html-code. Wat moet er gedaan worden? Laten we eerst naar de kolom kijken. Om deze op sm-schermen te verbergen, hoeft u alleen maar de klasse verborgen-sm eraan toe te voegen.

Geweldig, nu moet het derde product de klasse verborgen-xs toevoegen en deze zal op de kleinste schermen verdwijnen. Welnu, de klassen van de resterende twee goederen zullen als volgt zijn:

Dat wil zeggen dat het blok op middelgrote apparaten 4 van de 12 kolommen zal bezetten, wat kan worden vertaald in 33,33% van de breedte, en op extra kleine apparaten - 50%. En aangezien op deze breedte één blok met een product verdwijnt, worden beide blokken met producten netjes in 1 rij gerangschikt, zoals deze:

Geweldig! Nu je dit hebt begrepen, kun je de blokken op een webpagina al op vrijwel elke gewenste manier manipuleren. Probeer taken voor jezelf te bedenken en deze uit te voeren.

Verplaats mij helemaal

Vervolgens zal ik je nog een heel goede truc laten zien: de mogelijkheid om een blok naar rechts of links te verplaatsen. Laten we zeggen dat we niet 3 producten op rij hebben, maar 1. En deze beslaat niet de hele breedte. En het is jouw taak om het in het midden uit te lijnen. Dit is eenvoudig te doen als u er rekening mee houdt dat u met een 12-koloms systeem werkt.

Laten we één blok met het product achterlaten:

Het is genoeg om te produceren eenvoudige berekeningen, om te begrijpen hoeveel u het blok moet verplaatsen om het te centreren. Op middelgrote en grote schermen moet het 4 kolommen naar links worden verplaatst, en op kleine schermen 3 kolommen. Dit is hoe het eruit ziet:

De klasse col-md-offset-4 zegt: op middelgrote en grote schermen, verschuif het blok naar links met 33% van de breedte van de bovenliggende container (1/3 linker offset, 1/3 blokbreedte, ⅓ rechter offset, resulterend in centrering).
Klasse col-xs-offset-6: Op extra kleine en kleine schermen, verschuiving naar links met 25% (¼ opvulling links, ½ blokbreedte, ¼ opvulling rechts).

Ik hoop dat je de essentie begrijpt en deze lessen indien nodig gebruikt.

Bootstrap-componenten en voorbeelden van hun gebruik

Ik feliciteer je. We hebben zojuist het belangrijkste onderwerp met betrekking tot het raamwerk besproken. Het is het raster en het werken ermee dat belangrijk is. Werken met componenten betekent al dat u eenvoudigweg naar de documentatie gaat, daar de code van het gewenste component kopieert en indien nodig aanpast aan uw wensen. Maar ik zal hieronder toch enkele voorbeelden geven van hoe de componenten te gebruiken.

Snelle floats en wrap-annulering

Met de klassen pull-left en pull-right kun je elk blok snel laten zweven door het naar links of rechts te duwen. Vergeet niet de stroom te annuleren. Hiervoor kunt u de klasse clearfix gebruiken.

Bootstrap: horizontaal responsief (mobiel) menu

We zullen de volgende componenten rechtstreeks aan de sjabloon toevoegen, dus als je met de code wilt werken en niet alleen maar wilt lezen, volg dan alle stappen na mij.

Eigenlijk is het met Bootstrap heel eenvoudig om dat niet zomaar te doen responsief menu, en de zogenaamde mobiele versie, die volledig is geminimaliseerd op kleine schermen en zich onder één knop verbergt. Deze techniek zie je terug in veel responsive templates en is eigenlijk heel eenvoudig te implementeren. De voorbeeldcode voor een mobiel menu staat in de documentatie. Ik neem het daar vandaan en doe het een beetje opnieuw.

Dus het eerste wat ik ga doen is het blok met de header verwijderen, omdat ons menu in feite de header zal zijn in het geval van mijn sjabloon. De menucode moet vóór alle site-inhoud worden geplaatst, zelfs vóór het containerblok. Waarom? Ja, je zult nu zelf zien dat het raster al in de navigatiebalk is ingebouwd. Dus hier is de code:

Schakelknop

Logo/naam

Zoekopdracht

Schrik niet van het feit dat er veel code is. Zo ziet de site er nu uit:

Maar als uw menu niet de volledige breedte van het scherm in beslag neemt, is het zinvol om het te centreren. Om dit te doen, moet u vervolgens een extra wrapperblok voor het menu maken, dat na het blok met de container-fluid-klasse moet worden geplaatst. Vergeet niet dit blok te sluiten. Ik heb het de navbar-wrap-klasse gegeven. Hier zijn de stijlen ervoor:

Dat wil zeggen, u kunt eenvoudig de breedte beperken en centreren. Of vervang de containervloeistof in eerste instantie door container .

Zoals u kunt zien, hebben we een logo, twee eenvoudige items, een vervolgkeuzemenu en een zoekformulier aan het menu toegevoegd. Dat wil zeggen, er waren veel elementen. Je kunt het menu eenvoudig zelf aanpassen door je eigen lessen eraan toe te voegen. Maar voor nu is het mijn doel om je dit onderdeel te laten zien.

Zo ziet het menu eruit op apparaten met een schermbreedte van minder dan 768 pixels:

Zoals je ziet is het menu ingeklapt. Het wordt geopend wanneer u op de knop in de rechterbovenhoek klikt. Alleen het logo bleef op het scherm staan.

Vervolgkeuzemenu

Tegelijkertijd kunt u uit het bovenstaande voorbeeld begrijpen hoe een vervolgkeuzemenu-item wordt gemaakt in Bootstrap; laten we deze code extraheren voor een gedetailleerder beeld:

De container voor een dropdown-item is dus een gewoon lijstitem met de dropdown-klasse. Daarbinnen bevindt zich de hoofdlink. Als u erop klikt, wordt een vervolgkeuzemenu geopend. Het is erg belangrijk om er een data-attribuut aan toe te wijzen, wat je in de code ziet, zonder dit zal niets werken. Zorg er ook voor dat het bootstrap.js-bestand is verbonden met de webpagina's.

Een span met de caret-klasse is niets meer dan een pijl, waardoor u kunt begrijpen dat het item een drop-down-item is en dat het menu zelf wordt gevormd met behulp van de standaard lijst met opsommingstekens. Dat is alles, alles is vrij eenvoudig, u kunt deze code gebruiken om vervolgkeuzelijsten te implementeren.

Broodkruimels (broodkruimels) toevoegen met behulp van Bootstrap

In veel winkels kun je het zogenaamde blok vinden broodkruimels, die bevat volledige pad naar de huidige pagina. Dit is ook eenvoudig te doen met behulp van het framework, zie de code:

Thuis

Catalogus

Goederen

In feite is het voldoende om de breadcrumb-klasse voor een genummerde lijst op te geven en daarin de gebruikelijke lijstitems in te voeren. Overigens centreer ik de kopjes op het tweede niveau in de sjabloon (dit moet in de CSS worden geschreven):

H2( tekst uitlijnen: centreren; )

Als je op de een of andere manier het uiterlijk van broodkruimels wilt veranderen, gebruik dan gewoon de .breadcrumb-selector in CSS. Zo kun je bijvoorbeeld verwijderen achtergrondkleur:

Broodkruimel( achtergrond: transparant; )

Zo ziet de site er nu uit:

Bootstrap-tabellen

Standaard strekt de tafel zich uit over het hele raam, dus wikkel hem in een doos met een beperkte breedte om de afmetingen te beperken. Standaard ziet het er vreselijk uit, maar als je de table-klasse aan de table-tag toevoegt, wordt alles veel leuker:

Merk op dat in deze versie de cellen alleen onderaan duidelijke randen hebben; als je randen aan alle vier de zijden wilt, moet je een andere klasse toevoegen:

Als u de tabel gestreept wilt maken, dat wil zeggen dat de rijen een afwisselende achtergrondkleur hebben, voegt u de klasse table-striped toe. Om een andere kleur te markeren wanneer u over een tabelrij beweegt, gebruikt u de klasse table-hover.

In principe zijn dit alle mogelijkheden van tafels. Ik heb al een apart artikel geschreven over het maken van een adaptieve tabel, dus ik zal het niet herhalen. Het enige is dat je ook klassen zoals info, succes, waarschuwing en andere aan de rijen en cellen van de tabel kunt toevoegen om ze in de gewenste kleur te schilderen.

Uiteraard kunt u in style.css eenvoudig uw eigen klassen schrijven en gebruiken. Hier eindigen we met de tafels.

P.S. Het artikel wordt toegevoegd en aangevuld...

Kortom

Ik hoop dat het artikel nuttig was en dat je de belangrijkste dingen hebt kunnen begrijpen. Via opmerkingen kunt u eventuele vragen stellen.

Adaptief ontwerp is een lay-outmethode waarbij de breedte van de webpagina-indeling wordt aangepast aan de breedte van het apparaat. De eenvoudigste optie is een proportionele schaalverandering, maar in werkelijkheid is het beter om zowel de locatie van de elementen als hun afmetingen te veranderen. Op deze manier halen we het maximale eruit optimaal zicht voor smartphones, tablets en monitoren.

Bootstrap heeft al responsieve ontwerpmogelijkheden ingebouwd. Als u een eenvoudige lay-out met meerdere kolommen maakt en vervolgens de breedte van het browservenster begint te verkleinen, zult u merken dat de lay-out zelf verandert. Maar het is niet hiertoe beperkt; het is veel interessanter om de lay-out zelf enigszins te veranderen, zodat deze wel past op de best mogelijke manier paste bij het apparaat. Voor dit doel zijn trefwoorden geïntroduceerd die in klassennamen voorkomen; deze worden in een tabel weergegeven. 1.

Om de breedte van de kolommen voor smartphones in te stellen, hoeft u alleen maar de klasse col-xs-N in de code op te nemen; voor monitoren wordt deze al col-md-N genoemd. Alle klassen kunnen met elkaar worden gecombineerd; de klasse voor het geselecteerde apparaat is niet gespecificeerd, maar wordt van onder naar boven overgenomen. Dit betekent dat de smartphone-indeling er hetzelfde uitziet als de monitorindeling. Maar niet andersom. Daarom begint de indeling altijd met een indeling voor een smartphone, daarna een tablet en een monitor.

Omdat we ons nu concentreren op mobiele apparaten, moeten we de volgende regel eraan toevoegen.

Nu zal ons ontwerp zich aanpassen aan de breedte van het apparaat en er optimaal uitzien, vooral op apparaten met kleine schermen.

Rekening houdend met deze lijn en de nieuwe klassen, zullen we een eenvoudige lay-out maken met twee kolommen (voorbeeld 1).

Voorbeeld 1: Responsieve lay-out

Responsieve lay-out (achtergrondkleur: #eee; tekstuitlijning: midden; opvulling bovenaan: 10px; opvulling onderaan: 10px; marge onderaan: 10px; lettergrootte: 2rem; ) Kop Kolom 1 Kolom 2

Om de lay-out te testen is het niet nodig om deze op een specifiek apparaat te bekijken; het volstaat om de breedte van het browservenster te verkleinen en we zullen de wijzigingen onmiddellijk zien. In afb. 1-3 toont het resultaat dit voorbeeld met verschillende raambreedtes.

Rijst. 1. Bekijk op een smartphone

Rijst. 2. Tabletweergave

Rijst. 3. Bekijk op de monitor

We hebben het eenvoudigste geval overwogen, waarbij de rangschikking van elementen praktisch niet ten opzichte van elkaar verandert. Wat als u elementen opnieuw moet rangschikken of iets moet verwijderen voor kleine schermen? We kunnen dit niet rechtstreeks doen, dus gebruiken we een klein trucje: we voegen twee identieke elementen op verschillende plaatsen toe, verbergen het ene en geven het andere weer. Bootstrap biedt twee sets klassen voor het verbergen en weergeven van elementen, afhankelijk van de breedte van het venster: verborgen-xs en zichtbaar-xs-blok. Het principe is hetzelfde als bij het werken met kolommen, in plaats van xs vervangen we het gewenste trefwoord. Voorbeeld 2 laat zien hoe u de titel op deze manier kunt “verplaatsen”.

Voorbeeld 2: De titelpositie wijzigen

Kop Kolom 1 Kolom 2 Kop

Het resultaat van dit voorbeeld wordt getoond in Fig. 4.

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 codeontwikkelaar 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, ook al gebruikt deze slechts een klein deel ervan. 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.

Over het gebruik van Bootstrap Momenteel zijn er verschillende manieren om met Bootstrap-stijlen te werken zonder LESS te gebruiken. Voor beginners raadt Bootstrap zelf de volgende aanpak aan: u moet de gecompileerde Bootstrap van de site downloaden en deze in uw project plaatsen zonder iets te veranderen. Vervolgens moet u uw eigen lege CSS-bestand maken en dit na bootstrap.css opnemen.

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

LESS gebruiken Bij deze methode wordt ervan uitgegaan dat alle Bootstrap-variabelen worden opgeslagen in .less-bestanden. De ontwikkelaar werkt met deze variabelen en compileert ze indien nodig handmatig of automatisch in CSS-bestanden, en de HTML zelf bevat alleen de gecompileerde CSS-bestanden. Het is deze optie die in het artikel als de meest flexibele wordt beschouwd.

Er zijn een groot aantal 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 in de richting van meer kijken eenvoudige oplossingen. 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.

Een project creëren De eerste stap is het creëren van een eenvoudige bestandsstructuur voor ons project.

Voorafgaande inspectie Nadat u de bestandsstructuur heeft gemaakt, opent u het psd-bestand in Photoshop. Het is belangrijk om de sjabloon zorgvuldig te onderzoeken en te evalueren. We moeten de volgende dingen begrijpen:

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

Pas nadat u deze vragen mentaal voor uzelf hebt beantwoord, kunt u doorgaan met de lay-out. Laten we deze vragen in volgorde bekijken. Algemene afbeeldingen In dit stadium hoeft u alleen algemene afbeeldingen te knippen en op te slaan die op alle pagina's van de site staan en geen betrekking hebben op de inhoud. In ons geval is dit een lichtgrijze pagina-achtergrond, een koptekstachtergrond, een kaartafbeelding, twee logo's en knoppen sociale netwerken.

Bewaar de kaartafbeelding:

Laten we de logo's als volgt opslaan:

Afbeeldingen/logo.png
images/footer-logo.png

Herhalende achtergrondafbeeldingen moeten in een klein stukje worden uitgesneden, voldoende om een compleet beeld te vormen door verticaal en horizontaal te herhalen.

/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

Componenten Het belangrijkste verschil tussen lay-out met behulp van Bootstrap en lay-out met behulp van native middelen is dat Bootstrap het concept van componenten introduceert. Componenten worden veelvuldig gebruikt kant-en-klare HTML blokken met vooraf gedefinieerde stijlen. Soms gebruiken componenten JavaScript. De lay-outontwerper kan beide gebruiken kant-en-klaar onderdeel, en bepaal daarvoor je uiterlijk. Om dit te doen, hoeft u vaak alleen maar de waarde van variabelen in Bootstrap te wijzigen. Als er flexibelere wijzigingen nodig zijn, kan de lay-outontwerper de HTML en CSS altijd naar eigen inzicht wijzigen.

Als je ons sjabloon bekijkt, kun je zien dat we de volgende componenten nodig hebben:

Voor lay-out met kolommen - rastersysteem (rij, kolom)

Voor zoeken – inline formulier (form-inline), gegroepeerde bedieningselementen (input-group), knop (btn)

Voor navigatie - de navigatiebalk (navbar) en de navigatie zelf (nav)

Submenu's weergeven – gegroepeerde lijst (lijstgroep)

Voor het kaartblok – visueel paneel (paneel)

Om een groot centraal blok weer te geven - jumbotron

Om fotolijsten weer te geven - miniaturen

We zullen elk onderdeel gedetailleerder bekijken wanneer we het tegenkomen in de lay-out. Basisstijlen In Bootstrap zijn alle standaardstijlen al ingesteld, we hoeven ze alleen aan te passen als ze afwijken van ons ontwerp. Laten we dit doen in het bestand src/less/variables.css.

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 de tekst in de knoppen een specifiek paginalettertype gegeven.

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. Vergeet niet dat we alle variabelen opslaan in het bestand variabelen.less, en CSS-stijlen We slaan het op in style.less.

HTML-framework Traditioneel beginnen we de website-indeling met een HTML-framework. We plakken de code van de eenvoudigste sjabloon van de pagina Aan de slag in het index.html-bestand, nadat we eerder alle onnodige dingen hebben verwijderd:

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 op mobiele apparaten gelijk zal zijn aan de schermbreedte en dat de initiële schaal 100% zal zijn. Vervolgens wordt het stijlenbestand meegeleverd. En voor versies Internet Explorer minder dan negen, we verbinden scripts waarmee we onze lay-out correct kunnen weergeven.

Indeling In dit geval zien we dat de site uit twee delen bestaat: de hoofdcontainer met inhoud, die gecentreerd op het scherm staat, en de uitrekkende voettekst. De hoofdcontainer bestaat uit twee kolommen: hoofdinhoud en zijbalk. Daarboven bevinden zich de koptekst, navigatie (nav) en paginatitel (.heading).

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 (…)
Met deze aanpak kunt u de HTML-structuur direct in de CSS zien en krijgt u enige “ruimte” voor de regels.

Logo

Plaats het logo in de header-tag:

Geen extra stijlen vereist.

Zoekopdracht

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.

Om dit menu naar ons ontwerp te brengen, zullen we instellen volgende waarden variabelen:

/*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; ) ) )

Paginatitel

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);
Hier tekenen we een grijze streep als achtergrond op de div, en plaatsen er een inline h1 in in het gewenste lettertype en de achtergrondkleur van de pagina om de indruk te creëren transparante achtergrond voor h1.

Submenu

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.

In de componentinstellingen geven we aan dat alle gegroepeerde lijsten moeten worden weergegeven met de achtergrond en het frame van de component “paneel”:

@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 in, hoofdletters en verwijder de onderstreping. Het ampersand in de "&.active"-code wordt tijdens het compileren vervangen door de bovenliggende selector met behulp van de LESS-syntaxis: ".submenu li.active".

Zijbalkinhoud Naast het submenu bevat de zijbalkinhoud ook een afbeelding met de locatie van de kantoren.

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 de sitestijlen wijzigen standaard instellingen panelen die niet worden gewijzigd via variabelen:

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.

Citaat Laten we beginnen met het opmaken van de inhoud door een citaat toe te voegen.

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

John Doe, Lorem Ipsum
Met behulp van variabelen voor de jumbotron-component stellen we de tekstkleur in op wit en de gemerkte blauwe achtergrond:

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

Inhoud

Lorem ipsum dolor zit amet…

Donec vel nisl nibh…

De volgende stap is het toevoegen van twee afbeeldingen die aan het einde van de inhoudstekst staan. Dit gebeurt aan de hand van twee kolommen:

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;

Blokkeer "Ons team"

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

…

Ericka Nobriga

artistiek directeur

Cody Rousselle

senior ui-ontwerper

…
Nadat we de opmaak hebben gemaakt, geven we deze elementen de volgende stijlen:

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.

Voettekst De voettekst bestaat uit vier grote blokken: Twitter-feed, sitemap, sociale links en logo met copyright.

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 binnen de voettekst uit te lijnen.

Twitter-feed Geef de inhoud van de Twitter-feed op:

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

Stijlen:

Body ( ... voettekst ( ... .container ( ... h3 (rand-onder: 1px effen #919191; kleur: #ffffff; lettergrootte: 14px; regelhoogte: 21px; lettertypefamilie: @brand -lettertype; marge: 0 0 10px; teksttransformatie: hoofdletters; ) p ( marge: 5px 0; ) .twitter ( p (vulling-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 De sitemap bestaat uit twee gelijke kolommen met links:

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; ) ) ) )

Sociale banden

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) geen herhaling; 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 afmetingen en dezelfde achtergrond. En vervolgens hebben we met behulp van CSS deze achtergrond verplaatst, zodat de bijbehorende afbeelding op elke link werd weergegeven.

Stijlen worden op dezelfde manier uitgevoerd als bij de vorige blokken, met als enige verschil dat het blok aan de rechterrand is genageld en dat de uitlijning erin ook naar rechts is:

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