Knappgrupper

Använd knappgrupper för att sammanfoga flera knappar som en sammansatt komponent. Bygg dem med en serie av <a>eller <button>element.

Bästa metoder

Vi rekommenderar följande riktlinjer för användning av knappgrupper och verktygsfält:

• Använd alltid samma element i en enda knappgrupp, <a>eller <button>.
• Blanda inte knappar i olika färger i samma knappgrupp.
• Använd ikoner som tillägg till eller istället för text, men se till att inkludera alt- och titeltext där så är lämpligt.

Relaterade knappgrupper med rullgardinsmeny (se nedan) ska kallas ut separat och alltid inkludera en rullgardinsmeny för att indikera avsett beteende.

Standardexempel

Så här ser HTML-koden ut för en standardknappgrupp byggd med ankartaggknappar:

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

Exempel på verktygsfält

Kombinera uppsättningar <div class="btn-group">till en <div class="btn-toolbar">för mer komplexa komponenter.

<div class = "btn-verktygsfält" > 
  <div class = "btn-grupp" > 
    ...
  </div>
</div>

Checkbox och radiosmaker

Knappgrupper kan också fungera som radioapparater, där endast en knapp kan vara aktiv, eller kryssrutor, där valfritt antal knappar kan vara aktiva. Se Javascript-dokumenten för det.

Hämta javascriptet »

Dropdown-menyer i knappgrupper

Se upp! Knappar med rullgardinsmenyer måste vara individuellt inslagna i sina egna .btn-groupinom en .btn-toolbarför korrekt rendering.

Översikt och exempel

Använd valfri knapp för att aktivera en rullgardinsmeny genom att placera den i en .btn-groupoch tillhandahålla rätt menyuppmärkning.

Exempel på uppmärkning

I likhet med en knappgrupp använder vår uppmärkning vanlig knappmarkering, men med en handfull tillägg för att förfina stilen och stödja Bootstraps dropdown jQuery-plugin.

<div class = "btn-grupp" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Handling
    <span class = "caret" ></span> 
  </a>
  <ul class = "rullgardinsmeny" > 
    <!-- rullgardinsmeny länkar -->
  </ul>
</div>

Fungerar med alla knappstorlekar

Nedrullningsbara knappar fungerar i alla storlekar. dina knappstorlekar till .btn-large, .btn-small, eller .btn-mini.

Kräver javascript

Knapprullgardinsmeny kräver Bootstrap dropdown-plugin för att fungera.

I vissa fall – som mobil – kommer rullgardinsmenyer att sträcka sig utanför visningsporten. Du måste lösa justeringen manuellt eller med anpassat javascript.

Översikt och exempel

Med utgångspunkt i knappgruppens stilar och markeringar kan vi enkelt skapa en delad knapp. Dela knappar har en standardåtgärd till vänster och en rullgardinsknapp till höger med kontextuella länkar.

Storlekar

Använd de extra knappklasserna .btn-mini, .btn-small, eller .btn-largeför storlek.

<div class = "btn-grupp" > 
  ...
  <ul class = "rullgardinsmeny dra höger" > 
    <!-- rullgardinsmeny länkar -->
  </ul>
</div>

Exempel på uppmärkning

Vi utökar de normala knapprullgardinsmenyn för att tillhandahålla en andra knappåtgärd som fungerar som en separat rullgardinsmeny.

<div class = "btn-grupp" > 
  <button class = "btn" > Åtgärd </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "rullgardinsmeny" > 
    <!-- rullgardinsmeny länkar -->
  </ul>
</div>

Dropup-menyer

Rullgardinsmenyer kan också växlas nerifrån och upp genom att lägga till en enda klass till den omedelbara föräldern till .dropdown-menu. Det kommer att vända på riktningen .caretoch flytta själva menyn för att flytta nerifrån och upp istället för uppifrån och ner.

<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 = "rullgardinsmeny" > 
    <!-- rullgardinsmeny länkar -->
  </ul>
</div>

Kraftfull basklass

Alla nav-komponenter här – flikar, piller och listor – delar samma grunduppmärkning och stilar genom .navklassen.

När ska användas

Flikar och piller är bra för avsnitt av innehåll eller navigering mellan sidor med relaterat innehåll.

Komponentjustering

Använd verktygsklasserna .pull-lefteller för att justera nav-länkar . .pull-rightBåda klasserna kommer att lägga till en CSS-float i den angivna riktningen.

Grundläggande flikar

Ta en vanlig <ul>länk och lägg till .nav-tabs:

• Hem
• Profil
• Meddelanden

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

Grundläggande piller

Ta samma HTML, men använd .nav-pillsistället:

• Hem
• Profil
• Meddelanden

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

Hur man staplar dem

Eftersom flikar och piller är horisontella som standard, lägg bara till en andra klass, .nav-stacked, för att få dem att se vertikalt staplade.

Staplade flikar

• Hem
• Profil
• Meddelanden

<ul class = "nav nav-flikar nav-stackade" > 
  ...
</ul>

Staplade piller

• Hem
• Profil
• Meddelanden

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

Rika menyer på ett enkelt sätt

Rullgardinsmenyer i Bootstrap-flikar och -piller är superenkla och kräver bara lite extra HTML och en lätt jQuery-plugin.

Gå över till Javascript-sidan för att läsa dokumenten om att initiera rullgardinsmenyn i Bootstrap.

Flikar med rullgardinsmenyer

• Hem
• Hjälp
• Falla ner
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li class = "rullgardinsmeny" > 
    <a class = "rullgardinsmeny" 
       data-toggle = "rullgardinsmeny"
       href = "#" >
        Falla ner
        <b class = "caret" ></b> 
      </a>
    <ul class = "rullgardinsmeny" > 
      <!-- länkar -->
    </ul>
  </li>
</ul>

Piller med dropdowns

• Hem
• Hjälp
• Falla ner
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-piller" > 
  <li class = "rullgardinsmeny" > 
    <a class = "rullgardinsmeny" 
       data-toggle = "rullgardinsmeny"
       href = "#" >
        Falla ner
        <b class = "caret" ></b> 
      </a>
    <ul class = "rullgardinsmeny" > 
      <!-- länkar -->
    </ul>
  </li>
</ul>

Navigering i applikationsstil

Nav-listor ger ett enkelt och enkelt sätt att bygga grupper av navigeringslänkar med valfria rubriker. De används bäst i sidofält som Finder i OS X.

Strukturellt är de byggda på samma centrala nav-stilar som flikar och piller, så användning och anpassning är enkel.

Med ikoner

Nav-listor är också lätta att utrusta med ikoner. Lägg till rätt <i>tagg med klass och du är klar.

Horisontella avdelare

Lägg till en horisontell avdelare genom att skapa ett tomt listobjekt med klassen .divider, så här:

<ul class = "nav nav-lista" > 
  ...
  <li class = "avdelare" ></li> 
  ...
</ul>

Exempel på navigeringslista

Ta en lista med länkar och lägg till class="nav nav-list":

<ul class = "nav nav-lista" > 
  <li class = "nav-header" > 
    Listhuvud
  </li>
  <li class = "aktiv" > 
    <a href = "#" > Hem </a> 
  </li>
  <li>
    <a href = "#" > Bibliotek </a> 
  </li>
  ...
</ul>

Exempel med ikoner

Samma exempel, men med <i>taggar för ikoner.

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

Vad ingår

Väck dina flikar till liv med ett enkelt plugin för att växla mellan innehåll via flikar. Bootstrap integrerar flikar med flikar i fyra stilar: topp (standard), höger, botten och vänster.

Det är enkelt att byta mellan dem och kräver bara att man ändrar väldigt lite märkning.

Tona in flikar

För att få flikar att tona in, lägg .fadetill varje .tab-pane.

Kräver jQuery-plugin

Alla flikar som kan flikar drivs av vårt lätta jQuery-plugin. Läs mer om hur du väcker flikar med flikar till liv på javascript-dokumentsidan .

Hämta javascript →

Tabbar exempel

För att göra flikar flikbara, skapa ett .tab-paneunikt ID för varje flik och slå in dem i .tab-content.

För höger- eller vänsterjusterade flikar, linda in .nav-tabsoch ..tab-content.tabbable

Enkel markering

Användning av flikar kräver en omslutnings-div, en uppsättning flikar och en uppsättning flikbara innehållsrutor.

<div class = "tabbable" > <!-- Krävs endast för vänster/höger flikar -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Avsnitt 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Avsnitt 2 </a></li>  
  </ul>
  <div class = "tab-innehåll" > 
    <div class = "tab-panel aktiv" id = "tab1" >  
      <p> Jag är i avsnitt 1. </p>
    </div>
    <div class = "tab-panel" id = "tab2" >  
      <p> Hej, jag är i avsnitt 2. </p>
    </div>
  </div>
</div>

Flikar på botten

Vänd på HTML-ordningen och lägg till en klass för att placera flikar längst ner.

<div class = "tabba tabs-below" > 
  <div class = "tab-innehåll" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Flikar till vänster

Byt klassen för att sätta flikar till vänster.

<div class = "tabba tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-innehåll" > 
    ...
  </div>
</div>

Flikar till höger

Byt klassen för att sätta flikar till höger.

<div class = "tabba tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-innehåll" > 
    ...
  </div>
</div>

Navbar ställningar

Navigationsfältet kräver bara ett fåtal divs för att strukturera den väl för statisk eller fast visning.

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

Fixat navigeringsfält

Fixa navigeringsfältet till toppen eller botten av viewporten med en extra klass på den yttersta div, .navbar.

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

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

När du fäster navigeringsfältet, kom ihåg att ta hänsyn till det dolda området under. Lägg till 40px eller mer stoppning till <body>. Var noga med att lägga till detta efter core Bootstrap CSS och före den valfria responsiva CSS.

Varumärke

En enkel länk för att visa ditt varumärke eller projektnamn kräver bara en ankartagg.

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

Formulär i navbar

För att formatera och placera ett formulär korrekt i navigeringsfältet, lägg till lämpliga klasser som visas nedan. För ett standardformulär, inkludera .navbar-formoch antingen .pull-lefteller .pull-rightför att justera det korrekt.

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

För ett mer anpassat sökformulär, lägg .navbar-searchtill formoch .search-queryi inmatningen för specialiserade stilar i navigeringsfältet.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" platshållare = "Sök" >   
</form>

Valfri responsiv variant

Beroende på mängden innehåll i toppfältet kanske du vill implementera de responsiva alternativen. För att göra det, slå in ditt nav-innehåll i en innehållande div, .nav-collapse.collapse, och lägg till navigeringsknappen, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar används som växel för komprimerat navbarinnehåll -->
      <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>
 
      <!-- Se till att lämna märket där ute om du vill att det ska visas -->
      <a class = "brand" href = "#" > Projektnamn </a>  
 
      <!-- Allt du vill ha dolt vid 940px eller mindre, placera här -->
      <div class = "nav-kollaps" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Nav länkar

Nav-objekt är enkla att lägga till via oordnade listor.

<ul class = "nav" > 
  <li class = "aktiv" > 
    <a href = "#" > Hem </a> 
  </li>
  <li><a href = "#" > Länk </a></li> 
  <li><a href = "#" > Länk </a></li> 
</ul>

Du kan enkelt lägga till avdelare till dina nav-länkar med ett tomt listobjekt och en enkel klass. Lägg bara till detta mellan länkarna:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

Komponentjustering

För att justera en nav, sökformulär eller text, använd verktygsklasserna .pull-lefteller . .pull-rightBåda klasserna kommer att lägga till en CSS-float i den angivna riktningen.

Lägger till rullgardinsmenyer

Att lägga till rullgardinsmenyer och rullgardinsmenyer till navigeringen är superenkelt, men kräver användning av vårt javascript-plugin .

<ul class = "nav" > 
  <li class = "rullgardinsmeny" > 
    <a href = "#" 
          klass = "rullgardinsmeny"
          data-toggle = "rullgardinsmeny" >
          konto
          <b class = "caret" ></b> 
    </a>
    <ul class = "rullgardinsmeny" > 
      ...
    </ul>
  </li>
</ul>

Hämta javascript →

Text i navigeringsfältet

Linda textsträngar i en <.navbar-text>, vanligtvis på en <p>tagg för korrekt ledning och färg.

Varför använda dem

Brödsmulnavigering används som ett sätt att visa användare var de är i en app eller en webbplats, men inte för primär navigering. Håll användningen sparsam och kortfattad för att vara mest effektiv.

Exempel

Ett enstaka exempel visas eftersom det kan visas på flera sidor.

• Hem

• Hem /
• Bibliotek

• Hem /
• Bibliotek /
• Data

Pålägg

HTML är din vanliga oordnade lista med länkar.

<ul class = "brödsmula" > 
  <li>
    <a href = "#" > Hem </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Bibliotek </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > Data </li> 
</ul>

När ska användas

Ultra förenklad och minimalistisk paginering inspirerad av Rdio, perfekt för appar och sökresultat. Det stora blocket är svårt att missa, lätt skalbart och ger stora klickytor.

Statliga sidlänkar

Länkar är anpassningsbara och fungerar i ett antal omständigheter med rätt klass. .disabledför oklickbara länkar och .activeför aktuell sida.

Flexibel uppriktning

Lägg till någon av två valfria klasser för att ändra justeringen av sideringslänkar: .pagination-centeredoch .pagination-right.

Exempel

Standardsidans sideringskomponent är flexibel och fungerar i ett antal varianter.

Pålägg

Insvept i en <div>, paginering är bara en <ul>.

<div class = "paginering" > 
  <ul>
    <li><a href = "#" > Föregående </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 = "#" > Nästa </a></li> 
  </ul>
</div>

Om personsökare

Personsökarkomponenten är en uppsättning länkar för enkla sideringsimplementeringar med lätt uppmärkning och ännu lättare stilar. Det är bra för enkla webbplatser som bloggar eller tidskrifter.

Valfritt inaktiverat tillstånd

Personsökarlänkar använder också den allmänna .disabledklassen från sideringen.

Standardexempel

Som standard centrerar personsökaren länkar.

• Tidigare
• Nästa

<ul class = "personsökare" > 
  <li>
    <a href = "#" > Föregående </a> 
  </li>
  <li>
    <a href = "#" > Nästa </a> 
  </li>
</ul>

Justerade länkar

Alternativt kan du justera varje länk mot sidorna:

• ← Äldre
• Nyare →

<ul class = "personsökare" > 
  <li class = "föregående" > 
    <a href = "#" > ← Äldre </a> 
  </li>
  <li class = "nästa" > 
    <a href = "#" > Nyare → </a> 
  </li>
</ul>

Handla om

Märken är små, enkla komponenter för att visa en indikator eller räkning av något slag. De finns vanligtvis i e-postklienter som Mail.app eller på mobilappar för push-meddelanden.

Tillgängliga klasser

Bootstrap tillhandahåller en lätt, flexibel komponent som kallas en hjälteenhet för att visa upp innehåll på din webbplats. Det fungerar bra på marknadsföring och innehållstunga sajter.

Pålägg

Slå in ditt innehåll i en divlike så:

<div class = "hjälte-enhet" > 
  <h1> Rubrik </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Läs mer
    </a>
  </p>
</div>

Ett enkelt skal för h1att på lämpligt sätt placera ut och segmentera avsnitt av innehåll på en sida. Den kan använda h1standardelementet small, liksom de flesta andra komponenter (med ytterligare stilar).

<div class = "page-header" > 
  <h1> Exempel på sidhuvud </h1>
</div>

Standardminiatyrer

Som standard är Bootstraps miniatyrer utformade för att visa länkade bilder med minimal uppmärkning.

Mycket anpassningsbar

Med lite extra uppmärkning är det möjligt att lägga till alla typer av HTML-innehåll som rubriker, stycken eller knappar i miniatyrbilder.

• 

  Miniatyretikett

  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

• 

  Miniatyretikett

  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

Varför använda miniatyrer

Miniatyrer (tidigare .media-gridfram till v1.4) är utmärkta för rutnät av foton eller videor, bildsökresultat, detaljhandelsprodukter, portföljer och mycket mer. De kan vara länkar eller statiskt innehåll.

Enkel, flexibel markering

Miniatyruppmärkning är enkel – en ulmed valfritt antal lielement är allt som krävs. Det är också superflexibelt, vilket tillåter alla typer av innehåll med bara lite mer markering för att omsluta ditt innehåll.

Använder rutnätskolumnstorlekar

Slutligen använder miniatyrbildskomponenten befintliga rutsystemklasser – som .span2eller .span3– för kontroll av miniatyrdimensioner.

Markeringen

Som nämnts tidigare är den nödvändiga markeringen för miniatyrbilder lätt och okomplicerad. Här är en titt på standardinställningarna för länkade bilder :

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

För anpassat HTML-innehåll i miniatyrer ändras uppmärkningen något. För att tillåta innehåll på blocknivå var som helst byter vi ut <a>mot något <div>liknande:

<ul class = "miniatyrer" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Miniatyretikett </h5>
      <p> Miniatyrbildstext här... </p>
    </div>
  </li>
  ...
</ul>

Fler exempel

Utforska alla dina alternativ med de olika rutnätsklasserna som är tillgängliga för dig. Du kan också blanda och matcha olika storlekar.

Omskriven basklass

Med Bootstrap 2 har vi förenklat basklassen: .alertistället för .alert-message. Vi har också minskat den minsta nödvändiga markeringen – nej <p>krävs som standard, bara den yttre <div>.

Enkelt varningsmeddelande

För en mer hållbar komponent med mindre kod har vi tagit bort det särskiljande utseendet för blockvarningar, meddelanden som kommer med mer utfyllnad och vanligtvis mer text. Klassen har också ändrats till .alert-block.

Går utmärkt med javascript

Bootstrap kommer med ett bra jQuery-plugin som stöder varningsmeddelanden, vilket gör det snabbt och enkelt att avvisa dem.

Hämta plugin »

Exempel på varningar

Slå in ditt meddelande och en valfri stängningsikon i en div med enkel klass.

<div class = "alert" > 
  <button class = "close" data-dismiss = "alert" > × </button>  
  <strong> Varning! </strong> Bäst kolla dig själv, du ser inte för bra ut.
</div>

Se upp! iOS-enheter kräver en href="#"för att avvisa varningar. Se till att inkludera det och dataattributet för ankarstängningsikoner. Alternativt kan du använda ett <button>element med dataattributet, vilket vi har valt att göra för våra dokument. När du använder <button>måste du inkludera, type="button"annars kanske dina formulär inte skickas in.

Utöka enkelt standardvarningsmeddelandet med två valfria klasser: .alert-blockför mer utfyllnad och textkontroller och .alert-headingför en matchande rubrik.

<div class = "alert alert-block" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" > Varning! </h4> 
  Bäst kolla dig själv, du är inte...
</div>

Fel eller fara

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

Framgång

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

Information

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

Grundläggande

Standardförloppsindikator med vertikal gradient.

<div class = "framsteg" > 
  <div class = "bar" 
       style = " bredd : 60 %; " ></div> 
</div>

Randig

Använder en gradient för att skapa en randig effekt (ingen IE).

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

Animerad

Tar det randiga exemplet och animerar det (ingen IE).

<div class = "framsteg framsteg-randigt 
     aktiv" >
  <div class = "bar" 
       style = " bredd : 40 %; " ></div> 
</div>

Ytterligare färger

Förloppsindikatorer använder några av samma knapp- och varningsklasser för konsekventa stilar.

Randiga stänger

I likhet med de solida färgerna har vi olika randiga förloppsindikatorer.

Beteende

Förloppsindikatorer använder CSS3-övergångar, så om du dynamiskt justerar bredden via javascript kommer den att ändra storlek smidigt.

Om du använder .activeklassen kommer dina .progress-stripedförloppsindikatorer att animera ränderna från vänster till höger.

Webbläsarstöd

Förloppsindikatorer använder CSS3-toningar, övergångar och animationer för att uppnå alla sina effekter. Dessa funktioner stöds inte i IE7-9 eller äldre versioner av Firefox.

Opera och IE stöder inte animationer för närvarande.

Wells

Använd brunnen som en enkel effekt på ett element för att ge det en infälld effekt.

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

Stäng ikon

Använd den allmänna stängningsikonen för att avvisa innehåll som modals och varningar.

×

<button class = "stäng" > × </button> 

iOS-enheter kräver ett href="#" för klickhändelser om du hellre använder ett ankare.

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