Bootstrap, з Twitter

Bootstrap - гэта набор інструментаў ад Twitter, прызначаны для пачатку распрацоўкі вэб-праграм і сайтаў.
Ён уключае базавы CSS і HTML для тыпаграфікі, формаў, кнопак, табліц, сетак, навігацыі і г.д.

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

Гарачая спасылка на CSS

Для самага хуткага і простага пачатку проста скапіруйце гэты фрагмент на сваю вэб-старонку.

Выкарыстоўвайце яго з Less

Прыхільнік выкарыстання Less? Няма праблем, проста клануйце рэпазітар і дадайце гэтыя радкі:

Форк на GitHub

Спампоўка, разгалінаванне, выцягванне, праблемы з файлам і многае іншае з афіцыйным рэпазітарам Bootstrap на Github.

Bootstrap на GitHub »

Гісторыя

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

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

Больш падрабязна на dev.twitter.com ›

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

Bootstrap пратэставаны і падтрымліваецца ў асноўных сучасных браўзерах, такіх як Chrome, Safari, Internet Explorer і Firefox.

Апошні сафары
Апошні гугл хром
Firefox 4+
Internet Explorer 7+
Опера 11

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

Bootstrap пастаўляецца ў камплекце са скампіляваным CSS, нескампіляваным і прыкладамі шаблонаў.

Усе арыгінальныя файлы .less
Цалкам скампіляваны і мініфікаваны CSS
Поўная дакументацыя кіраўніцтва па стылі
Прыклад шаблона старонкі (больш хутка)

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

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

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

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

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

1/3

2/3

Зрушэнне слупкоў

8 зрушэнне 4

1/3 зрушэння 2/3 с

4 зрушэнне 4

5 зрушэнне 3

10 зрушэнне 6

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

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

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

Плаўны макет

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

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

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

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

Уся друкарская сетка заснавана на дзвюх зменных Less у нашым файле preboot.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>выкарыстоўваецца для атрымання кантактнай інфармацыі для яго бліжэйшага продка або ўсёй працы. Вось як гэта выглядае:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Заўвага: кожны радок <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.
Доктар Юліус Хіберт

Спісы

Неўпарадкаваны`<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>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Цэлы лік нападаў lorem і маса
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
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.

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

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

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

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

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

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

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

#	Імя	Прозвішча	мова
1	Некаторыя	адзін	англійская
2	Джо	Sixpack	англійская
3	Сцю	Дэнт	Код

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

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

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

#	Імя	Прозвішча	мова
1	Некаторыя	адзін	англійская
2	Джо	Sixpack	англійская
3	Сцю	Дэнт	Код

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

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

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

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

#	Імя	Прозвішча	мова
1	Ваша	адзін	англійская
2	Джо	Sixpack	англійская
3	Сцю	Дэнт	Код

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

Выпраўленая верхняя панэль

Што гэта

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

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

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

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

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

Заўвага: выкарыстоўваючы верхнюю панэль на любой старонцы, не забудзьцеся ўлічыць перакрыцце, якое гэта выклікае, дадаючы padding-top: 40px;да вашага body.

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

Стварыце простую другасную навігацыю з дапамогай <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>

Пагінацыя

Вельмі спрошчаная і мінімалістычна аформленая пагінацыя, натхнёная 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>

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

div.alert-message

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

Святое гуакамоле! Лепш праверце сябе, вы не занадта добра выглядаеце.

О, ну! Змяніце тое і тое і паспрабуйце яшчэ раз.

Добра зроблена! Вы паспяхова прачыталі гэта папярэджанне.

Галаву ўверх! Гэта абвестка, якая патрабуе вашай увагі, але яна пакуль не з'яўляецца вялікім прыярытэтам.

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

div.alert-message.block-message

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

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

Прыміце гэтае дзеянне Або зрабіць гэта

О, ну! У вас памылка! Змяніце тое і тое і паспрабуйце яшчэ раз. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Прыміце гэтае дзеянне Або зрабіць гэта

Добра зроблена! Вы паспяхова прачыталі гэта папярэджанне. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mecenas faucibus mollis interdum.

Прыміце гэтае дзеянне Або зрабіць гэта

Галаву ўверх! Гэта абвестка, якая патрабуе вашай увагі, але яна пакуль не з'яўляецца вялікім прыярытэтам.

Прыміце гэтае дзеянне Або зрабіць гэта

Мадальныя

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

Падказкі

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

Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit actuantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae actuantium fugit voluptas nemo voluptas voluptatem rem quaesi aut verquaitatis.

ніжэй!

правільна!

злева!

вышэй!

Папаўеры

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

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

Праверце, як мы выкарыстоўвалі Preboot у Bootstrap і як вы можаце выкарыстоўваць яго, калі вы вырашыце запусціць Less у сваім наступным праекце.

Як ім карыстацца

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

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />    
<script src = "js/less-1.1.3.min.js" ></script>

Не адчуваеце рашэння .js? Паспрабуйце праграму Less Mac або выкарыстоўвайце Node.js для кампіляцыі пры разгортванні кода.

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

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

Пераменныя

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

// Спасылкі
@linkColor : #8b59c2;         
@linkColorHover :     цямнець ( @linkColor , 10 ); 
 
// Сівыя
@чорны : #000;             
@grayDark :           асвятліць ( @black , 25 %); 
@grey :               асвятліць ( @black , 50 %); 
@grayLight :          асвятліць ( @black , 70 %); 
@grayLighter :        асвятліць ( @black , 90 %); 
@белы : #fff ;             
 
// Акцэнтныя колеры
@blue : #08b5fb;              
@green : #46a546;             
@red : #9d261d;               
@yellow : #ffc40d;            
@orange : #f89406;            
@pink : #c3325f;              
@purple : #7a43b6;            
 
// Базавая сетка
@basefont : 13 пікселяў ;          
@baseline : 18 пікселяў ;

Каментаванне

Less таксама забяспечвае іншы стыль каментавання ў дадатак да звычайнага /* ... */сінтаксісу CSS.

// Гэта каментар
/* Гэта таксама каментар */

Змешвае wazoo

Міксіны ў асноўным з'яўляюцца ўключэннямі або часткамі для CSS, якія дазваляюць аб'яднаць блок кода ў адзін. Яны выдатна падыходзяць для ўласцівасцей з прэфіксам пастаўшчыка, такіх як box-shadow, крос-браўзерныя градыенты, стэкі шрыфтоў і інш. Ніжэй прыведзены ўзор міксінаў, якія ўключаны ў Bootstrap.

Стэкі шрыфтоў

#шрыфт {
  . скарачэнне ( @weight : нармаль��ы , @size : 14 пікселяў , @lineHeight : 20 пікселяў ) {     
    font - size : @size ; 
    font - weight : @weight ; 
    лінія - вышыня : @lineHeight ; 
  }
  . без засечак ( @weight : звычайны , @size : 14 пікселяў , @lineHeight : 20 пікселяў ) {     
сямейства     шрыфтоў : " Helvetica Neue " , Helvetica , Arial , без засечак ;   
    font - size : @size ; 
    font - weight : @weight ; 
    лінія - вышыня : @lineHeight ; 
  }
  . serif ( @weight : звычайны , @size : 14px , @lineHeight : 20px ) {     
сямейства     шрыфтоў : " Georgia " , Times New Roman , Times , без засечак ;     
    font - size : @size ; 
    font - weight : @weight ; 
    лінія - вышыня : @lineHeight ; 
  }
  . моноширинный ( @weight : нармальны , @size : 12px , @lineHeight : 20px ) {     
сямейства     шрыфтоў : " Monaco" , Courier New , монашырынны ;   
    font - size : @size ; 
    font - weight : @weight ; 
    лінія - вышыня : @lineHeight ; 
  }
}

Градыенты

#градыент {
  . гарызантальны ( @startColor : #555, @endColor: #333) { 
колер     фону : @endColor ; _ 
    фон - repeat : repeat - x ;
    background - выява : - khtml - градыент ( лінейны , левы верхні , правы верхні , ад ( @startColor ), да ( @endColor )); // Канканёр   
    фон - малюнак : - moz - лінейны - градыент ( злева , @startColor , @endColor ); // FF 3.6+    
    фон - малюнак : - мс - лінейны - градыент ( злева , @startColor , @endColor ); // IE10    
    фон - выява : - webkit - градыент ( лінейны , левы верхні , правы верхні , каляровы - стоп ( 0 %, @startColor ), каляровы - стоп ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    фон - малюнак : - webkit - лінейны - градыент ( злева , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    фон - малюнак : - o - лінейны - градыент ( злева , @startColor , @endColor ); // Opera 11.10    
    фон - малюнак : лінейны - градыент ( злева , @startColor , @endColor ); // Стандартны   
  }
  . вертыкальна ( @startColor : #555, @endColor: #333) { 
колер     фону : @endColor ; _ 
    фон - repeat : repeat - x ;
    background - выява : - khtml - градыент ( лінейны , левы верхні , левы ніжні , ад ( @startColor ), да ( @endColor )); // Канканёр   
    фон - малюнак : - moz - лінейны - градыент ( @startColor , @endColor ); // FF 3.6+   
    фон - малюнак : - мс - лінейны - градыент ( @startColor , @endColor ); // IE10   
    фон - малюнак : - webkit - градыент ( лінейны , левы верхні , левы ніжні , каляровы - стоп ( 0 %, @startColor ), каляровы - стоп ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    фон - малюнак : - webkit - лінейны - градыент ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    фон - малюнак : - o - лінейны - градыент ( @startColor , @endColor ); // Opera 11.10   
    фон - малюнак : лінейны - градыент ( @startColor , @endColor ); // Эталон  
  }
  . накіраваны ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . вертыкальны - тры - колеры ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

Аперацыі і сеткавая сістэма

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

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40 пікселяў ;   
@gridGutterWidth : 20 пікселяў ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Грыд-сістэма
. кантэйнер {
  шырыня : @siteWidth ; 
  margin : 0 auto ;  
  . Clearfix ();
}
. слупкі ( @columnSpan : 1 ) {  
  шырыня : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. зрушэнне ( @columnOffset : 1 ) {  
  поле - левае : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}

Бутстрап

Bootstrap, з Twitter

Гарачая спасылка на CSS

Выкарыстоўвайце яго з Less

Форк на GitHub

Аб кароткай гісторыі Bootstrap , падтрымцы браўзера і многае іншае

Гісторыя

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

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

Сістэма сеткі . Качайце стандартныя 940 пікселяў або стварайце ўласныя

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

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

Зрушэнне слупкоў

Макеты Асноўныя шаблоны для стварэння вэб-старонак

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

Плаўны макет

Тыпаграфіка Загалоўкі, абзацы, спісы і іншыя элементы ўбудаванага тыпу

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

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

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

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

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

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

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

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

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

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

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

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

Адрасы

Абрэвіятуры

Цытаты

Як цытаваць

Спісы

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

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

Замовілі<ol>

Апісаннеdl

Табліцы Для, як вы ўжо здагадаліся, таблічных даных

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

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

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

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

Формы

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

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

Гузікі

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

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

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

Спасылкі

Гузікі

Навігацыя

Выпраўленая верхняя панэль

Назва праекта

Што гэта

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

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

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

Пагінацыя

Абвесткі і памылкі Стылі для паведамленняў аб поспеху, папярэджанняў і памылак або абвестак

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

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

Popovers Кампаненты для адлюстравання змесціва ў мадальных, усплываючых падказках і ўсплывальных паведамленнях

Мадальныя

Мадальны загаловак

Падказкі

Папаўеры

Popover Назва

Выкарыстанне Bootstrap with Less Supercharged ваш CSS зменнымі, міксінамі і функцыямі

Як ім карыстацца

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

Пераменныя

Каментаванне

Змешвае wazoo

Стэкі шрыфтоў

Градыенты

Аперацыі і сеткавая сістэма

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

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

Замовілі`<ol>`

Апісанне`dl`