Bootstrap är en intressant ram eller? Verktygslåda? erbjuds till utvecklare helt gratis av ingen annan än Twitter.com. Enligt Twitter är Bootstrap utformat för att kickstart utvecklingen av webbapps och webbplatser.?
Idag ska vi hoppa in i Bootstrap och ta en snabb titt på några av de saker som den har att erbjuda. Detta bör hjälpa dig att bestämma om det här är bara ett annat uppblåst ramverk eller ett otroligt användbart verktyg som du ska använda för att starta ditt nästa projekt.
Vad kan du göra med Bootstrap?
Bootstrap är typ av en schweizisk armékniv för utvecklare. Det är helt enkelt laddat med verktyg och verktyg, av vilka du hittar extremt användbara, andra som du aldrig kommer att röra vid.
Det verkliga målet bakom Bootstrap är att spara dig tid. Twitter har gjort det tunga för dig genom att undersöka och genomföra några av de bästa sätten att utföra olika uppgifter. De har också tagit flera steg mot att tillämpa solida grundläggande stilar på olika vanliga element.
Ska du ta detta som det är och stänga av din kritiska hjärna under utveckling? Absolut inte! Du borde gräva in, hitta vad du gillar och dike eller ändra vad du inte gör. Bootstrap är speciellt byggd för att hantera anpassning i många fall, så gärna göra nötter och göra det själv.
Komma igång
Om du vill implementera några av de stilar vi arbetar med i flygningen, kan du helt enkelt koppla till Bootstrap CSS-filen som så:
Vi ska gå ett steg längre och gräva i några av de valfria LESS-filerna, så det kan också vara bra att bara sluta med GitHub och ladda ner hela projektet.
När du har allt det klart att gå, är det dags att fortsätta och se vad den här saken har att erbjuda. Jag kommer inte att gå igenom en stegvis stegvis handledning av varje enskild funktion i Bootstrap, det är ganska stort och dokumentationen borde ha tagit dig. Detta kommer bara att fungera som en snabb översikt för några av de saker som jag tycker är användbara om Bootstrap och hur du snabbt och enkelt kan utnyttja dem i din egen kod.
demo
Klicka på länken nedan för att se Twitter Bootstrap i aktion. Jag byggde denna provsida på bara några minuter med hjälp av de tekniker som vi kommer att gå över nedan.
demo: Klicka här för att starta demo.
# 1: Ett förbyggt rutnät
Det första vi ska diskutera är gallret. Varje bra ram har en och Bootstrap är inget undantag. Du behöver inte använda nätet för att dra nytta av de många stilar som erbjuds av Bootstrap, men det är nyckeln till att använda denna verktygslåda för att utföra snabb sidlayout med nästan ingen ansträngning.
Som standard är nätet 940px bredt med 16 kolumner. Varje kolumn är 40px med en rännan på 20px. Precis som 960.gs, Blueprint och andra, är det här nätet lite div heavy och kräver lite markup som du kanske inte älskar, men i slutändan är det faktiskt väldigt lätt att använda och gör att du använder Bootstrap en snap.
Rutenettet arbetar främst på rad och spännklasser. Rader är självförklarande, när du vill starta en ny rad, skapa en div och tillämpa raden? klass. Allt för den raden går i den diven, när det är dags för en annan rad, stäng den gamla och starta en ny.
För varje div i rad använder du? Span #? klass med? #? är antalet kolumner som du vill att div ska spänna över.
Galler exempel
Låt oss säga att vi mocking upp en layout som använde en stor header-bild som täckte hela sidans bredd över fyra kolumner text. Markeringen för detta är enkelt:
Styling för detta kommer att bli helt automatiserad. Allt du behöver göra är att släppa lite innehåll i HTML-koden ovan och du har själv en layout.
Precis som 960.gs stöder Bootstrap-nätet också häckning och kolonner. Du kan till och med göra sidovätskan genom att kasta allt till en div med a ? Behållare-vätska? klass, eller helt enkelt använda ?behållare? för fast bredd.
# 2: MINDRE
MINDRE, den alltmer kända CSS preprocessorn, får en stor godkännande här från Twitter med massor av inbyggt stöd. De har verkligen gått ut och skapat en hel del mindre mixiner och variabler för att du ska arbeta med rätt ut ur lådan.
Låt oss ta en titt på några av de saker du kan göra med Bootstrap och LESS.
Anpassa rutnätet
Bootstrap-nätet är byggt med LESS mixins och CSS matte så det är enkelt att anpassa. Ändra bara ett par variabler och allt uppdateras automatiskt. Låt oss säga att du ville ha ett tolv kolumngrid istället för en sexton kolumn en, gå helt enkelt in i variabler.lös?, Hitta gridvariablerna och ändra antalet kolumner till tolv. Det är så enkelt.
CSS3 Utan svårigheten
Bootstrap gör det enkelt att använda några av dina favorit CSS3-tricks utan att det är smärtsamt att manuellt upprepa dig för varje webbläsare. Du hittar användbara mixins för att implementera avrundade hörn, skuggor och övergångar.
Det finns också resurser för att skapa gradienter och färgscheman med hjälp av LESS MINISTER.
Clearfix
Om du håller fast vid det förbyggda gallret behöver du inte manuellt installera och rensa flottor, men om du går på egen väg med layout kan den inbyggda clearfix mixin spara mycket besvär.
För att genomföra detta är allt du behöver göra typ ? .Clearfix ()? i din .lösa fil. Strukturen här speglar den metod som används av Nicolas Gallagher.
# 3: Navigation
En av Bootstraps mest lämpliga bitar är den fantastiska navigationsverktyget som du kan använda för att implementera flera olika typer av komplexa navigeringselement på några sekunder.
Huvudnavigering
Det finns till exempel en fantastisk huvudnavigationsfält som ser skarpt ut, möjliggör enkel anpassad branding och även stannar kvar med dig som din rullning (visas ovanpå). Markeringen verkar onödigt tung men det gör det säkert lätt att skapa en riktigt smidig meny (stöd för nedräkningar ingår också).
flikar
Du kan också enkelt implementera ett navigeringsschema för flikar. Denna markering ser mycket trevligare ut och kunde verkligen inte bli enklare. Lägg bara till ? Flikar? klass till en oorderad lista och du är klar!
Ännu mer
Bootstrap slutar inte där. I det hittar du liknande konstruktioner för att skapa breadcrumb navigation, pagination och mer. De flesta av dessa implementeras precis som flikar, med en enkel klass.
Kom ihåg att all standard styling kan ändras, så även om du inte nödvändigtvis gillar den använda stilen, är dessa verktyg extremt hjälpsamma för att du ska få den grundläggande strukturen i dina navigationer på rätt tid.
# 4: Gallerier
Med Bootstrap är bildgallerier ganska automatiska. Som med flikar, behöver de helt enkelt en oorderad lista med en speciell klass, i det här fallet ? Media-grid?. Med detta tillämpas, utför galleriet automatiskt layoutarbetet med hänsyn till storleken på dina bilder. Som sagt, rekommenderar Twitter att du använder storlekar som 90, 210 och 330, vilket fungerar bra med layouten.
Slutsats
Denna artikel är avsedd att ge dig en mycket kort titt på några av de stora verktygen som är tillgängliga för dig i Twitter Bootstrap. Oavsett om du letar efter ett snabbt sätt att utföra en komplex layout eller helt enkelt vill ha några fina UI-element som flikar och knappar, har Bootstrap täckt dig.
Det finns saker här och där som jag kanske inte håller med, men i stort sett tycker jag att Twitter har lyckats skapa en riktigt användbar uppsättning verktyg. Jag är alltid glad att se företag som erbjuder gratis värdefulla resurser till webbdesignsamfundet. Känner du till liknande verktyg från andra företag? Låt oss veta i kommentarerna nedan.
bootstrap
Bootstrap är en open source toolkit för utveckling med HTML, CSS och JS. Vår serie innehåller tips och idéer för att arbeta med Bootstrap, och inspirerande samlingar av mallar för att komma igång snabbt!