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

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

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

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

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

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

Базавы макет кантэйнера шырынёй 940 пікселяў па цэнтры практычна для любога сайта або старонкі.

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

Плаўны макет

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

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

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

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

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>

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

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

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

Адрасы

Элемент addressвыкарыстоўваецца для — вы ўжо здагадаліся! — адрасоў. Вось як гэта выглядае:

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

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

Скарачэнні

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

Цытаты

<blockquote> <p> <cite>

Не забудзьцеся абгарнуць blockquoteвакол paragraphі citeбіркі. Пры цытаванні крыніцы выкарыстоўвайце citeэлемент. CSS аўтаматычна паставіць перад імем працяжнік (—).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

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

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

• Джэрэмі Біксбі
• Роберт Дэзюр
• Джош Вашынгтон
• Антон Капрэзі
• Мае таварышы па камандзе
  • Джордж Кастанца
  • Джэры Сайнфельд
  • Косма Крамер
  • Элейн Бенніс
  • Ньюман
• Джон Якуб
• Пол Пірс
• Кевін Гарнетт

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

• Джэрэмі Біксбі
• Роберт Дэзюр
• Джош Вашынгтон
• Антон Капрэзі
• Мае таварышы па камандзе
  • Джордж Кастанца
  • Джэры Сайнфельд
  • Косма Крамер
  • Элейн Бенніс
  • Ньюман
• Джон Якуб
• Пол Пірс
• Кевін Гарнетт

Замовілі<ol>

1. Джэрэмі Біксбі
2. Роберт Дэзюр
3. Джош Вашынгтон
4. Антон Капрэзі
5. Мае таварышы па камандзе
   1. Джордж Кастанца
   2. Джэры Сайнфельд
   3. Косма Крамер
   4. Элейн Бенніс
   5. Ньюман
6. Джон Якуб
7. Пол Пірс
8. Кевін Гарнетт

Апісанне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 class="common-table"> class = "common-table" >
  ...
</table>

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

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

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

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

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

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

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

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

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

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

Прыклад легенды формы

X-Large Input

Выберыце

1 2 3 4 5

Выберыце

1 2 3 4 5

Нерэдагуемы ўвод

Некаторыя каштоўнасці тут

Адключаны ўвод

X-Large Input

Невялікі фрагмент даведкі

Прыклад легенды формы

Пачатак тэксту

@

Папярэдне сцяжок

Дададзены сцяжок

Увод файла

Прыклад легенды формы

Спіс опцый

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

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

Дыяпазон дат

каб Увесь час паказваецца па ціхаакіянскім стандартным часе (GMT -08:00).

Тэкставае поле

Блок тэксту даведкі для апісання поля вышэй, калі спатрэбіцца.

Спіс опцый

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

Захаваць змены Адмяніць

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

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

Прыклад легенды формы

X-Large Input

Выберыце

1 2 3 4 5

Прыклад легенды формы

Спіс опцый

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

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

Захаваць змены Адмяніць

Гузікі

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

Усе кнопкі па змаўчанні маюць светла-шэры стыль, але даступны сіні .primaryклас. Акрамя таго, накруціць уласныя стылі лёгка.

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

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

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

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

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

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

Спасылкі

Гузікі

Што гэта

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

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

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

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

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

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

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

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

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

<ul class="tabs"> 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="таблеткі"> 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="пагінацыя"> 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>

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

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

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

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

Мадальныя

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

Папаўеры

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

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

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

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

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

<спасылка rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="усе" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "all" />    
<script type = "text/javascript" src = "js/less-1.0.41.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;            
// Базавая лінія
@baseline : 20 пікселяў ;          

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

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

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

Змешвае 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    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 і IE7 
    фон - малюнак : лінейны - градыент ( злева , @startColor , @endColor ); // Стандартны   
  }
  . вертыкальна ( @startColor : #555, @endColor: #333) { 
колер     фону : @endColor ; _ 
    фон - repeat : repeat - x ;
    фон - малюнак : - 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   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 і IE7 
    фон - малюнак : лінейны - градыент ( @startColor , @endColor ); // Эталон  
  }
  . накіраваны ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . вертыкальны - тры - колеры ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0,5, @endColor: #c3325f) { 
    ...
  }
}

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

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

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