Standardrutnät

Standardrutnätssystemet som tillhandahålls som en del av Bootstrap är ett 940px brett rutnät med 16 kolumner. Det är en smak av det populära 960 rutsystemet, men utan extra marginal/stoppning på vänster och höger sida.

Exempel på rutnätsuppmärkning

Som visas här kan en grundläggande layout skapas med två "kolumner", som var och en spänner över ett antal av de 16 grundkolumner som vi definierade som en del av vårt rutsystem. Se exemplen nedan för fler varianter.

<div class="row"> class = "rad" >
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

Fast layout

En grundläggande 940px bred, centrerad containerlayout för nästan vilken webbplats eller sida som helst.

<kropp>
  <div class = "container" > 
    ...
  </div>
</body>

Flytande layout

En flexibel flytande eller flytande sidstruktur med min- och maxbredder och en vänstra sidofält. Perfekt för appar.

<kropp>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

Rubriker och kopia

En standardtypografisk hierarki för att strukturera dina webbsidor.

h1. Rubrik 1

h2. Rubrik 2

h3. Rubrik 3

h4. Rubrik 4

h5. Rubrik 5

h6. Rubrik 6

Exempel stycke

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Exempelrubrik Har underrubrik...

Du kan också lägga till underrubriker med <strong>och<em>

Övrigt element

Använda betoning, adresser och förkortningar

<strong> <em> <address> <abbr>

När ska användas

Betoningstaggar ( <strong>och <em>) bör användas för att lägga till visuell skillnad mellan ett ord eller en fras och dess omgivande kopia. Använd <strong>för ren gammal uppmärksamhet och <em>för smart uppmärksamhet och titlar.

Betoning i ett stycke

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Adresser

Elementet addressanvänds för – du gissade rätt! – adresser. Så här ser det ut:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Obs! Varje rad i ett addressmåste avslutas med en radbrytning ( <br />) för att korrekt strukturera innehållet när det läses i verkligheten utan att använda stilar.

Förkortningar

För förkortningar och akronymer, använd abbrtaggen ( acronymär utfasad i HTML5 ). Placera förkortningsformuläret i taggen och ange en titel för hela namnet.

Blockcitat

<blockquote> <p> <cite>

Var noga med att linda blockquoterunt paragraphoch citetaggar. citeAnvänd elementet när du citerar en källa . CSS kommer automatiskt att inleda ett namn med ett em-streck (—).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

Dr Julius Hibbert

Obeställd<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Mina lagkamrater
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Ny man
• John Jacob
• Paul Pierce
• Kevin Garnett

Ostylad<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Mina lagkamrater
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Ny man
• John Jacob
• Paul Pierce
• Kevin Garnett

Beställde<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. Mina lagkamrater
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Ny man
6. John Jacob
7. Paul Pierce
8. Kevin Garnett

Beskrivningdl

Beskrivningslistor

En beskrivningslista är perfekt för att definiera termer.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Bygga bord

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Bord är bra - för många saker. Bra tabeller kräver dock lite uppmärkningskärlek för att vara användbara, skalbara och läsbara (på kodnivå). Här är några tips som kan hjälpa dig.

Slå alltid in dina kolumnrubriker theadså att hierarkin är thead> tr> th.

På samma sätt som kolumnrubrikerna bör allt innehåll i din tabell vara inlindat i en tbodyså att din hierarki är tbody> tr> td.

Exempel: Standardtabellstilar

Alla tabeller kommer automatiskt att formateras med endast de väsentliga ramarna för att säkerställa läsbarhet och upprätthålla struktur. Inget behov av att lägga till extra klasser eller attribut.

#	Förnamn	Efternamn	Språk
1	Några	Ett	engelsk
2	Joe	Sexpack	engelsk
3	Stu	Buckla	Koda

<table class="common-table"> class = "gemensam-tabell" >
  ...
</table>

Exempel: Zebrarandig

Bli lite tjusig med dina bord genom att lägga till zebrastränder – lägg bara till .zebra-stripedklassen.

#	Förnamn	Efternamn	Språk
1	Några	Ett	engelsk
2	Joe	Sexpack	engelsk
3	Stu	Buckla	Koda

<table class="common-table zebra-randig"> class = "vanligt bord zebrarandigt" >
...
</table>

Exempel: Zebrarandig med TableSorter.js

Med det föregående exemplet förbättrar vi användbarheten av våra tabeller genom att tillhandahålla sorteringsfunktioner via jQuery och plugin-programmet Tablesorter . Klicka på valfri kolumnrubrik för att ändra sorteringen.

#	Förnamn	Efternamn	Språk
1	Din	Ett	engelsk
2	Joe	Sexpack	engelsk
3	Stu	Buckla	Koda

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> typ = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script type = "text/javascript" > 
  $ ( dokument ). redo ( funktion () { 
    $ ( "tabell#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<tabellklass = " vanligt bord zebrarandigt" > 
  ...
</table>

Standardstilar

Alla formulär får standardstilar för att presentera dem på ett läsbart och skalbart sätt. Stilar tillhandahålls för textinmatning, urvalslistor, textområden, alternativknappar och kryssrutor samt knappar.

Exempel på formförklaring

X-Large Ingång

Välj

1 2 3 4 5

Välj

1 2 3 4 5

Oredigerbar inmatning

Lite värde här

Inaktiverad ingång

X-Large Ingång

Litet stycke hjälptext

Exempel på formförklaring

Föregående text

@

Prepended kryssruta

Bifogad kryssruta

Filinmatning

Exempel på formförklaring

Lista över alternativ

• Alternativ ett är det och det - se till att inkludera varför det är bra
• Alternativ två kan också kontrolleras och inkluderas i formulärresultaten
• Alternativ tre kan – ja, du gissade rätt – också kontrolleras och inkluderas i formulärresultaten
• Alternativ fyra kan inte markeras eftersom det är inaktiverat.

Obs: Etiketter omger alla alternativ för mycket större klickytor och en mer användbar form.

Datumintervall

till Alla tider visas som Pacific Standard Time (GMT -08:00).

Textområde

Block med hjälptext för att beskriva fältet ovan om det behövs.

Lista över alternativ

• Alternativ ett är det och det - se till att inkludera varför det är bra
• Alternativ två kan också kontrolleras och inkluderas i formulärresultaten

Spara ändringar Avbryt

Staplade former

Lägg .form-stackedtill i ditt formulärs HTML så kommer du att ha etiketter ovanpå deras fält istället för till vänster. Detta fungerar utmärkt om dina formulär är korta eller om du har två kolumner med indata för tyngre formulär.

Exempel på formförklaring

X-Large Ingång

Välj

1 2 3 4 5

Exempel på formförklaring

Lista över alternativ

• Alternativ ett är det och det - se till att inkludera varför det är bra
• Alternativ två kan också kontrolleras och inkluderas i formulärresultaten

Obs: Etiketter omger alla alternativ för mycket större klickytor och en mer användbar form.

Spara ändringar Avbryt

Knappar

Som en konvention används knappar för åtgärder medan länkar används för objekt. Till exempel kan "Ladda ner" vara en knapp och "senaste aktiviteten" kan vara en länk.

Alla knappar har som standard en ljusgrå stil, men en blå .primaryklass är tillgänglig. Dessutom är det lätt att rulla dina egna stilar.

Exempel knappar

Knappstilar kan appliceras på vad som helst med den .btnapplicerade. Vanligtvis vill du tillämpa dessa på endast a, button, och markerade inputelement. Så här ser det ut:

Alternativa storlekar

Vill du ha större eller mindre knappar? Ha på det!

Inaktiverat tillstånd

För knappar som inte är aktiva eller inaktiverade av appen av en eller annan anledning, använd avaktiverat tillstånd. Det är .disabledför länkar och :disabledför buttonelement.

Länkar

Knappar

Vad är det

Vår toppfält är en fast bar som innehåller en webbplatss logotyp eller namn, primär navigering och sökformulär.

anpassningsbar

Alla element inom, och hela toppfältet också, är valfria. Du kan välja att inkludera en logotyp/namn, nav, sökning och en sekundär navigering – eller vilken kombination som helst av det.

Dropdowns ingår

Som en del av huvudnavigeringen har vi inkluderat möjligheten för dig att lägga till rullgardinsmenyer i din nav. Kolla in den sekundära navigeringen ovan (högerjusterad) för att se hur det går till.

Tabletter och piller

Skapa enkel sekundär navigering med en ul. Byt mellan tabletter eller tabletter genom att lägga till lämplig klass.

Perfekt för underavsnitt av innehåll som våra kontoinställningar och användartidslinjer för att växla mellan sidor med liknande innehåll. Finns i flik- eller tablettformat.

• Hem
• Profil
• Meddelanden
• inställningar
• Kontakt

<ul class="tabs"> class = "flikar" >
  <li class = "active" ><a href = "" > Hem </a></li>  
  <li><a href = "" > Profil </a></li> 
  <li><a href = "" > Meddelanden </a></li> 
  <li><a href = "" > Inställningar </a></li> 
  <li><a href = "" > Kontakt </a></li> 
</ul>

• Hem
• Profil
• Meddelanden
• inställningar
• Kontakt

<ul class="pills"> klass = "piller" >
  <li class = "active" ><a href = "" > Hem </a></li>  
  <li><a href = "" > Profil </a></li> 
  <li><a href = "" > Meddelanden </a></li> 
  <li><a href = "" > Inställningar </a></li> 
  <li><a href = "" > Kontakt </a></li> 
</ul>

Paginering

Ultra förenklad och minimalistisk paginering inspirerad av Rdio. Det stora blocket är svårt att missa, lätt skalbart och ger stora klickytor.

<div class="pagination"> class = "paginering" >
  <ul>
    <li class = "prev disabled" ><a href = "" > ← Föregående </a></li>  
    <li class = "active" ><a href = ""> 1 </a></li >  
    <li><a href = ""> 2 </a> </li> 
    <li><a href = ""> 3 </a> </li> 
    <li><a href = ""> 4 </a> </li> 
    <li><a href = ""> 5 </a> </li> 
    <li class = "nästa" ><a href = "" > Nästa → </a></li>  
  </ul>
</div>

Grundläggande varningar

Meddelanden på en rad för att markera ett misslyckande, eventuellt misslyckande eller framgång för en åtgärd. Särskilt användbart för formulär.

Blockera meddelanden

För meddelanden som kräver lite förklaring har vi styckestilsvarningar. Dessa är perfekta för att bubbla upp längre felmeddelanden, varna en användare om en väntande åtgärd eller bara presentera information för att betona sidan.

Modals

Modaler – dialoger eller ljusboxar – är utmärkta för kontextuella åtgärder i situationer där det är viktigt att bakgrundskontexten bibehålls.

Popovers

Använd popovers för att tillhandahålla subtextuell information till en sida utan att påverka layouten.

Bootstrap byggdes med Preboot , ett paket med öppen källkod med mixins och variabler som ska användas tillsammans med Less , en CSS-förprocessor för snabbare och enklare webbutveckling.

Kolla in hur vi använde Preboot i Bootstrap och hur du kan använda det om du väljer att köra Less på ditt nästa projekt.

Hur man använder det

Använd det här alternativet för att fullt ut använda Bootstraps Less-variabler, mixins och kapsling i CSS via javascript i din webbläsare.

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "alla" />    
<script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>  

Känner du inte .js-lösningen? Prova Less Mac-appen eller använd Node.js för att kompilera när du distribuerar din kod.

Vad ingår

Här är några av höjdpunkterna i vad som ingår i Twitter Bootstrap som en del av Bootstrap. Gå över till Bootstrap-webbplatsen eller Github-projektsidan för att ladda ner och lära dig mer.

Färgvariabler

Variables in Less är perfekta för att underhålla och uppdatera din CSS utan huvudvärk. När du vill ändra ett färgvärde eller ett ofta använt värde, uppdatera det på ett ställe och du är klar.

// Länkar
@linkColor : #8b59c2;         
@linkColorHover :     mörkare ( @linkColor , 10 ); 
// Gråa
@svart : #000;             
@grayDark : ljusare (           @black , 25 %); 
@grå : ljusare (               @svart , 50 %); 
@grayLight : ljusare (          @black , 70 %); 
@grayLighter : ljusare (        @black , 90 %); 
@vit : #fff;             
// Accentfärger
@blå : #08b5fb;              
@grön : #46a546;             
@röd : #9d261d;               
@gul : #ffc40d;            
@orange : #f89406;            
@rosa : #c3325f;              
@lila : #7a43b6;            
// Baslinje
@baslinje : 20px ;          

Kommenterar

Mindre ger också en annan typ av kommentarer utöver CSS:s normala /* ... */syntax.

// Detta är en kommentar
/* Detta är också en kommentar */

Blandar ihop wazoo

Mixins är i grunden inkluderade eller partier för CSS, vilket gör att du kan kombinera ett kodblock till ett. De är perfekta för egenskaper med leverantörsprefix som box-shadow, övertoningar över webbläsare, teckensnittsstaplar och mer. Nedan är ett exempel på mixinerna som ingår i Bootstrap.

Teckensnittsstaplar

#font {
  . stenografi ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    teckensnittsstorlek : @storlek ; _ _ 
    teckensnitt - vikt : @vikt ; 
    line - höjd : @ lineHeight ; 
  }
  . sans - serif ( @vikt : normal , @storlek : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    teckensnittsstorlek : @storlek ; _ _ 
    teckensnitt - vikt : @vikt ; 
    line - höjd : @ lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    teckensnittsstorlek : @storlek ; _ _ 
    teckensnitt - vikt : @vikt ; 
    line - höjd : @ lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
    teckensnittsstorlek : @storlek ; _ _ 
    teckensnitt - vikt : @vikt ; 
    line - höjd : @ lineHeight ; 
  }
}

Gradienter

#gradient {
  . horisontell ( @startColor : #555, @endColor: #333) { 
    bakgrundsfärg : @endColor ; _ _ 
    bakgrund - upprepa : upprepa - x ;
    bakgrund - bild : - khtml - gradient ( linjär , vänster topp , höger topp , från ( @startColor ), till ( @endColor )); // Konqueror   
    bakgrund - bild : - moz - linjär - gradient ( vänster , @startColor , @endColor ); // FF 3.6+    
    bakgrund - bild : - ms - linjär - gradient ( vänster , @startColor , @endColor ); // IE10    
    bakgrund - bild : - webkit - gradient ( linjär , vänster topp , höger topp , färg - stopp ( 0 %, @startColor ), färg - stopp ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    bakgrund - bild : - webkit - linjär - gradient ( vänster , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    bakgrund - bild : - o - linjär - gradient ( vänster , @startColor , @endColor ); // Opera 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    bakgrund - bild : linjär - gradient ( vänster , @startColor , @endColor ); // Le standard   
  }
  . vertikal ( @startColor : #555, @endColor: #333) { 
    bakgrundsfärg : @endColor ; _ _ 
    bakgrund - upprepa : upprepa - x ;
    bakgrund - bild : - khtml - gradient ( linjär , vänster upptill , vänster nere , från ( @startColor ), till ( @endColor )); // Konqueror   
    bakgrund - bild : - moz - linjär - gradient ( @startColor , @endColor ); // FF 3.6+   
    bakgrund - bild : - ms - linjär - gradient ( @startColor , @endColor ); // IE10   
    bakgrund - bild : - webkit - gradient ( linjär , vänster topp , vänster nere , färg - stopp ( 0 %, @startColor ), färg - stopp ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    bakgrund - bild : - webkit - linjär - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    bakgrund - bild : - o - linjär - gradient ( @startColor , @endColor ); // Opera 11.10   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    bakgrund - bild : linjär - gradient ( @startColor , @endColor ); // Standarden  
  }
  . directional ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vertikal - tre - färger ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Drift och nätsystem

Bli fancy och utför lite matematik för att generera flexibla och kraftfulla mixins som den nedan.

// Grititude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Rutsystem
. container {
  bredd : @siteWidth ; 
  marginal : 0 auto ;  
  . clearfix ();
}
. kolumner ( @columnSpan : 1 ) {  
  display : inline ; 
  flyta : vänster ;
  width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  marginal - vänster : @gridGutterWidth ; 
  &: första - barn {
    marginal - vänster : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! viktigt ;          
}