Typografisk skala

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.

Exempel brödtext

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

Använda betoning

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.

Exempel adresser

Här är två exempel på hur <address>taggen kan användas:

Exempel på förkortningar

Förkortningar är utformade med versaler och en lätt prickig bottenkant. De har också en hjälpmarkör vid hovring så att användarna har extra indikation på att något kommer att visas vid hovring.

HTML är det bästa sedan skivat bröd.

En förkortning av ordet attribut är attr .

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

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

Beskrivning

<dl>

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.

I kö

Slå in inline kodavsnitt med <code>.

Till exempel bör <code> -sektionen </ code > vara inbäddad som inline .  

Grundblock

Använd <pre>för flera rader kod. Var noga med att omvandla alla karets till deras unicode-tecken 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.

Google Prettify

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.

<tabell>
  <huvud>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

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>

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

Obs: Spritade tabeller använder :nth-childCSS-väljaren och är inte tillgängliga i IE7-IE8.

<table class = "tabell tabell-randig" > 
  …
</table>

Lägg till kanter runt hela bordet och rundade hörn för estetiska ändamål.

<tabellklass = " tabellkantad" > 
  …
</table>

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>

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>

Flexibel HTML och CSS

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.

Fyra layouter ingår

Bootstrap kommer med stöd för fyra typer av formulärlayouter:

• Vertikal (standard)
• Sök
• I kö
• Horisontell

Olika typer av formulärlayouter kräver vissa ändringar av markeringen, men kontrollerna i sig förblir och fungerar på samma sätt.

Kontrolltillstånd och mer

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.

Med v2.0 har vi lättare och smartare standardinställningar för formulärstilar. Ingen extra markering, bara formulärkontroller.

Återspeglar standard WebKit-stilar, lägg bara till .form-searchför extra rundade sökfält.

Ingångarna är på blocknivå för att starta. För .form-inlineoch .form-horizontalanvänder vi inline-block.

Vad ingår

Till vänster visas alla standardformulärkontroller som vi stöder. Här är punktlistan:

• textinmatning (text, lösenord, e-post, etc)
• kryssruta
• radio
• Välj
• flerval
• filinmatning
• textområde

Nya standardinställningar med v2.0

Fram till v1.4 använde Bootstraps standardformulärstilar den horisontella layouten. Med Bootstrap 2 tog vi bort den begränsningen för att ha smartare, mer skalbara standardinställningar för alla former.

Omgjorda webbläsartillstånd

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.

Form validering

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>

Lägg till och lägg till ingångar

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.

Kryssrutor och radioapparater

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.

Infoga formulär och lägg till/lägg till

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.

Form hjälptext

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.

Knappar för åtgärder

Som en konvention bör knappar endast användas för åtgärder medan hyperlänkar ska användas för objekt. Till exempel bör "Ladda ner" vara en knapp medan "senaste aktiviteten" ska vara en länk.

För ankare och former

Knappstilar kan appliceras på vad som helst med den .btnapplicerade. Men vanligtvis vill du tillämpa dessa på endast <a>och <button>element.

Obs: Alla knappar måste inkludera .btnklassen. Knappstilar bör appliceras på <button>och <a>element för konsekvens.

Flera storlekar

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

Primär åtgärd Handling

Primär åtgärd Handling

Inaktiverat tillstånd

För inaktiverade knappar, använd .btn-disabledför länkar och :disabledför <button>element.

Primär åtgärd Handling

Primär åtgärd Handling

Korswebbläsarkompatibilitet

I IE9 släpper vi gradienten på alla knappar till förmån för rundade hörn eftersom IE9 inte beskär bakgrundsgradienter till hörnen.

Relaterat, IE9 stänger av inaktiverade buttonelement, vilket gör text grå med en otäck textskugga—tyvärr kan vi inte fixa detta.

Byggd som en sprite

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.

Hur man använder

Med v2.0.0 har vi valt att använda en <i>tagg för alla våra ikoner, men de har ingen kasusklass – 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 120 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.

Användningsfall

Ikoner är bra, men var skulle man använda dem? Här är några idéer:

• Som grafik för din sidofältsnavigering
• För en rent ikondriven navigering
• För knappar som hjälper till att förmedla innebörden av en åtgärd
• Med länkar för att dela sammanhang på en användares destination

I huvudsak, var som helst du kan sätta en <i>tagg, kan du sätta en ikon.

Uppdatera Kolla upp Radera

Kommentar inställningar Mer information