Дзясяткі шматразовых кампанентаў, створаных для забеспячэння навігацыі, абвестак, усплывальных вобразаў і шмат іншага.
Пераключальнае кантэкстнае меню для адлюстравання спісаў спасылак. Зроблены інтэрактыўным з выпадальным убудовай 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>
Дадайце дадатковы ўзровень выпадаючых меню, якія з'яўляюцца пры навядзенні курсора, як у 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>
Простая пагінацыя, натхнёная 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 = "#" > Далей </a></li>
- </ul>
- </div>
Спасылкі можна наладзіць для розных абставінаў. Выкарыстоўвайце .disabled
для спасылак, па якіх нельга націснуць, і .active
для ўказання бягучай старонкі.
- <div class = "пагінацыя" >
- <ul>
- <li class = "disabled" ><a href = "#" > Папярэдняя </a></li>
- <li class = "active" ><a href = "#" > 1 </a></li>
- ...
- </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>
Этыкеткі | Разметка |
---|---|
Па змаўчанні | <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> |
Лёгкі, гнуткі кампанент для дэманстрацыі ключавога кантэнту на вашым сайце. Ён добра працуе на маркетынгавых і багатых кантэнтам сайтах.
Гэта просты герой, просты кампанент у стылі джамбатрона для прыцягнення дадатковай увагі да прадстаўленага кантэнту або інфармацыі.
- <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> Прыклад загалоўка старонкі </h1>
- </div>
Па змаўчанні мініяцюры Bootstrap прызначаны для дэманстрацыі звязаных малюнкаў з мінімальнай неабходнай разметкай.
З невялікай колькасцю дадатковай разметкі можна дадаваць у мініяцюры любы від HTML-кантэнту, напрыклад загалоўкі, абзацы або кнопкі.
Эскізы (раней .media-grid
да версіі 1.4) выдатна падыходзяць для сетак фатаграфій і відэа, вынікаў пошуку малюнкаў, рознічных тавараў, партфоліо і шмат чаго іншага. Гэта могуць быць спасылкі або статычны кантэнт.
Разметка мініяцюр простая - усё, што патрабуецца, - ul
з любой колькасцю элементаў. li
Ён таксама надзвычай гнуткі, дазваляе ахопліваць любы тып змесціва з крыху большай разметкай.
І, нарэшце, кампанент мініяцюр выкарыстоўвае існуючыя класы сістэмы сеткі, такія як .span2
або , .span3
для кіравання памерамі мініяцюр.
Як згадвалася раней, неабходная разметка для мініяцюр лёгкая і простая. Вось агляд налад па змаўчанні для звязаных малюнкаў :
- <ul class = "мініяцюры" >
- <li class = "span4" >
- <a href = "#" class = "мініяцюра" >
- <img src = "https://placehold.it/300x200" alt = "" >
- </a>
- </li>
- ...
- </ul>
Для карыстацкага змесціва HTML у эскізах разметка нязначна мяняецца. Каб дазволіць змесціва на ўзроўні блока дзе заўгодна, мы мяняем яго <a>
на <div>
такі:
- <ul class = "мініяцюры" >
- <li class = "span4" >
- <div class = "мініяцюра" >
- <img src = "https://placehold.it/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" > × </button>
Акрамя таго, вы можаце выкарыстоўваць <button>
элемент з атрыбутам data, што мы вырашылі зрабіць для нашых дакументаў. Пры выкарыстанні <button>
вы павінны ўключыць, type="button"
інакш вашыя формы могуць не быць адпраўлены.
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
Выкарыстоўвайце плагін абвестак jQuery для хуткага і лёгкага адхілення абвестак.
Для больш доўгіх паведамленняў павялічце запаўненне ўверсе і ўнізе абалонкі папярэджання, дадаўшы .alert-block
.
Лепш праверце сябе, вы не надта добра выглядаеце. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <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 не падтрымліваюць анімацыю.
Выкарыстоўвайце калодзеж як просты эфект для элемента, каб надаць яму эфект урэзкі.
- <div class = "ну" >
- ...
- </div>
Кіруйце запаўненнем і закругленымі кутамі з дапамогай двух дадатковых класаў мадыфікатараў.
- <div class = "добра добра-вяліка" >
- ...
- </div>
- <div class = "добра добра-маленькі" >
- ...
- </div>
Выкарыстоўвайце агульны значок закрыцця для адхілення змесціва, напрыклад мадалаў і абвестак.
- <button class = "close" > × </button>
На прыладах iOS патрабуецца href="#" для падзей пстрычак, калі вы аддаеце перавагу выкарыстоўваць якар.
- <a class = "close" href = "#" > × </a>
Простыя мэтанакіраваныя заняткі для невялікага адлюстравання або карэкціроўкі паводзін.
Перамясціць элемент улева
- клас = "пацягнуць-налева"
- . пацягнуць - налева {
- паплавок : злева ;
- }
Перамясціць элемент направа
- клас = "цягнуць направа"
- . пацягнуць - направа {
- float : справа ;
- }
Змяніць колер элемента на#999
- клас = "прыглушаны"
- . прыглушаны {
- колер : #999;
- }
Ачысціць float
любы элемент
- клас = "clearfix"
- . clearfix {
- * павелічэнне : 1 ;
- &: перад ,
- &: пасля {
- адлюстраванне : стол ;
- змест : "" ;
- }
- &: пасля {
- ясна : абодва ;
- }
- }