Bootstrap basics

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 vs fullwidth
Fixed:!
<div class="container">
...
</div>
!
Fullwidth:!
<div class="container-fluid">
...
</div>

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/)

Bootstrap basics

Recommandé

Recommandé

Contenu connexe

Similaire à Bootstrap basics

Similaire à Bootstrap basics (20)

Bootstrap basics