Кампаненты

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

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

Прыклады

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

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

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

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

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

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

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

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

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

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

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

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

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

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

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

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

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Дзеянне
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <!-- спасылкі на выпадальнае меню -->
  8. </ul>
  9. </div>

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

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

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

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

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


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

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

  1. <div class = "btn-group" >
  2. <button class = "btn" > Дзеянне </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- спасылкі на выпадальнае меню -->
  8. </ul>
  9. </div>

Памеры

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

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Дзеянне </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- спасылкі на выпадальнае меню -->
  8. </ul>
  9. </div>

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

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

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Выпадальнае акно </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- спасылкі на выпадальнае меню -->
  8. </ul>
  9. </div>

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

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

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#" > Папярэдняя </a></li>
  4. <li><a href = "#" > 1 </a></li>
  5. <li><a href = "#" > 2 </a></li>
  6. <li><a href = "#" > 3 </a></li>
  7. <li><a href = "#" > 4 ​​</a></li>
  8. <li><a href = "#" > 5 </a></li>
  9. <li><a href = "#" > Далей </a></li>
  10. </ul>
  11. </div>

Параметры

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

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

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "disabled" ><a href = "#" > « </a></li>
  4. <li class = "active" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

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

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "disabled" ><span> « </span></li>
  4. <li class = "active" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Памеры

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

  1. <div class = "pagination pagination-large" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "pagination" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination pagination-small" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

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

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

  1. <div class = "pagination pagination-centered" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-right" >
  2. ...
  3. </div>

Пэйджар

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

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

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

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

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

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

  1. <ul class = "пэйджар" >
  2. <li class = "папярэдні" >
  3. <a href = "#" > Старэйшы </a>
  4. </li>
  5. <li class = "наступны" >
  6. <a href = "#" > Навейшы </a>
  7. </li>
  8. </ul>

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

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

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

Этыкеткі

Этыкеткі Разметка
Па змаўчанні <span class="label">Default</span>
Поспех <span class="label label-success">Success</span>
Папярэджанне <span class="label label-warning">Warning</span>
важна <span class="label label-important">Important</span>
Інфармацыя <span class="label label-info">Info</span>
Адваротны <span class="label label-inverse">Inverse</span>

Значкі

Імя Прыклад Разметка
Па змаўчанні 1 <span class="badge">1</span>
Поспех 2 <span class="badge badge-success">2</span>
Папярэджанне 4 <span class="badge badge-warning">4</span>
важна 6 <span class="badge badge-important">6</span>
Інфармацыя 8 <span class="badge badge-info">8</span>
Адваротны 10 <span class="badge badge-inverse">10</span>

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

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

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

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

Прывітанне Сусвет!

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

Даведайцеся больш

  1. <div class = "hero-unit" >
  2. <h1> Загаловак </h1>
  3. <p> Слоган </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Даведайцеся больш
  7. </a>
  8. </p>
  9. </div>

Верхні калонтытул старонкі

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

  1. <div class = "page-header" >
  2. <h1> Прыклад загалоўка старонкі <small> Падтэкст для загалоўка </small></h1>
  3. </div>

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

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

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

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

  • 300х200

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

    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.

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

  • 300х200

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

    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.

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

  • 300х200

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

    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для кіравання памерамі мініяцюр.

Разметка

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

  1. <ul class = "мініяцюры" >
  2. <li class = "span4" >
  3. <a href = "#" class = "мініяцюра" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Параметры

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

Папярэджанне!

Лепш праверце сябе, вы не занадта добра выглядаеце. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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

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

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

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

О, ну! Змяніце некалькі рэчаў і паспрабуйце адправіць яшчэ раз.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Поспех

Добра зроблена! Вы паспяхова прачыталі гэта важнае папярэджанне.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

інфармацыя

Галаву ўверх! Гэта абвестка патрабуе вашай увагі, але яна не вельмі важная.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

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

Базавы

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

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

Паласаты

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

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

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

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

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

Складзены

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

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

Параметры

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

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

  1. <div class = "progress progress-info" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "прагрэс прагрэс-поспех" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "прагрэс прагрэс-папярэджанне" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

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

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

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-success progress-striped" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning progress-striped" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger progress-striped" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

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

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

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

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

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

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

64x64

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

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

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

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

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

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.
  1. <div class = "media" >
  2. <a class = "pull-left" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-heading" > Медыя-загаловак </h4>
  7. ...
  8.  
  9. <!-- Укладзены медыяаб'ект -->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

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

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

  • 64x64

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

    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.

    64x64

    Укладзены медыязагаловак

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

    Укладзены медыязагаловак

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

    Укладзены медыязагаловак

    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.
  • 64x64

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

    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.
  1. <ul class = "media-list" >
  2. <li class = "media" >
  3. <a class = "pull-left" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-heading" > Медыя-загаловак </h4>
  8. ...
  9.  
  10. <!-- Укладзены медыяаб'ект -->
  11. <div class = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Уэлс

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

Глядзі, я ў калодзежы!
  1. <div class = "ну" >
  2. ...
  3. </div>

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

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

Глядзі, я ў калодзежы!
  1. <div class = "добра добра-вяліка" >
  2. ...
  3. </div>
Глядзі, я ў калодзежы!
  1. <div class = "добра добра-маленькі" >
  2. ...
  3. </div>

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

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

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

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

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

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

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

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

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

  1. клас = "пацягнуць-налева"
  1. . пацягнуць - налева {
  2. паплавок : злева ;
  3. }

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

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

  1. клас = "цягнуць направа"
  1. . пацягнуць - направа {
  2. float : справа ;
  3. }

.прыглушаны

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

  1. клас = "прыглушаны"
  1. . прыглушаны {
  2. колер : #999;
  3. }

.clearfix

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

  1. клас = "clearfix"
  1. . clearfix {
  2. * павелічэнне : 1 ;
  3. &: перад ,
  4. &: пасля {
  5. адлюстраванне : стол ;
  6. змест : "" ;
  7. }
  8. &: пасля {
  9. ясна : абодва ;
  10. }
  11. }