Групы кнопак

Выкарыстоўвайце групы кнопак, каб аб'яднаць некалькі кнопак у адзін састаўны кампанент. Пабудуйце іх з серыі <a>або <button>элементаў.

Лепшыя практыкі

Мы рэкамендуем наступныя рэкамендацыі па выкарыстанні груп кнопак і панэляў інструментаў:

• Заўсёды выкарыстоўвайце адзін і той жа элемент у адной групе кнопак <a>або <button>.
• Не змешвайце кнопкі розных колераў у адной групе кнопак.
• Выкарыстоўвайце значкі ў дадатак да тэксту або замест яго, але не забудзьцеся ўключыць альтэрнатыўны тэкст і тэкст загалоўка, дзе гэта неабходна.

Звязаныя групы кнопак з выпадаючымі спісамі (гл. ніжэй) трэба выклікаць асобна і заўсёды ўключаць у сябе выпадальны спіс, каб паказаць меркаваныя паводзіны.

Прыклад па змаўчанні

Вось як выглядае HTML для стандартнай групы кнопак, створанай з дапамогай кнопак тэгаў прывязкі:

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

Прыклад панэлі інструментаў

Аб'яднайце наборы <div class="btn-group">ў <div class="btn-toolbar">больш складаныя кампаненты.

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Сцяжок і радыё густы

Групы кнопак таксама могуць функцыянаваць як радыё, дзе актыўнай можа быць толькі адна кнопка, або як сцяжкі, дзе можа быць актыўная любая колькасць кнопак. Для гэтага праглядзіце дакументы Javascript .

Атрымаць javascript »

Галава ўверх

CSS для груп кнопак знаходзіцца ў асобным файле button-groups.less.

Выпадаючыя кнопкі

Выкарыстоўвайце любую кнопку, каб выклікаць выпадаючае меню, размясціўшы яго ў межах .btn-groupі задаўшы належную разметку меню.

Галаву ўверх! Для функцыянавання выпадальных спісаў кнопак патрабуецца плагін Bootstrap .

Прыклад разметкі

Падобна групе кнопак, наша разметка выкарыстоўвае звычайную разметку кнопак, але з некалькімі дапаўненнямі для ўдасканалення стылю і падтрымкі плагіна jQuery, які расчыняецца ў Bootstrap.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Дзеянне
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- спасылкі на выпадальнае меню -->
  </ul>
</div>

Выпадаючыя спісы кнопак

Грунтуючыся на стылях груп кнопак і разметцы, мы можам лёгка стварыць раздзельную кнопку. Раздзеленыя кнопкі маюць стандартнае дзеянне злева і выпадальны пераключальнік справа з кантэкстнымі спасылкамі.

Прыклад разметкі

Мы пашыраем звычайныя выпадальныя спісы кнопак, каб забяспечыць дзеянне другой кнопкі, якое працуе як асобны трыгер выпадальнага меню.

<div class = "btn-group" > 
  <a class = "btn" href = "#" > Дзеянне </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- спасылкі на выпадальнае меню -->
  </ul>
</div>

Магутны базавы клас

Усе навігацыйныя кампаненты тут - укладкі, таблеткі і спісы - маюць аднолькавую базавую разметку і стылі ва ўсім .navкласе.

Калі выкарыстоўваць

Укладкі і таблеткі выдатна падыходзяць для раздзелаў кантэнту або навігацыі паміж старонкамі падобнага кантэнту.

Выраўноўванне кампанентаў

Каб выраўнаваць навігацыйныя спасылкі, выкарыстоўвайце дапаможныя класы .pull-leftабо . .pull-rightАбодва класы дададуць CSS float у паказаным кірунку.

Асноўныя ўкладкі

Вазьміце звычайныя <ul>спасылкі і дадайце .nav-tabs:

• дадому
• Профіль
• Паведамленні

<ul class = "nav nav-tabs" > 
  <li class = "актыўны" > 
    <a href = "#" > Галоўная </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Базавыя таблеткі

Вазьміце той жа HTML, але выкарыстоўвайце .nav-pillsзамест гэтага:

• дадому
• Профіль
• Паведамленні

<ul class = "nav nav-pills" > 
  <li class = "актыўны" > 
    <a href = "#" > Галоўная </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Як скласці іх

Паколькі ўкладкі і таблеткі гарызантальныя па змаўчанні, проста дадайце другі клас, .nav-stackedкаб яны выглядалі вертыкальна складзенымі.

Складаныя ўкладкі

• дадому
• Профіль
• Паведамленні

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

Складзеныя таблеткі

• дадому
• Профіль
• Паведамленні

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

Багатае меню стала простым

Выпадаючыя меню ва ўкладках і таблетках Bootstrap вельмі простыя і патрабуюць толькі крыху дадатковага HTML і лёгкага плагіна jQuery.

Перайдзіце на старонку Javascript, каб прачытаць дакументы па ініцыялізацыі выпадаючых меню ў Bootstrap.

Укладкі з выпадальным меню

• дадому
• Профіль
• Падаць
  • Дзеянне
  • Чарговая акцыя
  • Тут яшчэ нешта
  • Раздзельная спасылка

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "выпадальны спіс"
       href = "#" >
        Падаць
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- спасылкі -->
    </ul>
  </li>
</ul>

Таблеткі з выпадальным меню

• дадому
• Профіль
• Падаць
  • Дзеянне
  • Чарговая акцыя
  • Тут яшчэ нешта
  • Раздзельная спасылка

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "выпадальны спіс"
       href = "#" >
        Падаць
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- спасылкі -->
    </ul>
  </li>
</ul>

Навігацыя ў стылі прыкладання

Навігацыйныя спісы забяспечваюць просты і лёгкі спосаб стварэння груп навігацыйных спасылак з дадатковымі загалоўкамі. Іх лепш за ўсё выкарыстоўваць у бакавых панэлях, такіх як Finder у OS X.

Структурна яны пабудаваны на тых жа асноўных стылях навігацыі, што і ўкладкі і таблеткі, таму выкарыстанне і налада простыя.

З абразамі

Навігацыйныя спісы таксама лёгка абсталяваць значкамі. Дадайце належны <i>тэг з класам, і ўсё гатова.

Прыклад спісу навігацый

Вазьміце спіс спасылак і дадайце class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Загаловак спісу
  </li>
  <li class = "актыўны" > 
    <a href = "#" > Галоўная </a> 
  </li>
  <li>
    <a href = "#" > Бібліятэка </a> 
  </li>
  ...
</ul>

Прыклад са значкамі

Той жа прыклад, але з <i>тэгамі для значкоў.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      Бібліятэка
    </a>
  </li>
  ...
</ul>

Што ўваходзіць

Ажывіце свае ўкладкі з дапамогай простага плагіна для пераключэння паміж змесцівам праз укладкі. Bootstrap аб'ядноўвае ўкладкі ў чатырох стылях: зверху (па змаўчанні), справа, знізу і злева.

Пераключацца паміж імі лёгка і патрабуе змены вельмі невялікай разметкі.

Прыклад з укладкамі

Каб зрабіць табуляцыю табуляцыяй, перанясіце .nav-tabsў іншы div з дапамогай класа .tabbable.

Карыстальніцкі плагін jQuery

Усе ўкладкі з магчымасцю ўкладак працуюць на аснове нашага лёгкага плагіна jQuery. Чытайце больш пра тое, як ажывіць укладкі з магчымасцю ўкладак, на старонцы дакументацыі javascript.

Атрымаць javascript →

Язычкі ўнізе

Перавярніце парадак HTML і дадайце клас для размяшчэння ўкладак унізе.

<div class = "tabbable tabs-below" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Укладкі злева

Памяняйце клас, каб паставіць табуляцыю злева.

<div class = "tabbable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Укладкі справа

Памяняйце клас, каб паставіць табуляцыю справа.

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Навбар рыштаванні

Навігацыйная панэль патрабуе ўсяго некалькіх элементаў div, каб добра структураваць яе для статычнага або фіксаванага адлюстравання.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "кантэйнер" > 
      ...
    </div>
  </div>
</div>

Выпраўлена панэль навігацыі

Каб панэль навігацыі замацавалася ў верхняй частцы акна прагляду, дадайце .navbar-fixed-topда вонкавага элемента div, .navbar.

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

У вашым CSS вам таксама трэба будзе ўлічыць перакрыцце, якое яно выклікае, дадаўшы 40 пікселяў або больш запаўнення да вашага <body>. Абавязкова дадайце гэта пасля асноўнага CSS Bootstrap і перад дадатковым спагадным CSS.

Назва брэнда

Простая спасылка, каб паказаць назву вашага брэнда або праекта, патрабуе толькі тэга якара.

<a class = "brand" href = "#" >  
  Назва праекта
</a>

Форма пошуку

Формы пошуку атрымліваюць уласныя стылі ў панэлі навігацыі разам з .navbar-searchкласам. Уключыце .pull-leftабо .pull-rightна , formкаб выраўнаваць яго.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Search" >   
</form>

Дадатковы адаптыўны варыянт

У залежнасці ад колькасці змесціва ў вашай верхняй панэлі, вы можаце захацець укараніць адаптыўныя параметры. Каб зрабіць гэта, абгарніце ваш навігацыйны кантэнт у які змяшчае div, .nav-collapse.collapseі дадайце кнопку пераключэння навігацыйнай панэлі, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "кантэйнер" > 
 
      <!-- .btn-navbar выкарыстоўваецца ў якасці пераключальніка для згорнутага змесціва панэлі навігацыі -->
      <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>
 
      <!-- Не забудзьцеся пакінуць брэнд, калі хочаце, каб ён быў паказаны -->
      <a class = "brand" href = "#" > Назва праекта </a>  
 
      <!-- Усё, што вы хочаце схаваць у памеры 940 пікселяў або менш, змесціце сюды -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form і г.д. -->
      </div>
 
    </div>
  </div>
</div>

Навігацыйныя спасылкі

Навігацыйныя элементы лёгка дадаваць з дапамогай неўпарадкаваных спісаў.

<ul class = "nav" > 
  <li class = "актыўны" > 
    <a href = "#" > Галоўная </a> 
  </li>
  <li><a href = "#" > Спасылка </a></li> 
  <li><a href = "#" > Спасылка </a></li> 
</ul>

Вы можаце лёгка дадаць падзельнікі да вашых навігацыйных спасылак з дапамогай пустога элемента спісу і простага класа. Проста дадайце гэта паміж спасылкамі:

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

Выраўноўванне кампанентаў

Каб выраўнаваць навігацыю, форму пошуку або тэкст, выкарыстоўвайце ўтыліты .pull-leftабо .pull-rightкласы. Абодва класы дададуць CSS float у паказаным кірунку.

Даданне выпадаючых спісаў

Дадаць выпадальныя спісы ў навігацыю вельмі проста, але для гэтага патрабуецца выкарыстанне нашага плагіна JavaScript .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          клас = "выпадальны спіс-пераключэнне"
          data-toggle = "выпадальны спіс" >
          Рахунак
          <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Атрымаць javascript →

Навошта іх выкарыстоўваць

Навігацыя па навігацыі выкарыстоўваецца як спосаб паказаць карыстальнікам, дзе яны знаходзяцца ў праграме або на сайце, але не для асноўнай навігацыі. Каб яны былі найбольш эфектыўнымі, выкарыстоўвайце іх разрэджана і лаканічна.

Прыклады

Паказаны адзіны прыклад, які можа быць адлюстраваны на некалькіх старонках.

• дадому

• Галоўная /
• Бібліятэка

• Галоўная /
• Бібліятэка /
• даныя

Разметка

HTML - гэта ваш стандартны неўпарадкаваны спіс са спасылкамі.

<ul class = "хлебная дробка" > 
  <li>
    <a href = "#" > Галоўная </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Бібліятэка </a> <span class = "divider" > / </span>   
  </li>
  <li class = "актыўны" > 
    <a href = "#" > Даныя </a> 
  </li>
</ul>

Калі выкарыстоўваць

Вельмі спрошчаная і мінімальна аформленая пагінацыя, натхнёная Rdio, выдатна падыходзіць для праграм і вынікаў пошуку. Вялікі блок цяжка прапусціць, ён лёгка маштабуецца і забяспечвае вялікія вобласці націску.

Спасылкі на старонкі з захаваннем стану

Спасылкі можна наладзіць і працуюць у шэрагу абставінаў з правільным класам. .disabledдля спасылак, па якіх нельга націснуць, і .activeдля бягучай старонкі.

Гнуткае выраўноўванне

Дадайце любы з двух неабавязковых класаў, каб змяніць выраўноўванне спасылак на пагінацыю: .pagination-centeredі .pagination-right.

Прыклады

Кампанент пагінацыі па змаўчанні з'яўляецца гнуткім і працуе ў некалькіх варыяцыях.

Разметка

Загорнута ў <div>, пагінацыя - гэта проста <ul>.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Папярэдняя </a></li> 
    <li class = "актыўны" > 
      <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 = "#" > Далей </a></li> 
  </ul>
</div>

Пра пэйджар

Кампанент пэйджара - гэта набор спасылак для простай пагінацыі з лёгкай разметкай і яшчэ больш лёгкімі стылямі. Гэта выдатна падыходзіць для простых сайтаў, такіх як блогі або часопісы.

Прыклад па змаўчанні

Па змаўчанні пэйджар цэнтруе спасылкі.

• Папярэдні
• Далей

<ul class = "пэйджар" > 
  <li>
    <a href = "#" > Папярэдняя </a> 
  </li>
  <li>
    <a href = "#" > Далей </a> 
  </li>
</ul>

Выраўнаваныя спасылкі

Акрамя таго, вы можаце выраўнаваць кожную спасылку па баках:

• ← Старэйшыя
• Навей →

<ul class = "пэйджар" > 
  <li class = "папярэдні" > 
    <a href = "#" > ← Старэйшы </a> 
  </li>
  <li class = "наступны" > 
    <a href = "#" > Навейшы → </a> 
  </li>
</ul>

Bootstrap забяспечвае лёгкі, гнуткі кампанент, які называецца hero unit, для дэманстрацыі кантэнту на вашым сайце. Ён добра працуе на маркетынгавых і багатых кантэнтам сайтах.

Разметка

Абгарніце свой кантэнт divтакім чынам:

<div class = "hero-unit" > 
  <h1> Загаловак </h1>
  <p> Слоган </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Даведайцеся больш
    </a>
  </p>
</div>

Простая абалонка для адпаведнага h1размеркавання і сегментацыі раздзелаў кантэнту на старонцы. Ён можа выкарыстоўваць элемент h1па змаўчанні small, а таксама большасць іншых кампанентаў (з дадатковымі стылямі).

<div class = "page-haeder" > 
  <h1> Прыклад загалоўка старонкі </h1>
</div>

Эскізы па змаўчанні

Па змаўчанні мініяцюры Bootstrap прызначаны для дэманстрацыі звязаных малюнкаў з мінімальнай неабходнай разметкай.

Вельмі наладжвальны

З невялікай колькасцю дадатковай разметкі можна дадаваць у мініяцюры любы від HTML-кантэнту, напрыклад загалоўкі, абзацы або кнопкі.

• 

  Этыкетка мініяцюры

  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.

  Дзеянне Дзеянне

• 

  Этыкетка мініяцюры

  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.

  Дзеянне Дзеянне

Навошта выкарыстоўваць мініяцюры

Эскізы (раней .media-gridда версіі 1.4) выдатна падыходзяць для сетак фатаграфій і відэа, вынікаў пошуку малюнкаў, рознічных тавараў, партфоліо і шмат чаго іншага. Гэта могуць быць спасылкі або статычны кантэнт.

Простая, гнуткая разметка

Разметка мініяцюр простая - усё, што патрабуецца, - ulз любой колькасцю элементаў. liЁн таксама надзвычай гнуткі, дазваляе ахопліваць любы тып змесціва з крыху большай разметкай.

Выкарыстоўвае памеры слупкоў сеткі

І, нарэшце, кампанент мініяцюр выкарыстоўвае існуючыя класы сістэмы сеткі, такія як .span2або , .span3для кіравання памерамі мініяцюр.

Разметка

Як згадвалася раней, неабходная разметка для мініяцюр лёгкая і простая. Вось агляд налад па змаўчанні для звязаных малюнкаў :

<ul class = "мініяцюры" > 
  <li class = "span3" > 
    <a href = "#" class = "мініяцюра" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Для карыстацкага змесціва HTML у эскізах разметка нязначна мяняецца. Каб дазволіць змесціва на ўзроўні блока дзе заўгодна, мы мяняем яго <a>на <div>такі:

<ul class = "мініяцюры" > 
  <li class = "span3" > 
    <div class = "мініяцюра" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Пазнака мініяцюры </h5>
      <p> Мініяцюра подпісу тут... </p>
    </div>
  </li>
  ...
</ul>

Больш прыкладаў

Вывучыце ўсе свае варыянты з дапамогай розных даступных класаў сеткі. Вы таксама можаце спалучаць розныя памеры.

Перапісаны базавы клас

З дапамогай Bootstrap 2 мы спрасцілі базавы клас: .alertзамест .alert-message. Мы таксама скарацілі мінімальна неабходную разметку <p>— па змаўчанні не патрабуецца, толькі знешні <div>.

Адзінае папярэджанне

Каб атрымаць больш трывалы кампанент з меншай колькасцю кода, мы выдалілі дыферэнцыяльны выгляд для папярэджанняў аб блакіроўцы, паведамленняў, якія прыходзяць з большай запаўненнем і звычайна больш тэксту. Клас таксама змяніўся на .alert-block.

Выдатна спалучаецца з javascript

Bootstrap пастаўляецца з выдатным убудовай jQuery, які падтрымлівае паведамленні абвестак, што робіць іх адхіленне хуткім і простым.

Атрымаць убудову »

Прыклады абвестак

Абгарніце паведамленне і неабавязковы значок закрыцця ў div з простым класам.

<div class = "alert" > 
  <a class = "close" data-dismiss = "alert" > × </a>  
  <strong> Увага! </strong> Лепш праверце сябе, вы выглядаеце не надта добра.
</div>

Лёгка пашырыце стандартнае папярэджальнае паведамленне двума дадатковымі класамі: .alert-blockдля дадатковых элементаў кіравання запаўненнем і тэкстам і .alert-headingдля адпаведнага загалоўка.

<div class = "alert alert-block" > 
  <a class = "close" data-dismiss = "alert" > × </a>  
  <h4 class = "alert-heading" > Увага! </h4> 
  Лепш праверце сябе, вы не...
</div>

Памылка або небяспека

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

Поспех

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

інфармацыя

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

Базавы

Індыкатар выканання па змаўчанні з вертыкальным градыентам.

<div class = "прагрэс" > 
  <div class = "бар" 
       style = " шырыня : 60 %; " ></div> 
</div>

Паласаты

Выкарыстоўвае градыент для стварэння паласатага эфекту.

<div class = "інфармацыя аб прагрэсе 
     прагрэс-паласаты" >
  <div class = "бар" 
       style = " шырыня : 20 %; " ></div> 
</div>

Аніміраваныя

Бярэ паласаты прыклад і ажыўляе яго.

<div class = "прагрэс прагрэс-небяспека 
     прагрэс-паласаты актыўны" >
  <div class = "бар" 
       style = " шырыня : 40 %; " ></div> 
</div>

Дадатковыя колеры

Панэлі прагрэсу выкарыстоўваюць некаторыя з тых жа назваў класаў, што і кнопкі і абвесткі для падобнага стылю.

• .progress-info
• .progress-success
• .progress-danger

У якасці альтэрнатывы вы можаце наладзіць файлы LESS і згарнуць свае колеры і памеры.

Паводзіны

У панэлі прагрэсу выкарыстоўваюцца пераходы CSS3, таму, калі вы дынамічна наладжваеце шырыню з дапамогай JavaScript, памер будзе плаўна змяняцца.

Калі вы карыстаецеся .activeкласам, вашы .progress-stripedпанэлі прагрэсу будуць ажыўляць палоскі злева направа.

Падтрымка браўзераў

Паласы прагрэсу выкарыстоўваюць градыенты, пераходы і анімацыю CSS3 для дасягнення ўсіх іх эфектаў. Гэтыя функцыі не падтрымліваюцца ў IE7-8 і больш старых версіях Firefox.

Opera зараз не падтрымлівае анімацыю.

Уэлс

Выкарыстоўвайце калодзеж як просты эфект для элемента, каб надаць яму эфект урэзкі.

<div class = "ну" > 
  ...
</div>

Значкі

Выкарыстоўвайце значок на элеменце для падліку непрачытаных або ў якасці простага індыкатара.

<span class = "badge" > 3 </div> 

Значок закрыцця

Выкарыстоўвайце агульны значок закрыцця для адхілення змесціва, напрыклад мадалаў і абвестак.

×

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