Knapgrupper

Brug knapgrupper til at sammenføje flere knapper som én sammensat komponent. Byg dem med en række af <a>eller <button>elementer.

Bedste praksis

Vi anbefaler følgende retningslinjer for brug af knapgrupper og værktøjslinjer:

• Brug altid det samme element i en enkelt knapgruppe, <a>eller <button>.
• Bland ikke knapper af forskellige farver i den samme knapgruppe.
• Brug ikoner som supplement til eller i stedet for tekst, men sørg for at inkludere alt- og titeltekst, hvor det er relevant.

Relaterede knapgrupper med dropdown-menuer (se nedenfor) skal kaldes ud separat og altid inkludere en dropdown-mærke for at angive tilsigtet adfærd.

Standard eksempel

Sådan ser HTML-koden ud for en standardknapgruppe 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å værktøjslinje

Kombiner sæt <div class="btn-group">til en <div class="btn-toolbar">for mere komplekse komponenter.

<div class = "btn-værktøjslinje" > 
  <div class = "btn-gruppe" > 
    ...
  </div>
</div>

Afkrydsningsfelt og radiosmag

Knapgrupper kan også fungere som radioer, hvor kun én knap kan være aktiv, eller afkrydsningsfelter, hvor et vilkårligt antal knapper kan være aktive. Se Javascript-dokumenterne for det.

Hent javascript »

Dropdowns i knapgrupper

Heads up! Knapper med dropdowns skal pakkes individuelt ind i deres egne .btn-groupinden for en .btn-toolbarfor korrekt gengivelse.

Overblik og eksempler

Brug en hvilken som helst knap til at udløse en rullemenu ved at placere den i en .btn-groupog give den korrekte menumarkering.

Eksempel markup

I lighed med en knapgruppe bruger vores opmærkning almindelig knapmarkering, men med en håndfuld tilføjelser for at forfine stilen og understø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 = "dropdown-menu" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Fungerer med alle knapstørrelser

Knap rullemenuer fungerer i enhver størrelse. dine knapstørrelser til .btn-large, .btn-small, eller .btn-mini.

Kræver javascript

Knap dropdowns kræver Bootstrap dropdown plugin for at fungere.

I nogle tilfælde – som mobil – vil rullemenuerne strække sig uden for visningsporten. Du skal løse justeringen manuelt eller med brugerdefineret javascript.

Overblik og eksempler

Med udgangspunkt i knapgruppestilene og markeringen kan vi nemt oprette en opdelt knap. Split-knapper har en standardhandling til venstre og en rullemenu til højre med kontekstuelle links.

Størrelser

Brug de ekstra knapklasser .btn-mini, .btn-small, eller .btn-largetil størrelse.

<div class = "btn-gruppe" > 
  ...
  <ul class = "rullemenu-træk til højre" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Eksempel markup

Vi udvider de normale knap-rullemenuer for at give en anden knaphandling, der fungerer som en separat dropdown-udlø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 = "dropdown-menu" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Dropup menuer

Rullemenuer kan også skiftes fra bunden og op ved at tilføje en enkelt klasse til den umiddelbare forælder af .dropdown-menu. Det vil vende retningen af .caret​​og flytte selve menuen for at flytte nedefra og op i stedet for top 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 = "dropdown-menu" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Kraftig basisklasse

Alle nav-komponenter her – faner, piller og lister – deler den samme basismarkering og stilarter gennem .navklassen.

Hvornår skal bruges

Faner og piller er gode til sektioner af indhold eller til at navigere mellem sider med relateret indhold.

Komponentjustering

For at justere nav-links skal du bruge hjælpeklasserne .pull-lefteller .pull-right. Begge klasser vil tilføje en CSS-float i den angivne retning.

Grundlæggende faner

Tag en regelmæssig <ul>af links og tilføj .nav-tabs:

• Hjem
• Profil
• Beskeder

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

Grundlæggende piller

Tag den samme HTML, men brug .nav-pillsi stedet:

• Hjem
• Profil
• Beskeder

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

Sådan stables dem

Da faner og piller er vandrette som standard, skal du blot tilføje en anden klasse, .nav-stacked, for at få dem til at se lodret stablet ud.

Stablede faner

• Hjem
• Profil
• Beskeder

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

Stablede piller

• Hjem
• Profil
• Beskeder

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

Rige menuer gjort nemme

Dropdown-menuer i Bootstrap-faner og -piller er superlette og kræver kun lidt ekstra HTML og et letvægts jQuery-plugin.

Gå over til Javascript-siden for at læse dokumenterne om initialisering af dropdowns i Bootstrap.

Faner med rullemenuer

• Hjem
• Hjælp
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li klasse = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Dropdown
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- links -->
    </ul>
  </li>
</ul>

Piller med dropdowns

• Hjem
• Hjælp
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-piller" > 
  <li klasse = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Dropdown
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- links -->
    </ul>
  </li>
</ul>

Navigation i applikationsstil

Nav-lister giver en enkel og nem måde at bygge grupper af nav-links med valgfri overskrifter. De bruges bedst i sidebjælker som Finder i OS X.

Strukturelt er de bygget på de samme centrale nav-stile som faner og piller, så brug og tilpasning er ligetil.

Med ikoner

Nav-lister er også nemme at udstyre med ikoner. Tilføj det rigtige <i>tag med klassen, og du er klar.

Vandrette skillevægge

Tilføj en vandret skillelinje ved at oprette et tomt listeelement med klassen .divider, som sådan:

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

Eksempel på nav-liste

Tag en liste over links og tilføj class="nav nav-list":

<ul class = "nav nav-liste" > 
  <li class = "nav-header" > 
    Listehoved
  </li>
  <li klasse = "aktiv" > 
    <a href = "#" > Startside </a> 
  </li>
  <li>
    <a href = "#" > Bibliotek </a> 
  </li>
  ...
</ul>

Eksempel med ikoner

Samme eksempel, men med <i>tags til ikoner.

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

Hvad er inkluderet

Giv dine faner liv med et simpelt plugin til at skifte mellem indhold via faner. Bootstrap integrerer tabbare faner i fire stilarter: top (standard), højre, bund og venstre.

Det er nemt at skifte mellem dem og kræver kun at ændre meget lidt markering.

Fade i faner

For at få faner til at falme ind, skal du tilføje .fadetil hver .tab-pane.

Kræver jQuery plugin

Alle tabbare faner drives af vores lette jQuery-plugin. Læs mere om, hvordan du bringer tabbare faner til live på javascript-dokumentsiden .

Hent javascript →

Tabbar eksempel

For at gøre faner fanerbare, skal du oprette et .tab-panemed unikt ID for hver fane og pakke dem ind .tab-content.

For højre- eller venstrejusterede faner skal du pakke .nav-tabsog .tab-contentind .tabbable.

Ligetil opmærkning

Brug af tabulatoriske faner kræver en indpaknings-div, et sæt faner og et sæt tabulable ruder med indhold.

<div class = "tabbable" > <-- Kun påkrævet for venstre/højre faner --> 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Sektion 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Afsnit 2 </a></li>  
  </ul>
  <div class = "tab-indhold" > 
    <div class = "tab-panel aktiv" id = "tab1" >  
      <p> Jeg er i sektion 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Hej, jeg er i sektion 2. </p>
    </div>
  </div>
</div>

Faner i bunden

Vend rækkefølgen af ​​HTML og tilføj en klasse for at sætte faner i bunden.

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

Faner til venstre

Skift klassen for at sætte faner til venstre.

<div class = "tabbare faner-venstre" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-indhold" > 
    ...
  </div>
</div>

Faner til højre

Skift klassen for at sætte faner til højre.

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

Navbar stillads

Navigationslinjen kræver kun et par div'er for at strukturere den godt til statisk eller fast visning.

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

Fast navbar

Fastgør navbaren til toppen eller bunden af ​​viewporten med en ekstra klasse på den yderste div, .navbar.

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

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

Når du anbringer navigationslinjen, skal du huske at tage højde for det skjulte område nedenunder. Tilføj 40px eller mere polstring til <body>. Sørg for at tilføje dette efter kerne Bootstrap CSS og før den valgfri responsive CSS.

Mærke navn

Et simpelt link til at vise dit brand- eller projektnavn kræver kun et ankermærke.

<a class = "brand" href = "#" >  
  Projekt navn
</a>

Formularer i navbar

For at style og placere en formular korrekt i navigeringslinjen skal du tilføje de relevante klasser som vist nedenfor. For en standardformular skal du inkludere .navbar-formog enten .pull-lefteller .pull-rightfor at justere den korrekt.

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

For en mere tilpasset søgeformular skal du tilføje .navbar-searchtil formog .search-querytil input for specialiserede stilarter i navigeringslinjen.

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

Valgfri responsiv variation

Afhængigt af mængden af ​​indhold i din topbar, vil du måske implementere de responsive muligheder. For at gøre det skal du pakke dit nav-indhold ind i en indeholdende div, .nav-collapse.collapse, og tilføje navbar-skifteknappen, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-indre" > 
    <div class = "container" > 
 
      <!-- .btn-navbar bruges som til/fra-knap for skjult navbar-indhold -->
      <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 at lade mærket være derude, hvis du vil have det vist -->
      <a class = "brand" href = "#" > Projektnavn </a>  
 
      <!-- Alt hvad du vil have skjult ved 940px eller mindre, placer her -->
      <div class = "nav-kollaps" > 
        <!-- .nav, .navbar-search, .navbar-form osv. -->
      </div>
 
    </div>
  </div>
</div>

Nav links

Nav-elementer er nemme at tilføje via uordnede lister.

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

Du kan nemt tilføje skillelinjer til dine nav-links med et tomt listeelement og en simpel klasse. Bare tilføj dette mellem links:

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

Komponentjustering

For at justere en nav, søgeformular eller tekst skal du bruge hjælpeklasserne .pull-lefteller .pull-right. Begge klasser vil tilføje en CSS-float i den angivne retning.

Tilføjelse af rullemenuer

Tilføjelse af dropdowns og dropups til nav er super simpelt, men kræver brug af vores javascript plugin .

<ul class = "nav" > 
  <li klasse = "dropdown" > 
    <a href = "#" 
          klasse = "dropdown-toggle"
          data-toggle = "dropdown" >
          Konto
          <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Hent javascript →

Tekst i navigeringslinjen

Pak tekststrenge ind i en <.navbar-text>, normalt på et <p>tag for at få den rigtige linjeføring og farve.

Hvorfor bruge dem

Brødkrumme-navigation bruges som en måde at vise brugere, hvor de er i en app eller et websted, men ikke til primær navigation. Hold deres brug sparsom og kortfattet for at være mest effektiv.

Eksempler

Et enkelt eksempel vist, da det kan blive vist på tværs af flere sider.

• Hjem

• Hjem /
• Bibliotek

• Hjem /
• Bibliotek /
• Data

Markup

HTML er din standard uordnede liste med links.

<ul class = "brødkrumme" > 
  <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>

Hvornår skal bruges

Ultra forenklet og minimalistisk paginering inspireret af Rdio, fantastisk til apps og søgeresultater. Den store blok er svær at gå glip af, let skalerbar og giver store klikområder.

Stateful sidelinks

Links kan tilpasses og fungerer under en række omstændigheder med den rigtige klasse. .disabledfor uklikbare links og .activefor den aktuelle side.

Fleksibel justering

Tilføj en af ​​to valgfrie klasser for at ændre justeringen af ​​sideinddelingslinks: .pagination-centeredog .pagination-right.

Eksempler

Standardpagineringskomponenten er fleksibel og fungerer i en række variationer.

Markup

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

<div class = "paginering" > 
  <ul>
    <li><a href = "#" > Forrige </a></li> 
    <li klasse = "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æste </a></li> 
  </ul>
</div>

Om personsøger

Personsøger-komponenten er et sæt links til simple pagineringsimplementeringer med let markering og endnu lettere stilarter. Det er fantastisk til simple websteder som blogs eller magasiner.

Valgfri deaktiveret tilstand

Pager-links bruger også den generelle .disabledklasse fra pagineringen.

Standard eksempel

Som standard centrerer personsøgeren links.

• Tidligere
• Næste

<ul class = "personsøger" > 
  <li>
    <a href = "#" > Forrige </a> 
  </li>
  <li>
    <a href = "#" > Næste </a> 
  </li>
</ul>

Justerede links

Alternativt kan du justere hvert link til siderne:

• ← Ældre
• Nyere →

<ul class = "personsøger" > 
  <li klasse = "forrige" > 
    <a href = "#" > ← Ældre </a> 
  </li>
  <li klasse = "næste" > 
    <a href = "#" > Nyere → </a> 
  </li>
</ul>

Om

Badges er små, enkle komponenter til at vise en indikator eller et antal af en slags. De findes almindeligvis i e-mail-klienter som Mail.app eller på mobilapps til push-meddelelser.

Tilgængelige klasser

Bootstrap giver en let, fleksibel komponent kaldet en heltenhed til at vise indhold på dit websted. Det fungerer godt på marketing- og indholdstunge sider.

Markup

Pak dit indhold ind i en divsådan:

<div class = "hero-unit" > 
  <h1> Overskrift </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Lær mere
    </a>
  </p>
</div>

En simpel skal h1til passende afstand og segmentering af sektioner af indhold på en side. Det kan bruge h1standardelementet small, såvel som de fleste andre komponenter (med yderligere stilarter).

<div class = "page-header" > 
  <h1> Eksempel på sidehoved </h1>
</div>

Standard miniaturebilleder

Bootstraps thumbnails er som standard designet til at vise sammenkædede billeder med minimalt påkrævet opmærkning.

Meget tilpasselig

Med lidt ekstra markering er det muligt at tilføje enhver form for HTML-indhold som overskrifter, afsnit eller knapper til miniaturebilleder.

• 

  Miniaturelabel

  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

• 

  Miniaturelabel

  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 bruge thumbnails

Miniaturebilleder (tidligere .media-gridindtil v1.4) er fantastiske til gitter af fotos eller videoer, billedsøgeresultater, detailprodukter, porteføljer og meget mere. De kan være links eller statisk indhold.

Enkel, fleksibel markering

Opmærkning af miniaturebilleder er enkel - en ulmed et vilkårligt antal lielementer er alt, der kræves. Det er også super fleksibelt, hvilket giver mulighed for enhver type indhold med bare en smule mere markering til at pakke dit indhold.

Bruger gitterkolonnestørrelser

Til sidst bruger thumbnails-komponenten eksisterende gittersystemklasser – som .span2eller .span3– til kontrol af thumbnail-dimensioner.

Markup

Som tidligere nævnt er den nødvendige markering for miniaturebilleder let og ligetil. Her er et kig på standardopsætningen for linkede billeder :

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

For tilpasset HTML-indhold i miniaturebilleder ændres opmærkningen lidt. For at tillade indhold på blokniveau overalt, bytter vi ud <a>med et <div>lignende:

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

Flere eksempler

Udforsk alle dine muligheder med de forskellige gitterklasser, der er tilgængelige for dig. Du kan også mikse og matche forskellige størrelser.

Omskrevet basisklasse

Med Bootstrap 2 har vi forenklet basisklassen: .alerti stedet for .alert-message. Vi har også reduceret den mindste krævede markering - nej <p>er påkrævet som standard, kun den ydre <div>.

Enkelt alarmbesked

For en mere holdbar komponent med mindre kode har vi fjernet det differentierende udseende for blokadvarsler, meddelelser, der kommer med mere udfyldning og typisk mere tekst. Klassen er også ændret til .alert-block.

Går godt med javascript

Bootstrap kommer med et fantastisk jQuery-plugin, der understøtter alarmbeskeder, hvilket gør det hurtigt og nemt at afvise dem.

Hent plugin »

Eksempler på advarsler

Pak din besked og et valgfrit lukkeikon ind i en div med enkel klasse.

<div class = "alert" > 
  <button class = "close" data-dismiss = "alert" > × </button>  
  <strong> Advarsel! </strong> Tjek bedst selv, du ser ikke for godt ud.
</div>

Heads up! iOS-enheder kræver en href="#"for afvisning af advarsler. Sørg for at inkludere den og dataattributten for ankerlukningsikoner. Alternativt kan du bruge et buttonelement med dataattributten, hvilket vi har valgt at gøre for vores dokumenter.

Udvid nemt standardadvarselsmeddelelsen med to valgfrie klasser: .alert-blockfor mere udfyldning og tekstkontrol og .alert-headingfor en matchende overskrift.

<div class = "alarm alert-block" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" > Advarsel! </h4> 
  Bedst tjek dig selv, du er ikke...
</div>

Fejl eller fare

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

Succes

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

Information

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

Grundlæggende

Standard statuslinje med en lodret gradient.

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

Stribet

Bruger en gradient til at skabe en stribet effekt (ingen IE).

<div class = "fremskridt fremskridt-stribet" > 
  <div klasse = "bar" 
       style = " bredde : 20 %; " ></div> 
</div>

Animeret

Tager det stribede eksempel og animerer det (ingen IE).

<div class = "fremskridt fremskridt-stribet 
     aktiv" >
  <div klasse = "bar" 
       style = " bredde : 40 %; " ></div> 
</div>

Yderligere farver

Fremskridtslinjer bruger nogle af de samme knap- og advarselsklasser til ensartede stilarter.

Stribede stænger

I lighed med de solide farver har vi varierede stribede fremskridtsbjælker.

Opførsel

Fremskridtsbjælker bruger CSS3-overgange, så hvis du dynamisk justerer bredden via javascript, ændres størrelsen jævnt.

Hvis du bruger .activeklassen, vil dine .progress-stripedfremskridtsbjælker animere striberne fra venstre mod højre.

Browser support

Fremskridtsbjælker bruger CSS3-gradienter, overgange og animationer til at opnå alle deres effekter. Disse funktioner understøttes ikke i IE7-9 eller ældre versioner af Firefox.

Opera og IE understøtter ikke animationer på nuværende tidspunkt.

Wells

Brug brønden som en simpel effekt på et element for at give det en indsat effekt.

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

Luk ikon

Brug det generiske lukkeikon til at afvise indhold som modals og advarsler.

×

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

iOS-enheder kræver et href="#" for klikhændelser, hvis du hellere bruger et anker.

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