Utöver byggnadsställningarna är grundläggande HTML-element utformade och förbättrade med utökningsbara klasser för att ge ett fräscht, konsekvent utseende och känsla.
Hela det typografiska rutnätet är baserat på två Less-variabler i vår variables.less-fil: @baseFontSizeoch @baseLineHeight. 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.
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.
Få ett stycke att sticka ut genom att lägga till .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
| Element | Användande | Frivillig |
|---|---|---|
<strong> |
För att framhäva ett textstycke med viktigt | Ingen |
<em> |
För att betona en textbit med stress | Ingen |
<abbr> |
Slår in förkortningar och akronymer för att visa den utökade versionen när du svävar | Inkludera valfritt .initialismklass för stora förkortningar. |
<address> |
För kontaktinformation för sin närmaste förfader eller hela arbetet | Bevara formateringen genom att avsluta alla rader med<br> |
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: Använd gärna <b>och <i>i HTML5, men deras användning har ändrats lite. <b>är tänkt att markera ord eller fraser utan att förmedla ytterligare betydelse medan <i>är mest för röst, tekniska termer, etc.
Här är två exempel på hur <address>taggen kan användas:
Förkortningar med ett titleattribut har en lätt prickad bottenkant och en hjälpmarkör vid hovring. Detta ger användarna en extra indikation på att något kommer att visas när de svävar.
Lägg till initialismklassen i en förkortning för att öka typografisk harmoni genom att ge den en något mindre textstorlek.
HTML är det bästa sedan skivat bröd.
En förkortning av ordet attribut är attr .
| Element | Användande | Frivillig |
|---|---|---|
<blockquote> |
Element på blocknivå för att citera innehåll från en annan källa | Lägg .pull-leftoch .pull-rightklasser för flytande alternativ |
<small> |
Valfritt element för att lägga till ett användarriktat citat, vanligtvis en författare med titeln på arbetet | Placera <cite>runt titeln eller namnet på källan |
Om du vill inkludera ett blockcitat, linda <blockquote>runt valfri HTML som citat. För raka citat rekommenderar vi en <p>.
Inkludera ett valfritt <small>element för att citera din källa så får du ett streck —före det för stylingändamål.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante venenatis. </p>
- <small> Någon känd </small>
- </blockquote>
Standardblockcitat är utformade som sådana:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante venenatis.
Någon känd i Body of work
För att flytta ditt blockcitat till höger, lägg till class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante venenatis.
Någon känd i Body of work
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Se upp! Horisontella beskrivningslistor kommer att trunkera termer som är för långa för att passa i den vänstra kolumnen fix text-overflow. I smalare vyportar kommer de att ändras till den staplade standardlayouten.
Slå in inline kodavsnitt med <code>.
- Till exempel bör <code> -sektionen </ code > vara inbäddad som inline .
Använd <pre>för flera rader kod. Se till att undvika alla vinkelparenteser i koden för korrekt rendering.
<p>Exempeltext här...</p>
- <pre>
- <p>Exempeltext här...</p>
- </pre>
Obs: Se till att hålla koden i <pre>taggarna så nära vänster som möjligt; det kommer att rendera alla flikar.
Du kan valfritt lägga till .pre-scrollableklassen som kommer att ställa in en maxhöjd på 350px och tillhandahålla en rullningslist på y-axeln.
Ta samma <pre>element och lägg till två valfria klasser för förbättrad rendering.
- <p> Exempeltext här... </p>
- <pre class = "prettyprint
- linenums" >
- <p>Exempeltext här...</p>
- </pre>
Ladda ner google-code-prettify och se readme för hur du använder.
| Märka | Beskrivning |
|---|---|
<table> |
Omslagselement för att visa data i tabellformat |
<thead> |
Behållarelement för tabellrubrikrader ( <tr>) för att märka tabellkolumner |
<tbody> |
Behållarelement för tabellrader ( <tr>) i tabellens brödtext |
<tr> |
Behållarelement för en uppsättning tabellceller ( <td>eller <th>) som visas på en enda rad |
<td> |
Standardtabellcell |
<th> |
Speciell tabellcell för kolumn (eller rad, beroende på omfattning och placering) etiketter Måste användas inom en <thead> |
<caption> |
Beskrivning eller sammanfattning av vad tabellen innehåller, särskilt användbar för skärmläsare |
- <tabell>
- <huvud>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| namn | Klass | Beskrivning |
|---|---|---|
| Standard | Ingen | Inga stilar, bara kolumner och rader |
| Grundläggande | .table |
Endast horisontella linjer mellan raderna |
| Kantad | .table-bordered |
Rundar hörn och lägger till yttre kant |
| Zebra-rand | .table-striped |
Lägger till ljusgrå bakgrundsfärg på udda rader (1, 3, 5, etc) |
| Komprimerad | .table-condensed |
Skär vertikal stoppning på mitten, från 8px till 4px, inom alla tdoch thelement |
Tabeller utformas automatiskt med endast ett fåtal kanter för att säkerställa läsbarhet och bibehålla struktur. Med 2.0 .tablekrävs klassen.
- <tabellklass = " tabell" >
- …
- </table>
| # | Förnamn | Efternamn | Användarnamn |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fett |
| 3 | Larry | fågeln |
Bli lite tjusig med dina bord genom att lägga till zebrastränder – lägg bara till .table-stripedklassen.
Obs: Randiga tabeller använder :nth-childCSS-väljaren och är inte tillgängliga i IE7-IE8.
- <table class = "tabell tabell-randig" >
- …
- </table>
| # | Förnamn | Efternamn | Användarnamn |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fett |
| 3 | Larry | fågeln |
Lägg till kanter runt hela bordet och rundade hörn för estetiska ändamål.
- <tabellklass = " tabellkantad" >
- …
- </table>
| # | Förnamn | Efternamn | Användarnamn |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @getbootstrap | |
| 2 | Jacob | Thornton | @fett |
| 3 | Fågeln Larry | ||
Gör dina bord mer kompakta genom att lägga till .table-condensedklassen för att halvera utfyllnad av tabellceller (från 8px till 4px).
- <tabellklass = " tabell tabellkondenserad" >
- …
- </table>
| # | Förnamn | Efternamn | Användarnamn |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fett |
| 3 | Fågeln Larry | ||
Kombinera gärna någon av bordsklasserna för att uppnå olika utseende genom att använda någon av de tillgängliga klasserna.
- <tabellklass = " tabell tabell-randig tabellkantad tabell-kondenserad" >
- ...
- </table>
| Fullständiga namn | |||
|---|---|---|---|
| # | Förnamn | Efternamn | Användarnamn |
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fett |
| 3 | Fågeln Larry | ||
Det bästa med formulär i Bootstrap är att alla dina ingångar och kontroller ser bra ut oavsett hur du bygger dem i din uppmärkning. Ingen överflödig HTML krävs, men vi tillhandahåller mönstren för de som behöver det.
Mer komplicerade layouter kommer med kortfattade och skalbara klasser för enkel styling och händelsebindning, så att du är täckt i varje steg.
Bootstrap kommer med stöd för fyra typer av formulärlayouter:
Olika typer av formulärlayouter kräver vissa ändringar av markeringen, men kontrollerna i sig förblir och fungerar på samma sätt.
Bootstraps formulär inkluderar stilar för alla basformulärkontroller som inmatning, textområde och val du kan förvänta dig. Men det kommer också med ett antal anpassade komponenter som bifogade och prependerade ingångar och stöd för listor med kryssrutor.
Tillstånd som fel, varning och framgång ingår för varje typ av formulärkontroll. Även stilar för inaktiverade kontroller ingår.
Bootstrap tillhandahåller enkel uppmärkning och stilar för fyra stilar av vanliga webbformulär.
| namn | Klass | Beskrivning |
|---|---|---|
| Vertikal (standard) | .form-vertical (krävs inte) |
Staplade, vänsterjusterade etiketter över kontroller |
| I kö | .form-inline |
Vänsterjusterad etikett och inline-blockkontroller för kompakt stil |
| Sök | .form-search |
Extra avrundad textinmatning för en typisk sökestetik |
| Horisontell | .form-horizontal |
Flytta vänster, högerjusterade etiketter på samma rad som kontrollerna |
Smarta och lätta standardinställningar utan extra uppmärkning.
- <form class = "tja" >
- <label> Etikettnamn </label>
- <input type = "text" class = "span3" platshållare = "Skriv något..." >
- <span class = "help-block" > Exempel på hjälptext på blocknivå här. </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Kolla in mig
- </label>
- <button type = "submit" class = "btn" > Skicka </button>
- </form>
Lägg .form-searchtill i formuläret och .search-queryi input.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Sök </button>
- </form>
Lägg .form-inlinetill den vertikala justeringen och avståndet mellan formulärkontroller för att finslipa.
- <form class = "well form-inline" >
- <input type = "text" class = "input-small" platshållare = "E-post" >
- <input type = "lösenord" class = "input-small" platshållare = "Lösenord" >
- <label class = "checkbox" >
- <input type = "checkbox" > Kom ihåg mig
- </label>
- <button type = "submit" class = "btn" > Logga in </button>
- </form>
Till höger visas alla standardformulärkontroller som vi stöder. Här är punktlistan:
Med tanke på ovanstående formulärlayout, här är uppmärkningen som är kopplad till den första inmatnings- och kontrollgruppen. Klasserna .control-group, .control-label, och .controlsär alla nödvändiga för styling.
- <form class = "form-horisontal" >
- <fieldset>
- <legend> Förklaringstext </legend>
- <div class = "kontrollgrupp" >
- <label class = "control-label" for = "input01" > Textinmatning </label>
- <div class = "kontroller" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Stödhjälptext </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap har stilar för webbläsarstödda fokuserade och disabledtillstånd. Vi tar bort standardwebbkit outlineoch använder en box-shadowi dess ställe för :focus.
Den innehåller också valideringsstilar för fel, varningar och framgång. För att använda, lägg till felklassen i den omgivande .control-group.
- <fältuppsättning
- class = "kontrollgruppsfel" >
- …
- </fieldset>
Inmatningsgrupper – med bifogad eller infogade text – ger ett enkelt sätt att ge mer sammanhang för dina inmatningar. Bra exempel inkluderar @-tecknet för Twitter-användarnamn eller $ för ekonomi.
Upp till v1.4 krävde Bootstrap extra markering runt kryssrutor och radioapparater för att stapla dem. Nu är det en enkel fråga att upprepa det <label class="checkbox">som omsluter <input type="checkbox">.
Inline-kryssrutor och radioapparater stöds också. Lägg bara .inlinetill något .checkboxeller .radioså är du klar.
Om du vill använda prepend eller lägg till indata i en inline-form, se till att placera .add-onoch inputpå samma rad, utan mellanslag.
För att lägga till hjälptext för dina formulärinmatningar, inkludera inline hjälptext med <span class="help-inline">eller ett hjälptextblock med <p class="help-block">efter inmatningselementet.
Istället för att göra varje ikon till en extra förfrågan har vi sammanställt dem till en sprite – ett gäng bilder i en fil som använder CSS för att placera bilderna med background-position. Detta är samma metod som vi använder på Twitter.com och det har fungerat bra för oss.
Alla ikonklasser har prefix .icon-för korrekt namnavstånd och omfattning, ungefär som våra andra komponenter. Detta kommer att hjälpa till att undvika konflikter med andra verktyg.
Glyphicons har gett oss användning av Halflings-uppsättningen i vår open source-verktygslåda så länge vi tillhandahåller en länk och kredit här i dokumenten. Vänligen överväg att göra samma sak i dina projekt.
Bootstrap använder en <i>tagg för alla ikoner, men de har ingen fallklass – bara ett delat prefix. För att använda, placera följande kod nästan var som helst:
- <i class = "ikonsökning" ></i>
Det finns även stilar tillgängliga för inverterade (vita) ikoner, färdiga med en extra klass:
- <i class = "icon-search icon-white" ></i>
Det finns 140 klasser att välja mellan för dina ikoner. Lägg bara till en <i>tagg med rätt klasser och du är klar. Du hittar hela listan i sprites.less eller här i det här dokumentet.
Se upp! När du använder bredvid textsträngar, som i knappar eller navigeringslänkar, se till att lämna ett mellanslag efter <i>taggen för korrekt avstånd.
Ikoner är bra, men var skulle man använda dem? Här är några idéer:
I huvudsak, var som helst du kan sätta en <i>tagg, kan du sätta en ikon.
Använd dem i knappar, knappgrupper för ett verktygsfält, navigering eller förhandsinmatningar.