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.

Lead Kierper Kopie

Maacht e Paragraf erausstinn andeems Dir bäidréit .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

h1 vun. 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 titleAttribut fir erweidert Text

Benotzt .initialismKlass 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 citeAttribut fir Quell URL

Benotzt .pull-lefta .pull-rightKlassen 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 &mdash;virum Stylingzwecker.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <kleng> Een berühmten </kleng>
  4. </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>

  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.

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

  1. 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>
  1. <vir>
  2. <p>Probetext hei...</p>
  3. </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.

  1. <p> Beispilltext hei... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Probetext hei...</p>
  4. </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
  1. <tabell>
  2. <eng>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </ 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 tdall thElementer

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.

  1. <table class = "table" >
  2. </ 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.

  1. <table class = "Table table-striped" >
  2. </ 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.

  1. <table class = "table-bordered" >
  2. </ Dësch>
# Virnumm Familljennumm Benotzernumm
1 Mark Otto @mdo
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).

  1. <table class = "Table table-condensed" >
  2. </ 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.

  1. <table class = "Table-Table-gestreift Table-bordered table-condensed" >
  2. ...
  3. </ 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.

Beispill Block-Niveau Hëllef Text hei.

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

Sich Form

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

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

Inline Form

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

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "E-Mail" >
  3. <input type = "password" class = "input-small" placeholder = "Passwuert" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > Erënnert mech un
  6. </label>
  7. <button type = "submit" class = "btn" > Umellen </button>
  8. </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

Zousätzlech zum Freeform Text, erschéngt all HTML5 Text-baséiert Input esou.

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.

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> Legend Text </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > Textinput </label>
  6. <div class = "controls" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Ënnerstëtzend Hëllefstext </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </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.

  1. <fieldset
  2. class = "Kontrollgruppefehler" >
  3. </fieldset>
E puer Wäert hei
Eppes ass vläicht falsch gaang
Korrigéiert w.e.g. de Feeler
Woohoo!
Woohoo!

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.

Benotzt déiselwecht .span*Klassen aus dem Gittersystem fir Inputgré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).

@

Hei ass e puer Hëllefstext

.00
Hei ass méi Hëllefstext
$ .00

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

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.

Link
  1. <a class = "btn" href = ""> Link </a> _
  2. <button class = "btn" type = "submit" >
  3. Knäppchen
  4. </knapp>
  5. <input class = "btn" type = "button"
  6. value = "Input" >
  7. <input class = "btn" type = "submit"
  8. 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:

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

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

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

Et gi 140 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.