Van de auteur: Ik groet u. In eerdere artikelen hebben we gekeken naar de verbinding en componenten van het Bootstrap-framework, evenals naar het raster ervan. Het is tijd om onze kennis samen te vatten en een eenvoudige website te maken. Dienovereenkomstig zult u vandaag zien hoe de lay-out van de website eruit ziet op Bootstrap, zij het schematisch, en niet vanuit een PSD-lay-out. Maar laten we eerst nogmaals herhalen hoe de lay-out op bootstrap verschilt van de standaardlay-out met behulp van CSS.
Lay-out met behulp van een raamwerk: voordelen
Bootstrap vereenvoudigt, net als elk ander raamwerk, het proces van het ontwerpen van webpagina's aanzienlijk. Dit is een css- en js-framework, dat wil zeggen dat het beide heeft kant-en-klare stijlen en webscripts. Deze kant-en-klare componenten versnel de lay-out met 3-10 keer, omdat u praktisch alleen maar de benodigde klassen en data-attributen hoeft te schrijven om deze stijlen en scripts te activeren.
Het belangrijkste voordeel is ongetwijfeld in het raamwerk ingebouwd adaptief gaas. U hoeft zich geen zorgen te maken over de grootte van de blokken of hoe u ze kunt laten krimpen of van het scherm kunt laten verdwijnen als de vensterbreedte verandert. Voor een ervaren lay-outontwerper lijkt dit natuurlijk allemaal geen probleem, maar je moet het ermee eens zijn dat zelfs als je weet hoe je een probleem moet oplossen, dit niet betekent dat je het snel kunt doen.
Als u bijvoorbeeld mediaquery's gebruikt, moet u mogelijk rekening houden met een aantal nuances, zodat uw site niet zweeft. Met behulp van bootstrap zal de lay-out in eerste instantie erg netjes zijn, omdat je de CSS helemaal niet aanraakt, en als je dat wel doet, zal het alleen maar zijn om het uiterlijk van de elementen te veranderen, wat de site op geen enkele manier zal beschadigen .
Het tweede, zeer belangrijke voordeel ligt open broncode Bootstrap. U zult volledig begrijpen hoe belangrijk dit voordeel is nadat u uw eerste websites heeft gemaakt met behulp van het raamwerk.
Standaard download je volledige versie framework – bootstrap.css, bootstrap.js-bestanden, evenals een pictogramlettertype. Maar niemand houdt u tegen om te kiezen welke raamwerkcomponenten u in uw eigen build wilt opnemen en welke niet. Je kunt zelfs alle componenten helemaal uitschakelen en bijvoorbeeld alleen het raster, de tabbladen en de carrousel laten staan. En dan verkleint u de bestandsgrootte aanzienlijk en maakt u alleen verbinding met het project wat erop zal worden gebruikt.
Dit is een professionele aanpak met behulp van bootstrap. In feite heb je de meeste CSS-stijlen die daarin worden beschreven misschien niet nodig. Bijvoorbeeld voor knoppen, tabellen, afbeeldingen etc. Sommige stijlen kun je zelf beschrijven. In wezen is de echte waarde in het Bootstrap-framework het raster, evenals enkele JavaScript-componenten.
Hoe u een eenvoudige, schetsmatige website kunt maken met behulp van bootstrapIn feite kunt u in slechts een paar minuten sjablonen maken als u eenmaal goed heeft geoefend met het werken met het raamwerk. Laten we een typische, eenvoudige lay-out met twee kolommen maken met een koptekst, inhoudsblok, zijbalk en voettekst.
Eerst moet u beslissen of de sitecontainer dat zal hebben vaste maten, anders is het volledig van rubber. Als u de containerklasse aan de algemene container toewijst, is de maximale breedte beperkt tot 1170 pixels. Als u containervloeistof specificeert, beperkt niets de breedte van de site. Op monitoren met een breedte van 1920 pixels zal de breedte bijvoorbeeld hetzelfde zijn: 100% van het venster.
Daarom moet u dit punt zelf beslissen in de ontwerpfase van de site, om te begrijpen of er op zijn minst een soort binding aan pixels nodig is of niet.
Geweldig, onze sjabloon heeft drie rijen: koptekst, inhoud + zijbalk en voettekst. Over het algemeen dit standaard weergave eenvoudige sites met twee kolommen. Laten we eens kijken naar de opmaak:
Kap
< div class = "container-fluid" > < div class = "row" > < div class = "col-md-12" > < h1 >Kap< / h1 > < / div > < / div > |
In principe hoeft de hoed niet eens in het rooster geplaatst te worden, maar voor de orde doen we dat toch. We zullen er geen logo's of menu's invoegen, omdat we een puur schematische sjabloon hebben. Vervolgens komt de zijbalk en de inhoud. Dienovereenkomstig, dit nieuwe rij.
Laten we het blok met inhoud hoger in de lay-out plaatsen, zodat het bij het samenvouwen van blokken op mobiele apparaten hoger zal zijn dan de zijkolom. De zijbalk plaatsen wij direct na de inhoud. Mogelijk hoeft u niets te wijzigen als het ontwerp de zijbalk aan de rechterkant plaatst. Soms moet hij echter aan de linkerkant worden geplaatst, hier komen ze te hulp extra lessen duwen en trekken, waarmee u kolommen in een rij naar links en rechts kunt verplaatsen en hun positie kunt veranderen.
Algemene formule Het verplaatsen van de zijbalk naar links is eenvoudig: verplaats de zijbalk zelf naar links met de breedte van de inhoud, en de inhoud naar rechts met de breedte van de zijbalk. Maar eerst moet je natuurlijk beslissen wat deze breedte zal zijn. Laat ons hoofdblok 75% van de breedte in beslag nemen, en de zijkolom 25%. Dan hebben we deze code nodig:
< div class = "col-md-9 col-md-push-3" > < / div > < div class = "col-md-3 col-md-pull-9" > < / div > |
Zet het natuurlijk op één rij.
Een zijbalk makenWe plaatsen een verticaal menu in de zijkolom. Om dit te doen, kunt u in de documentatie kijken welke klassen er zijn voor stijllijsten. Klik op “componenten” – “lijstgroepen”.
Zijbalk
- Autoshowrooms 19
- Autoreparatiewerkplaatsen 178
- Reparatie
- Advertenties
< div class = "col-md-3 col-md-pull-9" > < h2 >Zijbalk< / h2 > < ul class = "list-group" > < li class = "list-group-item" >Autoshowrooms < span class = "badge" > 19 < / span > < / li > < li class = "list-group-item" >Autoreparatiewerkplaatsen < span class = "badge" > 178 < / span > < / li > < li class = "list-group-item" >Reparatie < / li > < li class = "list-group-item" >Advertenties < / li > < / ul > < / div > |
Zo ziet het menu eruit, met pictogrammen:
Het kan natuurlijk nog veel mooier gemaakt worden, maar wij maken slechts een sjabloon als voorbeeld. Ja, en ik heb het menu zonder links, maar er is nog steeds niets om naar te linken, dus laten we dit punt overslaan.
Laten we eindigen met de zijbalk. Op een echte site kunnen er natuurlijk nog veel meer dingen in staan. Bijvoorbeeld, reclamebanners. Nu gaan we aan de slag met het contentblok en daar laat ik je zien hoe je in Bootstrap met afbeeldingen kunt werken, zodat je zonder problemen banners in de zijbalk kunt invoegen.
Een inhoudsblok makenDe inhoud zou, zoals we ons herinneren, in ons geval hoger in de opmaak moeten zijn, dus plak de volgende code boven de zijbalk. Beide blokken worden in één rij geplaatst. Dit is de code die ik tot nu toe in mijn inhoud heb ingevoegd:
Inhoud kop
Lorem ipsum doloret yuio ffghgf fdfgfhf ttyuytg gjgfj gfgjgf ghgfjgf gfgugf ghjkghkhg gfjgj utytiytik fdhbfbvcv fdhfdhfh gngnggf fdhfdhfdhfd fdhfdhfdhfdhffd hfdhfdhfdhfd hdfdhf hfdhfd fdhfdhfdhdf fdhfdhfdhhfd hfdhd
< div class = "col-md-9 col-md-push-3" > < h2 >Inhoud< / h2 > < div class = "row" > < div class = "col-sm-4" > < div class = "panel" > < h4 >Koptekst< / h4 > < img src = "auto1.jpg" class = "img-responsive" > < p >Lorem ipsum doloret yuio ffghgf fdfgfhf ttyuytg gjgfj gfgjgf ghgfjgf gfgugf ghjkghkhg gfjgj utytiytik fdhbfbvcv fdhfdhfh gngnggf fdhfdhfdhfd fdhfdhfdhfdhffd hfdhfdhfdhfd hdfdhf hfdhfd fdhfdhfdhdf fdhfdhfdhhfd hfdhd< / p > < / div > < / div > |
Zoals u kunt zien, gebruiken we hier een genest rastersysteem. Zoals gepland moeten er drie artikelaankondigingen op rij in de inhoud staan. Om dit gemakkelijk te bereiken, nemen we het blok col-md-9 col-md-push-3, dat wil zeggen het inhoudsblok, als container voor het raster. In dit geval maken we er een rij in, waar op zijn beurt het raster met 12 kolommen weer voor ons beschikbaar komt. Met klasse col-sm-4 geven we één artikelaankondiging een breedte van exact 33,33%. Drie aankondigingen passen dus idealiter in één inhoudsregel. Kopieer en plak dit blok nog twee keer om te controleren hoe ze verschijnen.
Zo worden onze blokken met artikelaankondigingen weergegeven:
Perfect recht. Helemaal zonder vragen. Aankondigingen worden op alle apparaten in 3 kolommen geplaatst, behalve op de kleinste, waar alles in één kolom staat.
Ik hoop dat dit voorbeeld je duidelijk is. Nu stel ik voor om naar een iets meer niet-standaard voorbeeld te kijken. Laten we nog een rij in de inhoud maken. Deze keer is het de bedoeling om één artikel en een slider achter elkaar weer te geven, met een klein streepje ertussen. Laten we zeggen dat het artikel zich aan de linkerkant bevindt en de schuifregelaar aan de rechterkant. Er is een kleine kloof tussen hen + dit alles moet natuurlijk adaptief zijn.
U kunt eenvoudig de artikelaankondigingscode kopiëren en in onze nieuwe rij plakken. Het enige wat we moeten doen is een schuifregelaar maken. Eigenlijk zal ik de code hier niet geven, omdat het erg omslachtig is. Ga naar de officiële Bootstrap-website of de Russische versie, ga naar de JavaScript-sectie en zoek daar naar Carousel.
Bekijk het voorbeeld in de documentatie. Je moet het uitzoeken, er is niets ingewikkelds. Om de schuifregelaar te laten werken, hoeft u alleen maar uw afbeeldingen te nemen en het pad ernaartoe op te geven in de src-attributen voor de afbeeldingstags.
Het gaat er niet om hoe je de schuifregelaar zelf maakt - deze informatie is gemakkelijk te vinden in de documentatie. Onze taak is nu om te begrijpen in welk maatblok de schuifregelaar moet worden gewikkeld. We hebben nog 8 vrije cellen in de rij, maar aangezien er een klein streepje moet zitten tussen de artikelaankondiging en de schuifregelaar, zal ik de schuifregelaar in dit blok verpakken:
Nu hebben we een artikelaankondiging en een schuifregelaar op één regel, en hieronder staan nog 3 aankondigingen, en dit alles bevindt zich in het inhoudsblok.
Dus ik zal waarschijnlijk helemaal geen voettekst maken, omdat je nu zelf kunt begrijpen hoe je die moet maken. Volgens hetzelfde principe als de hoed. We zijn vandaag niet bijzonder geïnteresseerd in deze elementen omdat we met de zijkolom en vooral het hoofdblok werkten.
Als je alles na mij herhaalt, alleen met je eigen afbeeldingen, zul je moeten toegeven dat we een redelijk vlotte lay-out hebben (als je geen rekening houdt met de vreselijke verschijning blokkades, maar we hebben nu geen tijd om ze te repareren). Ik zal proberen de hele site te “fotograferen”:
Er zijn geen horizontale scrolls, de site is gemakkelijk te bekijken op elke schermresolutie, niets verschuift, er valt niets uit, enz.
Als we de lay-out niet schematisch, maar vanuit een PSD-lay-out hadden gedaan, was het natuurlijk veel mooier geworden, maar ten minste de lay-out valt niet uit elkaar en de sjabloon is volledig aanpasbaar, en we hebben heel weinig tijd besteed aan het maken ervan. Stel je eens voor hoeveel CSS-code je zou moeten schrijven om stijlen voor de schuifregelaar te maken en blokken op één regel uit te lijnen, inspringingen te plaatsen, enz. Natuurlijk zal een ervaren lay-outontwerper dit allemaal snel genoeg doen, maar zelfs zijn minder ervaren collega zal het met Bootstrap sneller kunnen doen.
Ben je klaar?Welnu, we hebben gekeken naar hoe de lay-out eruit ziet in Bootstrap 3. Vertel me er nu een simpel ding? Wil je de komende 5-10 dagen het Bootstrap-framework op professioneel niveau leren kennen en beginnen met het maken van responsieve sjablonen van elk niveau van complexiteit?
Al dat gepraat over Bootstrap, hoe je niet iets echt origineels kunt creëren uniek ontwerp, niets van dit alles is waar. Waarom? Wat houdt je tegen om het raamwerk aan te passen en alleen het raster en een paar van de nuttigste componenten over te laten? En u zult op geen enkele manier beperkt worden in de schrijfstijlen voor welke elementen dan ook op een webpagina, maar tegelijkertijd zult u niet nadenken over hoe u alles goed kunt laten weergeven op welk scherm dan ook, omdat het raamwerk dit probleem voor u oplost.
Samenvattend nodig ik u uit om onze eersteklas training te volgen Bootstrap-framework helemaal opnieuw. Ja, ja, zelfs als je niets van dit artikel hebt begrepen. Ik heb geen andere cursussen over Bootstrap in RuNet gezien, ook al bestaan ze, ze bevatten nauwelijks 2 sjablonen professioneel niveau+ landingspagina als bonus.
Nou, hiermee laat ik je aan het denken en ik hoop dat je je kans om Bootstrap onder de knie te krijgen niet mist en in de nabije toekomst de prijs voor de cursus volledig terugverdient, want met dit raamwerk kun je 2-3 keer meer sites maken voor dezelfde tijd, wat betekent dat je geld verdient meer geld. Ik denk dat je dit perspectief leuk vindt.
Vandaag hebben we een schematische lay-out gemaakt, die qua structuur echter verre van de eenvoudigste was. Zoals u kunt zien, heeft Bootstrap onze taak aanzienlijk vereenvoudigd. Ik neem afscheid van je en wens dat je zo snel en eenvoudig mogelijk websites ontwikkelt. Oh ja, en ook adaptief.
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 installerenAls 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:
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-documentatieWanneer 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, gaat u van de hoofdpagina 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-rasterWat 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 raster werkt, en de weg naar een snelle adaptieve lay-out staat voor je open.
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 blokgroottes te controleren verschillende breedtes, hier zijn ze:
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. Goed, basisprincipes We hebben de werking van het elektriciteitsnet opgelost, maar we moeten nog zien hoe het werkt...
Bootstrap genest rasterFeit 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'sDit 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:
Nou, een paar voorbeelden om het duidelijk te maken:
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.
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 gebruikIk feliciteer je. We hebben zojuist het meeste gepasseerd belangrijk onderwerp verbonden met het raamwerk. Het is het raster en het werken ermee dat belangrijk is. Werken met componenten betekent al dat je gewoon naar de documentatie gaat en daar de code kopieert vereiste onderdeel en verander het indien nodig naar uw wensen. Maar ik zal hieronder toch enkele voorbeelden geven van hoe de componenten te gebruiken.
Snelle floats en wrap-annuleringMet 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) menuWe 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 is bij velen te zien adaptieve sjablonen en het is eigenlijk heel eenvoudig te implementeren. Voorbeeldcode mobiel menu staat in de documentatie, ik zal het daar vandaan halen en het een beetje opnieuw doen.
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 als u op de knop aan de rechterkant klikt bovenste hoek. Alleen het logo bleef op het scherm staan.
Tegelijkertijd kunt u uit het bovenstaande voorbeeld begrijpen hoe een vervolgkeuzemenu-item wordt gemaakt in Bootstrap; laten we deze code extraheren voor meer informatie gedetailleerde overweging:
Fitnessapparatuur
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 BootstrapIn veel winkels kun je het zogenaamde blok vinden broodkruimels, die bevat volledige pad Naar huidige pagina. Dit is ook eenvoudig te doen met behulp van het framework, zie de code:
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: 
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:
Om een andere kleur te markeren wanneer u over een tabelrij beweegt, gebruikt u de klasse table-hover.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 | Bootstrap-voorbeeld
 Vorige Volgende Onze activiteiten Nieuwe projecten 
|
Bootstrapvoorbeeld .logo (breedte:55px; ) .navbar ( marge-onder: 0; randradius: 0; ) voettekst ( achtergrondkleur: #f2f2f2; vulling: 25px; ) .carousel-inner img ( min-height: 200px; breedte: 100%; marge: auto;) @media (max. breedte: 600px) ( .carousel-caption (weergave: geen; ) ) /*Creëren navigatiebalk, welke bij klein formaat het scherm toont een hamburgermenu (een knop met drie balken) */
/*Ik maak een automatisch scrollende galerij */ /*Hier geef ik aan dat er onderaan de foto 3 indicatoren moeten zijn voor het schakelen tussen foto's*/ /*Ik voeg de afbeeldingen zelf in, waardoor de eerste actief wordt*/Gezellig huis met twee verdiepingen met 8 kamers Modern comfortabel huis met 4 kamers Ruim huis in oude stijl met 7 kamers /*Ik maak een frame dat links en rechts wisselt met de knoppen links en rechts in de afbeelding*/ Vorige Volgende /*Ik maak een aparte statische container voor de hoofdinhoud*/ Onze activiteiten Ons bedrijf houdt zich bezig met de bouw van moderne, comfortabele particuliere huizen, herenhuizen, kantoorgebouwen, winkelcentra en andere soorten gebouwen.
Onze voltooide projecten onderscheiden zich altijd van andere bedrijven, omdat we unieke, doordachte gebouwen creëren die hun bewoners en bezoekers maximaal comfort zullen bieden.
Nieuwe projecten
Vandaag zijn we bezig met de bouw van een hoogbouw kantoorgebouw.
/*Een zwevende paginavoettekst maken*/
