Прыклады хуткага запуску

Патрэбны хуткія шаблоны? Праверце гэтыя асноўныя прыклады, якія мы сабралі:

Сетка па змаўчанні

Сістэма сеткі па змаўчанні, прадстаўленая як частка Bootstrap, - гэта сетка з 16 слупкоў шырынёй 940 пікселяў. Гэта разнавіднасць папулярнай сістэмы сеткі 960, але без дадатковых палёў/запаўнення злева і справа.

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

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

<div class = "row" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Укладзеныя слупкі

Пры неабходнасці ўкладзіце свой кантэнт, стварыўшы ў .rowіснуючым слупку.

Прыклад укладзеных слупкоў

<div class = "row" > 
  <div class = "span12" > 
    Узровень 1 слупка
    <div class = "row" > 
      <div class = "span6" > 
        Узровень 2
      </div>
      <div class = "span6" > 
        Узровень 2
      </div>
    </div>
  </div>
</div>

Скруціце ўласную сетку

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

Унутры сеткі

Усе зменныя, неабходныя для мадыфікацыі сістэмы сеткі, знаходзяцца ў variables.less.

Цяпер, каб наладзіць

Змяненне сеткі азначае змяненне трох @grid-*зменных і паўторную кампіляцыю файлаў Less.

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

@gridColumns : 24 ;       
@gridColumnWidth : 20 пікселяў ;   
@gridGutterWidth : 20 пікселяў ;   

Пасля перакампіляцыі вы будзеце гатовыя!

Фіксаваны макет

Стандартны і просты макет шырынёй 940 пікселяў, размешчаны па цэнтры практычна для любога вэб-сайта або старонкі, прадстаўлены адным <div.container>.

<цела>
  <div class = "кантэйнер" > 
    ...
  </div>
</body>

Плаўны макет

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

<цела>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

Загалоўкі і копія

Стандартная друкарская іерархія для структуравання вашых вэб-старонак.

Уся друкарская сетка заснавана на дзвюх зменных Less у нашым файле variables.less: @basefontі @baseline. Першы - гэта базавы памер шрыфта, які выкарыстоўваецца паўсюль, а другі - базавая вышыня лініі.

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

h1. Загаловак 1

h2. Загаловак 2

h3. Загаловак 3

h4. Загаловак 4

h5. Загаловак 5

h6. Загаловак 6

Прыклад параграфа

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Прыклад загалоўка Мае падзагаловак…

Рознае элементы

Выкарыстанне націску, зваротаў і скарачэнняў

<strong> <em> <address> <abbr>

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

Тэгі акцэнту ( <strong>і <em>) павінны выкарыстоўвацца для пазначэння дадатковай важнасці або акцэнту слова ці фразы ў параўнанні з яго копіяй. Выкарыстоўвайце <strong>для важнасці і <em>для падкрэслення .

Націск у абзацы

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Mecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Заўвага: усё яшчэ можна выкарыстоўваць тэгі <b>і <i>ў HTML5, і іх неабавязкова выдзяляць тлустым шрыфтам і курсівам адпаведна (хаця, калі ёсць больш семантычны элемент, выкарыстоўвайце яго). <b>прызначана для вылучэння слоў або фраз без перадачы дадатковай важнасці, у той час як <i>у асноўным для голасу, тэхнічных тэрмінаў і г.д.

Адрасы

Элемент <address>выкарыстоўваецца для атрымання кантактнай інфармацыі для яго бліжэйшага продка або ўсёй працы. Вось два прыклады таго, як гэта можна выкарыстоўваць:

Заўвага: кожны радок <address>павінен заканчвацца разрывам радка ( <br />) або быць загорнуты ў тэг на ўзроўні блока (напрыклад, <p>), каб правільна структураваць змест.

Скарачэнні

Для скарачэнняў і абрэвіятур выкарыстоўвайце <abbr>тэг ( <acronym>састарэў у HTML5 ). Змесціце скарочаную форму ў тэг і задайце назву для поўнага імя.

Цытаты

<blockquote> <p> <small>

Як цытаваць

Каб уключыць цытату, абгарніце <blockquote>вакол <p>і <small>тэгі. Выкарыстоўвайце <small>элемент, каб спасылацца на крыніцу, і вы атрымаеце працяжнік —перад ім.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Доктар Юліус Хіберт

<цытата>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Доктар Юліюс Хіберт </small>
</blockquote>

Неўпарадкаваны<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Цэлы лік нападаў lorem і маса
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Нестыляваны<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Цэлы лік нападаў lorem і маса
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Замовілі<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Цэлы лік нападаў lorem і маса
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Апісаннеdl

Спісы апісанняў

Спіс апісанняў ідэальна падыходзіць для вызначэння тэрмінаў.

Эўізмод

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Порта Малесуада

Etiam porta sem malesuada magna mollis euismod.

Код

<code> <pre>

Стылёва аформіце свой код з дапамогай двух простых тэгаў. Для яшчэ большага ўзрушэння праз javascript запусціце бібліятэку Google code prettify і ўсё гатова.

Прэзентацыя кода

Код, блокі або проста ўбудаваныя фрагменты могуць быць адлюстраваны са стылем, проста змясціўшы патрэбны тэг. Для блокаў кода, якія ахопліваюць некалькі радкоў, выкарыстоўвайце <pre>элемент. Для ўбудаванага кода выкарыстоўвайце <code>элемент.

<div>
  <h1>Загаловак</h1>
  <p>Нешта тут...</p>
</div>

<div> <h1> Загаловак </h1> <p> Нешта тут... </p> </div>
  
  

Убудаваныя этыкеткі

<span class="label">

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

Пазначце што заўгодна

Калі-небудзь патрэбны быў адзін з тых шыкоўных навінак! або Важныя сцягі пры напісанні кода? Ну, цяпер яны ў вас ёсць. Вось што ўключана па змаўчанні:

Медыясетка

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

Прыклады мініяцюр

Эскізы .media-gridмогуць быць любога памеру, але лепш за ўсё яны працуюць, калі супастаўляюцца непасрэдна з убудаванай сістэмай сеткі Bootstrap. Шырыня выявы, напрыклад 90, 210 і 330, спалучаецца з некалькімі пікселямі запаўнення, каб адпавядаць памерам .span2, .span4і .span6слупкоў.

Вялікі

Сярэдні

Маленькі

Кадзіроўка іх

Медыясеткі простыя ў выкарыстанні і даволі простыя з боку разметкі. Іх памеры цалкам залежаць ад памеру ўключаных малюнкаў.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "мініяцюра" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "мініяцюра" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Будаўнічыя табліцы

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

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

Заўсёды складвайце загалоўкі слупкоў <thead>такім чынам, каб іерархія была <thead>> <tr>> <th>.

Падобна загалоўкам слупкоў, усё змесціва вашай табліцы павінна быць загорнута ў , <tbody>каб ваша іерархія была <tbody>> <tr>> <td>.

Прыклад: стылі табліцы па змаўчанні

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

<табліца>
  ...
</table>

Прыклад: скарочаная табліца

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

Прыклад: табліца з рамкамі

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

<table class = "bordered-table" > 
  ...
</table>

Прыклад: паласаты зебра

Пафантазіруйце са сваімі сталамі, дадаўшы зебрападобныя паласы - проста дадайце .zebra-stripedклас.

Заўвага: Zebra-striping - гэта прагрэсіўнае паляпшэнне, недаступнае для старых браўзераў, такіх як IE8 і ніжэй.

<table class = "zebra-striped" > 
  ...
</table>

Прыклад: Zebra-stried w/ TableSorter.js

Беручы папярэдні прыклад, мы паляпшаем карыснасць нашых табліц, забяспечваючы функцыянальнасць сартавання праз jQuery і плагін Tablesorter . Пстрыкніце загаловак любога слупка, каб змяніць сартаванне.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<скрыпт > 
  $ ( функцыя () { 
    $ ( "табліца#sortTableExample" ). сартавальнік табліц ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zebra-striped" > 
  ...
</table>

Стылі па змаўчанні

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

Штабельныя формы

Дадайце .form-stackedў форму HTML, і вы будзеце мець цэтлікі ўверсе палёў, а не злева. Гэта выдатна працуе, калі вашы формы кароткія або ў вас ёсць два слупкі ўваходных дадзеных для больш цяжкіх формаў.

Памеры поля формы

Наладзьце любую форму input, selectабо textareaшырыню, дадаўшы ўсяго некалькі класаў у разметку.

Пачынаючы з версіі 1.3.0, мы дадалі класы памеру на аснове сеткі для элементаў формы. Калі ласка, выкарыстоўвайце гэтыя замест існуючых класаў .mini, .smallі г.д.

Гузікі

Згодна з пагадненнем, кнопкі выкарыстоўваюцца для дзеянняў, а спасылкі - для аб'ектаў. Напрыклад, "Спампаваць" можа быць кнопкай, а "апошняя дзейнасць" - спасылкай.

Усе кнопкі па змаўчанні маюць светла-шэры стыль, але для розных каляровых стыляў можна прымяніць шэраг функцыянальных класаў. Гэтыя класы ўключаюць у сябе сіні .primaryклас, светла-блакітны .infoклас, зялёны .successклас і чырвоны .dangerклас.

Прыклады кнопак

Стылі кнопак можна ўжываць да чаго заўгодна .btn. Як правіла, вы хочаце прымяніць іх толькі да элементаў <a>, <button>, і select . <input>Вось як гэта выглядае:

Чаргуйце памеры

Любіце большыя ці меншыя гузікі? Майце на гэта!

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

Для кнопак, якія не актыўныя або адключаны праграмай па той ці іншай прычыне, выкарыстоўвайце стан адключаны. Гэта .disabledдля спасылак і :disabledдля <button>элементаў.

Спасылкі

Гузікі

Што гэта

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

Наладжвальны

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

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

Як частку асноўнай навігацыі, мы ўключылі магчымасць дадаваць выпадальныя спісы ў вашу навігацыю. Праверце другасную навігацыю вышэй (выраўнавана па правым краі), каб убачыць, як гэта робіцца. Выпадаючыя liтэгі таксама падтрымліваюць .activeпаказ бягучай выбаркі старонкі.

Таблеткі і таблеткі

Стварыце простую другасную навігацыю з дапамогай <ul>. Пераключайцеся паміж укладкамі або таблеткамі, дадаючы адпаведны клас.

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

Прыклад асноўных укладак

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

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

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Галоўная </a></li>  
  <li><a href = "#" > Профіль </a></li> 
  <li><a href = "#" > Паведамленні </a></li> 
  <li><a href = "#" > Налады </a></li> 
  <li><a href = "#" > Кантакт </a></li> 
</ul>

Прыклад асноўных таблетак

• дадому
• Профіль
• Паведамленні
• Налады
• Кантакт

<ul class = "таблеткі" > 
  <li class = "active" ><a href = "#" > Галоўная </a></li>  
  <li><a href = "#" > Профіль </a></li> 
  <li><a href = "#" > Паведамленні </a></li> 
  <li><a href = "#" > Налады </a></li> 
  <li><a href = "#" > Кантакт </a></li> 
</ul>

Паніровачныя сухары

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

• дадому

• Галоўная /
• Сярэдняя старонка

• Галоўная /
• Сярэдняя старонка /
• Яшчэ адзін

• Галоўная /
• Сярэдняя старонка /
• Яшчэ адзін /
• Вы тут

<ul class = "хлебная дробка" > 
  <li><a href = "#" > Галоўная </a> <span class = "divider" > / </span></li>   
  <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 class = "prev disabled" ><a href = "#" > ← Папярэдняя </a></li>  
    <li class = "active" ><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 class = "наступны" ><a href = "#" > Далей → </a></li>  
  </ul>
</div>

Асноўныя абвесткі

.alert-message

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

Атрымаць javascript »

Прыклад кода

<div class = "папярэджанне аб папярэджанні" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Святое гуакамоле! </strong> Лепш праверце сябе, вы выглядаеце не надта добра. </p>
</div>

Блакіраваць паведамленні

.alert-message.block-message

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

Атрымаць javascript »

Прыклад кода

<div class = "alert-message block-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Святое гуакамоле! Гэта папярэджанне! </strong> Лепш праверце сябе, вы выглядаеце не надта добра. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > Выканайце гэта </a> <a class = "btn small" href = "#" > Ці зрабіце гэта </a>     
  </div>
</div>

Мадальныя

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

Атрымаць javascript »

Падказкі

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

Атрымаць javascript »

Папаўеры

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

Атрымаць javascript »

Пачатак

Інтэграцыя javascript з бібліятэкай Bootstrap вельмі простая. Ніжэй мы разгледзім асновы і прапануем вам некалькі цудоўных убудоў, каб вы пачалі!

Праглядзець дакументы javascript »

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

Ажывіце некаторыя з асноўных кампанентаў Bootstrap з дапамогай новых карыстальніцкіх убудоў, якія працуюць з jQuery і Ender . Мы рэкамендуем вам пашыраць і мадыфікаваць іх у адпаведнасці з вашымі канкрэтнымі патрэбамі распрацоўкі.

Ці патрэбны javascript?

Не! Bootstrap распрацаваны перш за ўсё як бібліятэка CSS. Гэты JavaScript забяспечвае базавы інтэрактыўны ўзровень паверх уключаных стыляў.

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

Для атрымання дадатковай інфармацыі і прагляду жывых дэманстрацый, калі ласка, звярніцеся да нашай старонкі дакументацыі плагіна .