Прыклад

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

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Дзеянне </a></li>  
  <li><a tabindex = "-1" href = "#" > Яшчэ адно дзеянне </a></li>  
  <li><a tabindex = "-1" href = "#" > Тут яшчэ нешта </a></li>  
  <li class = "падзельнік" ></li> 
  <li><a tabindex = "-1" href = "#" > Асобная спасылка </a></li>  
</ul>

Разметка

Гледзячы толькі на выпадальнае меню, вось патрэбны HTML. Вам трэба абгарнуць трыгер выпадальнага меню і выпадальнае меню ў .dropdownабо іншы элемент, які абвяшчае position: relative;. Затым проста стварыце меню.

<div class = "dropdown" > 
  <!-- Спасылка або кнопка для пераключэння выпадаючага меню -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Дзеянне </a></li>  
    <li><a tabindex = "-1" href = "#" > Яшчэ адно дзеянне </a></li>  
    <li><a tabindex = "-1" href = "#" > Тут яшчэ нешта </a></li>  
    <li class = "падзельнік" ></li> 
    <li><a tabindex = "-1" href = "#" > Асобная спасылка </a></li>  
  </ul>
</div>

Параметры

Выраўняйце меню па правым краі і дадайце дадатковыя ўзроўні выпадаючых спісаў.

Выраўноўванне меню

Дадайце .pull-rightда .dropdown-menuвыраўноўвання выпадальнага меню па правым краі.

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Адключаныя параметры меню

Дадайце .disabledў <li>выпадальнае меню, каб адключыць спасылку.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Звычайная спасылка </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Адключаная спасылка </a></li>   
  <li><a tabindex = "-1" href = "#" > Іншая спасылка </a></li>  
</ul>

Падменю ў выпадальных меню

Дадайце дадатковы ўзровень выпадаючых меню, якія з'яўляюцца пры навядзенні курсора, як у OS X, з некаторымі простымі дапаўненнямі разметкі. Дадайце .dropdown-submenuлюбы liў існуючым выпадальным меню для аўтаматычнага стылю.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > Дадатковыя параметры </a>  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Прыклады

Два асноўных варыянту, разам з двума больш спецыфічнымі варыянтамі.

Група адной кнопкі

Загарніце шэраг гузікаў .btnунутр .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Налева </button> 
  <button class = "btn" > Сярэдні </button> 
  <button class = "btn" > Направа </button> 
</div>

Некалькі груп кнопак

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

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

Вертыкальныя групы кнопак

Зрабіце набор кнопак размешчаным вертыкальна, а не гарызантальна.

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

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

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

Выпадальныя меню ў групах кнопак

Галаву ўверх!Для належнага адлюстравання кнопкі з выпадаючымі спісамі павінны быць асобна загорнуты .btn-groupў свае ўласныя ..btn-toolbar

Агляд і прыклады

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

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

Працуе з кнопкамі ўсіх памераў

Выпадальныя спісы кнопак працуюць любога памеру: .btn-large, .btn-smallабо .btn-mini.

Патрабуецца JavaScript

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

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

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

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

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

Памеры

Выкарыстоўвайце дадатковыя класы кнопак .btn-mini, .btn-small, або .btn-largeдля памеру.

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

Выпадальныя меню

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

<div class = "btn-group dropup" > 
  <button class = "btn" > Выпадальнае акно </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- спасылкі на выпадальнае меню -->
  </ul>
</div>

Лёгкія значэнні па змаўчанні Тая ж разметка, розныя класы

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

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

Вазьміце звычайныя <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>

Інвалідны стан

Для любога навігацыйнага кампанента (укладкі, таблеткі або спіс) дадайце шэрыя спасылкі без эфектаў.disabled навядзення . Спасылкі застануцца даступнымі для націскання, пакуль вы не выдаліце ​​атрыбут. У якасці альтэрнатывы вы можаце рэалізаваць уласны JavaScript, каб прадухіліць гэтыя клікі.href

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

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

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

Штабельныя

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

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

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

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

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

Выпадальныя спісы

Дадайце выпадаючыя меню з невялікай колькасцю дадатковага HTML і плагіна для выпадаючых спісаў JavaScript .

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

<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.

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

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

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

НататкаДля ўкладання ў спіс навігацыі ўключыце class="nav nav-list"любы ўкладзены <ul>.

Гарызантальныя падзельнікі

Дадайце гарызантальны падзельнік, стварыўшы пусты элемент спісу з класам .divider, напрыклад:

<ul class = "nav nav-list" > 
  ...
  <li class = "падзельнік" ></li> 
  ...
</ul>

Навігацыя з укладкамі

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

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

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

<div class = "tabbable" > <!-- Патрабуецца толькі для левых/правых укладак -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Раздзел 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Раздзел 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "актыўная панэль укладак" id = "tab1" >  
      <p> Я ў раздзеле 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Прывітанне, я ў раздзеле 2. </p>
    </div>
  </div>
</div>

Знікае ва ўкладках

Каб укладкі знікалі, дадайце .fadeда кожнай .tab-pane.

Патрабуецца плагін jQuery

Усе ўкладкі з магчымасцю ўкладак працуюць на аснове нашага лёгкага плагіна jQuery. Чытайце больш пра тое, як ажывіць укладкі з укладкамі, на старонцы дакументаў 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>

Базавая панэль навігацыі

Для пачатку панэлі навігацыі статычныя (не замацаваныя ўверсе) і ўключаюць падтрымку назвы праекта і базавай навігацыі. Размясціце адзін у любым месцы ў межах .container, які задае шырыню вашага сайта і змесціва.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Назва </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Галоўная </a></li>  
      <li><a href = "#" > Спасылка </a></li> 
      <li><a href = "#" > Спасылка </a></li> 
    </ul>
  </div>
</div>

Кампаненты Navbar

Марка

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

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

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

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

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

Формы

Каб правільна стылізаваць і размясціць форму ў панэлі навігацыі, дадайце адпаведныя класы, як паказана ніжэй. Для формы па змаўчанні ўключыце .navbar-formабо .pull-leftабо .pull-right, каб правільна выраўнаваць яе.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > Адправіць </button>  
</form>

Форма пошуку

Для больш наладжанай формы пошуку дадайце і .navbar-searchда ўводу спецыялізаваных стыляў на панэлі навігацыі.form.search-query

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

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

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

Выкарыстанне выпадаючых спісаў

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

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      Рахунак
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Наведайце дакументацыю па выпадаючых спісах JavaScript, каб атрымаць дадатковую разметку і інфармацыю аб выкліку выпадальных меню.

Тэкст

Абгарніце радкі тэксту ў элеменце з .navbar-text, як правіла, на <p>тэгу для правільнага ініцыялізацыі і колеру.

Дадатковыя варыянты адлюстравання

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

Замацаваны наверсе

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

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

Фіксуецца ўнізе

Дадаць .navbar-fixed-bottomзамест гэтага.

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

Статычная верхняя панэль навігацыі

Стварыце панэль навігацыі на поўную шырыню, якая пракручваецца разам са старонкай, дадаўшы .navbar-static-top. У адрозненне ад .navbar-fixed-topкласа, вам не трэба змяняць абіўку на body.

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

Адаптыўная панэль навігацыі

Каб рэалізаваць адаптыўную навігацыйную панэль, якая згортваецца, абгарніце змесціва навігацыйнай панэлі ў які змяшчае 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 collapse" > 
        <!-- .nav, .navbar-search, .navbar-form і г.д. -->
      </div>
 
    </div>
  </div>
</div>

Перавернутая варыяцыя

Змяніце выгляд панэлі навігацыі, дадаўшы .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Прыклады

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

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

Стандартная пагінацыя

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

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

Параметры

Адключаны і актыўны стану

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

<div class = "pagination" > 
  <ul>
    <li class = "disabled" ><a href = "#" > « </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

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

<div class = "pagination" > 
  <ul>
    <li class = "disabled" ><span> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Памеры

Хочаце пагінацыю большага ці меншага памеру? Дадайце .pagination-large, .pagination-small, або .pagination-miniдля дадатковых памераў.

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Выраўноўванне

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

<div class = "pagination pagination-centered" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</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>

Неабавязковы адключаны стан

Спасылкі на пэйджэр таксама выкарыстоўваюць агульны .disabledклас карыснасці з пагінацыі.

<ul class = "пэйджар" > 
  <li class = "папярэдні адключаны" > 
    <a href = "#" > ← Старэйшы </a> 
  </li>
  ...
</ul>

Этыкеткі

Значкі

Лёгка разборная

Для палягчэння ўкаранення цэтлікі і значкі проста згортваюцца (праз :emptyселектар CSS), калі ў іх няма змесціва.

Адзінка героя

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

<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-header" > 
  <h1> Прыклад загалоўка старонкі <small> Падтэкст для загалоўка </small></h1>
</div>

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

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

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

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

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

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

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

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

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

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

Разметка

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

<ul class = "мініяцюры" > 
  <li class = "span4" > 
    <a href = "#" class = "мініяцюра" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "мініяцюры" > 
  <li class = "span4" > 
    <div class = "мініяцюра" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Этыкетка эскіза </h3>
      <p> Мініяцюра подпісу... </p>
    </div>
  </li>
  ...
</ul>

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

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

Абвестка па змаўчанні

Абгарніце любы тэкст і дадатковую кнопку адхілення .alertдля асноўнага папярэджання.

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

Кнопкі адхілення

Мабільныя браўзэры Safari і Mobile Opera, у дадатак да data-dismiss="alert"атрыбуту, патрабуюць href="#"адхілення абвестак пры выкарыстанні <a>тэга.

<a href = "#" class = "close" data-dismiss = "alert" > × </a>   

Акрамя таго, вы можаце выкарыстоўваць <button>элемент з атрыбутам data, што мы вырашылі зрабіць для нашых дакументаў. Пры выкарыстанні <button>вы павінны ўключыць, type="button"інакш вашыя формы могуць не быць адпраўлены.

<button type = "button" class = "close" data-dismiss = "alert" > × </button>   

Адхіляць абвесткі праз JavaScript

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

Параметры

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

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

Кантэкстныя альтэрнатывы

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

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

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

Поспех

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

інфармацыя

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

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

Базавы

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

<div class = "прагрэс" > 
  <div class = "bar" style = " width : 60 %; " ></div>   
</div>

Паласаты

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

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

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

Дадайце .activeдля .progress-stripedажыўлення палос справа налева. Недаступна ва ўсіх версіях IE.

<div class = "progress progress-striped active" > 
  <div class = "bar" style = " width : 40 %; " ></div>   
</div>

Складзены

Змесціце некалькі брускоў у адзін і той жа .progress, каб скласці іх.

<div class = "прагрэс" > 
  <div class = "bar bar-success" style = " width : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " width : 10 %; " ></div>   
</div>

Параметры

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

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

<div class = "progress progress-info" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "прагрэс прагрэс-поспех" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "прагрэс прагрэс-папярэджанне" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Паласатыя краты

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

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progress progress-success progress-striped" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

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

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

Версіі да Internet Explorer 10 і Opera 12 не падтрымліваюць анімацыю.

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

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

Носьбіт па змаўчанні дазваляе размяшчаць медыяаб'ект (малюнкі, відэа, аўдыя) злева або справа ад блока кантэнту.

Медыязагаловак

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Медыязагаловак

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Медыязагаловак

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Медыя-загаловак </h4> 
    ...
 
    <!-- Укладзены медыяаб'ект -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Спіс носьбітаў

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

<ul class = "media-list" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Медыя-загаловак </h4> 
      ...
 
      <!-- Укладзены медыяаб'ект -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Уэлс

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

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

Факультатыўныя заняткі

Кіруйце запаўненнем і закругленымі кутамі з дапамогай двух дадатковых класаў мадыфікатараў.

<div class = "добра добра-вяліка" > 
  ...
</div>

<div class = "добра добра-маленькі" > 
  ...
</div>

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

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

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

Прыладам iOS патрабуецца href="#"падзея for click, калі вы аддаеце перавагу выкарыстоўваць якар.

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

Дапаможныя заняткі

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

.пацягнуць-налева

Перамясціць элемент улева

клас = "пацягнуць-налева"

. пацягнуць - налева {
  паплавок : злева ;
}

.цягнуць-направа

Перамясціць элемент направа

клас = "цягнуць направа"

. пацягнуць - направа {
  float : справа ;
}

.прыглушаны

Змяніць колер элемента на#999

клас = "прыглушаны"

. прыглушаны {
  колер : #999; 
}

.clearfix

Ачысціць floatлюбы элемент

клас = "clearfix"

. clearfix {
  * павелічэнне : 1 ; 
  &: перад ,
  &: пасля {
    адлюстраванне : стол ;
    змест : "" ; 
  }
  &: пасля {
    ясна : абодва ;
  }
}