Basis CSS

Op der Spëtzt vum Steiger ginn Basis HTML Elementer styléiert a verbessert mat erweiterbare Klassen fir e frëschen, konsequente Look a Feel ze bidden.

Rubriken & Kierper Kopie

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.

h1. Rubrik 1

h2 vun. Rubrik 2

h3 vun. Rubrik 3

h4 vun. Rubrik 4

h5. Rubrik 5

h6. Rubrik 6

Schwéierpunkt, Adress, an Ofkierzung

Element	Benotzung	Fakultativ
`<strong>`	Fir ënnersträichen engem Stéck Text mat wichteg	Keen
`<em>`	Fir e Stéck Text mat Stress ze ënnersträichen	Keen
`<abbr>`	Wrapt Ofkierzungen an Akronyme fir déi erweidert Versioun um Hover ze weisen	Fa fakultativ `title`Attribut fir erweidert Text Benotzt `.initialism`Klass fir grouss Buschtawen Ofkierzungen.
`<address>`	Fir Kontaktinformatioune fir säin nooste Vorfahren oder de ganze Kierper vun der Aarbecht	Erhaalen d'Formatéierung andeems Dir all Zeilen ofschléisst mat`<br>`

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:

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

Voll Numm
[email protected]

Beispill Ofkierzungen

Ofkierzungen mat engem titleAttribut hunn eng liicht punktéiert ënnen Grenz an eng Hëllef Cursor op hover. Dëst gëtt de Benotzer extra Indikatioun datt eppes um Hover gewise gëtt.

Füügt d' initialismKlass un eng Ofkierzung fir d'typographesch Harmonie ze erhéijen andeems se e bësse méi kleng Textgréisst ginn.

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

Eng Ofkierzung vum Wuert Attribut ass attr .

Blockquotes

Element	Benotzung	Fakultativ
`<blockquote>`	Block-Niveau Element fir Inhalt vun enger anerer Quell ze zitéieren	Add `cite`Attribut fir Quell URL Benotzt `.pull-left`a `.pull-right`Klassen fir gefloss Optiounen
`<small>`	Optional Element fir e Benotzer-konfrontéiert Zitat ze addéieren, typesch en Auteur mam Titel vum Wierk	Place de `<cite>`ronderëm den Titel oder Numm vun der Quell

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>

Beispill Blockquotes

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

Lëschten

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>

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem bei massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
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.

Horizontal Beschreiwung

<dl class="dl-horizontal">

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.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Kapp erop! Horizontal Beschreiwungslëschte wäerte Begrëffer ofschneiden déi ze laang sinn fir an der lénkser Kolonnfix ze passen text-overflow. A schmueler Viewports wäerte se op de Standard Stacked Layout änneren.

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. Ginn sécher all Wénkel Klammeren am Code fir richteg Render- entkommen.

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

Dir kënnt optional d' .pre-scrollableKlass addéieren déi eng maximal Héicht vun 350px setzt an eng Y-Achs Scrollbar ubitt.

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.

Dësch Markup

Tag	Beschreiwung
`<table>`	Wrapping Element fir Daten an engem Tabularformat ze weisen
`<thead>`	Container Element fir Dësch Header Zeile ( `<tr>`) fir Tabellekolonnen ze markéieren
`<tbody>`	Container Element fir Dësch Zeile ( `<tr>`) am Kierper vun der Tabell
`<tr>`	Container Element fir eng Rei vun Dësch Zellen ( `<td>`oder `<th>`) datt op eng eenzeg Zeil schéngt
`<td>`	Standard Dësch Zell
`<th>`	Speziell Tabellzelle fir Kolonn (oder Zeil, jee no Ëmfang a Placement) Etiketten Muss bannent engem benotzt ginn`<thead>`
`<caption>`	Beschreiwung oder Resumé vun deem wat den Dësch hält, besonnesch nëtzlech fir Écran Lieser

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

Dësch Optiounen

Numm	Klass	Beschreiwung
Default	Keen	Keng Stiler, just Kolonnen a Reihen
Basis	`.table`	Nëmmen horizontal Linnen tëscht Zeile
Grenzen	`.table-bordered`	Ronn Ecker a füügt baussenzeg Grenz
Zebra-Sträif	`.table-striped`	Füügt hellgro Hannergrondfaarf op komesch Reihen (1, 3, 5, etc)
Kondenséiert	`.table-condensed`	Schneid vertikal Polsterung an der Halschent, vun 8px bis 4px, an `td`all `th`Elementer

Beispill Dëscher

1. Standard Dësch Stiler

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>

#	Virnumm	Familljennumm	Benotzernumm
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry	de Vugel	@twitter

2. gesträifte 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: Striped Dëscher benotzen den :nth-childCSS Selector an ass net an IE7-IE8 verfügbar.

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

#	Virnumm	Familljennumm	Benotzernumm
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry	de Vugel	@twitter

3. Grenz Dësch

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

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

#	Virnumm	Familljennumm	Benotzernumm
1	Mark	Otto	@mdo
1	Mark	Otto	@getbootstrap
2	Jakob	Thornton	@fett
3	Larry de Vugel		@twitter

4. Kondenséiert 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>

#	Virnumm	Familljennumm	Benotzernumm
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry de Vugel		@twitter

5. Kombinéiert se all!

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>

	Ganzen Numm
#	Virnumm	Familljennumm	Benotzernumm
1	Mark	Otto	@mdo
2	Jakob	Thornton	@fett
3	Larry de Vugel		@twitter

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.

Véier Zorte vu Formen

Bootstrap bitt einfach Markup a Stiler fir véier Stiler vun allgemenge Webformen.

Numm	Klass	Beschreiwung
Vertikal (Standard)	`.form-vertical` (net néideg)	Stacked, lénks ausgeriicht Etiketten iwwer Kontrollen
An der Schlaang	`.form-inline`	Lénks ausgeriicht Label an Inline-Block Kontrollen fir kompakt Stil
Sichen	`.form-search`	Extra ofgerënnt Textinput fir eng typesch Sichästhetik
Horizontal	`.form-horizontal`	Float lénks, riets ausgeriicht Etiketten op der selwechter Linn wéi Kontrollen

Beispill Forme mat just Form Kontrollen, keng extra Markup

Basis Form

Smart a liicht Default ouni extra Markup.

<form class = "well" > 
  <label> Label Numm </label>
  <input type = "text" class = "span3" placeholder = "Gitt eppes ..." >   
  <span class = "help-block" > Beispill Block-Niveau Hëllef Text hei. </span> 
  <label class = "checkbox" > 
    <input type = "checkbox" > Kuckt mech eraus 
  </label>
  <button type = "submit" class = "btn" > Ofschécken </button>  
</form>

Sich Form

Füügt .form-searchop de Formulaire an .search-queryop d' input.

<form class = "well Form-Search" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Sichen </button>  
</form>

Inline Form

Füügt .form-inlinefir d'Vertikal Ausrichtung an d'Distanz vu Formkontrollen ze Finesse.

<form class = "well form-inline" > 
  <input type = "text" class = "input-small" placeholder = "E-Mail" >   
  <input type = "password" class = "input-small" placeholder = "Passwuert" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > Erënnert mech un 
  </label>
  <button type = "submit" class = "btn" > Umellen </button>  
</form>

Horizontal Formen

Op der rietser 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

Beispill Markup

Gitt dem uewe genannte Beispillformlayout, hei ass d'Markup verbonne mat der éischter Input a Kontrollgrupp. D' .control-group, .control-label, a .controlsKlassen sinn all erfuerderlech fir Styling.

<form class = "form-horizontal" > 
  <fieldset>
    <legend> Legend Text </legend>
    <div class = "control-group" > 
      <label class = "control-label" for = "input01" > Textinput </label>  
      <div class = "controls" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Ënnerstëtzend Hëllefstext </p> 
      </div>
    </div>
  </fieldset>
</form>

Form Kontroll Staaten

Bootstrap Fonctiounen Stiler fir Browser-ënnerstëtzt konzentréiert a disabledStaaten. Mir läschen d'Default Webkit outlinean gëllen en box-shadowop senger 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>

Form Kontrollen verlängeren

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.

Form Gittergréissten

Benotzt déiselwecht .span*Klassen aus dem Gittersystem fir Inputgréissten.

Alternativ Gréissten

Dir kënnt och statesch Klassen benotzen, déi net op d'Gitter kartéieren, sech un déi reaktiounsfäeger CSS Stiler upassen oder verschidden Aarte vu Kontrollen berücksichtegen (zB inputvs. select).

Prependéierten Text

Hei ass e puer Hëllefstext

Ugefaangen Text

.00

Hei ass méi Hëllefstext

Befestegt a preparéieren

$ .00

Befestegt mat Knäppchen

Zwee-Knäppchen addéieren

Inline Checkboxen

1 2 3

Checkboxen

Optioun eent ass dëst an dat - gitt sécher mat abegraff firwat et super ass Optioun zwee kann och iwwerpréift an a Form Resultater abegraff ginn Optioun dräi kann - jo, Dir hutt et scho geroden - och iwwerpréift an a Formresultater abegraff

Notiz: Etiketten ëmginn all Optiounen fir vill méi grouss Klickflächen an eng méi benotzbar Form.

Radio Knäppercher

Optioun eent ass dëst an dat - gitt sécher mat abegraff firwat et super ass Optioun zwee kann ass eppes anescht a wielt et wäert Optioun eent deselect

Knäppchen	class=""	Beschreiwung
	`btn`	Standard groe Knäppchen mat Gradient
	`btn btn-primary`	Bitt extra visuell Gewiicht an identifizéiert déi primär Handlung an enger Rei vu Knäppercher
	`btn btn-info`	Benotzt als Alternativ zu de Standardstiler
	`btn btn-success`	Gëtt eng erfollegräich oder positiv Handlung un
	`btn btn-warning`	Bedeit datt virsiichteg mat dëser Aktioun geholl ginn soll
	`btn btn-danger`	Gëtt eng geféierlech oder potenziell negativ Handlung un
	`btn btn-inverse`	Alternativ donkelgro Knäppchen, net un enger semantescher Handlung oder Benotzung gebonnen

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.

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

Cross Browser Kompatibilitéit

IE9 cropt net Hannergrondgradienten op gerundeten Ecker, also hu mir se ewechgeholl. Zesummenhang, IE9 jankifies behënnert buttonElementer, Rendering Text gro mat engem béisen Text-Schatten datt mir net befestegt.

Multiple Gréissten

Loscht op méi grouss oder méi kleng Knäppercher? Add .btn-large, .btn-small, oder .btn-minifir zwou zousätzlech Gréissten.

Behënnert Staat

Fir behënnert Knäppercher, füügt d' .disabledKlass op Linken an d' disabledAttributer fir <button>Elementer.

Primärverbindung Link

Kapp erop! Mir benotzen .disabledals Utility Klass hei, ähnlech wéi déi gemeinsam .activeKlass, sou datt kee Präfix erfuerderlech ass.

Eng Klass, verschidde Tags

Benotzt d' .btnKlass op engem <a>, <button>, oder <input>Element.

<a class = "btn" href = ""> Link </a> _  
<button class = "btn" type = "submit" >  
  Knäppchen
</button>
<input class = "btn" type = "button"  
         value = "Input" >
<input class = "btn" type = "submit"  
         value = "Soumissioun" >

Als bescht Praxis, probéiert d'Element fir Äre Kontext ze passen fir passende Cross-Browser Rendering ze garantéieren. Wann Dir eng hutt input, benotzt e <input type="submit">fir Äre Knäppchen.

icon-glas
icon-Musek
icon-Sich
icon-Enveloppe
icon-Häerz
icon-Stär
icon-Stär-eidel
icon-Benotzer
icon-film
icon-th-grouss
icon-th
icon-th-Lëscht
icon-ok
icon-ewechhuelen
icon-zoom-an
icon-auszoomen
icon-off
icon-Signal
icon-Zännstaang
icon-Dreck
icon-doheem
icon-Datei
icon-Zäit
icon-Strooss
icon-download-alt
icon-download
icon-upload
icon-Inbox
icon-Spill-Krees
icon-widderhuelen
icon-erfrëschen
icon-list-alt
icon-Spär
icon-Fändel
Ikon-Kopfhörer

icon-Volume-Off
icon-Volumen-Down
icon-Volumen-up
icon-qrcode
icon-barcode
icon-tag
icon-tag
icon-Buch
Ikon-Lieszeechen
icon-druck
icon-Kamera
icon-Schrëft
icon-fett
icon-kursiv
icon-Text-Héicht
icon-Text-Breet
icon-align-lénks
icon-align-center
icon-align-right
icon-align-justifiéieren
Ikon Lëscht
icon-indent-lénks
icon-indent-riets
icon-facetime-video
icon-Bild
icon-Bläistëft
icon-map-marker
icon-ajustéieren
icon-tint
icon-edit
icon-deelen
icon-Check
icon-move
icon-Schrëtt-zeréck
icon-séier-zréck

icon-zeréck
icon-Spill
icon-paus
icon-stoppen
icon-Forward
icon-séier-Forward
icon-Schrëtt-Forward
icon-austauschen
icon-chevron-lénks
icon-chevron-riets
icon-plus-Zeechen
icon-minus-Zeechen
icon-ewechhuelen-Zeechen
icon-ok-Zeechen
icon-Fro-Zeechen
icon-info-sign
icon-Screenshot
icon-ewechhuelen-Krees
icon-ok-Krees
icon-verbuet-Krees
icon-Pfeil-lénks
icon-Pfeil-riets
icon-Pfeil-up
icon-Pfeil erof
icon-share-alt
icon-Gréisst änneren-voll
icon-Gréisst änneren-kleng
icon-plus
icon-minus
icon-Asterisk
icon-Ausrufezeeche
icon-cadeau
icon-blatt
icon-feier
icon-Aen-oppen

icon-Aen-zou
icon-warnung-schëld
icon-Fliger
icon-Kalenner
icon-zoufälleg
icon-kommentéieren
icon-Magnéit
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
icon-Dossier-zou
icon-Dossier-oppen
icon-Gréisst änneren-vertikal
icon-Gréisst änneren-horizontal
icon-hdd
icon-bullhorn
icon-bell
icon-Zertifikat
icon-Daumen-up
icon-daumen-down
icon-Hand-Recht
icon-Hand-lénks
icon-Hand-up
icon-Hand-down
icon-Krees-Pfeil-Recht
icon-Krees-Pfeil-lénks
icon-Krees-Pfeil-up
icon-Krees-Pfeil erof
icon-globe
icon-schlüssel
icon-Aufgaben
icon-filter
icon-koffer
Ikon-Vollbildschierm

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

Bootstrap benotzt en <i>Tag fir all Symboler, 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.

Kapp erop! Wann Dir nieft Strings vum Text benotzt, wéi a Knäppercher oder Navigatiounslinks, gitt sécher datt Dir e Raum hannert dem <i>Tag fir richteg Abstand hannerloosst.

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.

Beispiller

Benotzt se a Knäppercher, Knäpperchergruppen fir eng Toolbar, Navigatioun oder Prepended Form Input.

Erfrëschen Ofmellen Läschen

Kommentéieren Astellungen Méi Info

Typographie Rubriken, Abschnitter, Lëschten an aner Inline Typ Elementer