Oven i stilladset er grundlæggende HTML-elementer stylet og forbedret med udvidelige klasser for at give et friskt, ensartet udseende og følelse.
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.
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.
Få et afsnit til at skille sig ud ved at tilføje .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, er ikke commodo luctus.
| Element | Brug | Valgfri |
|---|---|---|
<strong> |
For at understrege et udsnit af tekst med vigtigt | Ingen |
<em> |
For at understrege et tekststykke med stress | Ingen |
<abbr> |
Ombryder forkortelser og akronymer for at vise den udvidede version ved svævning | Inkluder valgfri .initialismklasse til forkortelser med store bogstaver. |
<address> |
For kontaktoplysninger til sin nærmeste forfader eller hele arbejdet | Bevar formateringen ved at afslutte alle linjer med<br> |
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.
Her er to eksempler på, hvordan <address>tagget kan bruges:
Forkortelser med en titleattribut har en let stiplet bundkant og en hjælpemarkør ved svævning. Dette giver brugerne en ekstra indikation, at noget vil blive vist, når de svæver.
Tilføj initialismklassen til en forkortelse for at øge den typografiske harmoni ved at give den en lidt mindre tekststørrelse.
HTML er det bedste siden skiveskåret brød.
En forkortelse af ordet attribut er attr .
| Element | Brug | Valgfri |
|---|---|---|
<blockquote> |
Element på blokniveau til at citere indhold fra en anden kilde | Tilføj .pull-leftog .pull-rightklasser for flydende optioner |
<small> |
Valgfrit element til tilføjelse af et brugervendt citat, typisk en forfatter med titel på værket | Placer <cite>omkring titlen eller navnet på kilden |
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 får 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
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Heads up! Horisontale beskrivelseslister vil afkorte termer, der er for lange til at passe ind i den venstre kolonne rettelse text-overflow. I smallere visningsporte vil de skifte til standard stablet layout.
Ombryd inline kodestykker med <code>.
- For eksempel skal <code> sektion </ code > pakkes ind som inline .
Bruges <pre>til flere linjer kode. Sørg for at undslippe eventuelle vinkelparenteser i koden 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.
Du kan eventuelt tilføje .pre-scrollableklassen, som vil indstille en maks. højde på 350px og give en y-akse rullebjælke.
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.
| Tag | Beskrivelse |
|---|---|
<table> |
Indpakningselement til visning af data i tabelformat |
<thead> |
Containerelement til tabeloverskriftsrækker ( <tr>) for at mærke tabelkolonner |
<tbody> |
Containerelement til tabelrækker ( <tr>) i tabellens brødtekst |
<tr> |
Containerelement for et sæt tabelceller ( <td>eller <th>), der vises på en enkelt række |
<td> |
Standardtabelcelle |
<th> |
Speciel tabelcelle til kolonne (eller række, afhængigt af omfang og placering) etiketter Skal bruges inden for en <thead> |
<caption> |
Beskrivelse eller oversigt over, hvad tabellen indeholder, især nyttig for skærmlæsere |
- <tabel>
- <hoved>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| Navn | Klasse | Beskrivelse |
|---|---|---|
| Standard | Ingen | Ingen typografier, kun kolonner og rækker |
| Grundlæggende | .table |
Kun vandrette linjer mellem rækkerne |
| Afgrænset | .table-bordered |
Afrunder hjørner og tilføjer ydre kant |
| Zebra-stribe | .table-striped |
Tilføjer lysegrå baggrundsfarve til ulige rækker (1, 3, 5 osv.) |
| Kondenseret | .table-condensed |
Skærer lodret polstring i halve, fra 8px til 4px, inden for alle tdog thelementer |
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>
| # | Fornavn | Efternavn | Brugernavn |
|---|---|---|---|
| 1 | Mærke | Otto | @mdo |
| 2 | Jacob | Thornton | @fed |
| 3 | Larry | fuglen |
Bliv lidt fancy med dine borde ved at tilføje zebrastriber – bare tilføj .table-stripedklassen.
Bemærk: Stribede tabeller bruger :nth-childCSS-vælgeren og er ikke tilgængelige i IE7-IE8.
- <table class = "table table-striped" >
- …
- </table>
| # | Fornavn | Efternavn | Brugernavn |
|---|---|---|---|
| 1 | Mærke | Otto | @mdo |
| 2 | Jacob | Thornton | @fed |
| 3 | Larry | fuglen |
Tilføj kanter rundt om hele bordet og afrundede hjørner til æstetiske formål.
- <table class = "tabel-bordered" >
- …
- </table>
| # | Fornavn | Efternavn | Brugernavn |
|---|---|---|---|
| 1 | Mærke | Otto | @mdo |
| Mærke | Otto | @getbootstrap | |
| 2 | Jacob | Thornton | @fed |
| 3 | Fuglen Larry | ||
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>
| # | Fornavn | Efternavn | Brugernavn |
|---|---|---|---|
| 1 | Mærke | Otto | @mdo |
| 2 | Jacob | Thornton | @fed |
| 3 | Fuglen Larry | ||
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 = "table table-striped table-bordered table-condensed" >
- ...
- </table>
| Fulde navn | |||
|---|---|---|---|
| # | Fornavn | Efternavn | Brugernavn |
| 1 | Mærke | Otto | @mdo |
| 2 | Jacob | Thornton | @fed |
| 3 | Fuglen Larry | ||
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.
Bootstrap leveres med understøttelse af fire typer formularlayouts:
Forskellige typer formularlayout kræver nogle ændringer af opmærkning, men selve kontrolelementerne forbliver og opfører sig på samme måde.
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.
Bootstrap giver enkel opmærkning og stilarter til fire stilarter af almindelige webformularer.
| Navn | Klasse | Beskrivelse |
|---|---|---|
| Lodret (standard) | .form-vertical (ikke påkrævet) |
Stablede, venstrejusterede etiketter over kontroller |
| Inline | .form-inline |
Venstrejusteret etiket og inline-blok-kontroller for kompakt stil |
| Søg | .form-search |
Ekstra afrundet tekstinput for en typisk søgeæstetik |
| Vandret | .form-horizontal |
Flyd venstre, højrejusterede etiketter på samme linje som kontroller |
Smarte og lette standardindstillinger uden ekstra markering.
- <form class = "godt" >
- <label> Etiketnavn </label>
- <input type = "text" class = "span3" pladsholder = "Skriv noget..." >
- <span class = "help-block" > Eksempel på blokniveau hjælpetekst her. </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Tjek mig ud
- </label>
- <button type = "submit" class = "btn" > Send </button>
- </form>
Tilføj .form-searchtil formularen og .search-querytil input.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium søgeforespørgsel" >
- <button type = "submit" class = "btn" > Søg </button>
- </form>
Tilføj .form-inlinefor at finesse den lodrette justering og afstand mellem formularkontroller.
- <form class = "well form-inline" >
- <input type = "text" class = "input-small" pladsholder = "E-mail" >
- <input type = "password" class = "input-small" pladsholder = "Adgangskode" >
- <label class = "checkbox" >
- <input type = "checkbox" > Husk mig
- </label>
- <button type = "submit" class = "btn" > Log ind </button>
- </form>
Til højre vises alle de standardformularkontroller, vi understøtter. Her er punktlisten:
I betragtning af ovenstående eksempelformularlayout er her den markup, der er knyttet til den første input- og kontrolgruppe. Klasserne .control-group, .control-label, og .controlser alle nødvendige til styling.
- <form class = "form-horisontal" >
- <feltsæt>
- <legend> Forklaringstekst </legend>
- <div class = "kontrolgruppe" >
- <label class = "control-label" for = "input01" > Tekstinput </label>
- <div class = "kontroller" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Understøttende hjælpetekst </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap har stilarter til browser-understøttede fokuserede og disabledtilstande. Vi fjerner standard Webkit outlineog anvender en box-shadowi stedet for :focus.
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>
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.
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.
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.
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.
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.
Alle ikonklasser er præfikset med .icon-for korrekt navneafstand og omfang, ligesom vores andre komponenter. Dette vil hjælpe med at undgå konflikter med andre værktøjer.
Glyphicons har givet os brug af Halflings-sættet i vores open source-værktøjssæt, så længe vi giver et link og kredit her i dokumenterne. Overvej venligst at gøre det samme i dine projekter.
Bootstrap bruger et <i>tag for alle ikoner, men de har ingen kasusklasse - kun et delt præfiks. For at bruge skal du placere følgende kode stort set hvor som helst:
- <i class = "icon-search" ></i>
Der er også tilgængelige stilarter til omvendte (hvide) ikoner, klargjort med en ekstra klasse:
- <i class = "icon-search icon-white" ></i>
Der er 140 klasser at vælge imellem for dine ikoner. Du skal blot tilføje et <i>tag med de rigtige klasser, og du er klar. Du kan finde hele listen i sprites.less eller lige her i dette dokument.
Heads up! Når du bruger tekststrenge ved siden af, som i knapper eller nav-links, skal du sørge for at efterlade et mellemrum efter <i>tagget for korrekt mellemrum.
Ikoner er fantastiske, men hvor ville man bruge dem? Her er et par ideer:
I det væsentlige, hvor som helst du kan sætte et <i>mærke, kan du sætte et ikon.
Brug dem i knapper, knapgrupper til en værktøjslinje, navigation eller forudsat formularinput.