Accentsconagua

Mobil först med Bootstrap 3

Koda
Share

Okej så för några veckor sedan nu, på sin egen tvåårsjubileum, meddelade Mark Otto och resten av killarna som ansvarar för utveckling och underhåll av Bootstrap den officiella versionen av ramens tredje version, och det kom på steroider. Låt oss se vad vi får.

Vad är nytt?

Först och främst är de viktigaste förändringarna du hittar i det nya Bootstrap-utgåvan stöd för svaga webbplatser, i själva verket har den mottagliga modulen tagits bort. Nu, från kärnan, Bootstrap är responsiv, mer än så kommer den nya versionen med "Mobile First", vilket betyder att nästan allt har blivit omdesignat för att starta från en lägre skärmstorlek och skala upp (mer om det på en bit).

Nästan allt har blivit omdesignat och ombyggt för att starta från dina handhållna enheter och skala upp.

I utseendet och känslan ser du också många förändringar, framträdande det faktum att hela stilen har blivit platt, och det finns ett valfritt tema för en 2,0-serig utseende. Dessutom har ikonerna gått från bilder till ett teckensnitt, vilket är väldigt användbart att använda när man behöver olika storlekar och färger.

Rutsystem

Låt oss börja prata om Grid-systemet, o gridet. Faktum är att det finns fyra Grid Systems i den här nya versionen av Bootstrap, var och en fungerar exakt, differentierad av skärmstorleken vid vilken de fungerar.

Aktivera nätet

För att nätverket ska kunna fungera korrekt och även för att säkerställa korrekt rendering och tryck på zoomning, lägg till metagången för visningsporten i ditt dokument:

Olika breddnät

Det finns fyra Grid Systems i den här nya versionen av ramverket, med visningsportens bredd som den parameter som skiljer dem. Bredderna som sätter gränserna mellan varandra är följande:

  • Extra små enheter ~ telefoner (< 768px)
  • Små enheter ~ tabletter (> = 768px)
  • Medium enheter ~ Stationära datorer (> = 992px)
  • Stora enheter ~ Stationära datorer (> = 1200px)

Och var och en av de olika visade visningarna har en särskild klass för att adressera den, enligt följande:

  • col-xs- ~ Extra små enheter
  • col-sm- ~ Små enheter
  • kol-md- ~ medelstora enheter
  • col-lg- ~ stora enheter

För att utnyttja nätverket behöver du ett behållarelement med en klass "behållare", och inuti en andra behållare med en klass "rad". Lägg märke till hur i båda fallen "vätske" suffixet har försvunnit, detta i motsats till Bootstrap 2. Och inuti den andra behållaren placerar du dina kolumner.

 
 
col-xs-6
 
col-xs-6

Som jag nämnde tidigare kommer den här nya versionen av Bootstrap med ett Mobile First-tillvägagångssätt, vilket innebär att kolumnerna med en klass suffixeras med en "xs" är alltid kommer att svängas horisontellt, oavsett visningsstorlek. Om du skulle säga, använd kolumner prefixed av en "Md" och utsiktsporten råkade vara mindre än 992px bred (jämn 991px), de kolumnerna staplar en under den andra med en 100% bredd, som i nästa exempel.

 
 
col-md-4
 
col-md-4
 
col-md-4

När den här sidan visas på en visningsport på 992px eller mer så kommer det att se ut så här:


Om du skulle hända att se det dokumentet i en visningsport på 991px eller mindre skulle det se ut som följer:


Du kan också kombinera klasser för att adressera dina element i en viss visningsportstorlek. Om du i det följande exemplet skulle behöva de första två kolumnerna flöt sida vid sida i små enheter (sm) och staplade på telefoner, kan du lägga till col-sm-6 utöver col-md-4 klass.

 
 
col-sm-6 col-md-4
 
col-sm-6 col-md-4
 
col-sm-6 col-md-4

I det här fallet öppnar du sidan i en bildport som är större än 991px och du ser tre lika kolumner, en bredvid den andra, precis som i det sista exemplet. Om du skulle se den i ett visningsport med en bredd mellan 768px och 991px får du följande resultat:


Som i exemplet ovan kan du kombinera och boa kolumner i många olika kombinationer för att skapa väldigt komplexa layouter. Det finns mycket mer till Grid System i Bootstrap, men att gå in i detalj om varje aspekt av det skulle ta ett tag att täcka, så för en djupare titt på det, rekommenderar jag starkt att du går och tittar på dokumentationen.

Bootstrap CSS

De flesta klasserna för Base CSS-delen av Bootstrap har varit desamma, men det finns några förändringar som vi måste komma ihåg när du använder den här nya versionen.

Koden som helhet har skrivits om och variabla namn har ändrats. Om du tittar på .less-filerna kommer du att finna att alla variabler i ramverket har bytt från Camelcase att använda bindestreck för ordseparation, och även varje variabelnamn har standardiserats i en "element-statligt pseudotillstånd". Det här betyder att elementspecifika stilar som:

    ...

Nu är prefixed med det element som de appliceras på, så i den här nya versionen av Bootstrap skulle den föregående listan bli.

    ...

Detsamma gäller för listor med en "i kö"stil som tillämpas på dem. Några andra ändringar i variabelnamnen återspeglar i de klasser som vi har känt från tidigare tider de som är relaterade till storlek, till exempel med knappar, i version 2. * du skulle ha:

Denna storlek suffix har ändrats för att matcha den övergripande namngivningskonventionen och detta är samma som för Grid-systemet, så den tidigare knappdeklarationen för version tre blir:

Detsamma gäller även ingångsstorlekar och siktförklaringar.

Responsive Tables

Den övergripande syntaxen och layouten för tabellerna är densamma i den här versionen av ramverket, men lojala mot hela "Mobile First" -paradigmet, nu har vi mottagliga tabeller i denna iteration av Bootstrap. För att dra nytta av det, helt enkelt sätta hela bordet i en behållare med en klass av "reagerar-tabell", vad det här gör är att tabellerna rullar horisontellt i små enheter (< 768px).

 ... 
Och den resulterande tabellen:

formulär
I CSS-avdelningen finns det i Forms där du skulle se de stora skillnaderna. Till att börja med visas varje inmatning i en form i Bootstrap tre nu som ett "block" -element med en 100% bredd. Attributen "storlek" som du kan ändra med en klass i formulärkontroller, hänför sig till elementets vaddering och fontstorlek och inte bredden, för att kontrollera att du skulle behöva lägga den i en behållare med önskad bredd.
Markeringen för formulären har också ändrats, i den mest grundläggande formen, i version 2. * En form skulle se ut så här.
 
 ...    
 
Markeringen för samma blankett i den nya versionen lägger till ett extra element och en klass till själva inmatningen och går enligt följande.
 
 ...  
   
 
 
Bootstrap har skapats med tillgänglighet i åtanke, det är orsaken till attribut attributet "roll", notera också att etikett / ingångskombinationen är inslaget i ett omslag med en klass av "form grupp", och som allt annat har detta att göra med rammens reagerande karaktär.
Sökformuläret är borta i den här versionen, och eftersom alla ingångar och textområdena är 100% bredd som standard måste särskild hänsyn tas med inline-formulär, men markeringen för dessa är nästan identisk med den tidigare formuläret.
 
   
 
   
 
  
  

Notera tillägget av klassen "form inline"till formelementet och"-Bara sr"på etiketten har den här klassen att göra med tillgängligheten av ramen. Användningen av en etikett är valfri med inline-formulär, men det är mycket uppmuntrande och gör ingen skada på någon. Och förresten, är"-Bara sr" står för Endast skärmläsare. Så skärmsläsare hittar märket och "säger det" till användaren.
Slutligen, för att skapa en horisontell form, ställer du helt enkelt etikettets bredd genom att ställa in det "col-md-"eller"_sm"eller vad som helst och motsvarande"kontroll-etikett"klassen, precis som med version två., och sedan inmatning inmatningen i en behållare med egen angiven kolumnbredd.
 
  
  
 
 
Och den resulterande formen.

Det finns några andra förändringar som gjorts när det gäller former, som att ta bort "input-prepend"och"input-append"klasser, till förmån för"input-grupp"och"input-grupp-addon". Det finns dock mycket mer att täcka än, så för detaljer om det, se dokumentationen.
Glyphicons
Ett annat område där du kommer att hitta stora förändringar finns i ramens ikoner. Ikonbiblioteket innehåller 40 nya glyfer, och inte bara det, de bytte från att använda bilder till teckensnitt, så nu istället för att lägga till de två "glyphicons-*" -bilderna till din "img"mappen måste du lägga till de fyra" glyphicons "-tecknen till din"typsnitt"katalog och ja, fyra av dem. Detta har att göra med webbläsarens kompatibilitet.
Av prestationsskäl kräver varje ikon en basklass och en ikonisk specifik klass. Så nu, för att lägga till en användarikon ska du använda:
Växeln från bilder till teckensnitt ger kontroll över ikonens färg och storlek, och låter dig också byta standardikoner med några anpassade som du kanske vill. Om du råkar undra var du kan hitta sådana typsnitt, är Fontello en bra resurs.
JavaScript-komponenter
Även om det är omformat och återskapat, innehåller JavaScript-komponenterna i Bootstrap 3.0 samma namn och användning. Med ett par lite och inte så milda skillnader.
modals
Kanske är en av de mest använda pluggarna i Bootstrap Modals. Du finner att det är ganska lika, med skillnaderna att behållarna "modal-header", "modal-body" och "modal-footer" inte är inslagna i ett "modal-innehåll" inom en "modal-dialog" behållare. Så vad brukade vara:
 
 
 
 
Ändras till:
 
 
 
 
 
 
 
 
Ja, det är lite mer markup, men det förbättrar komponentens respons och gör det också möjligt att rulla hela visningsporten istället för att ha en "maxhöjd" parameter.
För att utlösa dem via JavaScript, använder du samma metod som tidigare.
$ ('# my-modal') .modal ('show');
Resten av pluginsna förblir mestadels desamma. På en speciell anmärkning är dragspelet borta för fällbara paneler, de fungerar ganska mycket desamma och har en mycket liknande syntax. Med vissa klasser förändras lite behöver de fortfarande övergångspluggen och kräver inga extra behållare.
Dessutom har Typeahead-plugin försvunnit från Bootstrap till förmån för Twitter: s Typeahead-plugin.
evenemang
JavaScript händelser är nu namespaced, men vad betyder det för dig? Tja, i Bootstrap två, att lyssna på det ögonblick då någon varning på din webbplats var "stänga", skulle du lägga till:
$ ('# my-alert') .bind ('close', funktion () );
Nu i den här tredje versionen har händelsens namn ändrats, det är namnspaced till ramverket, så det tidigare stycket skulle vara:
$ ('# my-alert') .bind ('close.bs.alert', funktion () );
Fortsätt och ta en titt på resten av JavaScript-komponenterna Bootstrap har att erbjuda (som fortfarande är beroende av jQuery).
Nya komponenter
Det finns några nya komponenter i CSS-delen av ramen, listgrupper och paneler.
Listgrupper
Lista grupper, från den officiella dokumentationen.
 
... är en flexibel och kraftfull komponent för att visa inte bara enkla listor över element, men komplexa med anpassat innehåll.
 
För att skapa en listgrupp skapar du helt enkelt en oorderad lista med en "list-grupp"klassen och lägg till"list-group-post"till varje listobjekt.
     
  • Lorem ipsum ... 
    •  
  • Dolor sitter ... 
    •  

Du kan lägga till "aktiva"klass till något objekt i listan för att markera det, även om du råkar placera ett märke inuti det, kommer det att centreras vertikalt och justera det till höger, inuti objektet. Fortsätt och försök det.
paneler
Paneler är ett sätt att box in lite innehåll på din webbplats eller applikation, markera den och ge den en känsla av enhet. Panelen markering är ganska enkel, och dess innehåll kan kombineras med olika element för att uppnå ett unikt utseende.
Paneler kan ha rubriker och sidfot och få en särskild betydelse med den välkända "sucess","fel","varning", etc. klasser. Till exempel.
 
Panelrubrik
 
Några innehåll här
 
     
  • Lorem ipsum ... 
    •  
  • Dolor sitter ... 
    •  
 

Som du kan se fungerar paneler bra med listgrupper, och även med tabeller utan gränser.
Customizer
Även ny i den här versionen är Customizer där inte bara utseendet har förändrats, det är mycket bättre organiserat och ger dig kontroll över saker som den visningsbredd som ett visst Grid-system tar kontroll över.
Som alltid kan du ställa in alla dina teckensnitt och färger. Det är ett stort ämne på egen hand så jag uppmuntrar dig att gå själv och röra med den.

Browser Support
Långt har lidandet väckt till oss alla av Internet Explorer, det är version sex var en total mardröm och dess föregångare har fortfarande mycket att hämta. I version 2. * Bootstraps lag stödde fortfarande version 7 av Microsofts webbläsare. I denna nya iteration av ramverket är stöd för IE seven borta, liksom för Mozilla Firefox 3.6 och nedan.
Specifikt stöder Bootstrap den senaste versionen av alla större webbläsare (Safari, Opera, Chrome, Firefox och IE), både i Windows och Mac när det finns båda.
För IE stöder den version åtta och framåt, och även om det finns några egenskaper som webbläsaren inte gör, till exempel "border-radius", ramverket är fullt fungerande endast med några mindre utseende och känslor. Dessutom kräver IE åtta respond.js för support för mediafrågor.
För att få en detaljerad lista över lösningar och gotchas för de olika webbläsarna (hosta Internet Explorer hosta) titta på de officiella dokumenten.
Slutsats
Sedan starten har Bootstrap varit ett utmärkt verktyg för snabb prototypning och skapande av bra webbplatser och webbapplikationer och den här tredje versionen är inte annorlunda. Om du bara behöver en anledning att använda det, skulle jag definitivt gå till Grid-systemet, med tillväxten av mobila surfning och de alltid ökade visningsstorlekarna där ute, är responsivitet ett måste nu, mer än någonsin. Och i den senaste versionen är det det område där Bootstrap skiner mest. 
Om du behöver hjälp med att komma igång kan du prova en av de lättanvända Bootstrap-mallar som finns på Envato Market.

	
	
			
	   
	



Koda


	


			

							×