Typografisk skala

Hele det typografiske gitter er baseret på to Less-variabler i vores variables.less-fil: @baseFontSizeog @baseLineHeight. Den første er basisskriftstørrelsen, der bruges hele vejen igennem, og den anden er basislinjehøjden.

Vi bruger disse variable og noget matematik til at skabe marginer, fyldninger og linjehøjder af alle vores typer og mere.

Eksempel brødtekst

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.

Brug af vægt

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

Bemærk: Brug gerne <b>og <i>i HTML5, men deres brug har ændret sig en smule. <b>er beregnet til at fremhæve ord eller sætninger uden at formidle yderligere betydning, mens <i>det mest er til stemme, tekniske termer osv.

Eksempel adresser

Her er to eksempler på, hvordan <address>tagget kan bruges:

Eksempel på forkortelser

Forkortelser er stylet med store bogstaver og en let prikket bundkant. De har også en hjælpemarkør på hover, så brugerne har ekstra indikation, at noget vil blive vist ved svæv.

HTML er det bedste siden skiveskåret brød.

En forkortelse af ordet attribut er attr .

For at inkludere et blokcitat skal du ombryde <blockquote>enhver HTML som citatet. For lige citater anbefaler vi en <p>.

Inkluder et valgfrit <small>element for at citere din kilde, og du vil få en streg —før det til stylingformål.

<blokcitat>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante venenatis. </p>
  <small> En berømt </small>
</blockquote>

Standard blokcitater er stylet som sådan:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante venenatis.

En berømt i Body of work

For at flyde dit blokcitat til højre skal du tilføje class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante venenatis.

En berømt i Body of work

Uordnet

<ul>

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

Ustylet

<ul class="unstyled">

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

Bestilt

<ol>

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

Beskrivelse

<dl>

Beskrivelseslister

En beskrivelsesliste er perfekt til at definere termer.

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.

Inline

Ombryd inline kodestykker med <code>.

For eksempel skal <code> sektion </ code > pakkes ind som inline .  

Grundblok

Bruges <pre>til flere linjer kode. Sørg for at omdanne alle indtegninger til deres unicode-tegn for korrekt gengivelse.

<p>Eksempeltekst her...</p>

<pre>
  <p>Eksempeltekst her...</p>
</pre>

Bemærk: Sørg for at holde koden i <pre>tags så tæt på venstre som muligt; det vil gengive alle faner.

Google Prettify

Tag det samme <pre>element og tilføj to valgfrie klasser til forbedret gengivelse.

<p> Eksempel på tekst her... </p>

<pre class = "pænt print 
     linenums" >
  <p>Eksempeltekst her...</p>
</pre>

Download google-code-prettify og se readme for, hvordan du bruger.

<tabel>
  <hoved>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

Tabeller er automatisk stylet med kun få kanter for at sikre læsbarhed og opretholde struktur. Med 2.0 er .tableklassen påkrævet.

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

Bliv lidt fancy med dine borde ved at tilføje zebrastriber – bare tilføj .table-stripedklassen.

Bemærk: Spritede tabeller bruger :nth-childCSS-vælgeren og er ikke tilgængelig i IE7-IE8.

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

Tilføj kanter rundt om hele bordet og afrundede hjørner til æstetiske formål.

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

Gør dine borde mere kompakte ved at tilføje .table-condensedklassen for at halvere bordcellepolstring (fra 8px til 4px).

<tabel klasse = "tabel tabel-kondenseret" > 
  …
</table>

Du er velkommen til at kombinere en af ​​bordklasserne for at opnå forskellige udseender ved at bruge en af ​​de tilgængelige klasser.

<table class = "tabel-tabel-stribet tabel-bordered tabel-kondenseret" > 
  ...
</table>

Fleksibel HTML og CSS

Det bedste ved formularer i Bootstrap er, at alle dine input og kontroller ser godt ud, uanset hvordan du opbygger dem i din markup. Der kræves ingen overflødig HTML, men vi leverer mønstrene til dem, der har brug for det.

Mere komplicerede layouts kommer med kortfattede og skalerbare klasser for nem styling og begivenhedsbinding, så du er dækket på hvert trin.

Fire layouts inkluderet

Bootstrap leveres med understøttelse af fire typer formularlayouts:

• Lodret (standard)
• Søg
• Inline
• Vandret

Forskellige typer formularlayout kræver nogle ændringer af opmærkning, men selve kontrolelementerne forbliver og opfører sig på samme måde.

Kontroltilstande og mere

Bootstraps formularer inkluderer stilarter til alle basisformularkontroller som input, tekstområde og valg, du ville forvente. Men det kommer også med en række brugerdefinerede komponenter som tilføjede og forudsatte input og understøttelse af lister over afkrydsningsfelter.

Tilstande som fejl, advarsel og succes er inkluderet for hver type formularkontrol. Der er også inkluderet stilarter til deaktiverede kontroller.

Med v2.0 har vi lettere og smartere standardindstillinger for formularstile. Ingen ekstra markup, kun formularkontroller.

Afspejler standard WebKit-stile, bare tilføj .form-searchfor ekstra afrundede søgefelter.

Indgangene er blokniveau for at starte. Til .form-inlineog .form-horizontalbruger vi inline-blok.

Hvad er inkluderet

Til venstre vises alle de standardformularkontroller, vi understøtter. Her er punktlisten:

• tekstinput (tekst, adgangskode, e-mail osv.)
• afkrydsningsfelt
• radio
• Vælg
• flere valg
• fil input
• tekstområde

Nye standarder med v2.0

Op til v1.4 brugte Bootstraps standardformularstile det vandrette layout. Med Bootstrap 2 fjernede vi denne begrænsning for at have smartere, mere skalerbare standardindstillinger for enhver form.

Redesignede browsertilstande

Bootstrap har stilarter til browser-understøttede fokuserede og disabledtilstande. Vi fjerner standard Webkit outlineog anvender en box-shadowi stedet for :focus.

Formularvalidering

Det inkluderer også valideringsstile for fejl, advarsler og succes. For at bruge skal du tilføje fejlklassen til den omgivende .control-group.

<feltsæt
  class = "kontrolgruppefejl" >
  …
</fieldset>

Forsæt og vedføj input

Inputgrupper – med tilføjet eller forudsat tekst – giver en nem måde at give mere kontekst til dine input. Gode ​​eksempler inkluderer @-tegnet for Twitter-brugernavne eller $ for økonomi.

Afkrydsningsfelter og radioer

Op til v1.4 krævede Bootstrap ekstra markup omkring afkrydsningsfelter og radioer for at stable dem. Nu er det et simpelt spørgsmål om at gentage den <label class="checkbox">, der omslutter <input type="checkbox">.

Inline afkrydsningsfelter og radioer understøttes også. Bare føj .inlinetil et .checkboxeller .radio, og du er færdig.

Indlejrede formularer og tilføj/tilføj

For at bruge forudsæt eller tilføje input i en indlejret form, skal du sørge for at placere .add-onog inputpå samme linje uden mellemrum.

Formular hjælpetekst

For at tilføje hjælpetekst til dine formularinput skal du inkludere indbygget hjælpetekst med <span class="help-inline">eller en hjælpetekstblok med <p class="help-block">efter inputelementet.

Knapper til handlinger

Som konvention bør knapper kun bruges til handlinger, mens hyperlinks skal bruges til objekter. For eksempel skal "Download" være en knap, mens "seneste aktivitet" skal være et link.

Til ankre og former

Knapstile kan anvendes på alt med det .btnanvendte. Du vil dog typisk kun anvende disse på <a>og <button>elementer.

Bemærk: Alle knapper skal inkludere .btnklassen. Knapstile skal anvendes på <button>og <a>elementer for at sikre ensartethed.

Flere størrelser

Kunne du tænke dig større eller mindre knapper? Hav på det!

Primær handling Handling

Primær handling Handling

Deaktiveret tilstand

For deaktiverede knapper, brug .btn-disabledtil links og :disabledtil <button>elementer.

Primær handling Handling

Primær handling Handling

Cross browser kompatibilitet

I IE9 dropper vi gradienten på alle knapper til fordel for afrundede hjørner, da IE9 ikke beskærer baggrundsgradienter til hjørnerne.

Relateret, IE9 jankifies deaktiverede buttonelementer, gør tekst grå med en grim tekst-skygge - desværre kan vi ikke rette dette.

Bygget som en sprite

I stedet for at gøre hvert ikon til en ekstra anmodning, har vi kompileret dem til en sprite - en masse billeder i én fil, der bruger CSS til at placere billederne med background-position. Dette er den samme metode, som vi bruger på Twitter.com, og det har fungeret godt for os.

All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

How to use

With v2.0.0, we have opted to use an <i> tag for all our icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

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

There are also styles available for inverted (white) icons, made ready with one extra class:

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

There are 120 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.

Use cases

Icons are great, but where would one use them? Here are a few ideas:

• As visuals for your sidebar navigation
• For a purely icon-driven navigation
• For buttons to help convey the meaning of an action
• With links to share context on a user's destination

I det væsentlige, hvor som helst du kan sætte et <i>tag, kan du sætte et ikon.

Opdater Checkout Slet

Kommentar Indstillinger Mere info