Bas CSS

Utöver byggnadsställningarna är grundläggande HTML-element utformade och förbättrade med utökningsbara klasser för att ge ett fräscht, konsekvent utseende och känsla.

Rubriker & brödtext

Typografisk skala

Hela det typografiska rutnätet är baserat på två Less-variabler i vår variables.less-fil: @baseFontSizeoch @baseLineHeight. Den första är grundteckensnittsstorleken som används genomgående och den andra är baslinjens höjd.

Vi använder dessa variabler, och lite matematik, för att skapa marginaler, stoppningar och linjehöjder av alla våra typer och mer.

Exempel brödtext

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.

Kopia av blykropp

Få ett stycke att sticka ut genom att lägga till .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

h1. Rubrik 1

h2. Rubrik 2

h3. Rubrik 3

h4. Rubrik 4

h5. Rubrik 5
h6. Rubrik 6

Betoning, adress och förkortning

Element Användande Frivillig
<strong> För att framhäva ett textstycke med viktigt Ingen
<em> För att betona en textbit med stress Ingen
<abbr> Slår in förkortningar och akronymer för att visa den utökade versionen när du svävar

Inkludera valfritt titleattribut för utökad text

Använd .initialismklass för stora förkortningar.
<address> För kontaktinformation för sin närmaste förfader eller hela arbetet Bevara formateringen genom att avsluta alla rader med<br>

Använda betoning

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.

Obs: Använd gärna <b>och <i>i HTML5, men deras användning har ändrats lite. <b>är tänkt att markera ord eller fraser utan att förmedla ytterligare betydelse medan <i>är mest för röst, tekniska termer, etc.

Exempel adresser

Här är två exempel på hur <address>taggen kan användas:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Fullständigt namn
[email protected]

Exempel förkortningar

Förkortningar med ett titleattribut har en lätt prickad bottenkant och en hjälpmarkör vid hovring. Detta ger användarna en extra indikation på att något kommer att visas när de svävar.

Lägg till initialismklassen i en förkortning för att öka typografisk harmoni genom att ge den en något mindre textstorlek.

HTML är det bästa sedan skivat bröd.

En förkortning av ordet attribut är attr .

Blockcitat

Element Användande Frivillig
<blockquote> Element på blocknivå för att citera innehåll från en annan källa

Lägg citetill attribut för källans URL

Använd .pull-leftoch .pull-rightklasser för flytande alternativ
<small> Valfritt element för att lägga till ett användarriktat citat, vanligtvis en författare med titeln på arbetet Placera <cite>runt titeln eller namnet på källan

Om du vill inkludera ett blockcitat, linda <blockquote>runt valfri HTML som citat. För raka citat rekommenderar vi en <p>.

Inkludera ett valfritt <small>element för att citera din källa så får du ett streck &mdash;före det för stylingändamål.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante venenatis. </p>
  3. <small> Någon känd </small>
  4. </blockquote>

Exempel blockcitat

Standardblockcitat är utformade som sådana:

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

Någon känd i Body of work

För att flytta ditt blockcitat till höger, lägg till class="pull-right":

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

Någon känd i Body of work

Listor

Obeställd

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem vid 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

Ostylad

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem vid 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

Beställde

<ol>

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

Beskrivning

<dl>

Beskrivningslistor
En beskrivningslista är perfekt för att definiera 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.

Horisontell beskrivning

<dl class="dl-horizontal">

Beskrivningslistor
En beskrivningslista är perfekt för att definiera 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.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Se upp! Horisontella beskrivningslistor kommer att trunkera termer som är för långa för att passa i den vänstra kolumnen fix text-overflow. I smalare vyportar kommer de att ändras till den staplade standardlayouten.

I kö

Slå in inline kodavsnitt med <code>.

  1. Till exempel bör <code> -sektionen </ code > vara inbäddad som inline .

Grundblock

Använd <pre>för flera rader kod. Se till att undvika alla vinkelparenteser i koden för korrekt rendering.

<p>Exempeltext här...</p>
  1. <pre>
  2. <p>Exempeltext här...</p>
  3. </pre>

Obs: Se till att hålla koden i <pre>taggarna så nära vänster som möjligt; det kommer att rendera alla flikar.

Du kan valfritt lägga till .pre-scrollableklassen som kommer att ställa in en maxhöjd på 350px och tillhandahålla en rullningslist på y-axeln.

Google Prettify

Ta samma <pre>element och lägg till två valfria klasser för förbättrad rendering.

  1. <p> Exempeltext här... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Exempeltext här...</p>
  4. </pre>

Ladda ner google-code-prettify och se readme för hur du använder.

Tabelluppmärkning

Märka Beskrivning
<table> Omslagselement för att visa data i tabellformat
<thead> Behållarelement för tabellrubrikrader ( <tr>) för att märka tabellkolumner
<tbody> Behållarelement för tabellrader ( <tr>) i tabellens brödtext
<tr> Behållarelement för en uppsättning tabellceller ( <td>eller <th>) som visas på en enda rad
<td> Standardtabellcell
<th> Speciell tabellcell för kolumn (eller rad, beroende på omfattning och placering) etiketter
Måste användas inom en<thead>
<caption> Beskrivning eller sammanfattning av vad tabellen innehåller, särskilt användbar för skärmläsare
  1. <tabell>
  2. <huvud>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

Tabellalternativ

namn Klass Beskrivning
Standard Ingen Inga stilar, bara kolumner och rader
Grundläggande .table Endast horisontella linjer mellan raderna
Kantad .table-bordered Rundar hörn och lägger till yttre kant
Zebra-rand .table-striped Lägger till ljusgrå bakgrundsfärg på udda rader (1, 3, 5, etc)
Komprimerad .table-condensed Skär vertikal stoppning på mitten, från 8px till 4px, inom alla tdoch thelement

Exempel tabeller

1. Standardtabellstilar

Tabeller utformas automatiskt med endast ett fåtal kanter för att säkerställa läsbarhet och bibehålla struktur. Med 2.0 .tablekrävs klassen.

  1. <tabellklass = " tabell" >
  2. </table>
# Förnamn Efternamn Användarnamn
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Larry fågeln @Twitter

2. Randigt bord

Bli lite tjusig med dina bord genom att lägga till zebrastränder – lägg bara till .table-stripedklassen.

Obs: Randiga tabeller använder :nth-childCSS-väljaren och är inte tillgängliga i IE7-IE8.

  1. <table class = "tabell tabell-randig" >
  2. </table>
# Förnamn Efternamn Användarnamn
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Larry fågeln @Twitter

3. Kantat bord

Lägg till kanter runt hela bordet och rundade hörn för estetiska ändamål.

  1. <tabellklass = " tabellkantad" >
  2. </table>
# Förnamn Efternamn Användarnamn
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Jacob Thornton @fett
3 Fågeln Larry @Twitter

4. Kondenserat bord

Gör dina bord mer kompakta genom att lägga till .table-condensedklassen för att halvera utfyllnad av tabellceller (från 8px till 4px).

  1. <tabellklass = " tabell tabellkondenserad" >
  2. </table>
# Förnamn Efternamn Användarnamn
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Fågeln Larry @Twitter

5. Kombinera dem alla!

Kombinera gärna någon av bordsklasserna för att uppnå olika utseende genom att använda någon av de tillgängliga klasserna.

  1. <tabellklass = " tabell tabell-randig tabellkantad tabell-kondenserad" >
  2. ...
  3. </table>
Fullständiga namn
# Förnamn Efternamn Användarnamn
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Fågeln Larry @Twitter

Flexibel HTML och CSS

Det bästa med formulär i Bootstrap är att alla dina ingångar och kontroller ser bra ut oavsett hur du bygger dem i din uppmärkning. Ingen överflödig HTML krävs, men vi tillhandahåller mönstren för de som behöver det.

Mer komplicerade layouter kommer med kortfattade och skalbara klasser för enkel styling och händelsebindning, så att du är täckt i varje steg.

Fyra layouter ingår

Bootstrap kommer med stöd för fyra typer av formulärlayouter:

  • Vertikal (standard)
  • Sök
  • I kö
  • Horisontell

Olika typer av formulärlayouter kräver vissa ändringar av markeringen, men kontrollerna i sig förblir och fungerar på samma sätt.

Kontrolltillstånd och mer

Bootstraps formulär inkluderar stilar för alla basformulärkontroller som inmatning, textområde och val du kan förvänta dig. Men det kommer också med ett antal anpassade komponenter som bifogade och prependerade ingångar och stöd för listor med kryssrutor.

Tillstånd som fel, varning och framgång ingår för varje typ av formulärkontroll. Även stilar för inaktiverade kontroller ingår.

Fyra typer av former

Bootstrap tillhandahåller enkel uppmärkning och stilar för fyra stilar av vanliga webbformulär.

namn Klass Beskrivning
Vertikal (standard) .form-vertical (krävs inte) Staplade, vänsterjusterade etiketter över kontroller
I kö .form-inline Vänsterjusterad etikett och inline-blockkontroller för kompakt stil
Sök .form-search Extra avrundad textinmatning för en typisk sökestetik
Horisontell .form-horizontal Flytta vänster, högerjusterade etiketter på samma rad som kontrollerna

Exempelformulär som bara använder formulärkontroller, ingen extra markering

Grundform

Smarta och lätta standardinställningar utan extra uppmärkning.

Exempel på hjälptext på blocknivå här.

  1. <form class = "tja" >
  2. <label> Etikettnamn </label>
  3. <input type = "text" class = "span3" platshållare = "Skriv något..." >
  4. <span class = "help-block" > Exempel på hjälptext på blocknivå här. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > Kolla in mig
  7. </label>
  8. <button type = "submit" class = "btn" > Skicka </button>
  9. </form>

Sökformulär

Lägg .form-searchtill i formuläret och .search-queryi input.

  1. <form class = "well form-search" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > Sök </button>
  4. </form>

Inline formulär

Lägg .form-inlinetill den vertikala justeringen och avståndet mellan formulärkontroller för att finslipa.

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" platshållare = "E-post" >
  3. <input type = "lösenord" class = "input-small" platshållare = "Lösenord" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > Kom ihåg mig
  6. </label>
  7. <button type = "submit" class = "btn" > Logga in </button>
  8. </form>

Horisontella former

Till höger visas alla standardformulärkontroller som vi stöder. Här är punktlistan:

  • textinmatning (text, lösenord, e-post, etc)
  • kryssruta
  • radio
  • Välj
  • flerval
  • filinmatning
  • textområde

Förutom friformstext ser all HTML5-textbaserad inmatning ut som så.

Exempel på uppmärkning

Med tanke på ovanstående formulärlayout, här är uppmärkningen som är kopplad till den första inmatnings- och kontrollgruppen. Klasserna .control-group, .control-label, och .controlsär alla nödvändiga för styling.

  1. <form class = "form-horisontal" >
  2. <fieldset>
  3. <legend> Förklaringstext </legend>
  4. <div class = "kontrollgrupp" >
  5. <label class = "control-label" for = "input01" > Textinmatning </label>
  6. <div class = "kontroller" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Stödhjälptext </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Formulärkontrolltillstånd

Bootstrap har stilar för webbläsarstödda fokuserade och disabledtillstånd. Vi tar bort standardwebbkit outlineoch använder en box-shadowi dess ställe för :focus.


Form validering

Den innehåller också valideringsstilar för fel, varningar och framgång. För att använda, lägg till felklassen i den omgivande .control-group.

  1. <fältuppsättning
  2. class = "kontrollgruppsfel" >
  3. </fieldset>
Något värde här
Något kan ha gått fel
Vänligen rätta till felet
Woohoo!
Woohoo!

Utöka formulärkontroller

Lägg till och lägg till ingångar

Inmatningsgrupper – med bifogad eller infogade text – ger ett enkelt sätt att ge mer sammanhang för dina inmatningar. Bra exempel inkluderar @-tecknet för Twitter-användarnamn eller $ för ekonomi.


Kryssrutor och radioapparater

Upp till v1.4 krävde Bootstrap extra markering runt kryssrutor och radioapparater för att stapla dem. Nu är det en enkel fråga att upprepa det <label class="checkbox">som omsluter <input type="checkbox">.

Inline-kryssrutor och radioapparater stöds också. Lägg bara .inlinetill något .checkboxeller .radioså är du klar.


Infoga formulär och lägg till/lägg till

Om du vill använda prepend eller lägg till indata i en inline-form, se till att placera .add-onoch inputpå samma rad, utan mellanslag.


Form hjälptext

För att lägga till hjälptext för dina formulärinmatningar, inkludera inline hjälptext med <span class="help-inline">eller ett hjälptextblock med <p class="help-block">efter inmatningselementet.

Använd samma .span*klasser från rutsystemet för inmatningsstorlekar.

Du kan också använda statiska klasser som inte mappar till rutnätet, anpassar sig till responsiva CSS-stilar eller tar hänsyn till olika typer av kontroller (t.ex. inputkontra select).

@

Här är lite hjälptext

0,00
Här är mer hjälptext
$ 0,00

Obs: Etiketter omger alla alternativ för mycket större klickytor och en mer användbar form.

Knapp class="" Beskrivning
btn Standard grå knapp med lutning
btn btn-primary Ger extra visuell vikt och identifierar den primära åtgärden i en uppsättning knappar
btn btn-info Används som ett alternativ till standardstilarna
btn btn-success Indikerar en framgångsrik eller positiv handling
btn btn-warning Indikerar att försiktighet bör vidtas med denna åtgärd
btn btn-danger Indikerar en farlig eller potentiellt negativ handling
btn btn-inverse Alternativ mörkgrå knapp, inte bunden till en semantisk handling eller användning

Knappar för åtgärder

Som en konvention bör knappar endast användas för åtgärder medan hyperlänkar ska användas för objekt. Till exempel bör "Ladda ner" vara en knapp medan "senaste aktiviteten" ska vara en länk.

Knappstilar kan tillämpas på vad som helst med .btnklassen tillämpad. Men vanligtvis vill du tillämpa dessa på endast <a>och <button>element.

Korswebbläsarkompatibilitet

IE9 beskär inte bakgrundsgradienter på rundade hörn, så vi tar bort det. Relaterat, IE9 jankifierar inaktiverade buttonelement, vilket gör text grå med en otäck textskugga som vi inte kan fixa.

Flera storlekar

Vill du ha större eller mindre knappar? Lägg till .btn-large, .btn-small, eller .btn-miniför ytterligare två storlekar.


Inaktiverat tillstånd

För inaktiverade knappar, lägg till .disabledklassen i länkar och disabledattributet för <button>element.

Primär länk Länk

Se upp! Vi använder .disabledsom en verktygsklass här, liknande den vanliga .activeklassen, så inget prefix krävs.

En klass, flera taggar

Använd .btnklassen på ett <a>, <button>, eller <input>element.

Länk
  1. <a class = "btn" href = "" > Länk </a>
  2. <button class = "btn" type = "submit" >
  3. Knapp
  4. </button>
  5. <input class = "btn" type = "button"
  6. värde = "Input" >
  7. <input class = "btn" type = "submit"
  8. värde = "Skicka" >

Som en bästa praxis, försök att matcha elementet för ditt sammanhang för att säkerställa matchande rendering i flera webbläsare. Om du har en input, använd en <input type="submit">för din knapp.

  • ikon-glas
  • ikon-musik
  • ikon-sökning
  • ikon-kuvert
  • ikon-hjärta
  • ikon-stjärna
  • ikon-stjärna-tom
  • ikon-användare
  • ikon-film
  • ikon-th-stor
  • ikon-th
  • ikon-th-listan
  • ikon-ok
  • ikon-ta bort
  • ikon-zooma-in
  • ikon-zooma ut
  • ikon av
  • ikon-signal
  • ikon-kugg
  • ikon-papperskorgen
  • ikon-hem
  • ikon-fil
  • ikon-tid
  • ikon-väg
  • icon-download-alt
  • ikon-nedladdning
  • ikon-uppladdning
  • ikon-inkorg
  • ikon-spel-cirkel
  • ikon-upprepa
  • icon-refresh
  • icon-list-alt
  • ikonlås
  • ikon-flagga
  • ikon-hörlurar
  • ikon-volym av
  • ikon-volym ned
  • ikon-volym upp
  • icon-qrcode
  • ikon-streckkod
  • ikon-tagg
  • ikon-taggar
  • ikon-bok
  • ikon-bokmärke
  • ikon-tryck
  • ikon-kamera
  • ikon-teckensnitt
  • ikon-fet
  • ikon-kursiv
  • ikon-text-höjd
  • ikon-text-bredd
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • ikonlista
  • ikon-indrag-vänster
  • ikon-indrag-höger
  • icon-facetime-video
  • ikon-bild
  • ikon-penna
  • ikon-karta-markör
  • ikon-justera
  • ikon-ton
  • icon-edit
  • ikon-delning
  • ikonkontroll
  • icon-move
  • ikon-steg-bakåt
  • ikon-snabb-bakåt
  • ikon bakåt
  • ikon-spel
  • ikon-paus
  • icon-stop
  • ikon-framåt
  • ikon-spolning framåt
  • ikon-steg-framåt
  • ikon-mata ut
  • ikon-chevron-vänster
  • icon-chevron-höger
  • ikon-plus-tecken
  • ikon-minus-tecken
  • ikon-ta bort-tecken
  • ikon-ok-tecken
  • ikon-fråga-tecken
  • ikon-info-tecken
  • ikon-skärmdump
  • ikon-ta bort-cirkel
  • ikon-ok-cirkel
  • icon-ban-cirkel
  • ikon-pil-vänster
  • ikon-pil-höger
  • ikon-pil upp
  • ikon-pil ner
  • icon-share-alt
  • ikon-ändra storlek-full
  • ikon-ändra storlek-liten
  • ikon-plus
  • ikon-minus
  • ikon-asterisk
  • ikon-utropstecken
  • ikon-gåva
  • ikon-blad
  • ikon-eld
  • ikon-ögonöppna
  • ikon-öga-stäng
  • ikon-varningsskylt
  • ikon-plan
  • ikon-kalender
  • ikon-slumpmässigt
  • ikon-kommentar
  • ikon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • ikon-varukorg
  • ikon-mapp-stäng
  • ikon-mapp-öppen
  • ikon-ändra storlek-vertikal
  • ikon-ändra storlek-horisontell
  • ikon-hdd
  • ikon-tjurhorn
  • ikon-klocka
  • ikon-certifikat
  • ikon-tummen upp
  • ikon-tummen-ner
  • ikon-hand-höger
  • ikon-hand-vänster
  • ikon-hand-up
  • ikon-hand-down
  • ikon-cirkel-pil-höger
  • ikon-cirkel-pil-vänster
  • ikon-cirkel-pil upp
  • ikon-cirkel-pil ner
  • ikon-glob
  • ikon-skiftnyckel
  • ikon-uppgifter
  • ikon-filter
  • ikon-portfölj
  • ikon-helskärm

Byggd som en sprite

Istället för att göra varje ikon till en extra förfrågan har vi sammanställt dem till en sprite – ett gäng bilder i en fil som använder CSS för att placera bilderna med background-position. Detta är samma metod som vi använder på Twitter.com och det har fungerat bra för oss.

Alla ikonklasser har prefix .icon-för korrekt namnavstånd och omfattning, ungefär som våra andra komponenter. Detta kommer att hjälpa till att undvika konflikter med andra verktyg.

Glyphicons har gett oss användning av Halflings-uppsättningen i vår open source-verktygslåda så länge vi tillhandahåller en länk och kredit här i dokumenten. Vänligen överväg att göra samma sak i dina projekt.

Hur man använder

Bootstrap använder en <i>tagg för alla ikoner, men de har ingen fallklass – bara ett delat prefix. För att använda, placera följande kod nästan var som helst:

  1. <i class = "ikonsökning" ></i>

Det finns även stilar tillgängliga för inverterade (vita) ikoner, färdiga med en extra klass:

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

Det finns 140 klasser att välja mellan för dina ikoner. Lägg bara till en <i>tagg med rätt klasser och du är klar. Du hittar hela listan i sprites.less eller här i det här dokumentet.

Se upp! När du använder bredvid textsträngar, som i knappar eller navigeringslänkar, se till att lämna ett mellanslag efter <i>taggen för korrekt avstånd.

Användningsfall

Ikoner är bra, men var skulle man använda dem? Här är några idéer:

  • Som grafik för din sidofältsnavigering
  • För en rent ikondriven navigering
  • För knappar som hjälper till att förmedla innebörden av en åtgärd
  • Med länkar för att dela sammanhang på en användares destination

I huvudsak, var som helst du kan sätta en <i>tagg, kan du sätta en ikon.

Exempel

Använd dem i knappar, knappgrupper för ett verktygsfält, navigering eller förhandsinmatningar.