Typographesch Skala

De ganze typographesche Gitter baséiert op zwou Less Variablen an eiser Variables.less Datei: @baseFontSizean @baseLineHeight. Déi éischt ass d'Basis Schrëftgréisst déi uechter benotzt gëtt an déi zweet ass d'Basislinn Héicht.

Mir benotzen dës Variabelen, an e puer Mathematik, fir d'Margen, Paddingen a Linnenhéichten vun all eisen Typen a méi ze kreéieren.

Beispill Kierper Text

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.

Benotzt Akzent

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.

Notiz: Fillt Iech gratis an HTML5 ze benotzen <b>, <i>awer hir Notzung huet e bësse geännert. <b>ass geduecht fir Wierder oder Ausdréck ze markéieren ouni zousätzlech Wichtegkeet ze vermëttelen wärend <i>et meeschtens fir Stëmm, technesch Begrëffer, asw.

Beispill Adressen

Hei sinn zwee Beispiller vu wéi de <address>Tag benotzt ka ginn:

Beispill Ofkierzungen

Ofkierzungen si mat grousser Buschtawen an enger liicht gestippter ënnescht Grenz stiléiert. Si hunn och en Hëllefscursor beim Hover sou datt d'Benotzer extra Indikatioun hunn datt eppes um Hover gewise gëtt.

HTML ass déi bescht Saach zënter geschnidden Brout.

Eng Ofkierzung vum Wuert Attribut ass attr .

Fir e Blockquote ze enthalen, wéckelt <blockquote>all HTML als Zitat ëm. Fir direkt Zitater recommandéiere mir eng <p>.

Fügt en optionalen <small>Element mat fir Är Quell ze zitéieren an Dir kritt en Em Dash —virum Stylingzwecker.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  <kleng> Een berühmten </kleng>
</blockquote>

Standard Blockquotes ginn esou stylesch:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Een berühmten am Body of work

Fir Äert Blockquote no riets ze schwammen, füügt class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Een berühmten am Body of work

Onbestallt

<ul>

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

Unstyled

<ul class="unstyled">

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

Bestallt

<ol>

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

Beschreiwung

<dl>

Beschreiwung Lëschte

Eng Beschreiwungslëscht ass perfekt fir Begrëffer ze definéieren.

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.

An der Schlaang

Wrap inline Snippets vum Code mat <code>.

Zum Beispill , <code> Sektioun </ code > soll als inline gewéckelt ginn .  

Basis Block

Benotzt <pre>fir verschidde Zeilen vum Code. Vergewëssert Iech all Carets an hir Unicode Charaktere fir richteg Rendering ze maachen.

<p>Probetext hei...</p>

<vir>
  <p>Probetext hei...</p>
</pre>

Notiz: Gitt sécher datt de Code bannent <pre>Tags esou no lénks wéi méiglech ass; et gëtt all Tabs Render-.

Google Prettify

Huelt datselwecht <pre>Element a füügt zwee fakultativ Klassen fir verbessert Rendering.

<p> Beispilltext hei... </p>

<pre class = "prettyprint 
     linenums" >
  <p>Probetext hei...</p>
</pre>

Luet google-code-prettify erof a kuckt de Readme fir wéi Dir se benotzt.

<tabell>
  <eng>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</ Dësch>

Dëscher ginn automatesch mat nëmmen e puer Grenzen stylesch fir d'Liesbarkeet ze garantéieren an d'Struktur z'erhalen. Mat 2.0 ass d' .tableKlass néideg.

<table class = "table" > 
  …
</ Dësch>

Gitt e bësse flott mat Ären Dëscher andeems Dir Zebrastreifen bäidréit - füügt just d' .table-stripedKlass dobäi.

Notiz: Sprited Dëscher benotzen den :nth-childCSS Selector an ass net an IE7-IE8 verfügbar.

<table class = "Table table-striped" > 
  …
</ Dësch>

Füügt Grenzen ronderëm de ganzen Dësch a gerundeten Ecker fir ästheteschen Zwecker.

<table class = "table-bordered" > 
  …
</ Dësch>

Maacht Är Dëscher méi kompakt andeems Dir d' .table-condensedKlass bäidréit fir Dëschzellpolster an der Halschent ze schneiden (vu 8px op 4px).

<table class = "Table table-condensed" > 
  …
</ Dësch>

Fillt Iech gratis eng vun den Dëschklassen ze kombinéieren fir verschidde Looks z'erreechen andeems Dir eng vun de verfügbare Klassen benotzt.

<table class = "Table-Table-gestreift Table-bordered table-condensed" > 
  ...
</ Dësch>

Flexibel HTML an CSS

Dee beschten Deel iwwer Formen am Bootstrap ass datt all Är Inputen a Kontrollen super ausgesinn egal wéi Dir se an Ärem Markup baut. Keen iwwerflësseg HTML ass erfuerderlech, awer mir bidden d'Mustere fir déi, déi et brauchen.

Méi komplizéiert Layouten kommen mat succinct a skalierbare Klassen fir einfach Styling an Eventverbindung, sou datt Dir bei all Schrëtt ofgedeckt sidd.

Véier Layouten abegraff

Bootstrap kënnt mat Ënnerstëtzung fir véier Aarte vu Form Layouten:

• Vertikal (Standard)
• Sichen
• An der Schlaang
• Horizontal

Verschidden Zorte vu Form Layouten erfuerderen e puer Ännerunge fir d'Markup, awer d'Kontrollen selwer bleiwen a behuelen d'selwecht.

Kontroll Staaten a méi

Bootstrap Formen enthalen Stiler fir all Basis Form Kontrollen wéi Input, Textberäich, a wielt Dir Iech erwaart. Awer et kënnt och mat enger Zuel vu personaliséierte Komponenten wéi ugebonnen a virausgesate Inputen an Ënnerstëtzung fir Lëschte vu Checkboxen.

Staaten wéi Fehler, Warnung an Erfolleg si fir all Typ vu Form Kontroll abegraff. Och abegraff sinn Stiler fir behënnert Kontrollen.

Mat v2.0 hu mir méi hell a méi schlau Defaults fir Formstiler. Keng extra Markup, just Form Kontrollen.

Reflektéiert Standard WebKit Stiler, füügt just .form-searchfir extra ofgerënnt Sichfelder derbäi.

Input sinn Blockniveau fir unzefänken. Fir .form-inlinean .form-horizontal, Mir benotzen Inline-Block.

Wat ass mat abegraff

Gewise op der lénkser Säit sinn all Standard Form Kontrollen déi mir ënnerstëtzen. Hei ass d'Bullet Lëscht:

• Textinput (Text, Passwuert, E-Mail, etc)
• checkbox
• radio
• wielt
• multiple wielt
• Fichier Input
• Textberäich

Nei Defaults mat v2.0

Bis v1.4, Bootstrap's Standardformstiler hunn den horizontalen Layout benotzt. Mat Bootstrap 2 hu mir dës Beschränkung ewechgeholl fir méi schlau, méi skalierbar Defaults fir all Form ze hunn.

Neientworf Browser Staaten

Bootstrap Fonctiounen Stiler fir Browser-ënnerstëtzt konzentréiert a disabledStaaten. Mir läschen d'Default Webkit outlinean gëllen en box-shadowop der Plaz fir :focus.

Form Validatioun

Et enthält och Validatiounsstiler fir Feeler, Warnungen an Erfolleg. Fir ze benotzen, füügt d'Fehlerklass an d'Ëmgéigend .control-group.

<fieldset
  class = "Kontrollgruppefehler" >
  …
</fieldset>

Prepend & addéieren Inputen

Inputgruppen - mat angeschlossenen oder virgeschriwwenen Text - bidden en einfache Wee fir méi Kontext fir Är Input ze ginn. Grouss Beispiller enthalen de @ Zeechen fir Twitter Benotzernimm oder $ fir Finanzen.

Checkboxen a Radioen

Bis v1.4, Bootstrap erfuerdert extra Markup ronderëm Checkboxen a Radios fir se ze stackelen. Elo ass et eng einfach Saach fir d'Widderhuelung ze widderhuelen <label class="checkbox">déi den <input type="checkbox">.

Inline Checkboxen a Radios ginn och ënnerstëtzt. Füügt einfach .inlineun all .checkboxoder .radioan Dir sidd fäerdeg.

Inline Formen a bäidréit / prepend

Fir prepend oder append Inputen an enger Inline Form ze benotzen, gitt sécher datt Dir déi .add-onan inputop der selwechter Linn setzt, ouni Plazen.

Form Hëllef Text

Fir Hëllef Text fir Är Form Inputen derbäi, Inline Hëllef Text mat <span class="help-inline">oder engem Hëllef Text Block mat <p class="help-block">no der Input Element.

Knäppercher fir Aktiounen

Als Konventioun sollten Knäppercher nëmme fir Aktiounen benotzt ginn, während Hyperlinks fir Objete benotzt ginn. Zum Beispill, "Download" sollt e Knäppchen sinn, während "rezent Aktivitéit" e Link sollt sinn.

Fir Anker a Formen

Knäppestiler kënnen op alles mat der .btnugewandter applizéiert ginn. Wéi och ëmmer, normalerweis wëllt Dir dës nëmmen <a>op <button>Elementer applizéieren.

Notiz: All Knäpper mussen d' .btnKlass enthalen. Knäppercher Stiler sollen <button>an <a>Elementer fir Konsequenz applizéiert ginn.

Multiple Gréissten

Loscht op méi grouss oder méi kleng Knäppercher? Maacht et!

Primär Aktioun Aktioun

Primär Aktioun Aktioun

Behënnert Staat

Fir behënnert Knäppercher, benotzt .btn-disabledfir Linken a :disabledfir <button>Elementer.

Primär Aktioun Aktioun

Primär Aktioun Aktioun

Cross Browser Kompatibilitéit

Am IE9 fale mir de Gradient op all Knäppercher zugonschte vu gerundéierten Ecker, well IE9 keng Hannergrondgradienten an d'Ecken cropt.

Zesummenhang, IE9 jankifies behënnert buttonElementer, Render- Text grau mat engem béisen Text-Schatten - leider kënne mir dat net befestegt.

Gebaut als Sprite

Amplaz all Ikon eng extra Ufro ze maachen, hu mir se an e Sprite zesummegesat - eng Rëtsch Biller an enger Datei déi CSS benotzt fir d'Biller mat background-position. Dëst ass déiselwecht Method déi mir op Twitter.com benotzen an et huet gutt fir eis geschafft.

All Ikon Klassen si mat Präfix .icon-fir richteg Nummabstand an Ëmfang, sou wéi eis aner Komponenten. Dëst hëlleft Konflikter mat aneren Tools ze vermeiden.

Glyphicons huet eis d'Benotzung vun den Halflings an eisem Open-Source Toolkit zouginn soulaang mir e Link a Kreditt hei an den Dokumenter ubidden. Betruecht w.e.g. datselwecht an Äre Projeten ze maachen.

Wéi benotzen

Mat v2.0.0 hu mir entscheet en <i>Tag fir all eis Ikonen ze benotzen, awer si hu keng Fallklass - nëmmen e gemeinsame Präfix. Fir ze benotzen, plazéiert de folgende Code just iwwerall:

<i class = "icon-search" ></i> 

Et ginn och Stiler verfügbar fir ëmgedréint (wäiss) Symboler, prett mat enger extra Klass:

<i class = "icon-search icon-white" ></i> 

Et gi 120 Klassen fir Är Ikonen ze wielen. Füügt just en <i>Tag mat de richtege Klassen un an Dir sidd bereet. Dir fannt déi komplett Lëscht an sprites.less oder hei an dësem Dokument.

Benotzen Fäll

Symboler si super, awer wou géif een se benotzen? Hei sinn e puer Iddien:

• Als Visualiséierung fir Är Sidebar Navigatioun
• Fir eng reng icon-ugedriwwen Navigatioun
• Fir Knäppercher ze hëllefen d'Bedeitung vun enger Aktioun ze vermëttelen
• Mat Linken fir Kontext op der Destinatioun vun engem Benotzer ze deelen

Wesentlech, iwwerall wou Dir en <i>Tag kënnt setzen, kënnt Dir eng Ikon setzen.

Erfrëschen Ofmellen Läschen

Kommentéieren Astellungen Méi Info