På toppen av stillaset er grunnleggende HTML-elementer stylet og forbedret med utvidbare klasser for å gi et friskt, konsistent utseende og følelse.
Hele det typografiske rutenettet er basert på to Less-variabler i filen variables.less: @baseFontSizeog @baseLineHeight. Den første er grunnskriftstørrelsen som brukes hele veien, og den andre er grunnlinjehøyden.
Vi bruker disse variablene, og litt matematikk, for å lage marginer, utfyllinger og linjehøyder for alle våre typer og mer.
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.
| Element | Bruk | Valgfri |
|---|---|---|
<strong> |
For å fremheve en tekstbit med viktig | Ingen |
<em> |
For å understreke en tekstbit med stress | Ingen |
<abbr> |
Bryter inn forkortelser og akronymer for å vise den utvidede versjonen når du peker | Ta med valgfritt .initialismklasse for forkortelser med store bokstaver. |
<address> |
For kontaktinformasjon for sin nærmeste stamfar eller hele arbeidet | Bevar formateringen ved å avslutte alle linjer med<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, en pharetra augue.
Merk: Bruk gjerne <b>og <i>i HTML5, men bruken deres har endret seg litt. <b>er ment å fremheve ord eller setninger uten å formidle ekstra betydning, mens <i>det er mest for stemme, tekniske termer, etc.
Her er to eksempler på hvordan <address>taggen kan brukes:
Forkortelser med et titleattributt har en lys prikket bunnkant og en hjelpemarkør når du peker. Dette gir brukerne en ekstra indikasjon på at noe vil bli vist når de peker.
Legg initialismklassen til en forkortelse for å øke typografisk harmoni ved å gi den en litt mindre tekststørrelse.
HTML er det beste siden oppskåret brød.
En forkortelse av ordet attributt er attr .
| Element | Bruk | Valgfri |
|---|---|---|
<blockquote> |
Element på blokknivå for å sitere innhold fra en annen kilde | Legg .pull-leftog .pull-rightklasser for flytende alternativer |
<small> |
Valgfritt element for å legge til en brukervendt sitering, vanligvis en forfatter med tittel på arbeidet | Plasser <cite>rundt tittelen eller navnet på kilden |
For å inkludere et blokkanførselstegn, kan du pakke <blockquote>rundt hvilken som helst HTML som sitat. For rette sitater anbefaler vi en <p>.
Inkluder et valgfritt <small>element for å sitere kilden din, og du vil få en strek —foran den for stylingformål.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante venenatis. </p>
- <small> Noen kjent </small>
- </blockquote>
Standard blokksitater er stilt slik:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante venenatis.
Noen kjent i Body of work
For å flyte blokkanførselen til høyre, legg til class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante venenatis.
Noen kjent i Body of work
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Pakk inn innebygde kodebiter med <code>.
- For eksempel bør <code> -seksjonen </ code > pakkes inn som inline .
Bruk <pre>for flere linjer med kode. Pass på å unnslippe eventuelle vinkelparenteser i koden for riktig gjengivelse.
<p>Eksempeltekst her...</p>
- <pre>
- <p>Eksempeltekst her...</p>
- </pre>
Merk: Sørg for å holde koden i <pre>tagger så nær venstre som mulig; det vil gjengi alle faner.
Du kan eventuelt legge til .pre-scrollableklassen som vil sette en maks-høyde på 350px og gi en y-akse rullefelt.
Ta det samme <pre>elementet og legg til to valgfrie klasser for forbedret gjengivelse.
- <p> Eksempeltekst her... </p>
- <pre class = "prettyprint
- linenums" >
- <p>Eksempeltekst her...</p>
- </pre>
Last ned google-code-prettify og se readme for hvordan du bruker.
| stikkord | Beskrivelse |
|---|---|
<table> |
Innpakningselement for visning av data i tabellformat |
<thead> |
Beholderelement for tabelloverskriftsrader ( <tr>) for å merke tabellkolonner |
<tbody> |
Beholderelement for tabellrader ( <tr>) i brødteksten i tabellen |
<tr> |
Beholderelement for et sett med tabellceller ( <td>eller <th>) som vises på en enkelt rad |
<td> |
Standard tabellcelle |
<th> |
Spesiell tabellcelle for kolonne (eller rad, avhengig av omfang og plassering) etiketter Må brukes innenfor en <thead> |
<caption> |
Beskrivelse eller oppsummering av hva tabellen inneholder, spesielt nyttig for skjermlesere |
- <tabell>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| Navn | Klasse | Beskrivelse |
|---|---|---|
| Misligholde | Ingen | Ingen stiler, bare kolonner og rader |
| Grunnleggende | .table |
Kun horisontale linjer mellom radene |
| Avgrenset | .table-bordered |
Avrunder hjørner og legger til ytre kant |
| Sebra-stripe | .table-striped |
Legger til lys grå bakgrunnsfarge til odde rader (1, 3, 5, osv.) |
| Kondensert | .table-condensed |
Kutter vertikal polstring i to, fra 8px til 4px, innenfor alle tdog thelementer |
Tabeller stiles automatisk med bare noen få kanter for å sikre lesbarhet og opprettholde struktur. Med 2.0 er .tableklassen påkrevd.
- < tabellklasse = "tabell" >
- …
- </table>
| # | Fornavn | Etternavn | Brukernavn |
|---|---|---|---|
| 1 | merke | Otto | @mdo |
| 2 | Jacob | Thornton | @fett |
| 3 | Larry | fuglen |
Bli litt fancy med bordene dine ved å legge til sebrastriper – bare legg til .table-stripedklassen.
Merk: Stripede tabeller bruker :nth-childCSS-velgeren og er ikke tilgjengelig i IE7-IE8.
- < tabellklasse = "tabell-tabellstripet" >
- …
- </table>
| # | Fornavn | Etternavn | Brukernavn |
|---|---|---|---|
| 1 | merke | Otto | @mdo |
| 2 | Jacob | Thornton | @fett |
| 3 | Larry | fuglen |
Legg til kanter rundt hele bordet og avrundede hjørner for estetiske formål.
- < tabellklasse = "tabellkantet" >
- …
- </table>
| # | Fornavn | Etternavn | Brukernavn |
|---|---|---|---|
| 1 | merke | Otto | @mdo |
| merke | Otto | @getbootstrap | |
| 2 | Jacob | Thornton | @fett |
| 3 | Fuglen Larry | ||
Gjør bordene dine mer kompakte ved å legge til .table-condensedklassen for å kutte bordcellefylling i to (fra 8px til 4px).
- < tabellklasse = "tabelltabellkondensert" >
- …
- </table>
| # | Fornavn | Etternavn | Brukernavn |
|---|---|---|---|
| 1 | merke | Otto | @mdo |
| 2 | Jacob | Thornton | @fett |
| 3 | Fuglen Larry | ||
Kombiner gjerne hvilken som helst av bordklassene for å oppnå forskjellige utseender ved å bruke noen av de tilgjengelige klassene.
- < tabellklasse = "tabellstripete bordkantet bordkondensert" >
- ...
- </table>
| Fullt navn | |||
|---|---|---|---|
| # | Fornavn | Etternavn | Brukernavn |
| 1 | merke | Otto | @mdo |
| 2 | Jacob | Thornton | @fett |
| 3 | Fuglen Larry | ||
Det beste med skjemaer i Bootstrap er at alle inngangene og kontrollene dine ser bra ut uansett hvordan du bygger dem i markeringen. Ingen overflødig HTML er nødvendig, men vi leverer mønstrene for de som trenger det.
Mer kompliserte oppsett kommer med kortfattede og skalerbare klasser for enkel styling og eventbinding, slik at du er dekket på hvert trinn.
Bootstrap kommer med støtte for fire typer skjemaoppsett:
Ulike typer skjemaoppsett krever noen endringer i markeringen, men selve kontrollene forblir og oppfører seg på samme måte.
Bootstraps skjemaer inkluderer stiler for alle basisskjemakontrollene som input, tekstområde og valg du forventer. Men den kommer også med en rekke tilpassede komponenter som vedlagte og forhåndsdefinerte innganger og støtte for lister over avmerkingsbokser.
Tilstander som feil, advarsel og suksess er inkludert for hver type skjemakontroll. Også inkludert er stiler for deaktiverte kontroller.
Bootstrap gir enkel markering og stiler for fire stiler av vanlige nettskjemaer.
| Navn | Klasse | Beskrivelse |
|---|---|---|
| Vertikal (standard) | .form-vertical (ikke obligatorisk) |
Stablede, venstrejusterte etiketter over kontroller |
| På linje | .form-inline |
Venstrejusterte etikett- og inline-blokkkontroller for kompakt stil |
| Søk | .form-search |
Ekstra avrundet tekstinntasting for en typisk søkeestetikk |
| Horisontal | .form-horizontal |
Flyt venstre, høyrejusterte etiketter på samme linje som kontrollene |
Med v2.0 har vi lettere og smartere standardinnstillinger for skjemastiler. Ingen ekstra markering, bare skjemakontroller.
- <form class = "vel" >
- <label> Etikettnavn < /label>
- <input type = "text" class = "span3" plassholder = "Skriv noe..." >
- <span class = "help-inline" > Tilknyttet hjelpetekst! </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Sjekk meg ut
- </label>
- <button type = "submit" class = "btn" > Send inn </button>
- </form>
Reflekterer standard WebKit-stiler, bare legg .form-searchtil for ekstra avrundede søkefelt.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Søk </button>
- </form>
Inngangene er på blokknivå for å starte. For .form-inlineog .form-horizontalbruker vi inline-block.
- <form class = "well form-inline" >
- <input type = "text" class = "input-small" plassholder = "E-post" >
- <input type = "password" class = "input-small" plassholder = "Passord" >
- <label class = "checkbox" >
- <input type = "checkbox" > Husk meg
- </label>
- <button type = "submit" class = "btn" > Logg på </button>
- </form>
Gitt eksempelskjemaoppsettet ovenfor, her er markeringen knyttet til den første inndata- og kontrollgruppen. Klassene .control-group, .control-label, og .controlser alle nødvendige for styling.
- <form class = "form-horisontal" >
- <feltsett>
- <legend> Forklaringstekst </legend>
- <div class = "kontrollgruppe" >
- <label class = "control-label" for = "input01" > Tekstinndata </label>
- <div class = "kontroller" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Støttende hjelpetekst </p>
- </div>
- </div>
- </fieldset>
- </form>
Til venstre vises alle standard skjemakontroller vi støtter. Her er punktlisten:
Opp til v1.4 brukte Bootstraps standard skjemastiler den horisontale layouten. Med Bootstrap 2 fjernet vi den begrensningen for å ha smartere, mer skalerbare standardinnstillinger for alle former.
Bootstrap har stiler for nettleserstøttede fokuserte og disabledtilstander. Vi fjerner standard Webkit outlineog bruker en box-shadowi stedet for :focus.
Den inkluderer også valideringsstiler for feil, advarsler og suksess. For å bruke, legg til feilklassen til den omgivende .control-group.
- <feltsett
- class = "kontrollgruppefeil" >
- …
- </fieldset>
Inndatagrupper – med vedlagt eller foranstående tekst – gir en enkel måte å gi mer kontekst for inputene dine. Gode eksempler inkluderer @-tegnet for Twitter-brukernavn eller $ for økonomi.
Opp til v1.4 krevde Bootstrap ekstra markering rundt avmerkingsbokser og radioer for å stable dem. Nå er det en enkel sak å gjenta den <label class="checkbox">som omslutter <input type="checkbox">.
Innebygde avmerkingsbokser og radioer støttes også. Bare legg .inlinetil noen .checkboxeller .radioog du er ferdig.
For å bruke forhånds- eller tilføy-inndata i et innebygd skjema, pass på å plassere .add-onog inputpå samme linje, uten mellomrom.
For å legge til hjelpetekst for skjemainndataene dine, inkluderer du innebygd hjelpetekst med <span class="help-inline">eller en hjelpetekstblokk med <p class="help-block">etter inndataelementet.
I stedet for å gjøre hvert ikon til en ekstra forespørsel, har vi kompilert dem til en sprite – en haug med bilder i én fil som bruker CSS for å plassere bildene med background-position. Dette er den samme metoden vi bruker på Twitter.com og den har fungert bra for oss.
Alle ikonklasser er prefiks med .icon-for riktig navneavstand og omfang, omtrent som våre andre komponenter. Dette vil bidra til å unngå konflikter med andre verktøy.
Glyphicons har gitt oss bruk av Halflings-settet i vår åpen kildekode-verktøykasse så lenge vi gir en lenke og kreditt her i dokumentene. Vennligst vurder å gjøre det samme i prosjektene dine.
Bootstrap bruker en <i>kode for alle ikoner, men de har ingen kasusklasse – bare et delt prefiks. For å bruke, plasser følgende kode omtrent hvor som helst:
- <i class = "icon-search" ></i>
Det er også stiler tilgjengelig for inverterte (hvite) ikoner, gjort klare med én ekstra klasse:
- <i class = "icon-search icon-white" ></i>
Det er 120 klasser å velge mellom for ikonene dine. Bare legg til en <i>tag med de riktige klassene, så er du klar. Du finner hele listen i sprites.less eller rett her i dette dokumentet.
Vær oppmerksom! Når du bruker tekststrenger ved siden av, som i knapper eller nav-lenker, må du sørge for å legge igjen et mellomrom etter <i>taggen for riktig avstand.
Ikoner er flotte, men hvor kan man bruke dem? Her er noen ideer:
I hovedsak, hvor som helst du kan sette en <i>tag, kan du sette et ikon.
Bruk dem i knapper, knappegrupper for en verktøylinje, navigasjon eller forhåndsinnlagte skjemainndata.