История

В по-ранните дни на Twitter инженерите използваха почти всяка библиотека, с която са запознати, за да отговорят на изискванията за предния край. Bootstrap започна като отговор на предизвикателствата, които се появиха и развитието бързо се ускори по време на първата Hackweek на Twitter.

С помощта и отзивите на много инженери в Twitter, Bootstrap се разрасна значително, за да обхване не само основни стилове, но и по-елегантни и издръжливи предни дизайнерски модели.

Прочетете повече на dev.twitter.com ›

Поддръжка на браузър

Bootstrap е тестван и се поддържа в основните съвременни браузъри като Chrome, Safari, Internet Explorer и Firefox.

• Най-новото Safari
• Най-новият Google Chrome
• Firefox 4+
• Internet Explorer 7+
• Опера 11

Какво е включено

Bootstrap идва в комплект с компилиран CSS, некомпилиран и примерни шаблони.

• Всички оригинални .less файлове
• Напълно компилиран и минимизиран CSS
• Пълна документация за ръководство за стил
• Примерен шаблон на страница (още очаквайте скоро)

Решетка по подразбиране

Мрежовата система по подразбиране, предоставена като част от Bootstrap, е мрежа с 16 колони с ширина 940px. Това е разновидност на популярната мрежова система 960, но без допълнително поле/подложка от лявата и дясната страна.

Примерно маркиране на мрежата

Както е показано тук, може да се създаде основно оформление с две „колони“, всяка от които обхваща няколко от 16-те основни колони, които дефинирахме като част от нашата мрежова система. Вижте примерите по-долу за повече варианти.

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

Фиксирано оформление

Стандартното и просто центрирано оформление с ширина 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. Maecenas 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>елемента, за да цитирате източника си и ще получите тире em —преди него.

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
• Integer molestie lorem at massa
• 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
• Integer molestie lorem at massa
• 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. Integer molestie lorem at massa
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

Списъци с описания

Списъкът с описания е идеален за дефиниране на термини.

Euismod

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	Джо	Шест пакета	Английски
3	Стю	Дент	Код

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

Пример: райе на зебра

Вземете малко фантазия с вашите маси, като добавите зебра - просто добавете .zebra-stripedкласа.

#	Първо име	Фамилия	език
1	някои	един	Английски
2	Джо	Шест пакета	Английски
3	Стю	Дент	Код

Забележка: Zebra-striping е прогресивно подобрение, което не е налично за по-стари браузъри като IE8 и по-стари.

< клас на таблицата = "zebra-striped" > 
...
</table>

Пример: Зеброво райе с TableSorter.js

Като вземем предишния пример, подобряваме полезността на нашите таблици, като предоставяме функционалност за сортиране чрез jQuery и приставката Tablesorter . Щракнете върху заглавката на която и да е колона, за да промените сортирането.

#	Първо име	Фамилия	език
1	Вашият	един	Английски
2	Джо	Шест пакета	Английски
3	Стю	Дент	Код

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

Стилове по подразбиране

Всички формуляри получават стилове по подразбиране, за да ги представят по четлив и мащабируем начин. Осигурени са стилове за въвеждане на текст, списъци за избор, текстови полета, радио бутони и квадратчета за отметка и бутони.

Примерна легенда на формуляра

X-голям вход

Изберете

1 2 3 4 5

Изберете

1 2 3 4 5

Нередактируем вход

Има малко стойност тук

Забранен вход

X-голям вход

Малък фрагмент от помощен текст

Примерна легенда на формуляра

Добавен текст

@

Предварително квадратче за отметка

Добавено квадратче за отметка

Въвеждане на файл

Примерна легенда на формуляра

Списък с опции

• Първият вариант е това и това - не забравяйте да включите защо е страхотно
• Опция две също може да бъде проверена и включена в резултатите от формуляра
• Опция три може — да, познахте — също да бъде проверена и включена в резултатите от формуляра
• Опция четири не може да бъде отметната, тъй като е деактивирана.

Забележка: Етикетите обграждат всички опции за много по-големи области за щракване и по-използваема форма.

Период от време

да се Всички часове са показани като тихоокеанско стандартно време (GMT -08:00).

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

Блок от помощен текст за описание на полето по-горе, ако е необходимо.

Списък с опции

• Първият вариант е това и това - не забравяйте да включите защо е страхотно
• Вариант две може да е нещо друго и избирането му ще премахне избора на опции 1

  Отказ

Подредени форми

Добавете .form-stackedкъм HTML кода на вашия формуляр и ще имате етикети в горната част на техните полета, вместо отляво. Това работи чудесно, ако вашите формуляри са кратки или имате две колони с входове за по-тежки формуляри.

Примерна легенда на формуляра

X-голям вход

Изберете

1 2 3 4 5

Примерна легенда на формуляра

X-голям вход

Малък фрагмент от помощен текст

Списък с опции

• Първият вариант е това и това - не забравяйте да включите защо е страхотно
• Опция две също може да бъде проверена и включена в резултатите от формуляра

Забележка: Етикетите обграждат всички опции за много по-големи области за щракване и по-използваема форма.

Запазите промените  Отказ

Бутони

Като конвенция бутоните се използват за действия, докато връзките се използват за обекти. Например „Изтегляне“ може да бъде бутон, а „скорошна дейност“ може да бъде връзка.

Всички бутони по подразбиране имат светлосив стил, но могат да се прилагат редица функционални класове за различни цветови стилове. Тези класове включват син .primaryклас, светлосин .infoклас, зелен .successклас и червен .dangerклас. Плюс това, търкалянето на вашите собствени стилове е лесно.

Примерни бутони

Стиловете на бутоните могат да се прилагат към всичко с .btnприложеното. Обикновено ще искате да ги приложите само към <a>, <button>и избрани <input>елементи. Ето как изглежда:

Алтернативни размери

Искате ли по-големи или по-малки копчета? Имайте го!

Състояние с увреждания

За бутони, които не са активни или са деактивирани от приложението по една или друга причина, използвайте деактивирано състояние. Това е .disabledза връзките и :disabledза <button>елементите.

Връзки

Бутони

Какво е

Нашата горна лента е фиксирана лента, която съдържа логото или името на уебсайта, основната навигация и формата за търсене.

Възможност за персонализиране

Всички елементи вътре, както и цялата горна лента, не са задължителни. Можете да изберете да включите лого/име, навигация, търсене и вторична навигация — или произволна комбинация от това.

Включени падащи менюта

Като част от основната навигация сме включили възможността да добавяте падащи менюта към вашата навигация. Вижте вторичната навигация по-горе (подравнена вдясно), за да видите как се прави.

Таблетки и хапчета

Създайте проста вторична навигация с <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

За съобщения, които изискват малко обяснение, имаме предупреждения за стил на абзац. Те са идеални за бълбукане на по-дълги съобщения за грешка, предупреждение на потребител за предстоящо действие или просто представяне на информация за по-голям акцент върху страницата.

Модали

Модалните – диалогови прозорци или лайтбоксове – са страхотни за контекстуални действия в ситуации, в които е важно фоновият контекст да се поддържа.

Съвети за инструменти

Twipsies са супер полезни за подпомагане на объркан потребител и за насочване в правилната посока.

Попови

Използвайте изскачащи елементи, за да предоставите подтекстова информация на страница, без да засягате оформлението.

Bootstrap е създаден с Preboot , пакет с отворен код от миксини и променливи, които да се използват заедно с Less , CSS препроцесор за по-бързо и лесно уеб разработка.

Вижте как използвахме Preboot в Bootstrap и как можете да го използвате, ако изберете да стартирате Less в следващия си проект.

Как се използва

Използвайте тази опция, за да използвате пълноценно променливите Less на Bootstrap, миксините и влагането в 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 %); 
@сиво :               изсветляване ( @черно , 50 %); 
@grayLight :          изсветляване ( @black , 70 %); 
@grayLighter :        изсветляване ( @black , 90 %); 
@бяло : #fff;             
 
// Акцентни цветове
@синьо : #08b5fb ;              
@зелено : #46a546 ;             
@червено : #9d261d ;               
@жълто : #ffc40d ;            
@orange : #f89406;            
@розово : #c3325f ;              
@лилаво : #7a43b6 ;            
 
// Решетка на базовата линия
@basefont : 13px ;          
@базова линия : 18px ;          

Коментиране

Less предоставя и друг стил на коментиране в допълнение към нормалния /* ... */синтаксис на CSS.

// Това е коментар
/* Това също е коментар */

Смесва wazoo

Mixins са основно включени или части за CSS, което ви позволява да комбинирате блок от код в един. Те са чудесни за свойства с префикс на доставчика, като box-shadow, градиенти в различни браузъри, набори от шрифтове и др. По-долу е извадка от миксините, които са включени в Bootstrap.

Купища шрифтове

#font {
  . стенограма ( @weight : нормално , @size : 14px , @lineHeight : 20px ) {     
размер на     шрифта : @size ; 
тегло на     шрифта : @ тегло ; 
височина на     линия : @lineHeight ; 
  }
  . sans - serif ( @weight : нормален , @size : 14px , @lineHeight : 20px ) {     
семейство     шрифтове : " Helvetica Neue" , Helvetica , Arial , sans - serif ;   
размер на     шрифта : @size ; 
тегло на     шрифта : @ тегло ; 
височина на     линия : @lineHeight ; 
  }
  . serif ( @weight : нормален , @size : 14px , @lineHeight : 20px ) {     
семейство     шрифтове : " Georgia" , Times New Roman , Times , sans - serif ;     
размер на     шрифта : @size ; 
тегло на     шрифта : @ тегло ; 
височина на     линия : @lineHeight ; 
  }
  . monospace ( @weight : нормален , @size : 12px , @lineHeight : 20px ) {     
семейство     шрифтове : " Monaco" , Courier New , monospace ;   
размер на     шрифта : @size ; 
тегло на     шрифта : @ тегло ; 
височина на     линия : @lineHeight ; 
  }
}

Градиенти

#градиент {
  . хоризонтално ( @startColor : #555, @endColor: #333) { 
цвят на     фона : @endColor ; 
    фон - повторение : повторение - x ;
    фоново изображение : - khtml - градиент ( линеен , ляво горе , дясно горе , от ( @startColor ), до ( @endColor ) ); // Konqueror   
    фон - изображение : - moz - линеен - градиент ( вляво , @startColor , @endColor ); // FF 3.6+    
    фон - изображение : - ms - линеен - градиент ( вляво , @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 ); // Le standard   
  }
  . вертикално ( @startColor : #555, @endColor: #333) { 
цвят на     фона : @endColor ; 
    фон - повторение : повторение - x ;
    фоново изображение : - khtml - градиент ( линеен , ляво горе , ляво долу , от ( @startColor ), до ( @endColor ) ); // Konqueror   
    фон - изображение : - moz - линеен - градиент ( @startColor , @endColor ); // FF 3.6+   
    фон - изображение : - ms - линеен - градиент ( @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 : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Мрежова система
. контейнер {
  ширина : @siteWidth ; 
  марж : 0 авто ;  
  . clearfix ();
}
. колони ( @columnSpan : 1 ) {  
  ширина : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. отместване ( @columnOffset : 1 ) {  
  margin - ляво : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}