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.
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.
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.
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.
| 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 .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> |
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.
Hei sinn zwee Beispiller vu wéi de <address>Tag benotzt ka ginn:
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 .
| Element | Benotzung | Fakultativ |
|---|---|---|
<blockquote> |
Block-Niveau Element fir Inhalt vun enger anerer Quell ze zitéieren | Add .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 —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
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
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.
Wrap inline Snippets vum Code mat <code>.
- Zum Beispill , <code> Sektioun </ code > soll als inline gewéckelt ginn .
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.
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.
| 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>
| 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 |
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 |
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 |
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 |
| Mark | Otto | @getbootstrap | |
| 2 | Jakob | Thornton | @fett |
| 3 | Larry de Vugel | ||
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 | ||
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 | ||
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.
Bootstrap kënnt mat Ënnerstëtzung fir véier Aarte vu Form Layouten:
Verschidden Zorte vu Form Layouten erfuerderen e puer Ännerunge fir d'Markup, awer d'Kontrollen selwer bleiwen a behuelen d'selwecht.
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.
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 |
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>
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>
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>
Op der rietser Säit sinn all Standard Form Kontrollen déi mir ënnerstëtzen. Hei ass d'Bullet Lëscht:
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>
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.
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>
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.
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.
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.
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.
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.
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 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.
Symboler si super, awer wou géif een se benotzen? Hei sinn e puer Iddien:
Wesentlech, iwwerall wou Dir en <i>Tag kënnt setzen, kënnt Dir eng Ikon setzen.
Benotzt se a Knäppercher, Knäpperchergruppen fir eng Toolbar, Navigatioun oder Prepended Form Input.