Klassen col-md-offset-4 säger: på medelstora och stora skärmar, flytta rutan till vänster med 33 % av bredden på föräldrabehållaren (1/3 stoppning till vänster, 1/3 stoppning till lådan, ⅓ stoppning till höger, vilket resulterar i centrering).
Klass col-xs-offset-6: på extra små och små skärmar, offset vänster med 25% (¼ vänster marginal, ½ block bredd, ¼ höger marginal).

Jag hoppas att du förstår poängen och tillämpar dessa klasser om det behövs.

Bootstrap-komponenter och exempel på deras användning

Jag gratulerar dig. Vi har precis gått igenom det viktigaste ramrelaterade ämnet. Det är nätet och arbetet med det som är viktigt. Att arbeta med komponenter innebär redan att du bara går till dokumentationen, kopierar koden för den nödvändiga komponenten där och vid behov ändrar den själv. Men jag kommer ändå att ge dig några exempel på hur du använder komponenterna.

Snabba flytningar och lindningsavstängning

Klasserna dra-vänster och dra-höger låter dig snabbt flyta vilket block som helst genom att skicka det till vänster eller höger. Glöm inte avbokningen av inslagning. Du kan använda clearfix-klassen för detta.

Bootstrap: Horisontell responsiv (mobil) meny

Vi kommer att lägga till följande komponenter direkt i mallen, så om du vill arbeta med koden, och inte bara läsa, följ alla steg åt mig.

På Bootstrap är det faktiskt väldigt enkelt att göra det inte bara adaptiv meny, och den så kallade mobilen, som är helt minimerad på små skärmar och gömmer sig under en knapp. Detta kan ses i många responsiva mallar och är faktiskt väldigt lätt att implementera. Koden för exemplet på mobilmenyn finns i dokumentationen, jag tar den därifrån och gör om lite.

Så det första jag gör är att ta bort rubrikblocket, eftersom vår meny faktiskt kommer att vara rubriken för min mall. Menykoden bör placeras framför allt innehåll på webbplatsen, även före behållarblocket. Varför? Ja, du kommer nu att se själv att rutnätet redan är inbyggt i navigeringsfältet. Så här är koden:

Det faktum att det finns mycket kod, oroa dig inte för detta. Så här ser sidan ut nu:


Men om din meny inte tar upp hela skärmens bredd, är det vettigt att centrera den. För att göra detta bör du sedan skapa ett extra omslagsblock för menyn, som ska placeras efter blocket med klassen container-fluid. Glöm inte att stänga detta block. Jag gav den navbar-wrap-klassen. Det här är stilarna för det:

Det vill säga, du kan helt enkelt begränsa bredden och mitten. Alternativt, byt först ut behållarvätskan mot en behållare.


Som du kan se har vi lagt till en logotyp i menyn, två enkla objekt, en rullgardinsmeny och ett sökformulär. Det vill säga att det finns många element. Du kan enkelt anpassa menyn för dig själv genom att lägga till dina egna klasser. Men för tillfället är mitt mål bara att visa dig den här komponenten.

Så här kommer menyn att se ut på enheter med en skärmbredd på mindre än 768 pixlar:


Som ni ser har menyn kollapsat. Den öppnas när du klickar på knappen i det övre högra hörnet. Bara logotypen fanns kvar på skärmen.

Rullgardinsmenyn

Samtidigt, från exemplet ovan, kan du förstå hur en rullgardinsmeny görs i Bootstrap, låt oss dra ut den här koden för mer detaljerad övervägande:

Simulatorer

• Löpband


• Ellipstränare


• Bänkar

Så, behållaren för rullgardinsmenyn är en vanlig listpost med rullgardinsklassen. Inuti den är huvudlänken, genom att klicka på den öppnas rullgardinsmenyn. Det är mycket viktigt att skriva ut till henne dataattribut som du ser i koden kommer ingenting att fungera utan den. Du måste också se till att filen bootstrap.js är ansluten till dina webbsidor.

Ett span med caret-klassen är inget annat än en pil, tack vare vilken du kan förstå att objektet är en rullgardinsmeny, men under själva menyn bildas med hjälp av en standard punktlista. Det är det, allt är tillräckligt enkelt, du kan använda den här koden för att implementera rullgardinsobjekt.

Lägga till ströbröd med Bootstrap (brödsmulor)

I många butiker kan du hitta det så kallade brödsmuleblocket som innehåller hela sökvägen till den aktuella sidan. Med hjälp av ramverket är detta också enkelt att göra, se koden:

1. Hem


2. Katalog


3. Produkter

Faktum är att det räcker att ange brödsmuleklassen för en numrerad lista och ange de vanliga listobjekten i den. Förresten, jag kommer att centrera rubrikerna på andra nivån i mallen (detta måste skrivas i css):

H2 (textjustera: mitten;)

Om du på något sätt vill ändra utseendet på brödsmulorna, vrid bara till css-väljaren .breadcrumb. Så här kan du till exempel ta bort bakgrundsfärgen:

Brödsmula (bakgrund: transparent;)

Så här ser sidan ut nu:

Bootstrap-bord

Som standard kommer bordet att sträcka sig över hela fönstret, så slå in det i en låda med begränsad bredd för att begränsa storleken. Som standard ser det hemskt ut, men om du lägger till tabellklassen i tabelltaggen blir allt mycket trevligare:

Observera att i den här versionen har cellerna tydliga gränser endast längst ner, om du vill att gränser ska vara på alla fyra sidorna måste du lägga till en klass till:

Om du vill göra tabellen randig, det vill säga så att raderna får en omväxlande bakgrundsfärg, lägg till klassen tabellrandig. För att göra den markerad i en annan färg när du håller muspekaren över en rad i en tabell, använd klassen för tabell-hover.

I grund och botten är dessa alla funktioner hos tabeller. Hur göra adaptivt bord, Jag har redan skrivit en separat artikel, så jag kommer inte att upprepa mig själv. Det enda är att du också kan lägga till klasser som info, framgång, varning och andra till raderna och cellerna i tabellen för att måla dem i önskad färg.

Naturligtvis kan du enkelt skriva dina egna klasser i style.css och använda dem. Detta avslutas med tabellerna.

P.S. Artikeln kommer att läggas till och kompletteras...

Resultat

Jag hoppas att artikeln var till hjälp och att du kunde förstå det viktigaste. Du kan ställa alla frågor med hjälp av kommentarer.

Fördelen med att använda CSS-ramverk är att layoutdesignern inte behöver tänka på många av layoutnyanserna som ramverksskaparna redan har tänkt ut åt honom. Dessa nyanser inkluderar kompatibilitet över webbläsare, stöd för olika skärmupplösningar och mycket mer. Layoutdesignern anger bara vad, hur och när som ska visas, resten av ramverket gör resten. Detta tillvägagångssätt kan avsevärt påskynda layouten av webbplatsen. Bootstraps styrkor inkluderar dess popularitet. Detta innebär att det blir lättare för en annan kodare att underhålla din kod.

Nackdelen med att använda ramverk är det faktum att sidan måste "bära" hela extra ramstilar, även om den bara använder en liten del av dem. Ramverket är ett utmärkt verktyg för att skapa prototyper och skapa sidor för vilka design är sekundär, till exempel adminsidor. Om du har en mycket specifik design kan det vara svårare att layouta med ett ramverk än att använda inbyggda verktyg. Ändå är det möjligt.

Om att använda Bootstrap

Det finns för närvarande flera sätt att arbeta med Bootstrap-stilar.

Utan att använda LESS

För nybörjare rekommenderar Bootstrap själv följande tillvägagångssätt: du måste ladda ner den kompilerade Bootstrap från webbplatsen och lägga in den i ditt projekt utan att ändra något. Sedan måste du skapa din tomma CSS-fil och inkludera den efter bootstrap.css.

Efter det, för att ändra Bootstrap-stilarna, måste du avbryta dem i din styles.css så här:

A (färg: #beceda;)
Den uppenbara nackdelen med detta tillvägagångssätt är att du manuellt måste söka efter de stilar som krävs som du vill avbryta, och det kommer inte alltid att vara trivialt, eftersom vissa Bootstrap-alternativ tillämpas på många väljare i en modifierad form, till exempel genom formler. Anpassningsverktyget kan ge lite hjälp här, det hjälper dig att kompilera dina ändringar korrekt, men bara en gång. Om du i framtiden vill ändra någon parameter måste du köra om de ändrade värdena för alla fält för att kompilera dina stilar.

Använder LESS

Den här metoden förutsätter att alla Bootstrap-variabler lagras i .less-filer. Utvecklaren arbetar med dessa variabler och vid behov kompilerar de manuellt eller automatiskt till CSS-filer, medan själva HTML-koden endast innehåller de kompilerade CSS-filerna. Det är detta alternativ som kommer att betraktas som det mest flexibla i artikeln.

Existerar Ett stort antal sätt att kompilera MINDRE filer och Bootstrap överlåter det till utvecklaren. Bootstrap själv använder Grunt för att kompilera, du kanske föredrar plugin för JetBrains produkter, och eftersom den här artikeln riktar sig till nybörjare kommer vi att titta på mer enkla lösningar... Sådana lösningar är WinLess för Windows, SimpLESS för Mac eller Koala för Linux. Alla dessa program gör ungefär samma sak: de tar emot en mapp med MINRE filer som indata och lyssnar efter ändringar i dem. Så snart du gör ändringar i en fil kompileras den omedelbart till den angivna CSS-filen. På så sätt behöver du inte kompilera det manuellt efter varje ändring. Du ändrar filen LESS, sparar den och ser omedelbart ändringarna på sajten i en redan kompilerad, komprimerad form.

Projektskapande

Det första steget är att skapa enkel struktur filer för vårt projekt.

Förbesiktning

När du har skapat filstrukturen öppnar du psd-filen i Photoshop. Det är viktigt att noggrant granska mallen och utvärdera den. Vi måste förstå följande saker:

• Hur kommer bilderna att skivas?
• Vilka komponenter kommer att användas?
• Vilka kommer att vara de viktigaste stilarna?
• Vilken sidlayout kommer vi att få?

Först efter att du mentalt svarat på dessa frågor för dig själv kan du fortsätta till layouten. Låt oss titta på dessa frågor i ordning.

Allmänna bilder

På detta stadium du behöver bara klippa och spara allmänna bilder som kommer att finnas på alla sidor på webbplatsen och som inte är relaterade till innehåll. I vårt fall kommer detta att vara en ljusgrå sidbakgrund, en sidhuvudbakgrund, en kortbild, två logotyper och knappar. sociala nätverk.

Spara kartbilden:

Låt oss spara logotyperna enligt följande:

Bilder / logo.png
bilder / footer-logo.png

Återkommande bakgrundsbilder det är nödvändigt att skära ut i den minsta biten tillräckligt för att bilda en komplett bild genom upprepning vertikalt och horisontellt.

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

Sociala medier ikoner med samma storlek bekvämt att spara i en fil och använda som sprites för snabbare laddning. Mer information om bildsömmar beskrivs i den första delen. Detta kommer att sluta med två filer:

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

Komponenter

Den största skillnaden mellan layouten med använder Bootstrap från native layout är att Bootstrap introducerar ett sådant koncept som komponenter. Komponenter används ofta färdig HTML block med fördefinierade stilar. Ibland använder komponenter JavaScript. Layoutdesignern kan använda både en färdig komponent och definiera sitt eget utseende för den. För att göra detta behöver du ofta bara ändra värdet på variabler i Bootstrap. Om det behövs mer flexibla ändringar kan layoutdesignern alltid ändra HTML och CSS som de vill.

Om du tittar på vår mall kan du se att vi behöver följande komponenter:

1. För layout i kolumner - rutsystem (rad, kolumn)
2. För sökning - inline form (form-inline), grupperade kontroller (input-grupp), knapp (btn)
3. För navigering - navigeringsfältet (navbar) och själva navigeringen (nav)
4. För att visa en undermeny - en grupperad lista (listgrupp)
5. För kortblocket - visuell panel(panel)
6. För att visa den stora centralenheten - jumbotron
7. För att visa fotoramar - miniatyrer

Vi kommer att uppehålla oss vid varje komponent mer i detalj när vi stöter på den i layouten.

Grundläggande stilar

I Bootstrap är alla standardstilar redan inställda, vi behöver bara avbryta dem om de skiljer sig från vår design. Låt oss göra detta i filen src / less / variables.css.

Först och främst måste du lägga till variabler som inte finns i Bootstrap-inställningarna för att kunna använda dem i framtiden. Detta är bara ett specifikt designtypsnitt för oss.

@ brand-font: "Oswald", sans-serif;
Om du vill använda en mall för ryska webbplatser kan du prova att byta ut Oswald-teckensnittet med det närmaste Cuprum som stöder det kyrilliska alfabetet.

Låt oss nu ersätta Bootstrap-inställningarna med våra egna:

När vi är klara med variablerna, låt oss börja skriva våra designstilar i filen styles.less. Låt oss först ansluta själva Bootstrap och våra variabler:

@import "bootstrap / bootstrap.less"; @import "variables.less";
Alla Bootstraps standardstilar kan inte ändras med variabler, låt oss göra det manuellt:

P (marginal: 20px 0;) .form-control (box-shadow: ingen;) .btn (font-family: @ brand-font;)
Här tog vi bort skuggan från formulärelementen och specificerade det specifika sidtypsnittet för texten i knapparna.

Sedan beskriver vi sidans bakgrund och den översta raden:

Kropp (kant-top: 5px solid # 7e7e7e; bakgrundsbild: url (../ images / bg.png);)
Längre i texten kommer det inte att anges i vilken fil stilarna är skrivna. Kom bara ihåg att vi kommer att spara alla variabler i filen variables.less, och vi kommer att lagra CSS-stilar i styles.less.

HTML wireframe

Vi börjar traditionellt webblayouten med HTML-skelettet. Infoga koden för den enklaste mallen från sidan Komma igång i filen index.html, efter att du har tagit bort alla onödiga saker:

Detta block skapar HTML5-dokumentstrukturen. I rubriken anger vi namnet på vår sida - Whitesquare. Med viewport-metataggen indikerar vi att sidbredden på mobila enheter kommer att vara lika med skärmens bredd och den initiala skalan kommer att vara 100 %. Då ingår stilfilen. Och för versioner av Internet Explorer mindre än nionde inkluderar vi skript som gör att vi kan visa vår layout korrekt.

Layout

I det här fallet ser vi att webbplatsen består av två delar: den huvudsakliga innehållsbehållaren, som är centrerad på skärmen, och den sträckande sidfoten. Huvudbehållaren består av två kolumner: huvudinnehåll och en sidofält. Ovanför dem finns rubrik, navigering (nav) och sidrubrik (.heading).

Låt oss lägga till följande kod till kroppen:

Det är här den första Bootstrap-komponenten stöter på - kolumner. Kolumnernas överordnade element ges klassen "rad", och kolumnklasserna börjar med prefixet "col-" följt av skärmstorleken (xs, sm, md, lg) och slutar med den relativa bredden av kolumnen .

En kolumn kan samtidigt tilldelas olika klasser med värden för skärmar, till exempel class = "col-xs-12 col-md-8". Dessa klasser anger helt enkelt kolumnbredden som en procentandel för en given skärmstorlek. Om kolumnen inte tilldelas en klass för en specifik skärm, kommer klassen för den minsta specifika skärmen att tillämpas, och om den inte anges, kommer ingen bredd att tillämpas och blocket kommer att uppta den maximala möjliga bredden.

Våra klasser "col-md-7" och "col-md-17" indikerar att blocken är kolumner 7 och 17 breda i förhållande till den överordnade behållaren. Bootstrap har som standard totalt 12 kolumnbredder, men vi har fördubblat det antalet för att uppnå den flexibilitet vi behöver.

Brödtext (… .wrapper (utfyllnad: 0 0 50px 0;) rubrik (utfyllnad: 20px 0;))
Vi placerade denna konstruktion inuti kroppen. LESS-syntaxen låter dig kapsla regler i varandra, som sedan kompileras till sådana konstruktioner:

Body .wrapper (...) body header (...)
Detta tillvägagångssätt låter dig se HTML-struktur precis inuti CSS och ger någon form av "räckvidd" till reglerna.

Logotyp

Infoga logotypen i rubriktaggen:

(! LANG: Ingen extra styling krävs.

Sök

För att skapa en sökning behöver vi följande Bootstrap-komponenter: ett inlineformulär, grupperade kontroller och en knapp.
Skapa en högerjusterad inline-form i header-taggen. Fält i en sådan form måste ha klassen "form-control" och etikett.

Vi lägger komponenten "grupperade kontroller" i formuläret. Med grupperingskontroller kan du ta bort indraget mellan textinmatningen och knappen och så att säga slå samman dem till ett enda element.
Det är en div med klassen "input-group" och fält, och knappen för en sådan komponent placeras i ett block med klassen "input-group-btn".

Eftersom vi inte behöver visa etiketten för sökfältet kommer vi att dölja den med klassen "sr-only". Detta krävs för speciella skärmläsare.

Klassen "btn-primary" läggs till knappen, vilket betyder att detta är den primära knappen i detta formulär.

…

Sök

Gå

Allt som återstår för oss är att ställa in bredden på sökformuläret i stilarna.

Brödtext (… .wrapper (… rubrik (… .form-search (bredd: 200px;)))))

Meny

För att visa menyn, ta "navigeringsfältet"-komponenten och placera "navigations"-komponenten i den, vilket är en lista med länkar. För navigering läggs klassen "navbar-nav" till, som tillämpar speciella navigeringsstilar i navigeringsfältet.

För att få den här menyn till vår design kommer vi att ställa in följande värden för variablerna:

/ * navbarens höjd * / @ navbar-höjd: 37px; / * ställ in mer horisontell utfyllnad * / @ nav-länk-utfyllnad: 10px 30px; / * bakgrund för menyalternativ * / @ navbar-default-bg: @ panel-bg; / * textfärg i menyalternativ * / @ navbar-default-link-color: # b2b2b2; / * och på muspekaren - samma * / @ navbar-default-link-hover-color: @ navbar-default-link-color; / * bakgrunden för det aktiva menyalternativet är vår specifika blå färg * / @ navbar-default-link-active-bg: @ brand-primary; / * textfärg för det aktiva menyalternativet * / @ navbar-default-link-active-color: #fff;
Förutom de konfigurerbara parametrarna kommer vi att beskriva ytterligare sådana i stilarna - dessa är versaler och vårt specifika teckensnitt:

Brödtext (… .wrapper (… .navbar a (text-transform: versaler; teckensnitt: 14px @ brand-font;)))

Sidans titel

Sidans rubrik placeras i en div med klassen "rubrik".

Och den har följande stilar:

Brödtext (… .wrapper (… .rubrik (höjd: 40px; bakgrund: transparent webbadress (../ images / h1-bg.png); marginal: 30px 0; utfyllnad-vänster: 20px; h1 (display: inline-block); färg: # 7e7e7e; teckensnitt: normal 40px / 40px "Oswald", sans-serif; bakgrund: url (../ images / bg.png); marginal: 0; utfyllnad: 0 10px; textomvandling: versaler;)) ))
Här ritar vi en grå remsa på bakgrunden av div, och i den kapslar vi en inline h1 med önskat teckensnitt och bakgrund av sidfärgen för att ge intrycket av en transparent bakgrund för h1.

Undermeny

När vi skapar en undermeny kommer vi inte att använda komponenten "navigering", eftersom den inte passar oss särskilt bra när det gäller stilar, är komponenten "grupperad lista" mycket mer lämplig för oss. Varje element i en sådan komponent har en klass "list-group-item".

Undermenyn måste placeras i sidotaggen. Listan med länkar skapas på samma sätt som huvudmenyn.

I komponentinställningarna kommer vi att indikera att alla grupperade listor ska visas med en bakgrund och ram för "panel"-komponenten:

@ list-group-bg: @ panel-bg; @ list-group-border: @ panel-inner-border;
Och tillämpa följande stilar på undermenyn:

Brödtext (... .wrapper (... .undermeny (marginal-bottom: 30px; li (display: list-item; font: 300 14px @ brand-font; list-style-position: inside; list-style-type: square; utfyllnad) : 10px; text-transform: versaler; & .active (färg: @ brand-primary;) a (färg: @ text-color; text-decoration: none; &: hover (färg: @ text-color;))) )))
Först returnerar vi standardstilarna till listobjekten, eftersom Bootstrap avbröt dem med sina egna. Lägg till stoppning i botten. Undermenyn har ett tunnare teckensnitt och fyrkantiga markörer. Och för länkar, ställ in färger, versaler och ta bort understrykningen. Et-tecken i koden "& .active" av LESS-syntaxen kommer att ersättas vid kompilering med föräldraväljaren: ".submenu li.active".

Innehåll i sidofältet

I sidofältsinnehållet finns, förutom undermenyn, även en bild med lokalisering av kontor.

För att visa det kan vi använda "panel"-komponenten, eller snarare dess variant "huvudpanel" (panel-primär) för att färglägga rubriken. Den här komponenten innehåller ett rubrikblock (panelrubrik) och ett panelinnehållsblock (panelkropp). Lägg till klassen "img-responsive" till kartbilden, vilket gör att bilden kan krympa när skärmens bredd är liten.

I Bootstrap-variablerna har vi redan ställt in bakgrundsfärgen för panelen (panel-bg), och nu kommer vi att indikera att den "primära" panelen kommer att ha en grå kant på standardpanelen och inte den blå som är inställd som standard:

@ panel-primary-border: @ panel-inner-border;
Nu, i webbplatsstilarna, måste du ändra standardpanelinställningarna, som inte kan ändras genom variabler:

Panel (box-shadow: ingen; .panel-heading (font: 14px @ brand-font; text-transform: versaler; utfyllnad: 10px;) .panel-body (utfyllnad: 10px;))
Här har vi tagit bort skuggan från panelerna, satt våra egna indrag och satt vårt eget typsnitt för titeln.

Citat

Låt oss börja innehållslayouten genom att lägga till ett citat.

Detta sidelement är mest likt Jumbotron-komponenten. Låt oss lägga till det i innehållskolumnen:

Använd variablerna för jumbotronkomponenten, ställ in vit färg text och blå bakgrund:

@ jumbotron-bg: @ brand-primary; @ jumbotron-färg: #fff;
Och låt oss beskriva våra stilar:

Brödtext (... .wrapper (... .jumbotron (kant-radie: 0; utfyllnad: 0; marginal: 0; blockquote (kant-vänster: ingen; p (teckensnitt: 300 kursiv 33px @ brand-font; text-transform: versaler); margin-bottom: 0;) small (textjustera: höger; färg: # 1D8EA6; teckensnitt: 300 20px @ brand-font; &: före (innehåll: "";))))))
Här tar vi bort standardavrundningen, komponentstoppning och citatdekorationer från Bootstrap. Vi lägger också till våra teckensnitt.

Innehåll

Lorem ipsum dolor sit amet ...

Donec vel nisl nibh ...

Donec vel nisl nibh ...

Nästa steg är att lägga till två bilder som finns i slutet av innehållstexten. Detta görs med två kolumner:

Miniatyrbildsklassen förvandlar bilder till en miniatyrbildskomponent. Han kommer att göra allt stylingarbete åt oss. Det enda som återstår för oss är att ställa in vår egen indrags- och kantfärg i variablerna för denna komponent:

@ thumbnail-padding: 1px; @ thumbnail-border: # c9c9c9;

Vårt lagblock

När du kodar detta block, låt oss först lägga till en titel:

Vårt lag

med stil:

Brödtext (… .wrapper (… h2 (bakgrund: ingen upprepad rullning 0 0 # 29C5E6; färg: #fff; teckensnitt: 300 30px @ brand-font; utfyllnad: 0 10px; text-transform: versaler;)))
Och lägg sedan till ett block med klassen "team", som består av två rader som innehåller anställdskort. Varje kort är en kolumn. Kortet har en bredd som är lika med fyra kolumner i vårt rutnät. Alla kort utom det första i raden har en vänster indrag, som skapas av klassen "col-md-offset-1". Innehållet på kortet består av en bild och en beskrivning (.caption)

Efter att ha skapat markeringen kommer vi att ge dessa element följande stilar:

Brödtext (... .wrapper (... .team (.rad (margin-top: 20px; .col (white-space: nowrap; .thumbnail (margin-bottom: 5px;)))) .col-md-offset- 1 (marginal-vänster: 3,7%;) .caption (h3 (teckensnitt: 300 16px @ brand-font; margin: 0;) p (font: 300 14px @ brand-font; color: @ brand-primary; margin: 0 ;))) )))
Utöver utfyllnads- och teckensnittsstilarna som ställs in här, har vi ändrat klassen "col-md-offset-1". Han var tvungen att sätta ett indrag på 3,7 %, sedan standardindraget var för stort.

Sidfot

Sidfoten består av fyra stora block: ett Twitter-flöde, en webbplatskarta, sociala länkar och en copyright-logotyp.

Låt oss först skapa en sidfotsbehållare med dessa block:

Och vi kommer att tillämpa designen på den:

Sidfot (bakgrund: # 7e7e7e; färg: #dbdbdb; font-size: 11px; .container (höjd: 110px; stoppning: 10px 0;))
Footer-taggen ställer in ett grått område över hela skärmens bredd, och behållaren inom den visar området centrerat på stora skärmar och ställer in höjden och utfyllnaden för sidfoten. Vi använder kolumner för att justera rutor i sidfoten.

Twitter flöde

Lägg upp innehållet i Twitter-flödet:

Stilar:

Brödtext (… sidfot (… .container (… h3 (kant-bottom: 1px solid # 919191; färg: #ffffff; font-size: 14px; line-height: 21px; font-family: @ brand-font; margin: 0) 0 10px; textomvandling: versaler;) p (marginal: 5px 0;) .twitter (p (padding-höger: 15px;) tid a (färg: # b4aeae; textdekoration: understrykning;)))))
För alla sidfotshuvuden ställer vi in ​​typsnitt och indrag, och vi gör även understrykning genom den nedre ramen. För stycken anger vi indraget. För länken som visar datumet, ställ in färg och understrykning.

webbplatsens karta

Webbplatskartan består av två lika stora kolumner med länkar:

För länkarna, ställ in färg, teckensnitt och indrag mellan dem.

Brödtext (… sidfot (… .container (… a (färg: #dbdbdb;) .sitemap a (display: block; font-size: 12px; margin-bottom: 5px;)))))

Sociala länkar

Infoga en uppsättning länkar i ett block med klassen "social".

Och låt oss styla dem:

Brödtext (… sidfot (… .container (… .social (.social-ikon (bredd: 30px; höjd: 30px; bakgrund: url (../ images / social.png)) ingen repetering; display: inline-block; marginal -höger: 10px;) .social-icon-small (bredd: 16px; höjd: 16px; bakgrund: url (../ images / social-small.png) no-repeat; display: inline-block; marginal: 5px 6px 0 0;) .twitter (bakgrundsposition: 0 0;) .facebook (bakgrundsposition: -30px 0;) .google-plus (bakgrundsposition: -60px 0;) .vimeo (bakgrundsposition: 0 0 ;) .youtube (bakgrundsposition: -16px 0;) .flickr (bakgrundsposition: -32px 0;) .instagram (bakgrundsposition: -48px 0;) .rss (bakgrundsposition: -64px 0;) ))))
Här tillämpade vi sprite-tekniken - när en bildfil tillämpas för olika bilder. Alla länkar var uppdelade i stora ikoner (.social-icon) och små (.social-icon-small). Vi har ställt in dessa klasser så att de visas i form av en inline-box med fasta mått och samma bakgrund. Och sedan med använder CSS flyttat denna bakgrund så att varje länk visar en motsvarande bild.

upphovsrätt

Blocket med upphovsrätten och logotypen är en bild med en länk och ett stycke med text under.

Stilar görs på samma sätt som de tidigare blocken, med den enda skillnaden att blocket är spikat till höger kant och inriktningen inuti det är också på höger kant:

Brödtext (... .footer (... .container (... .footer-logo (flytande: höger; margin-top: 20px; font-size: 10px; text-align: right; a (text-dekoration: understrykning;)))) )

Detta fullbordar layouten. Det färdiga projektet kan laddas ner

Hej! I den här artikeln kommer jag att visa dig hur du installerar och ansluter Bootstrap-ramverket. Du kan ta reda på vad Bootstrap är.

Standardinstallation av ramverket

O standardinstallation Jag har redan sagt mycket i tidigare artiklar. Allt är enkelt här. Gå till den officiella webbplatsen getbootstrap.com, klicka på Komma igång och välj det allra första alternativet. Således laddar vi ner den fullständiga versionen av bootstrap med alla js- och css-komponenter.

Bootstrap CDNÄr en möjlighet att ansluta ett ramverk från en CDN-lagring utan att ladda ner dess filer till din dator. Naturligtvis kan det i detta fall inte vara fråga om någon anpassning.

Anpassning av ramverk

Men faktum är att bootstarp som standard innehåller många komponenter, och vissa av dem kanske helt enkelt inte är användbara för dig när du utvecklar en specifik webbplats. Du designar till exempel en webbutik. Kanske behöver du inte modaler och verktygstips, och du behöver inte heller många av css-komponenterna. I det här fallet skulle det vara klokt att inte inkludera dessa komponenter i ramverket.

Eller så kodar du en enkel blogg. Låt oss säga att du egentligen inte behöver något där alls, så du kan bara lämna nätet och ett par av de viktigaste komponenterna.

Att välja bara vad du behöver är ett professionellt tillvägagångssätt för att bygga webbplatser och använda Bootstrap. Som standard väger den okomprimerade versionen av ramverkets css-stilar i den senaste versionen 143 kilobyte. Och skript är mer än 60 kilobyte. Ja, om du komprimerar koden kan du uppnå en viktminskning på 20-40%, men ändå blir filerna inte de lättaste.

Om du till exempel stänger av alla komponenter och bara lämnar rutnätet (detta görs väldigt ofta), så blir css-vikten bara 15-20 kilobyte, och i komprimerad form ett par kilobyte mindre. Detta kommer att maximera hastigheten och optimeringen av ditt projekt.

Okej, det var bara teori. För att anpassa ramverket, besök samma officiella webbplats och gå till objektet Anpassa.

Att välja rätt komponenter

Först och främst kan du här konfigurera vilka komponenter du vill inkludera i din version. Bootstrap... Låt oss börja med CSS:

Utskriftsmediastilar- mediafrågor för utskrift. Om du inte planerar att skriva ut webbplatssidor kan du stänga av det.

Typografi, kod, tabeller, formulär och knappar är allt du kan styla i css själv om du vill. Naturligtvis kommer detta att ta tid, men om dina element är väldigt olika i design från vad ramverket erbjuder som standard, kan du inaktivera alla dessa css-stilar och skriva dem själv.

Rutsystem- Det är faktiskt ett rutnät. Jag ser ingen anledning att någonsin inaktivera det alls, eftersom detta är ramverkets huvudkraft. Det är tack vare rutnätet som du enkelt kan anpassa mallar för vilken enhet som helst, och idag i århundradet mobiltrafik detta är oerhört viktigt. Vi inaktiverar det inte på något sätt.

Responsiva verktyg- adaptiva verktyg, jag rekommenderar också att du aldrig inaktiverar dem. Vi kommer att prata om adaptiva verktyg i nästa artikel, där vi kommer att titta närmare på nätsystemet. Det här är klasser som låter dig dölja ett element eller göra det synligt vid en viss skärmbredd. Mycket bekvämt och hjälpsamt.

Till exempel saker som listgrupper, knapprader, ikoner, staplar, aviseringar, paginering, brödsmulor, etc. Du kan också inaktivera ikonens teckensnitt. Detta bör göras om du inte behöver ikoner på webbplatsen alls, eller om du ansluter en annan uppsättning. Egentligen måste du sitta och tänka på vad du behöver av alla de presenterade komponenterna och vad inte. Varje enskild sajt kommer att ha sin egen uppsättning, eftersom det överallt finns en annan design och funktionalitet.

Javascript-komponenter

Dessa är rullgardinsmenyer, verktygstips, modaler, skjutreglage. Om du inte behöver något av detta, inaktivera det. I vissa fall kan alla komponenter verkligen komma till nytta när du har en rullgardinsmeny på din webbplats, ett skjutreglage på startsidan och modala fönster. I vissa fall kan 1-2 komponenter vara användbara som mest, då finns det ingen anledning att förlänga koden, inaktivera onödiga komponenter.

Jquery plugins

Här kan du inaktivera jquery library plugins som hjälper javascript-komponenter att fungera korrekt. Följaktligen, om du inte använder ett skjutreglage på din webbplats, behöver du inte ett plugin för att skapa karuseller, om du inte behöver verktygstips, inaktivera sedan tooltips.js, etc.

Scrollspy-pluginet övervakar textens position och markerar, beroende på detta, det här eller det menyalternativet. Vanligtvis behövs en sådan funktion på målsidor, jag såg den praktiskt taget inte på vanliga sajter. Och så vidare. Ta en ordentlig titt på vad du behöver och vad du inte behöver.

Mindre variabler

Därefter kommer ett stort objekt att öppnas framför dig, där det kommer att finnas många underobjekt med inställningar för Less-variablerna. Här kan du ändra nästan allt: färger, teckenstorlekar, brytpunktspunkter, antal kolumner i rutnätet, utfyllnad, etc.

Naturligtvis, för detta behöver du åtminstone känna till grunderna i Less, eller åtminstone intuitivt navigera i dessa formulär.

Till exempel, om du ser @ font-family-base-variabeln, måste du åtminstone intuitivt förstå att den är ansvarig för namnet på teckensnittet, vilket är basteckensnittet på webbplatsen. Variabeln @ font-size-base anger basfontstorleken. Standard i bootstrap är 14 pixlar.

Du kan redigera alla dessa fält. Ändra bara 14 till 20 och nu kan du ladda ner ett ramverk där standardfontstorleken är 20 pixlar. Följaktligen kan du omedelbart justera storleken på rubriker etc.

Sätta upp rutnätet

Inställningarna för rutsystemet är också mycket intressanta för oss, här är de:

Som du kan se kan du ändra antalet kolumner och bredden på indragen mellan dem på några sekunder. Variabel grid-float-breakpoint ställer in den punkt där mobilmenyn kollapsar till en ikon.

Om du ändrar värdet, till exempel till @ screen-md-min, kommer vikning att ske med en bredd på 991 pixlar eller mindre. Du kan också ta bort denna variabel och skriva värdet i pixlar. Till exempel 520 pixlar. Då kommer menyn att minimeras endast på smartphones och mobiltelefoner.

Egentligen har Bootstrap-anpassningssidan många inställningar, men i allmänhet är denna anpassningsmetod (med hjälp av sidan Anpassa på den officiella webbplatsen) inte den snabbaste och mest bekväma. Därefter ska jag visa dig det snabbaste sättet.

Använd sidan Anpassa när du behöver göra 2-10 redigeringar av ramverket, eller bara inaktivera de nödvändiga komponenterna. Om du ska ändra många fler värden måste du använda en annan metod.

Faktiskt, när du konfigurerar din version av ramverket, klicka på stor knapp längst ner på sidan. Den kommer att kompilera en version av Bootstrap åt dig och ladda ner den till din dator. Sedan är det bara att ansluta och använda. Jag har redan pratat om anslutning i tidigare artiklar (inklusive hur man gör det på WordPress).

Ladda ner färre källor och redigera dem

Som jag sa, om du behöver göra många redigeringar i ramverkets källkod och du vill se ändringarna direkt, då behöver du färre källor. Du kan ladda ner dem på samma plats som den fullständiga versionen av ramverket - i avsnittet Komma igång.

För att arbeta med och redigera Mindre källor behöver du:

Åtminstone lite kunskap om css och mindre eller någon annan förprocessor

Mindre kompilator (gratis att ladda ner)

Egentligen kommer jag inte att uppehålla mig vid anpassning genom mindre källor i detalj, men det här är den bästa metoden, eftersom du inte behöver besöka Anpassa-sidan 100 gånger och kompilera alla nya versioner av ramverket.

Bootstrap-tema eller ändra utseendet på element

Som standard i full version framework i css-mappen kan du också hitta filen bootstrap-theme.css... Det är valfritt att ansluta den till webbplatsen. Vilka funktioner utför den? Filen behövs enbart för att ändra stilarna för de element du behöver, om det behövs.

Din egen style.css kan fylla samma roll, där du också kan åsidosätta stilar. Bootstrap-tema är inte en obligatorisk fil, utan används för beställning. Till exempel har du 3 filer:

bootstrap.css- Detta är förståeligt nog koden för själva ramverket;

bootstrap-theme.css- här åsidosätter du stilar för bootstrap-element;

style.css- och i den här filen skriv stilar för dina element.

Då får du ordning på koden och i projektstrukturen. Men ingen förbjuder dig att utföra alla operationer i en enda fil - style.css och använd inte en temafil alls.

Det viktigaste är att inkludera temafilen och din egen css i html-markeringen senare än ramkodsfilen, så att stilarna framgångsrikt kan omdefinieras.

Ett exempel på hur tematik fungerar

Som jag redan har sagt, som standard lägger Bootstrap en fil i paketet bootstrap-tema... Försök att ansluta den. Obs, anslut efter huvudfilen.

Som standard ser knappar i bootstrap ut så här:

Och så här förändras deras utseende efter att ha kopplat filen med temat:

Som du kan se visas en liten gradient. Följaktligen kan du skriva om koden i filen bootstrap-tema och få anpassade stilar för knappar. Men du kanske frågar, varför inte driva dessa ändringar direkt i bootstrap.css? Jo, faktum är att nya versioner av ramverket hela tiden släpps och om du bestämmer dig för att uppdatera kommer det att bli svårt att implementera dina redigeringar i den nya versionen. Det anses vara god praxis för en utvecklare att inte röra källkoden när det är möjligt att skapa separat fil och beskriv förändringarna där. Det är mycket mer rimligt och bekvämt.

Hur installerar jag nya Bootstrap-teman som laddats ner från internet?

Det finns många sajter, mestadels utländska, där du kan ladda ner en massa teman och mallar gratis. För att undvika förvirring, låt oss överväga en webbplats, utformad med Bootstrap som en mall, och ett tema - en uppsättning css-regler som åsidosätter standardvy element.

Sådana teman kan laddas ner till exempel på bootswatch.com/, och med hjälp av en sökmotor kan du hitta dussintals andra.

Den allmänna principen för att installera sådana teman beror på själva webbplatsen från vilken du laddar ner dem. Om du kan ladda ner i formatet bootstrap-tema- bra, ladda ner och anslut. På bootswatch, till exempel, måste du ladda ner bootstrap.css och ersätta din standardramverksstilsfil med den. Det finns också en version med färre källor.

Så för att börja ansluta måste du gå till den officiella webbplatsen. I vårt fall är detta getbootstrap.com, det är på det som alla nödvändig information.

Ladda ner ramverket

Från huvudmenyn klickar du på Komma igång. Det översätts till ryska: "Var ska man börja". Faktum är att på den här sidan hittar du allt du behöver för att komma igång. Först och främst kommer du att se detta:

Bootstrap inbjuder oss att ladda ner sig själv i flera smaker. Den första är bara standarden senaste versionen ett ramverk som har alla komponenter. Två följande alternativÄr mindre och sass källor. För närvarande rekommenderar jag inte att du rör vid dem om du inte vet hur man arbetar med dessa tekniker.

Dessa är källorna, med deras hjälp kan du anpassa boostrap för dig själv. Återigen, om du vet hur man arbetar med dem.

Medan vi är nöjda med det första alternativet, klicka på nedladdningsknappen och spara ett arkiv med den senaste versionen av ramverket på din dator.

Raminnehåll

Bra, ladda sedan ner, packa upp arkivet och gå till mappen. I den sista mappen kommer du att se tre kataloger - css, js och typsnitt. Dessa tre kataloger måste kopieras till din projektmapp.

Innan dess kan du se alla dessa mappar. Först av allt, css-mappen. Den innehåller 2 css-filer och deras minifierade versioner. Dessa är bootstrap.css och bootstrap-theme.css. Följaktligen den första med koden för själva ramverket. Och den andra är för teman. Båda filerna har som sagt minifierade versioner. De väger 10-15% mindre på grund av att koden i dem är placerad på en rad.

Behovet av minifiering kan redan finnas i ett fungerande projekt, där varje bråkdel av en sekund av sidladdning är viktig. Medan du bara övar och lär dig ramverket behöver du god läsbarhet för koden, så inkludera enkla versioner av filerna.

Nästa upp är mappen fonts. Den innehåller bootstrap-ikontypsnittet, tack vare vilket du absolut sömlöst kan infoga över 200 ikoner på en webbsida, ändra deras storlekar och färger. Faktum är att det här är bilder som kan kontrolleras väldigt snabbt. Med ökande storlekar blir inte kvaliteten på ikonerna sämre, eftersom de är vektor, det vill säga svg-format.

Js-mappen innehåller filen som krävs för driften av alla javascript-komponenter som ingår i ramverket. Det är till exempel modaler, flikar och verktygstips. Ok, vi kom på lite med innehållet, det är dags att gå direkt till kopplingen.

Ansluter Bootstrap

Generellt rekommenderar jag att du bara tränar nu. Det vill säga, koppla inte ramverket direkt till din riktiga sida, utan skapa en ny mapp på skrivbordet, släpp dessa tre mappar där. Kort sagt, skapa ett nytt projekt från grunden. Detta kommer att hjälpa dig att förstå att allt fungerar.

Bra, teman måste skapa en index.html-fil. Jag ska göra det med Anteckningsblock editor++. Stopp-stopp, du kanske redan har börjat skriva initial html-markering av vana, du behöver inte göra detta, nu ska vi infoga allt klart. Scrolla ner på sidan Komma igång nedan, där ser du den grundläggande mallen, som är den grundläggande html-sidmallen.

Kopiera gärna denna kod till din fil. Nu ska vi analysera det lite.

Vi kan direkt se att html5 doctype används. V html-tagg vi ser parametern lang, du kan ändra den från en till ru.

Därefter börjar huvudsektionen, där sidkodningen ställs in. Följande rader är viktiga nog, ta bort dem i alla fall inte. Där du ser IE-edge är en kodrad som säkerställer att ramverket fungerar korrekt med IE-webbläsaren.

Nästa rad är den välkända meta viewport-taggen, som låter dig ställa in grundläggande inställningar för korrekt visning av webbplatsen på mobila enheter.

Nåväl, då börjar vi direktansluta ramfilerna. Förresten, du kan ta bort alla kommentarer i skärmdumpen ovan (de är markerade i grått), förutom de fyra raderna som börjar med orden om det IE 9 och slutar med endif. Vi behöver dessa rader så att ytterligare filer från extern lagring laddas för webbläsaren IE, som kommer att ge stöd för anpassningsförmåga och html5-element.

Först och främst ingår ramverkets css-fil i koden. Som du kan se, i exemplet ovan, är den komprimerade versionen ansluten, men du kan ansluta den okomprimerade versionen genom att helt enkelt ta bort .min från adressen.

Javascript-filer ingår före den avslutande body-taggen. Som du kan se är det inte bara han själv som ansluter här bootstrap ramverk men även jquery-biblioteket. Faktum är att för att ramverket ska fungera korrekt behövs det här biblioteket och det är anslutet från en extern lagring.

Hur kan jag kontrollera om ramverket har anslutit?

Allt är väldigt enkelt. Öppna vår index.html i valfri webbläsare, om du ser detta där så fungerar allt:

Om du gjorde några misstag när du ansluter ramverket, skulle utseendet på rubriken se ut så här:

Det vill säga, Boostrap har redan tillämpat sina stilar på rubriken, och om du kan observera dem är allt redan anslutet och fungerar korrekt.

Men för att övertyga dig kan du rendera med hjälp av ett ramverk, till exempel en knapp.

Hurra, jag har tagit med Bootstrap!

Detta har redan bevisat att ramverket fungerar och använder sina egna stilar. Som du kan se har bootstrap även som standard ganska bra styling för element, om än väldigt enkelt.

Men låt oss gå tillbaka till sidan Komma igång för nu, för det var den inte det enda sättet förbinder ramverket. Ett annat alternativ är att ansluta från extern lagring, det vill säga från cdn. Det är lämpligt när du inte planerar att redigera något i ramkoden, utan bara vill koppla upp den så snabbt som möjligt. Då blir det mest bekvämt för dig att använda den från cdn.

Mycket mer står skrivet på samma sida nedan. Till exempel, hur man installerar ett ramverk i Bower, Grunt, nedan är länkar till exempel på hur man använder absolut alla komponenter i ramverket.

Längst ner på sidan finns en länk till sajter där du kan läsa alltsammans, men på andra språk, så om din engelska är riktigt dålig kan du gå till en ryskspråkig sida. Det enda problemet är att inte allt är översatt där, och långt ifrån kan all information som finns på den engelskspråkiga officiella webbplatsen visas.

Tja, vänner, det är här jag kommer att avsluta den här artikeln, eftersom vi har slutfört huvuduppgiften - vi tittade på hur man ansluter bootstrap, och sedan återstår bara att lära sig hur man använder det. Sedan kan du själv se exempel på användning, kopiera dem till din sida.

Du kan ladda ner till exempel en mall med ett färdigt navigeringsfält, en typisk bloggsida, en inloggningssida osv. Genom att titta på koden kan du redan förstå lite hur den sattes in.

Och naturligtvis kan jag inte annat än rekommendera dig att gå igenom vår just nu. I den får du det viktigaste - din första övning i att arbeta med ramverket och du kommer att kunna skapa en enkel mall med dina egna händer, som är mer värdefull än tusen lästa artiklar. Det är allt, på detta säger jag adjö till dig.