Innan du laddar ner, se till att du har en kodredigerare (vi rekommenderar Sublime Text 3) och viss kunskap om HTML och CSS. Här kommer vi inte att beröra källfilerna, men du kan alltid ladda ner och studera dem själv. Vi kommer att fokusera vår uppmärksamhet på att komma igång med kompilerade Bootstrap-filer.

Laddar kompilerade filer

Det snabbaste sättet att komma igång: få kompilerade och minifierade versioner av vår CSS, JS och bilder. Inga dokument eller källfiler.

2. Filstruktur

I de nedladdade filerna hittar du följande struktur och innehåll, logiskt grupperade efter gemensamma egenskaper och som innehåller både minifierade och kompilerade versioner.

När du har laddat ner, packa upp den komprimerade mappen för att se strukturen för (kompilerad) Bootstrap. Det borde vara något sånt här:

bootstrap / +-- css / ¦ +-- bootstrap. css ¦ +-- bootstrap . min. css +-- js / ¦ +-- bootstrap . js ¦ +-- bootstrap . min. js +-- img / ¦ +-- glyphicons - halflings . png ¦ +-- glyphicons - halflings - white . png L-- LÄS MIG. md

Detta är den grundläggande formen av Bootstrap: kompilerade filer för snabb och enkel användning i nästan alla webbprojekt. Vi förser dig med kompilerad CSS och JS (bootstrap.*), och även kompilerad och minifierad CSS och JS (bootstrap.min.*). Bildfilerna komprimeras med ImageOptim, ett Mac-program för att komprimera bilder till PNG.

Observera att alla JavaScript-plugins kräver jQuery.

3. Vad ingår

Bootstrap är utrustad med HTML, CSS och JS för alla typer av arbeten, de är alla listade i kategorier som du hittar högst upp på sidan.

Dokumentsektioner Element som stöds

Vanliga kroppsstilar för att återställa typ och bakgrund, länkstilar, mallrutnät och två enkla uppmärkningselement.

CSS-stilar

Stilar för vanliga HTML-element: design, kod, tabeller, formulär och knappar. Innehåller även Glyphicons, en fantastisk ikonuppsättning.

Komponenter

Grundläggande stilar för enkla gränssnittskomponenter: flikar och knappar, navigeringsfält, meddelanden, sidhuvuden, etc.

Javascript plugins

Liksom komponenter är dessa Javascript-plugins interaktiva komponenter för verktygstips, informationsblock, modala komponenter och mer.

Lista över komponenter

Tillsammans innehåller Javascript-komponenter och plugins följande gränssnittselement:

• Knappgrupper
• Listor med rullgardinsknappar
• Navigeringsflikar, knappar och listor
• Navigeringsfält
• Genvägar
• Märken
• Sidhuvuden och hjälteelementet
• Miniatyrer
• Meddelanden
• Processindikatorer
• Modala element
• Nedrullningslistor
• Verktygstips
• Informationsblock
• Element "dragspel"
• Karusellelement
• Tangentbordsinmatning framåt

4. Grundläggande HTML-mall

Efter en kort introduktion kommer vi att fokusera på att använda Bootstrap. För att göra detta använder vi en grundläggande HTML-mall som innehåller alla element som anges i .

Så här ser en typisk HTML-fil ut:

Bootstrap 101 mall

Hej världen!

För att skapa en Bootstrap-mall som denna, bifoga helt enkelt lämpliga CSS- och JS-filer:

Bootstrap 101 mall

Hej världen!

Och allt är klart! Genom att lägga till dessa två filer kan du utveckla en webbplats eller applikation med hjälp av Bootstrap.

Hallå! I den här artikeln kommer jag att berätta hur du installerar och ansluter Bootstrap-ramverket. Du kan läsa om vad Bootstrap är.

Standard raminstallation

Jag har redan sagt mycket om standardinstallationen i tidigare artiklar. Allt är enkelt här. Vi går till den officiella webbplatsen getbootstrap.com, klickar på Komma igång och väljer 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 ramverket från en CDN-lagring utan att ladda ner dess filer till din dator. Naturligtvis kan det i det här fallet inte vara tal om någon anpassning.

Anpassning av ramverk

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

Eller så skapar 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 bara välja det du behöver är ett professionellt tillvägagångssätt för att skapa 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 minska vikten med 20-40%, men ändå blir filerna inte de lättaste.

Om du till exempel inaktiverar alla komponenter och lämnar bara rutnätet (detta görs väldigt ofta), så blir vikten av css:en bara 15-20 kilobyte, och i komprimerad form ytterligare ett par kilobyte mindre. På så sätt uppnår du maximal hastighet och optimering av ditt projekt.

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

Välja nödvändiga komponenter

Det första steget här är att konfigurera vilka komponenter du vill inkludera i din version av Bootstrap. Låt oss börja med CSS:

Print Media Styles – mediafrågor för utskrift. Om du inte planerar att skriva ut webbplatssidor kan du inaktivera det.

Typografi, kod, tabeller, formulär och knappar är alla saker som du själv kan styla i CSS om du verkligen vill. Naturligtvis kommer detta att ta tid, men om designen av dina element skiljer sig mycket från vad ramverket erbjuder som standard, kan du inaktivera alla dessa CSS-stilar och skriva dem själv.

Grid System är faktiskt ett rutnät. Jag ser ingen mening med att någonsin inaktivera det, eftersom detta är ramverkets huvudkraft. Det är tack vare rutnätet som du enkelt kan anpassa mallar till vilken enhet som helst, och idag i en tid av mobiltrafik är detta oerhört viktigt. Vi stänger inte av det under några omständigheter.

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 på nätsystemet i detalj. 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 användbart.

Det är till exempel saker som listgrupper, knapprader, ikoner, paneler, varningar, paginering, brödsmulor, etc. Du kan också inaktivera ikonens teckensnitt. Detta är värt att göra om du inte behöver ikoner på webbplatsen alls, eller om du ansluter en annan uppsättning. Egentligen borde du sitta och tänka på vad du behöver av alla komponenter som presenteras och vad du inte behöver. Varje enskild webbplats kommer att ha sin egen uppsättning, eftersom varje webbplats har en annan design och funktionalitet.

Javascript-komponenter

Dessa är rullgardinsmenyer, verktygstips, modala fönster och reglage. Om du inte behöver något av detta, stäng av det. I vissa fall kan alla komponenter verkligen komma till nytta när din webbplats har en rullgardinsmeny, ett skjutreglage på huvudsidan och modala fönster. I vissa fall kan högst 1-2 komponenter vara användbara, 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, ett eller annat menyalternativ. Vanligtvis behövs en sådan funktion på målsidor, jag har praktiskt taget aldrig sett den 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 Mindre variabler. Här kan du ändra nästan allt: färger, teckenstorlekar, brytpunkter, antal kolumner i rutnätet, indrag osv.

Naturligtvis, för att göra detta måste 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å typsnittet, vilket är bastypsnittet på webbplatsen. Tja, @font-size-base-variabeln anger basteckensnittsstorleken. Som standard i bootstrap är det 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å rubrikerna 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. Variabeln 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 en komprimering att ske vid 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 komprimering endast att ske 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. Nästa kommer jag att visa dig det snabbaste sättet.

Använd sidan Anpassa när du behöver göra 2-10 ändringar i ramverket, eller helt enkelt 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å den stora knappen längst ner på sidan. Det kommer att kompilera en version av Bootstrap åt dig och ladda ner den till din dator. Sedan är allt du behöver göra 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 redan sa, om du behöver göra många redigeringar av ramverkets källkod och du vill se ändringarna direkt, 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 Less-källor och redigera dem behöver du:

Åtminstone lite kunskap om css och mindre eller en annan förprocessor

Mindre kompilator (kan laddas ner gratis)

Egentligen kommer jag inte att uppehålla mig i detalj vid anpassning genom färre källor, men detta är den bästa metoden, eftersom du inte behöver gå till sidan Anpassa 100 gånger och kompilera fler och fler nya versioner av ramverket.

Bootstrap-tema eller ändra utseendet på element

Som standard, i den fullständiga versionen av ramverket, kan du också hitta filen bootstrap-theme.css i css-mappen. Det är inte nödvändigt att ansluta den till webbplatsen. Vilka funktioner utför den? Filen behövs enbart för att vid behov ändra stilarna för de element du behöver.

Samma roll kan fyllas av din egen style.css, där du också kan åsidosätta stilar. Bootstrap-tema är inte en obligatorisk fil, den används snarare för beställning. Till exempel har du 3 filer:

bootstrap.css – naturligtvis är detta koden för själva ramverket;

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

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

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 att inte använda temafilen alls.

Det viktigaste är att inkludera temafilen och din egen css i html-uppmärkningen senare än filen med ramkoden, så att stilarna framgångsrikt åsidosätts.

Ett exempel på hur tematik fungerar

Som jag redan har sagt inkluderar Bootstrap som standard en bootstrap-temafil. Försök att ansluta den. Jag noterar, 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 bootstrap-temafilen och få dina egna stilar för knapparna. Men du kan fråga dig varför inte göra 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 uppgradera kommer det att bli svårt att implementera dina ändringar i den nya versionen. Det anses vara bra för en utvecklare att inte röra källkoden när man kan skapa en separat fil och beskriva ändringarna där. Det är mycket smartare och bekvämare.

Hur installerar man nya Bootstrap-teman som laddats ner från Internet?

Det finns ganska 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 designad med Bootstrap som mall och ett tema som en uppsättning CSS-regler som åsidosätter standardutseendet på element.

Sådana teman kan laddas ner till exempel från 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å platsen där du laddar ner dem. Om du kan ladda ner den i bootstrap-tema-format, bra, ladda ner den och anslut den. På bootswatch, till exempel, måste du ladda ner bootstrap.css och ersätta din standardramverksstilsfil med den. Det finns också ett alternativ med färre källor.

Från och med den här artikeln kommer vi att börja studera Twetter Bootstrap 3-ramverket, som oftast används för att skapa webbplatser, adminpaneler, landningssidor och webbapplikationer, eftersom det säkerställer enkel utveckling, tydlig struktur och anpassningsförmåga av sidor.

Installera en Basic Bootstrap 3-mall

För att använda Bootstrap 3-verktyg och metoder måste du gå till http://getbootstrap.com och ladda ner arkivet med css, fonts, js-mapparna och motsvarande filer inuti dem.

Om du inte vet hur man ansluter CSS-stilar och js-skript rekommenderar jag att du tittar på den här och den här artikeln, och i vårt fall är CSS-stilar anslutna i sektioner

och skript före den avslutande taggen

på botten av sidan.

Jag skulle också vilja notera att användningen av filerna bootstrap.min.css och bootstrap.min.js kommer att gynna din webbplats, eftersom dessa filer är mindre i storlek och kommer att ha en positiv effekt på laddningshastigheten.

Ansluta typsnitt teckensnitt kan göras på två sätt:

Direkt i HEAD-delen före den avslutande taggen

I en separat CSS-fil som finns i css-mappen

Det andra alternativet är att föredra, men oavsett vilken metod du väljer kommer anslutningen att fortsätta så här

@font-face( font-family: glyphicons-halflings-regular; src: url(/fonts/glyphicons-halflings-regular.eot); src: local(glyphicons-halflings-regular), url(fonts/glyphicons-halflings- regular.ttf); ) h2( font-family: glyphicons-halflings-regular,sans-serif; )

eller snarare i stiltaggen för den första metoden, och infoga all text inuti den i css-filen för den andra.

jquery installation

För att Bootstrap 3 ska fungera korrekt måste du dessutom ladda ner jquery-biblioteksfilen från den officiella webbplatsen jquery.com via länken och placera den i js-mappen på din webbplats.

Jquery-anslutningen sker före den avslutande taggen

Cookies gör det enklare för oss att förse dig med våra tjänster. Med användningen av våra tjänster tillåter du oss att använda cookies.

, men före filen bootstrap.js

eftersom jquery ska laddas innan bootstrap.

Bootstrap 3 rutnät och skärmstorlekar

Grunden för Bootstrap är en uppsättning klasser på vilka ett rutnät med 12 kolumner (kolumn) är byggt. Inom rutnätet stöds 5 typer av skärmar -xs- -sm- -md- -lg- -xl-.

• -xs- skärmstorlek mindre än 575px;
• -sm- skärmstorlek mer än 576 px och inte mer än 767 px;
• -md- skärmstorlek mer än 768 px och inte mer än 991 px;
• -lg- skärmstorlek mer än 992px och inte mer än 1199 px;
• -xl- skärmstorlek mer än 1200px;

Således innebär en div med klass col-lg-12 att på en stor skärm kommer div-kolumnen att ta upp 12 kolumner eller 100 % av bredden, på samma sätt kommer en div col-sm-6 på en smartphoneskärm att ta upp 6 kolumner eller 50 % av bredden.

Typer av nätbehållare. Gummi layout layout

Huvudtyperna av behållare för ett rutnät är klasserna behållare och behållare-vätska.

När det används inuti en behållare kommer ditt rutnät visuellt att uppta en tredjedel av skärmen i mitten, med alla 12 kolumner placerade i detta område.

Genom att placera rutnätet i container-fluid-klassen kommer alla layoutelement att placeras över hela skärmen, som ett gummi, och när bredden minskar kommer de att röra sig mot varandra.

Det finns ingen specifik rekommendation för att använda container och container-fluid, eftersom allt beror på designlayouten och syftet med layouten, men det är lämpligt att använda container-fluid för adminpanelen för en webbplats och container.

Dessutom kan klassen -fluid appliceras inte bara på containerklassen, utan också på radsträngen, för att arrangera element i en rad. Men om du placerar radvätskan i en vanlig behållare kommer du inte att märka skillnaden. Denna kombination används bäst utanför div.containern, så här:

Hej, jag är en Bootstrap 3-mall

Min behållare är inte flytande!

Och jag är radflytande!

Linjer för placering av element

Radklassen används för att placera rutnätselement i en rad, detta gör att du kan ordna dem horisontellt, men du måste ta hänsyn till att summan av indexen i raden inte bör vara mer än 12, annars blir det sista elementet flyttas till andra raden.

Rubrik 1 Rubrik 2 Rubrik 3

Om du minskar webbläsarens sidstorlek kommer rubrikerna att radas upp i en vertikal lista från en horisontell rad.

Element synlighet klasser

Bootstrap 3-layoutsystemet tillhandahåller ytterligare klasser för att visa eller dölja element på olika enheter och skärmar. De är betecknade som synliga-*-* och dolda-*.

Klassen för att visa synlig-*-* efter det första bindestrecket finns vanligtvis en skärmtypsidentifierare (xs, sm, md, lg, xl), och efter det andra strecket kolumnstorleken (1-12). Till exempel visible-lg-6 - elementet är synligt på en stor skärm, 6 kolumner breda.

Hiding class hidden-* Efter bindestrecket finns en skärmtypsidentifierare (xs,sm,md,lg,xl), till exempel kommer ett markup-element med hidden-xs-klassen inte att vara synligt på små enheter (skärmstorlek mindre än 575 pixlar).

Genom att kombinera dessa element kan du visa eller dölja div-behållare:

Rubrik 1 Rubrik 2

Den första titeln kommer att synas på stora enheter, medan den andra kommer att försvinna på små skärmar. För att göra detta, minska storleken på webbläsarfönstret så att storleken är lika bred som skärmen på en mobil enhet.

Också i div-behållaren i klassen, ange show eller hidden, men i det här fallet kommer visningsegenskaperna inte att ändras när skärmen ändras: om den är synlig, är den synlig, om den är dold, så kommer bara att ta bort ordet dolt från klassen. låter dig se önskat element.

Mediefrågor i Bootstrap 3

För att använda CSS-mediafrågor måste du ange specialsymbolen @media i css-filen och minsta och/eller maximala skärmbredd inom parentes. Om du i vanlig css-uppmärkning behöver skriva skärmstorlekar i pixlar, kan du i bootstrap 3 skriva följande konstruktion:

@media(min-width: @screen-sm-min)( ... ) @media(min-width: @screen-md-min)( ... ) @media(min-width: @screen-lg- min)( ... )

Ändra ordningen på element

En annan intressant klass som låter dig flytta block inuti en container, push-klassen kommer att flytta elementet till höger och pull-klassen till vänster.

När du kombinerar från intilliggande behållare kan du ändra ordningen på de senare när du ändrar skärmstorlekar. I det här exemplet, på en stor skärm (-lg-) är Rubrik 2 placerad till vänster och Rubrik 1 till höger, när skärmbredden reduceras till medelstorlek (-md-), kommer elementen att förskjutas och ordningen kommer att bli sekventiell.

Rubrik 1 Rubrik 2

Låt mig avsluta denna första bekantskap med layoutsystemet Bootstrap 3; du har lärt dig hur du installerar mallstilar och skript, grundläggande rutnätselement, mediefrågor, behållartyper, etc. I följande artiklar kommer vi att titta på extra och ytterligare element: menyer, knappar, skjutreglage, ikoner och mycket mer.

24 februari 2012 kl. 21:25 Twitter Bootstrap-baserat användargränssnitt för nybörjare

• webbdesign

Sammanfattning I den här artikeln kommer jag att försöka prata om hur du, baserat på Twitter Bootstrap, mycket enkelt kan implementera ett snyggt användargränssnitt för en liten (ensidig) webbapplikation, med bara grundläggande kunskaper i html. Jag varnar dig direkt att specialister inte kommer att vara intresserade, vi kommer att prata om grundläggande standardfunktionalitet.
Introduktion På min fritid, som en hobby, utvecklar jag en ensidig aggregator av intressanta nyhetsflödesrubriker. Vid något tillfälle var prototypens grundläggande funktionalitet klar, det enda som saknades var kryssrutan bredvid uppgiften "Design" Problembeskrivning För att få ett vackert användargränssnitt utan att bemästra magin hos en designer (du har bara grundläggande kunskaper i paint) och en programmerare (du har bara grundläggande kunskaper i html och css) .
Sidan består av följande element

• namn
• Formulär för att skicka en länk till nyheterna
• Formulär för att skicka en unik läsarkod via e-post
• Anmälningsformulär för unik läsarkod
• Lista över nyheter grupperade efter datum (datum, tid, titellänk, antal klick, nyheter kan läsas eller nya)
• Länk till rss
• Länk till chrome extension
• release-id
• feedback e-post

Process Efter flera dagars avslappnat letande efter en färdig mall (css-mall) kom jag fram till att detta inte är vägen för en riktig Jedi, eftersom... allt som passerade det estetiska filtret fastnade i det tekniska filtret (se problembeskrivning, jag kunde helt enkelt inte anpassa den komplexa koden efter mina behov). Och sedan, nästan av en slump, kom jag till himlen. Jag kommer inte att beskriva Bootstrap i detalj, du kan se detaljerna genom att klicka på länken, jag kommer att lista huvudelementen för vilka det finns färdiga stilar (ibland flera):

Standard html-formateringselement

Listor

Kodavsnitt

Tabeller

Blanketter

Knappar

Navigationselement

Paginering

Miniatyrer

Informationsmeddelanden

Framstegsindikatorer

Enligt mig är det här väldigt coolt. Allt du behöver för att designa en prototyp. Därefter kommer jag att berätta hur jag använde elementen 1,4,5 och 7 från listan. Så, steg 1. Anslut Bootstrap. Ladda ner och packa upp arkivet med Bootstrap till rotmappen på vår webbplats, anslut css:en:
... ...
Den andra raden behövs för att automatiskt anpassa gränssnittet till enheter som stöds av Bootstrap Steg 2. Designa "köttet". Med "kött" menar jag nyhetslistan. Det enklaste sättet att göra detta är att använda ett bord med ramar inaktiverade. Den första kolumnen är datumet (endast en gång per grupp), den andra kolumnen är tiden, den tredje är titeln och antalet övergångar. Allt detta, enligt Bootstrap-reglerna, måste förpackas i en behållare:

(Datum för)

(Tid)

(Titel) ((Antal övergångar))

För lästa nyheter anger vi en speciell klass:
(Rubrik) Steg 3. Formulär för att skicka en länk till nyheterna. Även här är allt enkelt, Bootstrap tillhandahåller flera färdiga formulärstilar: ett vanligt formulär, ett enradsformulär, ett sökformulär... Vi behöver en andra, lägg till den i vår behållare framför bordet:
Lägg till ...
class="span10" - Bootstrap förutsätter att man bygger ett gränssnitt baserat på ett rutnät med 12 kolumner; våra element kan justeras längs det. Genom den vetenskapliga metoden trial and error kom jag fram till en bredd på inmatningsfältet lika med 10. Steg 4,5,6. En mössa. Mina idéer om hur en användarvänlig webbplats ska se ut föreslår en minimalistisk stil: allt onödigt är dolt, allt som inte gick att dölja är blekt. Vi gömmer formulären i en rullgardinsmeny, gör länkar till rss och chrome extension bleknar. Vi packar allt detta i en rubrik som vi limmar till toppen av webbplatsen (klass = "navbar navbar-fixed-top"):
***

• rss
• krom förlängning

• Din unika läsarkod (kod)
  • Skicka via e-post
  • Ange en annan kod

...
Själva formulären:
... × Skicka en unik kod via e-post

Avbryt Skicka × Ange en unik läsarkod

Låter dig synkronisera nyheter som läses på olika datorer.

Avbryt Skicka

Viktig poäng. För att detta ska fungera måste du ansluta ett par skript:
...

Steg 7. Sidfot. Lägga till huvudbehållaren:
...

release 2012/02/19 23:49 *****

ResultEpilogue Twitter Bootstrap gjorde det möjligt, utan större ansträngning och kunskap, utan att skriva en enda rad CSS och utan mycket brytning av html-koden, att få ett väldigt snyggt prototypgränssnitt som man inte skäms för att visa för folk. Om du är intresserad kommer jag i nästa artikel att berätta hur du, utan djup kunskap om PHP + MySQL (med endast grundläggande programmeringskunskaper), kan implementera funktionalitet som låter dig visa din miljondollaridé inte bara på papper, utan i form av en fungerande prototyp.
Tack för din uppmärksamhet!
UPD: Jag vill inte ta bort ämnet i "Jag är PR", jag tog bort alla onödiga länkar

Killar, jag tycker att Bootstrap är en väldigt cool grej. Jag ska försöka förklara varför det är så i den här artikeln. Nåväl, låt oss gå, jag ber omedelbart om ursäkt för att nästan hela första halvan av artikeln är skriven utan bilder, det finns bara en teori, en förklaring av hur rutnätet fungerar. Men det här är väldigt viktigt! Alla av er som behöver det kommer att ta det i sina händer, läsa det och, hoppas jag, förstå. Den andra halvan av artikeln uppfattas redan enklare, det finns fler exempel med skärmdumpar.

Bootstrap - vad är det?

Så låt oss börja med en viktig fråga. Bootstrap är ett CSS- och JS-ramverk, i huvudsak en uppsättning filer med färdig skriven kod. Målet för utvecklare av nästan alla ramverk är att förenkla webbplatsutveckling för sig själva och andra som kommer att ha tillgång till verktyget. När det gäller Bootstrap är det helt gratis, så du kan använda det på vilket sätt som helst, redigera källkoden och anpassa ramverket på vilket sätt du vill. Det är perfekt.

Installerar Bootstrap

Om du bara behöver ansluta ramfilerna till ett HTML-dokument (till exempel för övning), ladda bara ner ramverket från den officiella webbplatsen getbootstrap.com, kopiera dess filer till projektet och anslut de du behöver. Låt mig ge en kort översikt över dessa filer:

bootstrap.css och bootstrap.min.css - okomprimerade och komprimerade versioner av ramverkets CSS-kod. Det rekommenderas att inkludera en komprimerad fil med ditt arbetsprojekt, på så sätt kommer du att förbättra laddningshastigheten något. Men om du planerar att se koden i en fil, anslut den okomprimerade versionen.

bootstrap.js och bootstrap.min.js - fil med skript

fonts-mappen och glyphicons-filerna i den är Bootstrap-ikonen. Den har cirka 200 ikoner. I de flesta fall kommer du att ha tillräckligt med dem, ibland behöver du koppla ihop andra. Vi kommer att prata om ikontypsnittet senare.

Detta är standarduppsättningen av ramverket. Faktum är att du enkelt kan anpassa den och ändra den så att den passar dig. Använd till exempel inte skript alls eller anslut bara ett rutnät. I allmänhet kommer vi också att prata om detta.

Ryska Bootstrap-dokumentation

När du besöker getbootstrap märkte du förmodligen att allt här är på engelska. Vi skulle kunna använda rysk hjälp om ramverket. Det är lätt att hitta. För att göra detta, gå från huvudsidan till avsnittet Komma igång. Scrolla längst ner, det kommer att finnas en länk till översättningar. Leta efter ryska där och klicka på den. Det är det, nu är du på den ryska versionen av webbplatsen. Det är sant att inte allt har översatts här, men någonstans runt 70-80% är korrekt, så du kommer att förstå allt.

Bootstrap rutnät

Vad man än kan säga, är huvudelementet i Bootstrap det responsiva rutnätet. I allmänhet, utan det, skulle ramverket förlora nästan allt sitt värde, för tack vare rutnätet kan du snabbt skapa adaptiva mallar. Samtidigt kanske du inte är bekant med mediefrågor alls; du behöver dem inte, eftersom ramverket tar hand om implementering av anpassningsförmåga; du behöver bara tilldela rätt klasser till blocken.

Vilka är dessa klasser? Låt oss gå till dokumentationen, det kommer att hjälpa oss mycket. Gå till avsnittet CSS - Grid System. De allmänna reglerna för att arbeta med ett rutnät är enkla; jag ska lista dem nu.

Hur arbetar man med ett rutnät?

Se det som en html-tabell. Om du någonsin har skrivit HTML-kod för tabeller vet du att allt innehåll placeras i tabelltaggen, en rad placeras i tr-taggen och sedan placeras cellerna i it - td .

Så allt är liknande i rutnätet. Behållarklassen fungerar som en allmän behållare för nätet. Det finns 2 alternativ för bootstrap gallret - helt gummi och fortfarande med en ändlig maximal bredd. Så när det allmänna blocket ges containerklassen kommer webbplatsen att ha en maximal bredd på 1170 pixlar. Det kommer inte att expandera ytterligare. Naturligtvis kommer innehållet att centreras.

Om du ställer in behållare-vätskeklassen kommer nätet att vara helt gummi, det vill säga det kommer inte att finnas några storleksbegränsningar. Till exempel, om en person öppnar en webbplats på en 1920 pixel bred bildskärm, kommer han att se den i full bredd.

Följaktligen är det första när man utvecklar en webbplats att bestämma hur mallen ska se ut - helt gummi, eller dess bredd måste fortfarande begränsas.

Bra, behållarblocket ska innehålla en rad med rutnät. Du måste placera alla block som finns på en rad i den. Det vill säga, om vi tar den mest typiska mallen: sidhuvud, huvuddel, höger kolumn och sidfot, så finns det 3 kolumner. Den första kommer bara att ha sidhuvudet, den andra kommer att ha innehållet och sidofältet och den sista kommer att ha sidfoten. Markeringen för en sådan webbplats skulle vara ungefär så här:

Sidhuvudinnehåll... och sidfots sidofält

Men för tillfället är detta fel uppmärkning, för det saknas... vad? Det stämmer, celler! När det gäller Bootstrap kallas de även för kolumner. Bootstrap-rutnätet består av 12 kolumner. Det kan bäddas in i vilket block som helst av vilken bredd som helst, minst 1200 pixlar, minst 100. Allt detta beror på att bredden på kolumnerna inte anges i pixlar, utan i procent.

Hur fungerar detta 12-kolumnssystem?

Så vi kommer till den viktigaste frågan relaterad till ramverket. Tro mig, om du förstår detta är allt annat nonsens. Det viktigaste är att förstå hur rutnätet fungerar, och vägen till snabb adaptiv layout kommer att vara öppen för dig.

För att göra detta, scrolla igenom dokumentationen precis nedan, där hittar du en tabell som innehåller viktiga rutnätsegenskaper.

Förresten, själva kolumnerna är markerade i Bootstrap med col-klassen, men detta är en sammansatt klass, så de skriver aldrig bara col-. Bootstrap har 4 specialklasser som är designade för att kontrollera storleken på block vid olika bredder, här är de:

ld - för stora skärmar, mer än 1200 pixlar breda (stationära datorer);

md - för medelstora skärmar, bredd från 992 till 1199 (datorer, netbooks);

sm - för små skärmar, bredd från 768 till 991 pixlar (surfplattor);

xs - extra små skärmar, bredd mindre än 768px.

Det här är de 4 klasserna, men för att styra storleken på elementen används siffror från 1 till 12, eftersom det, som du kommer ihåg, finns exakt 12 kolumner i rutnätet.

Sidhuvud Innehåll Sidofält Sidfot

Det är ganska lätt att förstå. Först och främst skapar vi en rubrik; den behöver inte placeras i rutnätet alls, eftersom den i alla fall kommer att uppta 100% av bredden (vanligtvis). Men vi lägger in den ändå. Vad är denna klass col-md-12? Som jag redan berättat för dig, ingen skriver bara col-, med den här klassen säger vi i princip till webbläsaren:
Detta är en cell | kolumn
På medelstora enheter (md-klass) bör dess bredd vara 12 kolumner av 12, det vill säga 100 % av radbredden.
Men hur är det med bredden på andra enheter? På stora (lg) skärmar kommer det också att vara 100%, eftersom värdena för stora skärmar ärvs, men för mindre är de inte det. Det är enkelt: om du skrev col-xs-4 , då skulle kolumnbredden vara 33 % på alla enheter, och om col-lg-4 , då bara på stora. Det här är funktionen, kom ihåg den.

Tja, om breddvärdet inte sparas på mindre skärmar, vad händer då? Den återställs. Så här går det till:
col-sm-4 - på små skärmar kommer blocket att uppta 33% av bredden, det kommer att vara samma på md- och lg-skärmar, men på xs, det vill säga de minsta, kommer bredden att återställas till 100%. Så kom ihåg ytterligare en enkel regel: Om ingenting är specificerat för mindre skärmar, kommer blocket att visas på dem med 100 % bredd.

Innehållssidofält

I huvudsak säger vi till webbläsaren:
Låt innehållsblocket vara 8 av 12 kolumner breda och denna situation kommer att vara på små, medelstora och stora skärmar (det räcker med att specificera för små, för stora skärmar, som du kommer ihåg, ärvs värdet). Men på de minsta skärmarna kommer blocket att vara upptaget till 100%. Detta är korrekt; vanligtvis visas webbplatser i en kolumn på mobila enheter.
Låt sidospalten vara en tredjedel av radens bredd på samma små, medelstora och stora skärmar. Tja, på de minsta, som du redan förstått, är dess bredd också återställd till 100%. Det är så enkelt.

Tja, det finns inget att ta itu med sidfoten. Tja, vi har täckt de grundläggande principerna för hur nätet fungerar, men vi måste fortfarande se hur det fungerar...

Bootstrap Nested Grid

Faktum är att nu har vi bara delat upp mallen i huvudblock, men inuti kan de också delas in i kolumner. Till exempel kan innehållet visa produkter i flera kolumner. Vad ska jag göra? Det är väldigt enkelt - vi skapar exakt samma rutnät inuti. Den kommer att kapslas, men innehåller också 12 kolumner. Om vi ​​sammanfattar allt detta kommer vi till denna slutsats:
Det kan finnas ett obegränsat antal rutnät i vilket block som helst. Till exempel, i ett block med produkter finns ett rutnät för att separera produkter, i blocket med en produkt i sig kan du skapa ett annat rutnät, till exempel för att separera priser, tillgänglighetsinformation och ytterligare information. information.

Nu ska vi försöka göra ett annat rutnät inuti innehållsblocket för att ordna produkter i 3 kolumner. Så låt oss ta blocket där vi har innehåll:

Innehåll

Och vi skriver i den:

Produktkatalog: Produktnamn

Produktbeskrivning

Som du kan se skapade vi ett nytt rutnät inuti innehållet - vi lägger en rad inuti, och i raden kommer det redan att finnas 3 block med produkter. Kopiera bara col-sm-4-blocket med produktkortet och klistra in det 2 gånger till, det här är vad du får (du kan ta vilken produktbild som helst, jag tog en stor):

Jag missade en annan viktig punkt: för att bilderna ska anpassa sig till blocken där de finns, måste var och en av dem ges den img-responsiva klassen. Om du, som jag, tycker att det är obekvämt att göra detta, skriv bara i din egen style.css så här:

Img( max-bredd: 100%; höjd: auto; display: block; )

Det var allt, spara den här koden och anslut din css-fil till projektet. Nu kommer bilderna att vara adaptiva som standard.

Nåväl, gick det ganska smidigt? Ja, men utan bootstrap skulle du behöva lida längre. Det enda är att när du skapar ett rutnät i ett block behöver du inte längre skapa ett block med containerklassen i den. Varför är detta inte nödvändigt? Ja, eftersom blocket där rutnätet skapas fungerar som en behållare.

Således kan du skapa så många kolumner du vill i vilket block som helst och skapa en mall av vilken komplexitet som helst. Och allt detta är mycket snabbare än utan Bootstrap, eftersom du måste skriva all css från grunden.

Responsiva verktyg

Detta är en annan bra funktion hos bootstrap. Den består i att du kan dölja eller synliggöra alla block på den bredd du behöver. Dölj till exempel sidospalten helt på smala skärmar, lägg till några nya element på mobila enheter, lägg till en kolumn på breda skärmar, etc.

Det finns många applikationsalternativ, men jag berättade inte om det viktigaste: hur man använder dessa verktyg? För att göra detta, lägg bara till klasser i önskat block. Om du behöver dölja det, specificera bara följande klass:

Sidfot

Vad kommer klassen hidden-xs att göra i det här fallet? Det kommer att dölja sidfoten på extra små enheter. På alla andra kommer blocket att synas.

Om du tvärtom behöver visa det bara på de minsta skärmarna måste du använda klassen visible-xs-block. I det här fallet kommer blocket att döljas på alla utom de smalaste skärmarna. Så adaptiva verktygsklasser skrivs så här:

Ordet dolt eller synligt, beroende på vad du behöver

En förkortning xs, sm, md eller lg som indikerar på vilka skärmar som ska döljas eller visa blocket.

För synlig måste du också lägga till ett av tre värden: block - visa elementet som ett blockelement, inline-block - som ett inline-blockelement, inline - inline.

Tja, ett par exempel för att klargöra det:

hidden-xs hidden-lg - kommer att dölja elementet på de minsta och största skärmarna. Som du kan se kan du ange flera klasser åtskilda av ett mellanslag.

visible-xs-inline visible-md-block - på små och stora skärmar kommer elementet inte att visas alls. På extra små kommer det att vara gemener, och på medelstora blir det ett block.

visible-lg-block - elementet kommer endast att vara synligt på de största skärmarna, på alla andra kommer det att vara dolt

Så här fungerar det hela. Det är precis det och inget annat sätt. Jag hoppas att du förstår detta. Låt oss omsätta det i praktiken. Vi har en testmall, om än en väldigt primitiv sådan.

Uppgift: att få sidospalten att försvinna på små skärmar, och även en produkt på de minsta skärmarna. Och så att på xs-enheter finns produkterna redan i 2 kolumner, inte 3.

Försök att göra det själv, redigera bara html-koden. Vad behöver göras? Låt oss först titta på kolumnen, för att dölja den på sm-skärmar behöver du bara lägga till klassen hidden-sm till den.

Bra, nu måste den tredje produkten lägga till klassen hidden-xs och den kommer att försvinna på de minsta skärmarna. Tja, klasserna för de återstående två varorna kommer att vara följande:

Det vill säga, på medelstora enheter kommer blocket att uppta 4 kolumner av 12, vilket kan översättas till 33,33% av bredden, och på extra små enheter - 50%. Och eftersom ett block med en produkt kommer att försvinna med denna bredd, kommer båda blocken med produkter att vara snyggt arrangerade i en rad, så här:

Bra! Efter att ha förstått detta kan du redan manipulera blocken på webbsidan på nästan vilket sätt du vill. Försök att komma på uppgifter för dig själv och implementera dem.

Flytta mig hela vägen

Därefter kommer jag att visa dig ett annat mycket bra trick - förmågan att flytta ett block till höger eller vänster. Låt oss säga att vi inte har 3 produkter i rad, utan 1. Och den upptar inte hela bredden. Och din uppgift är att rikta in den i mitten. Detta är enkelt att göra om du tänker på att du arbetar med ett 12-kolumnssystem.

Låt oss lämna ett block med produkten:

Det räcker med att göra enkla beräkningar för att förstå hur mycket du behöver flytta blocket för att centrera det. Den måste flyttas 4 kolumner till vänster på medelstora och stora skärmar, och 3 kolumner på små. Så här ser det ut:

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

Jag hoppas att du förstår kärnan och använder dessa klasser om det behövs.

Bootstrap-komponenter och exempel på deras användning

Jag gratulerar dig. Vi har precis tagit upp det viktigaste ämnet relaterat till ramverket. Det är rutnätet och arbetet med det som är viktigt. Att arbeta med komponenter innebär redan att du helt enkelt går till dokumentationen, kopierar koden för den önskade komponenten där och vid behov ändrar den så att den passar dina behov. Men jag kommer ändå att ge nedan några exempel på hur man använder komponenterna.

Snabba flytningar och lindningsavstängning

Klasserna dra-vänster och dra-höger låter dig snabbt få vilket block som helst att flyta genom att skicka det åt vänster eller höger. Glöm inte att avbryta flödet. 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 efter mig.

Egentligen kan du med Bootstrap väldigt enkelt göra inte bara en adaptiv meny, utan en så kallad mobil, som är helt hopfälld på små skärmar och gömd under en knapp. Denna teknik kan ses i många responsiva mallar och är faktiskt väldigt lätt att implementera. Exempel på mobilmenykoden finns i dokumentationen, jag tar den därifrån och gör om lite.

Så det första jag kommer att göra är att ta bort blocket med rubriken, eftersom vår meny faktiskt kommer att vara rubriken för min mall. Menykoden måste placeras före 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:

Switch-knapp Logotyp/namn

• Cykling
• Motorsport
• Träningsredskap
  • Löpband
  • Elliptiska tränare
  • Bänkar

Sök

Bli inte orolig över det faktum att det finns mycket kod. 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. Här är stilarna för den:

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

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

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 kan du från exemplet ovan förstå hur ett rullgardinsmenyobjekt skapas i Bootstrap; låt oss extrahera den här koden för en mer detaljerad titt:

Träningsredskap

• Löpband
• Elliptiska tränare
• Bänkar

Så, behållaren för ett rullgardinsobjekt är ett vanligt listobjekt med rullgardinsklassen. Inuti den finns huvudlänken, genom att klicka på den öppnas en rullgardinsmeny. Det är mycket viktigt att tilldela det ett dataattribut, som du ser i koden, utan det fungerar ingenting. Du bör också se till att filen bootstrap.js är ansluten till webbsidorna.

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

Lägga till brödsmulor (brödsmulor) med hjälp av Bootstrap

I många butiker kan du hitta ett så kallat block av brödsmulor, som innehåller hela sökvägen till den aktuella sidan. Detta är också enkelt att göra med ramverket, se koden:

Hem

Katalog

Varor

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( text-align: center; )

Om du på något sätt vill ändra utseendet på brödsmulor, använd bara .breadcrumb-väljaren i CSS. 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 en begränsad bredd för att begränsa måtten. 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 ha gränser på alla fyra sidorna måste du lägga till en annan klass:

I princip är detta alla möjligheter med tabeller. Jag har redan skrivit en separat artikel om hur man gör ett adaptivt bord, så jag kommer inte att upprepa det. 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.

Slutsats

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

En värld av gratis program och användbara tips
2024 whatsappss.ru