Knappegrupper

Bruk knappegrupper for å slå sammen flere knapper som én sammensatt komponent. Bygg dem med en serie av <a>eller <button>elementer.

Beste praksis

Vi anbefaler følgende retningslinjer for bruk av knappegrupper og verktøylinjer:

• Bruk alltid det samme elementet i en enkelt knappegruppe, <a>eller <button>.
• Ikke bland knapper med forskjellige farger i samme knappegruppe.
• Bruk ikoner i tillegg til eller i stedet for tekst, men pass på å inkludere alt- og titteltekst der det er aktuelt.

Relaterte knappegrupper med rullegardiner (se nedenfor) bør kalles ut separat og alltid inkludere en rullegardinmerke for å indikere tiltenkt oppførsel.

Standard eksempel

Slik ser HTML-en ut for en standard knappegruppe bygget med ankertagknapper:

<div class = "btn-gruppe" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

Eksempel på verktøylinje

Kombiner sett <div class="btn-group">til en <div class="btn-toolbar">for mer komplekse komponenter.

<div class = "btn-verktøylinje" > 
  <div class = "btn-gruppe" > 
    ...
  </div>
</div>

Avkrysningsboks og radiosmaker

Knappegrupper kan også fungere som radioer, der bare én knapp kan være aktiv, eller avmerkingsbokser, hvor et hvilket som helst antall knapper kan være aktive. Se Javascript-dokumentene for det.

Få javascript »

Nedtrekkslister i knappegrupper

Vær oppmerksom! Knapper med rullegardiner må pakkes individuelt inn i .btn-groupen .btn-toolbarfor riktig gjengivelse.

Oversikt og eksempler

Bruk en hvilken som helst knapp for å utløse en rullegardinmeny ved å plassere den i en .btn-groupog gi riktig menyoppmerking.

Eksempel på markering

I likhet med en knappegruppe bruker vår markering vanlig knappemarkering, men med en håndfull tillegg for å avgrense stilen og støtte Bootstraps dropdown jQuery-plugin.

<div class = "btn-gruppe" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Handling
    <span class = "caret" ></span> 
  </a>
  <ul class = "rullegardinmeny" > 
    <!-- lenker til rullegardinmenyen -->
  </ul>
</div>

Fungerer med alle knappestørrelser

Nedtrekkbare knapper fungerer i alle størrelser. knappestørrelsene til .btn-large, .btn-small, eller .btn-mini.

Krever javascript

Dropdown- knapper krever at Bootstrap-rullegardinpluginen fungerer.

I noen tilfeller – som mobil – vil rullegardinmenyene strekke seg utenfor visningsporten. Du må løse justeringen manuelt eller med tilpasset javascript.

Oversikt og eksempler

Med utgangspunkt i knappegruppestilene og markeringen kan vi enkelt lage en delt knapp. Delte knapper har en standard handling til venstre og en rullegardinbryter til høyre med kontekstuelle lenker.

Størrelser

Bruk de ekstra knappeklassene .btn-mini, .btn-small, eller .btn-largefor dimensjonering.

<div class = "btn-gruppe" > 
  ...
  <ul class = "rullegardinmeny trekk til høyre" > 
    <!-- lenker til rullegardinmenyen -->
  </ul>
</div>

Eksempel på markering

Vi utvider de vanlige rullegardinmenyene for å gi en andre knappehandling som fungerer som en separat rullegardinutløser.

<div class = "btn-gruppe" > 
  <button class = "btn" > Handling </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "rullegardinmeny" > 
    <!-- lenker til rullegardinmenyen -->
  </ul>
</div>

Dropup-menyer

Rullegardinmenyer kan også veksles fra bunnen og opp ved å legge til en enkelt klasse til den nærmeste forelderen til .dropdown-menu. Den vil snu retningen på .caretog flytte selve menyen for å flytte fra bunnen og opp i stedet for ovenfra og ned.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "rullegardinmeny" > 
    <!-- lenker til rullegardinmenyen -->
  </ul>
</div>

Kraftig grunnklasse

Alle nav-komponenter her – faner, piller og lister – deler den samme grunnoppmerkingen og stilene gjennom .navklassen.

Når du skal bruke

Faner og piller er flotte for deler av innhold eller for å navigere mellom sider med relatert innhold.

Komponentjustering

For å justere nav-koblinger, bruk verktøyklassene .pull-lefteller .pull-right. Begge klassene vil legge til en CSS-float i den angitte retningen.

Grunnleggende faner

Ta en vanlig <ul>lenker og legg til .nav-tabs:

• Hjem
• Profil
• Meldinger

<ul class = "nav nav-tabs" > 
  <li class = "aktiv" > 
    <a href = "#" > Hjem </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Grunnleggende piller

Ta den samme HTML, men bruk .nav-pillsi stedet:

• Hjem
• Profil
• Meldinger

<ul class = "nav nav-piller" > 
  <li class = "aktiv" > 
    <a href = "#" > Hjem </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Hvordan stable dem

Siden faner og piller er horisontale som standard, er det bare å legge til en andre klasse, .nav-stacked, for å få dem til å vises vertikalt stablet.

Stablede faner

• Hjem
• Profil
• Meldinger

<ul class = "nav nav-tabs nav-stablet" > 
  ...
</ul>

Stablede piller

• Hjem
• Profil
• Meldinger

<ul class = "nav nav-piller nav-stablet" > 
  ...
</ul>

Rike menyer gjort enkelt

Rullegardinmenyer i Bootstrap-faner og -piller er superenkle og krever bare litt ekstra HTML og en lett jQuery-plugin.

Gå over til Javascript-siden for å lese dokumentene om initialisering av rullegardinmenyene i Bootstrap.

Faner med rullegardiner

• Hjem
• Hjelp
• Fall ned
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "rullegardinmeny"
       href = "#" >
        Fall ned
        <b class = "caret" ></b> 
      </a>
    <ul class = "rullegardinmeny" > 
      <!-- lenker -->
    </ul>
  </li>
</ul>

Piller med dropdowns

• Hjem
• Hjelp
• Fall ned
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-piller" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "rullegardinmeny"
       href = "#" >
        Fall ned
        <b class = "caret" ></b> 
      </a>
    <ul class = "rullegardinmeny" > 
      <!-- lenker -->
    </ul>
  </li>
</ul>

Navigasjon i applikasjonsstil

Nav-lister gir en enkel og enkel måte å bygge grupper av nav-lenker med valgfrie overskrifter. De brukes best i sidefelt som Finder i OS X.

Strukturelt sett er de bygget på de samme kjernenavigasjonsstilene som tabulatorer og piller, så bruk og tilpasning er enkel.

Med ikoner

Nav-lister er også enkle å utstyre med ikoner. Legg til den riktige <i>taggen med klassen, og du er klar.

Horisontale skillevegger

Legg til en horisontal skillelinje ved å lage et tomt listeelement med klassen .divider, slik:

<ul class = "nav nav-liste" > 
  ...
  <li class = "deler" ></li> 
  ...
</ul>

Eksempel på nav-liste

Ta en liste over linker og legg til class="nav nav-list":

<ul class = "nav nav-liste" > 
  <li class = "nav-header" > 
    Listeoverskrift
  </li>
  <li class = "aktiv" > 
    <a href = "#" > Hjem </a> 
  </li>
  <li>
    <a href = "#" > Bibliotek </a> 
  </li>
  ...
</ul>

Eksempel med ikoner

Samme eksempel, men med <i>tagger for ikoner.

<ul class = "nav nav-liste" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "ikonbok" ></i> 
      Bibliotek
    </a>
  </li>
  ...
</ul>

Hva er inkludert

Gi liv til fanene dine med en enkel plugin for å veksle mellom innhold via faner. Bootstrap integrerer tabulatorer i fire stiler: topp (standard), høyre, bunn og venstre.

Det er enkelt å bytte mellom dem og krever bare å endre svært lite markering.

Tok inn faner

For å få faner til å tone inn, legg .fadetil i hver .tab-pane.

Krever jQuery-plugin

Alle tabbare faner drives av vår lette jQuery-plugin. Les mer om hvordan du får liv til tabulatorer på siden for javascript-dokumenter .

Få javascript →

Tabbar eksempel

For å gjøre faner tabulable, lag en .tab-panemed unik ID for hver fane og pakk dem inn .tab-content.

For høyre- eller venstrejusterte faner, pakk inn .nav-tabsog .tab-contentinn .tabbable.

Enkel markering

Bruk av tabulatorbare faner krever en innpaknings-div, et sett med faner og et sett med tabulatorer med innhold.

<div class = "tabbable" > <!-- Kun nødvendig for venstre/høyre faner -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Del 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Del 2 </a></li>  
  </ul>
  <div class = "tab-innhold" > 
    <div class = "tab-panel aktiv" id = "tab1" >  
      <p> Jeg er i seksjon 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Hei, jeg er i seksjon 2. </p>
    </div>
  </div>
</div>

Faner på bunnen

Vend rekkefølgen til HTML-en og legg til en klasse for å sette faner nederst.

<div class = "tabable tabs-below" > 
  <div class = "tab-innhold" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Faner til venstre

Bytt klassen for å sette faner til venstre.

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-innhold" > 
    ...
  </div>
</div>

Faner til høyre

Bytt klassen for å sette faner til høyre.

<div class = "table tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-innhold" > 
    ...
  </div>
</div>

Navbar stillas

Navigasjonslinjen krever bare noen få divs for å strukturere den godt for statisk eller fast visning.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

Fast navbar

Fest navigasjonslinjen til toppen eller bunnen av viewporten med en ekstra klasse på den ytterste div, .navbar.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

Når du fester navigasjonslinjen, husk å ta hensyn til det skjulte området under. Legg til 40px eller mer polstring til <body>. Sørg for å legge til dette etter kjernen Bootstrap CSS og før den valgfrie responsive CSS.

Merkenavn

En enkel lenke for å vise merkevaren eller prosjektnavnet ditt krever bare en ankermerke.

<a class = "brand" href = "#" >  
  Prosjektnavn
</a>

Skjemaer i navbar

For å style og plassere et skjema riktig i navigasjonslinjen, legg til de aktuelle klassene som vist nedenfor. For et standardskjema, inkluderer .navbar-formog enten .pull-lefteller .pull-rightfor å justere det riktig.

<form class = "navbar-form pull-venstre" > 
  <input type = "text" class = "span2" >  
</form>

For et mer tilpasset søkeskjema, legg .navbar-searchtil formog .search-querytil input for spesialiserte stiler i navigasjonslinjen.

<form class = "navbar-search pull-venstre" > 
  <input type = "text" class = "search-query" plassholder = "Søk" >   
</form>

Valgfri responsiv variant

Avhengig av mengden innhold i topplinjen din, vil du kanskje implementere de responsive alternativene. For å gjøre det, pakk nav-innholdet inn i en som inneholder div, .nav-collapse.collapse, og legg til navbar-veksleknappen, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar brukes som bryter for skjult navbarinnhold -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Sørg for å la merkevaren være der ute hvis du vil ha den vist -->
      <a class = "brand" href = "#" > Prosjektnavn </a>  
 
      <!-- Alt du vil ha skjult ved 940px eller mindre, plasser her -->
      <div class = "nav-kollaps" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Nav-lenker

Nav-elementer er enkle å legge til via uordnede lister.

<ul class = "nav" > 
  <li class = "aktiv" > 
    <a href = "#" > Hjem </a> 
  </li>
  <li><a href = "#" > Link </a></li> 
  <li><a href = "#" > Link </a></li> 
</ul>

Du kan enkelt legge til skillelinjer til nav-lenkene dine med et tomt listeelement og en enkel klasse. Bare legg til dette mellom lenker:

<ul class = "nav" > 
  ...
  <li class = "deler-vertikal" ></li> 
  ...
</ul>

Komponentjustering

For å justere en nav, søkeskjema eller tekst, bruk verktøyklassene .pull-lefteller .pull-right. Begge klassene vil legge til en CSS-float i den angitte retningen.

Legger til rullegardinmenyer

Det er superenkelt å legge til dropdowns og dropups i navigasjonen, men krever bruk av vår javascript-plugin .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          klasse = "rullegardinbryter"
          data-toggle = "rullegardinmenyen" >
          Regnskap
          <b class = "caret" ></b> 
    </a>
    <ul class = "rullegardinmeny" > 
      ...
    </ul>
  </li>
</ul>

Få javascript →

Tekst i navigasjonslinjen

Pakk inn tekststrenger i en <.navbar-text>, vanligvis på en <p>merkelapp for riktig linjeføring og farge.

Hvorfor bruke dem

Brødsmule-navigasjon brukes som en måte å vise brukere hvor de er i en app eller et nettsted, men ikke for primærnavigering. Hold bruken sparsom og kortfattet for å være mest effektiv.

Eksempler

Et enkelt eksempel vist slik det kan vises på flere sider.

• Hjem

• Hjem /
• Bibliotek

• Hjem /
• Bibliotek /
• Data

Markup

HTML er din standard uordnede liste med lenker.

<ul class = "brødsmule" > 
  <li>
    <a href = "#" > Hjem </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Bibliotek </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > Data </li> 
</ul>

Når du skal bruke

Ultra forenklet og minimalistisk paginering inspirert av Rdio, flott for apper og søkeresultater. Den store blokken er vanskelig å gå glipp av, lett skalerbar og gir store klikkområder.

Stateful sidelinker

Lenker kan tilpasses og fungerer i en rekke omstendigheter med riktig klasse. .disabledfor uklikkbare lenker og .activefor gjeldende side.

Fleksibel justering

Legg til en av to valgfrie klasser for å endre justeringen av pagineringslenker: .pagination-centeredog .pagination-right.

Eksempler

Standard pagineringskomponent er fleksibel og fungerer i en rekke varianter.

Markup

Paginering er pakket inn i <div>en <ul>.

<div class = "paginering" > 
  <ul>
    <li><a href = "#" > Forrige </a></li> 
    <li class = "aktiv" > 
      <a href = "#" > 1 </a> 
    </li>
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > Neste </a></li> 
  </ul>
</div>

Om personsøker

Personsøkerkomponenten er et sett med lenker for enkle pagineringsimplementeringer med lett markering og enda lettere stiler. Det er flott for enkle nettsteder som blogger eller magasiner.

Valgfri deaktivert tilstand

Personsøkerlenker bruker også den generelle .disabledklassen fra pagineringen.

Standard eksempel

Som standard sentrerer personsøkeren lenker.

• Tidligere
• Neste

<ul class = "personsøker" > 
  <li>
    <a href = "#" > Forrige </a> 
  </li>
  <li>
    <a href = "#" > Neste </a> 
  </li>
</ul>

Justerte lenker

Alternativt kan du justere hver lenke til sidene:

• ← Eldre
• Nyere →

<ul class = "personsøker" > 
  <li class = "forrige" > 
    <a href = "#" > ← Eldre </a> 
  </li>
  <li class = "neste" > 
    <a href = "#" > Nyere → </a> 
  </li>
</ul>

Om

Merker er små, enkle komponenter for å vise en indikator eller telling av noe slag. De finnes ofte i e-postklienter som Mail.app eller på mobilapper for push-varsler.

Tilgjengelige klasser

Bootstrap gir en lett, fleksibel komponent kalt en helteenhet for å vise frem innhold på nettstedet ditt. Det fungerer bra på markedsføring og innholdstunge nettsteder.

Markup

Pakk innholdet inn i en divslik:

<div class = "hero-unit" > 
  <h1> Overskrift </h1>
  <p> Slagord </p>
  <p>
    <a class = "btn btn-primær btn-large" > 
      Lære mer
    </a>
  </p>
</div>

Et enkelt skall for en h1passende plassering og segmentering av deler av innholdet på en side. Den kan bruke h1standardelementet smalli tillegg til de fleste andre komponenter (med ekstra stiler).

<div class = "page-header" > 
  <h1> Eksempelsideoverskrift </h1>
</div>

Standard miniatyrbilder

Som standard er Bootstraps miniatyrbilder utformet for å vise frem koblede bilder med minimal nødvendig markering.

Svært tilpassbar

Med litt ekstra markering er det mulig å legge til alle slags HTML-innhold som overskrifter, avsnitt eller knapper i miniatyrbilder.

• 

  Miniatyrbildeetikett

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Handling Handling

• 

  Miniatyrbildeetikett

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Handling Handling

Hvorfor bruke miniatyrbilder

Miniatyrbilder (tidligere .media-gridfrem til v1.4) er flotte for rutenett med bilder eller videoer, bildesøkeresultater, detaljhandelsprodukter, porteføljer og mye mer. De kan være lenker eller statisk innhold.

Enkel, fleksibel markering

Miniatyrbildeoppmerking er enkel – en ulmed et hvilket som helst antall lielementer er alt som kreves. Den er også superfleksibel, og tillater alle typer innhold med bare litt mer markering for å pakke inn innholdet.

Bruker rutenettkolonnestørrelser

Til slutt bruker miniatyrbildekomponenten eksisterende rutenettsystemklasser – som .span2eller .span3– for kontroll av miniatyrbildedimensjoner.

Markeringen

Som nevnt tidligere, er den nødvendige markeringen for miniatyrbilder lett og grei. Her er en titt på standardoppsettet for koblede bilder :

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

For tilpasset HTML-innhold i miniatyrbilder, endres markeringen litt. For å tillate innhold på blokknivå hvor som helst, bytter vi ut <a>med et <div>lignende:

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Miniatyrbildeetikett </h5>
      <p> Miniatyrbildetekst her... </p>
    </div>
  </li>
  ...
</ul>

Flere eksempler

Utforsk alle alternativene dine med de forskjellige rutenettklassene som er tilgjengelige for deg. Du kan også mikse og matche forskjellige størrelser.

Omskrevet grunnklasse

Med Bootstrap 2 har vi forenklet grunnklassen: .alerti stedet for .alert-message. Vi har også redusert den minste nødvendige markeringen – ingen <p>er påkrevd som standard, bare den ytre <div>.

Enkelt varselmelding

For en mer holdbar komponent med mindre kode, har vi fjernet det differensierende utseendet for blokkvarsler, meldinger som kommer med mer utfylling og vanligvis mer tekst. Klassen har også endret seg til .alert-block.

Går bra med javascript

Bootstrap kommer med en flott jQuery-plugin som støtter varslingsmeldinger, noe som gjør det raskt og enkelt å avvise dem.

Få plugin »

Eksempler på varsler

Pakk inn meldingen og et valgfritt lukkeikon i en div med enkel klasse.

<div class = "alert" > 
  <button class = "close" data-dismiss = "alert" > × </button>  
  <strong> Advarsel! </strong> Best sjekk deg selv, du ser ikke så bra ut.
</div>

Vær oppmerksom! iOS-enheter krever en href="#"for avvisning av varsler. Sørg for å inkludere den og dataattributtet for ankerlukkingsikoner. Alternativt kan du bruke et <button>element med dataattributtet, som vi har valgt å gjøre for dokumentene våre. Når du bruker <button>, må du inkludere type="button"eller sende inn skjemaene dine.

Utvid enkelt standardvarslingsmeldingen med to valgfrie klasser: .alert-blockfor flere utfyllings- og tekstkontroller og .alert-headingfor en matchende overskrift.

<div class = "alert alert-block" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" > Advarsel! </h4> 
  Best sjekk deg selv, du er ikke...
</div>

Feil eller fare

<div class = "alert alert-error" > 
  ...
</div>

Suksess

<div class = "alert alert-success" > 
  ...
</div>

Informasjon

<div class = "alert alert-info" > 
  ...
</div>

Grunnleggende

Standard fremdriftslinje med vertikal gradient.

<div class = "fremgang" > 
  <div class = "bar" 
       style = " bredde : 60 %; " ></div> 
</div>

Stripete

Bruker en gradient for å lage en stripete effekt (ingen IE).

<div class = "progress progress-striped" > 
  <div class = "bar" 
       style = " bredde : 20 %; " ></div> 
</div>

Animert

Tar det stripete eksemplet og animerer det (ingen IE).

<div class = "fremdrift fremdriftsstripet 
     aktiv" >
  <div class = "bar" 
       style = " bredde : 40 %; " ></div> 
</div>

Ekstra farger

Fremdriftslinjer bruker noen av de samme knappe- og varslingsklassene for konsekvente stiler.

Stripete stenger

I likhet med de solide fargene har vi varierte stripete fremdriftslinjer.

Oppførsel

Fremdriftslinjer bruker CSS3-overganger, så hvis du dynamisk justerer bredden via javascript, vil den endre størrelsen jevnt.

Hvis du bruker .activeklassen, vil .progress-stripedfremdriftslinjene dine animere stripene fra venstre mot høyre.

Nettleserstøtte

Fremdriftslinjer bruker CSS3-gradienter, overganger og animasjoner for å oppnå alle effektene. Disse funksjonene støttes ikke i IE7-9 eller eldre versjoner av Firefox.

Opera og IE støtter ikke animasjoner for øyeblikket.

Wells

Bruk brønnen som en enkel effekt på et element for å gi det en innfelt effekt.

<div class = "vel" > 
  ...
</div>

Lukk ikon

Bruk det generiske lukkeikonet for å avvise innhold som modaler og varsler.

×

<button class = "lukk" > × </button> 

iOS-enheter krever en href="#" for klikkhendelser hvis du heller bruker et anker.

<a class = "close" href = "#" > × </a>