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

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

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

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

<div class="row"> клас = "ред" >
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

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

Основно центрирано оформление на контейнер с ширина 940px за почти всеки сайт или страница.

<тяло>
  <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. Maecenas 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 автоматично ще предхожда име с тире em (—).

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

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

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

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 class="common-table"> class = "common-table" >
  ...
</table>

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

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

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

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

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

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

#	Първо име	Фамилия	език
1	Вашият	един	Английски
2	Джо	Шест пакета	Английски
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" > 
  $ ( документ ). готов ( функция () { 
    $ ( "table#sortTableExample" ). сортиране на таблици ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "common-table zebra-striped" > 
  ...
</table>

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

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

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

X-голям вход

Изберете

1 2 3 4 5

Изберете

1 2 3 4 5

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

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

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

X-голям вход

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

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

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

@

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

X-голям вход

Изберете

1 2 3 4 5

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

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

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

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

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

Бутони

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

Всички бутони по подразбиране са в светлосив стил, но .primaryе наличен син клас. Плюс това, търкалянето на вашите собствени стилове е лесно.

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

Стиловете на бутоните могат да се прилагат към всичко с .btnприложеното. Обикновено ще искате да ги приложите само към a, buttonи избрани 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="pagination"> 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 в следващия си проект.

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

Използвайте тази опция, за да използвате пълноценно променливите Less на Bootstrap, миксините и влагането в CSS чрез javascript във вашия браузър.

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> 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 %); 
@сиво :               изсветляване ( @черно , 50 %); 
@grayLight :          изсветляване ( @black , 70 %); 
@grayLighter :        изсветляване ( @black , 90 %); 
@бяло : #fff;             
// Акцентни цветове
@синьо : #08b5fb ;              
@зелено : #46a546 ;             
@червено : #9d261d ;               
@жълто : #ffc40d ;            
@orange : #f89406;            
@розово : #c3325f ;              
@лилаво : #7a43b6 ;            
// Базово ниво
@базова линия : 20px ;          

Коментиране

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    
    - ms - филтър : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    филтър : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    фон - изображение : линеен - градиент ( вляво , @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   
    - ms - филтър : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    филтър : 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 : 40px ;   
@gridGutterWidth : 20px ;   
// Мрежова система
. контейнер {
  ширина : @siteWidth ; 
  марж : 0 авто ;  
  . clearfix ();
}
. колони ( @columnSpan : 1 ) {  
  дисплей : вграден ; 
  float : ляво ;
  ширина : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  поле - ляво : @gridGutterWidth ; 
  &: първо - дете {
    margin - ляво : 0 ; 
  }
}
. отместване ( @columnOffset : 1 ) {  
  поле - ляво : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! важно ;          
}