Snabbstartsexempel

Behöver du några snabba mallar? Kolla in dessa grundläggande exempel som vi har satt ihop:

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 = "rad" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Häckande kolumner

Kapsla ditt innehåll om du måste genom att skapa en .rowi en befintlig kolumn.

Exempel på kapslade kolumner

<div class = "rad" > 
  <div class = "span12" > 
    Nivå 1 i kolumn
    <div class = "rad" > 
      <div class = "span6" > 
        Nivå 2
      </div>
      <div class = "span6" > 
        Nivå 2
      </div>
    </div>
  </div>
</div>

Rulla ditt eget rutnät

Inbyggda i Bootstrap är en handfull variabler för att anpassa standard 940px-rutnätssystemet. Med lite anpassning kan du ändra storleken på kolumner, deras rännor och behållaren de finns i.

Inne i rutnätet

Variablerna som behövs för att modifiera rutnätssystemet finns för närvarande alla i variables.less.

Nu ska du anpassa

Att ändra rutnätet innebär att ändra de tre @grid-*variablerna och kompilera om Less-filerna.

Bootstrap är utrustad för att hantera ett rutsystem med upp till 24 kolumner; standarden är bara 16. Så här skulle dina rutnätsvariabler se ut anpassade till ett rutnät med 24 kolumner.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

När du har kompilerat om är du klar!

Fast layout

Standard och enkla 940px bred, centrerad layout för nästan vilken webbplats eller sida som helst som tillhandahålls av en enda <div.container>.

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

Flytande layout

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

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

Rubriker & kopia

En standardtypografisk hierarki för att strukturera dina webbsidor.

Hela det typografiska rutnätet är baserat på två Less-variabler i vår variables.less-fil: @basefontoch @baseline. Den första är grundteckensnittsstorleken som används genomgående och den andra är baslinjens höjd.

Vi använder dessa variabler, och lite matematik, för att skapa marginaler, stoppningar och linjehöjder av alla våra typer och mer.

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...

Ö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 indikera ytterligare betydelse eller betoning av ett ord eller en fras i förhållande till dess omgivande kopia. Använd <strong>för betydelse och <em>för betoning av stress .

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.

Obs: Det är fortfarande okej att använda <b>och <i>taggar i HTML5 och de behöver inte vara fetstilade respektive kursiverade (även om det finns ett mer semantiskt element, använd det). <b>är avsedd att markera ord eller fraser utan att förmedla ytterligare betydelse, medan <i>är mest för röst, tekniska termer, etc.

Adresser

Elementet <address>används för kontaktinformation för sin närmaste förfader, eller hela arbetet. Här är två exempel på hur det kan användas:

Obs! Varje rad i en <address>måste sluta med en radbrytning ( <br />) eller vara inslagen i en tagg på blocknivå (t.ex. <p>) för att strukturera innehållet korrekt.

Förkortningar

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

Blockcitat

<blockquote> <p> <small>

Hur man citerar

För att inkludera ett blockcitat, linda <blockquote>runt <p>och <small>taggar. Använd <small>elementet för att citera din källa så får du ett em-streck —före det.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat a ante venenatis dapibus posuere velit aliquet.

Dr Julius Hibbert

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Dr. Julius Hibbert </small>
</blockquote>

Obeställd<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem vid massa
• Facilisis i pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat kl
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Ostylad<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem vid massa
• Facilisis i pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat kl
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Beställde<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem vid massa
4. Facilisis i pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

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.

Koda

<code> <pre>

Pimpa din kod med stil med två enkla taggar. För ännu mer häftigt genom JavaScript, släpp in Googles kodpretify-bibliotek och du är klar.

Presentera kod

Kod, block av eller bara utdrag inline, kan visas med stil bara genom att slå in rätt tagg. För kodblock som spänner över flera rader, använd <pre>elementet. För inline-kod, använd <code>elementet.

<div>
  <h1>Rubrik</h1>
  <p>Något här...</p>
</div>

<div> <h1> Rubrik </h1> <p> Något här... </p> </div>
  
  

Inline etiketter

<span class="label">

Uppmärksamma eller flagga någon fras i din brödtext.

Märk vad som helst

Någonsin behövt en av dessa snygga nya! eller Viktiga flaggor när du skriver kod? Nåväl, nu har du dem. Här är vad som ingår som standard:

Mediarutnät

Visa miniatyrer i olika storlekar på sidor med lågt HTML-fotavtryck och minimala stilar.

Exempel på miniatyrer

Miniatyrbilder i .media-gridkan ha vilken storlek som helst, men de fungerar bäst när de mappas direkt till det inbyggda Bootstrap-rutnätssystemet. Bildbredder som 90, 210 och 330 kombineras med några pixlar med utfyllnad för att vara lika med .span2, .span4, och .span6kolumnstorlekarna.

Stor

Medium

Små

Kodar dem

Mediarutnät är lätta att använda och ganska enkla på uppmärkningssidan. Deras dimensioner är enbart baserade på storleken på bilderna som ingår.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

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 <thead>så att hierarkin är <thead>> <tr>> <th>.

På samma sätt som kolumnrubrikerna bör allt innehåll i din tabell vara inlindat i en <tbody>så 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.

<tabell>
  ...
</table>

Exempel: Kondenserat bord

För tabeller som kräver mer data i trånga utrymmen, använd den kondenserade smaken som halverar stoppningen. Den kan också användas tillsammans med bårder och zebra-ränder, precis som standardtabellstilarna.

Exempel: Bordered bord

Få dina bord att se lite snyggare ut genom att runda deras hörn och lägga till kanter på alla sidor.

<tabellklass = " bordered-table" > 
  ...
</table>

Exempel: Zebrarandig

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

Obs: Zebra-striping är en progressiv förbättring som inte är tillgänglig för äldre webbläsare som IE8 och lägre.

<tabellklass = " zebrarandig" > 
  ...
</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.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( function () { 
    $ ( "tabell#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<tabellklass = " zebrarandig" > 
  ...
</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.

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.

Formulärfältstorlekar

Anpassa valfri form input, select, eller textareabredd genom att lägga till några få klasser i din uppmärkning.

Från och med v1.3.0 har vi lagt till de rutnätsbaserade storleksklasserna för formulärelement. Använd dessa över befintliga .mini, .small, etc klasser.

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 ett antal funktionsklasser kan användas för olika färgstilar. Dessa klasser inkluderar en blå .primaryklass, en ljusblå .infoklass, en grön .successklass och en röd .dangerklass.

Exempel knappar

Knappstilar kan appliceras på vad som helst med den .btnapplicerade. Vanligtvis vill du tillämpa dessa på endast <a>, <button>, och markerade <input>element. 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 <button>element.

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. Dropdown- litaggar stöder också .activeför att visa aktuellt sidval.

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.

Exempel på grundläggande flikar

Flikar kan användas som vanlig navigering (laddning av externa sidor på samma flik) eller som flikbara innehållsområden för att byta ut innehållsrutor. Vi har ett tabs-plugin som kan användas för att integrera det senare.

• Hem
• Profil
• Meddelanden
• inställningar
• Kontakt
• Falla ner
  • Sekundär länk
  • Något annat här
  • En annan länk

<ul 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>

Exempel på grundläggande piller

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

<ul class = "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>

Ströbröd

Brödsmulnavigering används som ett sätt att visa användare var de är i en app eller en webbplats, men inte för primär navigering.

• Hem

• Hem /
• Mellansida

• Hem /
• Mittsidan /
• En till

• Hem /
• Mittsidan /
• en till /
• Du är här

<ul class = "brödsmula" > 
  <li><a href = "#" > Hem </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Mellansida </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Ytterligare en </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Du är här </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 = "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

.alert-message

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.

Hämta javascriptet »

Exempelkod

<div class = "alert-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Heliga guacamole! </strong> Bäst kolla dig själv, du ser inte för bra ut. </p>
</div>

Blockera meddelanden

.alert-message.block-message

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.

Hämta javascriptet »

Exempelkod

<div class = "varning-meddelande block-meddelande varning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Heliga guacamole! Detta är en varning! </strong> Bäst kolla dig själv, du ser inte för bra ut. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > Gör den här åtgärden </a> <a class = "btn small" href = "#" > Eller gör så här </a>     
  </div>
</div>

Modals

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

Hämta javascriptet »

Verktygstips

Twipsies är super användbara för att hjälpa en förvirrad användare och peka dem i rätt riktning.

Hämta javascriptet »

Popovers

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

Hämta javascriptet »

Komma igång

Att integrera javascript med Bootstrap-biblioteket är superenkelt. Nedan går vi igenom grunderna och ger dig några fantastiska plugins för att komma igång!

Visa javascript-dokument »

Vad ingår

Väck några av Bootstraps primära komponenter till liv med nya anpassade plugins som fungerar med jQuery och Ender . Vi uppmuntrar dig att utöka och modifiera dem för att passa dina specifika utvecklingsbehov.

Är javascript nödvändigt?

Nej! Bootstrap är designat först och främst för att vara ett CSS-bibliotek. Detta javascript tillhandahåller ett grundläggande interaktivt lager ovanpå de inkluderade stilarna.

Men för dem som behöver javascript har vi tillhandahållit plugin-programmen ovan för att hjälpa dig förstå hur du integrerar Bootstrap med javascript och för att ge dig ett snabbt, lättviktigt alternativ för den grundläggande funktionaliteten direkt.

För mer information och för att se några livedemos, vänligen se vår plugin-dokumentationssida .