bootstrap basics
TRANSCRIPT
Bootstrap & CSS
Тихомил Кулев 20.09.2014
Теми:• Структура на Bootstrap
• Основни правила
• Грид система
• Responsive - малки, средни и големи екран
• Bootstrap форми
• Bootstrap inputs & sizing
Структура на Bootstrap<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> </html> !!!!<meta name="viewport" content="width=device-width, initial-scale=1"> !!
Структура на Bootstrap
Fixed:!<div class="container"> ... </div> !Fullwidth:!<div class="container-fluid"> ... </div>
fixed vs fullwidth
Bootstrap CSS defaults
• http://www.w3schools.com/bootstrap/bootstrap_typography.asp
• http://www.w3schools.com/bootstrap/bootstrap_ref_css_text.asp
Грид система - основи
Mobile-First Strategy!
• Определя кое е най-важното съдържание
• Оптимизира се първо за малки екрани
• CSS кода е направен да бъде добре на мобилни устройства, а след това с media queries за tablets, desktops
• Добавят се елементи, ако екрана е по-голям
Грид система
Grid - Важни правила• Редовете трябва да бъдат в .container
(фиксирана ширина) или .container-fluid (цяла ширина) за добро организиране и отстояния
• Използвайте .row за хоризонтални групи от колони
• Съдържанието трябва да бъде поставено в колони и само колони може да са деца на редовете.
• Всеки редов има отрицателен margin в ляво и дясно, за да се подравни ширината на реда и колоните.
• Грид колоните се създават като дефинират до 12 възможни колони. Примерно .col-xs-4 задава 3 еднакви колони.
Грид система - използване
Responsive - малки, средни и големи екран
Demo time
Bootstrap формиBootstrap предоставя три типа подреждане на форми:!
• Вертикална форма (по подразбиране) Demo
• Хоризонтална форма Demo
• Inline form Demo
Важни правила за работа с форми в Bootstrap:!• Добавете role="form" към <form> елемента • Оградете лейбълите и форм контролите в <div> елемент с class="form-
group" • Добавете class="form-control" на всички текстове елементи като <input>,
<textarea> и <select> • !! .sr-only за label, ако не трябва да се вижда на екрана
Bootstrap inputs & sizingИзползвайте .radio-inline class ако искате радио бутоните да са на 1 ред
Оразмеряване на input елементи!За промяна на височината може да се ползва .input-lg и .input-sm. !За задаване ширината се използват грид системите и .col-lg-*, .col-sm-*, и .col-xs-*.
БонусКак да направим 2 контейнера с еднаква височина без JS?
HTML:!<div class="row same-height”> <div class="col-sm-4 block course-logo”>…</div> <div class="col-sm-8 block padding course-description”>texttext</div></div>
CSS:!.row.same-height { display: table; border-collapse: separate; border-spacing: 2px;
.row.same-height > [class*="col-"] { float: none; display: table-cell; vertical-align: top;
Обобщение
• Грид системата - да броим до 12
• Mobile first
• Bootstrap customisation (http://getbootstrap.com/customize/)