Nyligen publicerade vi ett stycke med titeln 5 Otroligt Användbara Verktyg Inbyggda i Twitter Bootstrap, som tog en titt på den grundläggande strukturen av Twitter Bootstrap-ramverket och gick igenom dig genom att implementera några av huvudkomponenterna.
Twitter släppte bara Bootstrap 2.0, en uppdatering som är så stor att den motsvarar en nästan fullständig omskrivning. Det finns en hel del nya funktioner och leksaker att leka med, men den riktiga headliner är att ramverket nu är fullt lyhörd. Gå med i oss när vi gräver in för att se hur det nya nätverket fungerar och vilka andra coola nya funktioner har lagts till. Du lär dig att implementera Bootstrap i dina projekt och kommer också att hämta några extremt praktiska CSS-tekniker som du kan använda var som helst.
demo
Vi pratar om flera nya Bootstrap-funktioner idag. Om du vill se dem i åtgärd, sluta med live demo nedan.
demo: Klicka här för att starta.
Genomförande av Responsive Grid
Den största delen av Twitter Bootstrap är självklart att den nu är fullt lyhörd. Om du fortfarande märker hela den lyhörda rörelsen som en dum kille i hopp om att du äntligen kan hoppa över att lära dig de nödvändiga teknikerna, är du inte lycka till. Responsiv design är väl på väg till att vara en standardpraxis istället för en? Trevlig att ha? tillägg. Det är verkligen inte så komplicerat som du kanske tror och verktyg som Bootstrap gör det ännu enklare.
Det nya svarsgitteret är tolv kolumner brett och fungerar ungefär som sexton kolonnnät från Bootstrap 1. Om du någonsin har använt några rastersystem före, då kommer du känna dig riktigt hemma eftersom det inte finns något för jorden som splittras här.
För att implementera rutnätet följer du ungefär samma steg som du alltid gjorde. Börja med en container div, skapa sedan en rad och fyll i den raden med span (x) divs. Med tanke på att det är ett tolv kolonnnät, bara se till att siffrorna i rad lägger till tolv. Försök med fyra? Span3? divs, a? span9? med en? span3? eller ens bara en rak upp? span12? att gå hela vägen över. Här är ett snabbt exempel:
Ovanstående representerar ett statiskt rutnät. Det kommer fortfarande att vara responsivt, det kommer inte att svara på varje minuts fönsterändring i webbläsarfönstret, bara de som ställs in av mediafrågor. Om du vill ha ett vätskegrid, använd vätskeklasserna:
Media frågorna
De medföljande mediefrågorna listas nedan, börjar på mobilen och arbetar uppåt. I grund och botten går alla in och ändrar storleken på kolumnerna för att flytta layouten till något mer lämpligt för visningsporten.
- @media (maxbredd: 480px)
- @media (maxbredd: 768px)
- @media (min bredd: 768px) och (maxbredd: 980px)
- @media (maxbredd: 980px)
- @media (min bredd: 980px)
- @media (min bredd: 1200px)
Den första mediefrågan (480px och under) riktar sig till smartphones och bryter i stort sett allt ner till en enda kolumn med 100% bredd. Det här kan vara lite förenklat för din smak, men skönheten i ramar som detta är att de bara är förslag, du uppmanas att anpassa dig till ditt hjärtans innehåll.
Nästa mediefråga riktar sig mot porträttdisplayer med ett intervall på 480px till 768px, upp till 980px för landskapstabletter och upp till vanliga skrivbord och stora bildskärmar.
För det statiska rutnätet börjar individuella kolumner vid 70px breda, sedan hoppa ner till 60px och slutligen ner till 42px innan de går 100% bredd för mobilen.
Tips: Hämta rätt hämtning
Intressant nog är mediefrågorna inte inkluderade i standardladdningen från Bootstraps hemsida. Om du vill ha dem måste du ta GitHub-hämtningen.
Trevlig Attribut Värdesväljare Användning
Om du kolla in koden för mediefrågorna kan du lära dig ett snyggt trick eller två. Till exempel har devs implementerat ett solidt exempel på "Variabel Substring Attribut Värdesväljare?", Som jag skrev om i CSS Selectors: Just the Tricky Bits.
Bootstrap har många klasser som använder ordet? Span? (span1, span2 etc.), och istället för att skriva ut var och en, tar ASAVS dem på ett och samma sätt med denna fina bit kod: [class * =? span?]. Denna väljare gräver faktiskt genom HTML och finner något med? Span? i klassnamnet, oavsett vad som följer. Även en klass av? Spansomethingtotallycrazy? skulle vara riktade.
Innehållstransformation
Även om hjärtat av mediefrågorna är att flytta kolumnerna, så är det mycket mer på gång också här. Utvecklarna har faktiskt tagit sig tid att omstrukturera många av elementen så att de omvandlas när visningsportens storlek ändras.
Navigationsmenyerna förändras till exempel ganska drastiskt när du tittar på en surfplatta eller smartphone. För att se ett exempel, testa Bootstraps hemsida. I full storlek är navigationsmenyn en enkel övergripande lista över textlänkar.
På en surfplatta eller smartphone raderas texten och ersätts med en knapp uppe till höger på skärmen.
Genom att trycka på knappen utökas det nya menyområdet. Här har vi en vertikal lista med länkar, vilket möjliggör större tappbara områden.
Responsive Images
Navigationsmenyn är inte det enda som ändrar storleken med visningarna, många andra objekt gör det också, från enkla knappar till mer komplicerade objekt som bildcaruseller. För att dra bort de automatiskt anpassningsbara bilderna har Twitter tagit max-bredd: 100% ;? rutt. Här är hela snippet:
Detta gör det så att, eftersom de kolumner och rader ändrar sig, kommer bildbredden max ut vid bredden på föräldrakolonnen. Observera också? -Ms-interpolation-mode: bicubic ;? linje. Det här är en ganska obskyrlig egenskap som i huvudsak gör att bildåtergivning görs mjukare i IE.
Fler nya saker
Den responsiva funktionaliteten är definitivt den coolaste nya funktionen hos Bootstrap, men det finns mycket mer här för att bli upphetsad. Här är tre av mina favoritartiklar:
Progress Bars
Bootstrap har nu kompatibla framdriftsfält som är superklara, vilket är super lätt att implementera. Lägg bara in ett stycke som nedan:
Bredden: 30%? här liknar hur långt längs progressionsfältet kommer att vara. Om du vill ändra det till halvfullt, skriv bara in 50%.
Knappgrupper
Knappgrupper är lite som breadcrumb-navigering, eftersom de är enskilda knappar som alla smutsas ihop. Normalt tar det en bra bit av kod för att dra av. Du behöver inte bara ställa in det allmänna knapptemat, du måste också göra den första och sista knappen annorlunda.
Med Bootstrap är allt du behöver några länkar till? Btn? klass inuti en? btn-grupp? div.
karuseller
De gamla Bootstrap JavaScript-pluginsna har blivit uppgraderade och några helt nya har lagts till. Min favorit här är den nya jQuery-karusellen. Exempelkoden nedan kan verka rejält, men om du bryter ner den är det ganska enkelt. Slideinnehållet kastas i? .Em? div och en valfri bildtext kan läggas till. Navigation slängs i slutet.
Slutsats
När ett stort företag som Twitter lägger ut en fri resurs, är det ett spel att faktiskt bygga ditt arbetsflöde runtom det. Ett stort problem är att du inte vet säkert hur bra det kommer att hållas kvar på lång sikt. Lyckligtvis verkar det som om Bootstrap för närvarande åtminstone är en ganska hög prioritet på Twitter. Den nya versionen representerar en enorm mängd tid och ansträngning och det visar verkligen. Detta blir till en extremt omfattande panna.
Jag personligen stoked att Twitter ansåg att det var nödvändigt att ta Bootstrap responsivt. Detta kommer definitivt att bidra till att orsaka responsiv design som fungerar bra över inte bara alla större webbläsare, utan även alla större enheter.
Lämna en kommentar nedan och låt oss veta vad du tycker om Bootstrap 2.0. Försökte du den första versionen? Vilka är dina favoritförbättringar?