Tipografiese skaal

Die hele tipografiese rooster is gebaseer op twee Less veranderlikes in ons variables.less lêer: @baseFontSizeen @baseLineHeight. Die eerste is die basiese lettergrootte wat deurgaans gebruik word en die tweede is die basislynhoogte.

Ons gebruik daardie veranderlikes, en 'n mate van wiskunde, om die marges, opvullings en lynhoogtes van al ons tipe en meer te skep.

Voorbeeld liggaam teks

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.

Die gebruik van klem

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , uit fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, 'n pharetra augue.

Let wel: Gebruik gerus <b>en <i>in HTML5, maar hul gebruik het 'n bietjie verander. <b>is bedoel om woorde of frases uit te lig sonder om bykomende belangrikheid oor te dra, terwyl <i>dit meestal vir stem, tegniese terme, ens.

Voorbeeld adresse

Hier is twee voorbeelde van hoe die <address>merker gebruik kan word:

Voorbeeld afkortings

Afkortings word gestileer met hoofletterteks en 'n ligte stippellyn onderkant. Hulle het ook 'n hulpwyser op hover sodat gebruikers ekstra aanduiding het dat iets op hover gewys sal word.

HTML is die beste ding sedert gesnyde brood.

'n Afkorting van die woord eienskap is attr .

Om 'n blokaanhaling in te sluit, draai <blockquote>om enige HTML as die aanhaling. Vir reguit aanhalings beveel ons 'n aan <p>.

Sluit 'n opsionele <small>element in om jou bron aan te haal en jy sal 'n streep —voor dit kry vir stileringsdoeleindes.

<blokaanhaling>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n ante venenatis.</p>
  <small>Iemand beroemd</small>
</blockquote>

Verstek blokaanhalings word so gestileer:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere ert 'n ante venenatis.

Iemand bekend in Body of work

Om jou blokaanhaling na regs te laat dryf, voeg by class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere ert 'n ante venenatis.

Iemand bekend in Body of work

Ongeorden

<ul>

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

Ongestileer

<ul class="unstyled">

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

Bestel

<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Heelgetal molestie lorem by 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

Beskrywing

<dl>

Beskrywing lyste

'n Beskrywingslys is perfek om terme te definieer.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida by eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

In lyn

Wikkel inlyn-brokkies kode met <code>.

Byvoorbeeld, <code>afdeling</code> moet as inlyn toegedraai word.

Basiese blok

Gebruik <pre>vir veelvuldige reëls kode. Maak seker dat u enige karets in hul unicode-karakters verander vir behoorlike weergawe.

<p>Voorbeeldteks hier...</p>

<pre>
  <p>Voorbeeldteks hier...</p>
</pre>

Let wel: Maak seker dat jy kode binne <pre>etikette so na as moontlik aan die linkerkant hou; dit sal alle oortjies weergee.

Google Pretify

Neem dieselfde <pre>element en voeg twee opsionele klasse by vir verbeterde weergawe.

<p>Voorbeeldteks hier...</p>

<pre class="mooiafdruk
     linenums">
  <p>Voorbeeldteks hier...</p>
</pre>

Laai google-code-prettify af en kyk na die leesmy vir hoe om te gebruik.

<tabel>
  <kop>
    <tr>
      <de>…</th>
      <de>…</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>…</td>
      <td>…</td>
    </tr>
  </tbody>
</tabel>

Tabelle word outomaties gestileer met slegs 'n paar rande om leesbaarheid te verseker en struktuur te behou. Met 2.0 word die .tableklas vereis.

<table class="table">
  …
</tabel>

Raak 'n bietjie fyn met jou tafels deur sebrastrepe by te voeg—voeg net die .table-stripedklas by.

Let wel: Sprited-tabelle gebruik die :nth-childCSS-kieser en is nie beskikbaar in IE7-IE8 nie.

<table class="table table-striped">
  …
</tabel>

Voeg rande om die hele tafel en afgeronde hoeke by vir estetiese doeleindes.

<table class="table table-bordered">
  …
</tabel>

Maak jou tafels meer kompak deur die .table-condensedklas by te voeg om tafelselvulling in die helfte te sny (van 8px tot 4px).

<table class="table table-condensed">
  …
</tabel>

Kombineer gerus enige van die tafelklasse om verskillende voorkoms te verkry deur enige van die beskikbare klasse te gebruik.

<table class="table table-striped table-bordered table-condensed">
  ...
</tabel>

Buigsame HTML en CSS

Die beste deel van vorms in Bootstrap is dat al jou invoere en kontroles goed lyk, maak nie saak hoe jy dit in jou opmaak bou nie. Geen oortollige HTML word vereis nie, maar ons verskaf die patrone vir diegene wat dit benodig.

Meer ingewikkelde uitlegte kom met bondige en skaalbare klasse vir maklike stilering en gebeurtenisbinding, sodat jy by elke stap gedek is.

Vier uitlegte ingesluit

Bootstrap kom met ondersteuning vir vier tipes vormuitlegte:

• Vertikaal (verstek)
• Soek
• In lyn
• Horisontaal

Verskillende tipes vormuitlegte vereis 'n paar veranderinge aan opmaak, maar die kontroles self bly en tree dieselfde op.

Beheer state en meer

Bootstrap se vorms bevat style vir al die basisvormkontroles soos invoer, teksarea en seleksie wat jy sou verwag. Maar dit kom ook met 'n aantal pasgemaakte komponente soos aangehegte en voorafgesette invoere en ondersteuning vir lyste van merkblokkies.

State soos fout, waarskuwing en sukses is ingesluit vir elke tipe vormbeheer. Ook ingesluit is style vir gedeaktiveerde kontroles.

Met v2.0 het ons ligter en slimmer verstekke vir vormstyle. Geen ekstra opmaak nie, net vormkontroles.

Weerspieël standaard WebKit-style, voeg net by .form-searchvir ekstra afgeronde soekvelde.

Insette is blokvlak om te begin. Vir .form-inlineen .form-horizontalgebruik ons ​​inlynblok.

Wat ingesluit is

Aan die linkerkant is al die verstekvormkontroles wat ons ondersteun. Hier is die kolpuntlys:

• teksinvoer (teks, wagwoord, e-pos, ens.)
• merkblokkie
• radio
• kies
• meervoudige kies
• lêerinvoer
• teksarea

Nuwe verstekke met v2.0

Tot v1.4 het Bootstrap se verstekvormstyle die horisontale uitleg gebruik. Met Bootstrap 2 het ons daardie beperking verwyder om slimmer, meer skaalbare verstekke vir enige vorm te hê.

Herontwerpte blaaierstate

Bootstrap beskik oor style vir blaaier-ondersteunde gefokusde en disabledstate. Ons verwyder die verstek Webkit outlineen pas 'n box-shadowin sy plek toe vir :focus.

Vorm validering

Dit sluit ook valideringstyle vir foute, waarskuwings en sukses in. Om te gebruik, voeg die foutklas by die omliggende .control-group.

<veldstel
  class="kontrolegroepfout">
  …
</fieldset>

Voeg invoere voor en voeg dit by

Invoergroepe—met aangehegte of voorgeskrewe teks—verskaf 'n maklike manier om meer konteks vir jou insette te gee. Goeie voorbeelde sluit in die @-teken vir Twitter-gebruikersname of $ vir finansies.

Merkblokkies en radio's

Tot v1.4 het Bootstrap ekstra opmaak rondom merkblokkies en radio's vereis om dit op te stapel. Nou, dit is 'n eenvoudige kwessie van die herhaal <label class="checkbox">wat die omvou <input type="checkbox">.

Inlyn-merkblokkies en radio's word ook ondersteun. Voeg net .inlineby enige .checkboxof .radioen jy is klaar.

Inlynvorms en voeg by/vooraf

Om voor- of byvoeginsette in 'n inlynvorm te gebruik, maak seker dat jy die .add-onen inputop dieselfde lyn plaas, sonder spasies.

Vorm hulpteks

Om hulpteks vir jou vorminvoere by te voeg, sluit inlyn-hulpteks by <span class="help-inline">of 'n hulpteksblok <p class="help-block">na die invoerelement in.

Knoppies vir aksies

As 'n konvensie moet knoppies slegs vir aksies gebruik word terwyl hiperskakels vir voorwerpe gebruik moet word. Byvoorbeeld, "Laai af" moet 'n knoppie wees terwyl "onlangse aktiwiteit" 'n skakel moet wees.

Vir ankers en vorms

Knoppiestyle kan op enigiets met die .btntoegepaste toegepas word. <a>U sal dit egter tipies op slegs en <button>elemente wil toepas .

Let wel: Alle knoppies moet die .btnklas insluit. Knoppiestyle moet toegepas word op <button>en <a>elemente vir konsekwentheid.

Veelvuldige groottes

Lus vir groter of kleiner knoppies? Hou dit aan!

Primêre aksie Aksie

Primêre aksie Aksie

Gestremde toestand

Vir gedeaktiveerde knoppies, gebruik .btn-disabledvir skakels en :disabledvir <button>elemente.

Primêre aksie Aksie

Primêre aksie Aksie

Kruisblaaierversoenbaarheid

In IE9 laat ons die gradiënt op alle knoppies val ten gunste van geronde hoeke, aangesien IE9 nie agtergrondgradiënte na die hoeke sny nie.

Verwant, IE9 maak gedeaktiveerde buttonelemente weg en maak teks grys met 'n nare teksskadu - ons kan dit ongelukkig nie regmaak nie.

Gebou as 'n sprite

In plaas daarvan om elke ikoon 'n ekstra versoek te maak, het ons dit saamgestel in 'n sprite - 'n klomp beelde in een lêer wat CSS gebruik om die beelde met background-position. Dit is dieselfde metode wat ons op Twitter.com gebruik en dit het goed gewerk vir ons.

Alle ikoneklasse word voorafgegaan .icon-vir behoorlike naamspasiëring en omvang, net soos ons ander komponente. Dit sal help om konflikte met ander instrumente te vermy.

Glyphicons het ons die gebruik gegee van die Halflings-stel in ons oopbron-nutsmiddelstel solank ons ​​'n skakel en krediet hier in die dokumente verskaf. Oorweeg asseblief om dieselfde in jou projekte te doen.

Hoe om te gebruik

Met v2.0.0 het ons gekies om 'n <i>merker vir al ons ikone te gebruik, maar hulle het geen hoofletterklas nie - slegs 'n gedeelde voorvoegsel. Om te gebruik, plaas die volgende kode omtrent enige plek:

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

Daar is ook style beskikbaar vir omgekeerde (wit) ikone, gereed gemaak met een ekstra klas:

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

Daar is 120 klasse om van te kies vir jou ikone. Voeg net 'n <i>merker by met die regte klasse en jy is gereed. Jy kan die volledige lys in sprites.less of hier in hierdie dokument vind.

Gebruik gevalle

Ikone is wonderlik, maar waar sal 'n mens dit gebruik? Hier is 'n paar idees:

• As beeldmateriaal vir jou sybalknavigasie
• Vir 'n suiwer ikoongedrewe navigasie
• Vir knoppies om die betekenis van 'n aksie oor te dra
• Met skakels om konteks op 'n gebruiker se bestemming te deel

In wese, enige plek waar jy 'n <i>merker kan plaas, kan jy 'n ikoon plaas.

Verfris Uitteken Vee uit

Lewer kommentaar Instellings Meer inligting