Bootstrap
Структура и организация
Какво е Bootstrap?
Bootstrap е open-source фреймуърк, предназначен да помогне за подобряването на компонентите на потребителския интерфейс. Той е комбинация от HTML, CSS и JavaScript компоненти.
Той съдържа HTML и CSS-базирани шаблони за типография, форми, бутони, навигация и други компоненти на интерфейса, както и допълнителни JavaScript разширения.
Кога и как е създаден Bootstrap?
Bootstrap е създаден в Twitter в средата на 2010 г. от Mark Otto and Jacob Thornton. Преди да се превърне в open-source framework, Bootstrap е бил известен като Twitter Blueprint. Няколко месеца след създаването си, Twitter провежда първият си Hack Week и по проекта започват да работят програмисти от цялата комапния без външна намеса.
Официално излиза на бял свят на 19 август 2011 и от тогава има над 20 версии, по известни от които Bootsrtap 2 и Bootstrap 3.
Създателите на фреймуърка изключително държат да бранда да се асоциира с името и логото на Bootstrap, а не с магната Twitter.
Защо да използваме Bootsrap?
-
Браузъри - поддържа се от всички популярни браузъри
- Изключително интуитивен - с основни познания по HTML, CSS човек може за няколко часа да започне да използва услугите на Bootstrap
-
Responsive дизайн - Приспособлява се прекрасно към стационарни компютри, лаптопи, таблети и телефони
Какво съдържа пакетът на Bootstrap?
Bootstrap е модулен и се състои основно от поредица от LESS (stylesheet language) стилове, които се прилагат на различните компоненти от комплекта с инструменти. Стиловете, наречени bootstrap.less съдържат различни компоненти от CSS-a. Разработчиците могат сами да включват Bootstrap, като избират компонентите, които желаят да използват в техния проект. Корекции са възможни в ограничена степен чрез централните конфигурационни стилове. Повече дълбоки промени са възможни чрез LESS декларациите. Използването на LESS стилове позволява използването на променливи, функции и оператори, вложени селектори, както и така наречените mixins. От версия 2.0, конфигурацията на Bootstrap има специална "Customize" опция в документацията. Освен това, разработчикът избира от дадената форма желаните компоненти и регулира, ако е необходимо, различните възможности според неговите нужди. В последствие се генерира пакет включващ предварително изграден CSS.
- Scaffolding: Bootstrap осигурява стандартна структура, включваща Grid система , стилове на връзките и background -а.
- CSS: в пакета може да се намерят най-различни стилови настройки, основни HTML елементи, обвързани с подходящи класове и дизайни.
- Компоненти: Bootstrap съдържа стотици елементи, създадени да многократна употреба и служещи за по-лесно изобразяване на dropdown - менюта, навигации, съобщение, изкачащи прозорци и много други.
- JavaScript Plugins: Съдържат се много и различни jQuery плъгини, които лесно може да се интегрират в кода.
- Персонализиране: Лесно може да се модифицират Boostrap компонентите и jQuery плъгините.
Какво е Grid система
Като за начало ще използваме описанието от Wikipedia:
В графичния дизайн, grid е структура (обикновено двумерена), съставена от поредица от пресичащи се прави (вертикални, хоризонтални линии), използвани за структуриране на съдържанието. Grid се използва за оформлениеи проектиране на структурата на съдържанието в print-дизайна. В уеб дизайна, това е един много ефективен метод, за да се създаде последователно оформление за бързо и ефективно използване на HTML и CSS.
За да го кажем с по-прости думи: grid организира и структурира съдържанието, прави сайтовете лесни за разчитане и намалява когнитивно натоварване на потребителите.
Какво е Bootsrap Grid система
Bootsrap съдържа responsive grid система, която се разделя на колони с променлива широчина и височина. Съдържа предефинирани класове, които могат да отгаварят на различните нужди на потребителите.
- На редовете трябва да бъде поставен клас .container, за да бъдат правилно позиционирани и да имат достатъчен padding.
- Използват се rows, за да се направят хоризонтални групи от колони.
- Съдържанието трябва да се поставя в колони, а само колони могат да бъдат непосредствени деца на rows.
Media Queries
Media Query е шикозен термин за "условно CSS правило". То се прилага, когато са изпълнени някакви конкретни CSS условия.
Media Query позволява да се движи, показва и скрива някакво съдържание въз основа на размера на прозореца, на който се гледа. Media Queries се използват в LESS файловете за създаване на ключовите точки в grid системата на Bootstrap.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
Нека за пример да разгледаме следващия ред:
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
За всички устройства, без значение с каква минимална широчина - min-width: @screen-sm-min, ако широчината на екрана е по-малка от @screen-sm-max се случва някакво конкретно действие.
Grid options
Следната таблица кратко описва как работи Bootsrtap на различни устройства:| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Max container width | None (auto) | 750px | 970px | 1170px |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| # of columns | 12 | 12 | 12 | 12 |
| Max column width | Auto | 60px | 78px | 95px |
| Gutter width | 30px (15px on each side of a column) |
30px (15px on each side of a column) |
30px (15px on each side of a column) |
30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
Компоненти
В следващите абзаци ще представим основните компоненти изграждащи структурата на Bootstrap. Както знаем Bootstrap е известен с това, че има responsive design. Responsive web дизайн (RWD) е подход при уеб дизайна, насочен към изработване на сайтове, за да се осигури оптимално усещане при гледането - лесно четене и навигация с минимално преоразмеряване, местене, и скролиране-в широк спектър от устройства (от настолни компютърни до мобилни телефони). Сайт проектиран с RWD се адаптира към различните устройства при гледане с помощта на fluids, proportion-based grids, flexible images, и CSS3 media queries,
Mobile First
От Bootstrap 3 насам вече Bootstrap се е превърнал в Mobile First. Това означава, че навсякъде из кода могат да се намерят mobile first стилове. Трябва да се добави viewport meta tag на <head> елемента за да се осигури правилно преработка и zoom-ване при докосване.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- width свойството служи за регулиране на широчината на устройството. Ако бъде настроено на device-width ще може да се различават различните устройства (мобилни телефони, таблети и др.)
- initial-scale=1.0 осигурява заредената страница да не се появява никакво zoom-ване на екрана
Responsive картинки
Bootsrtap 3 позволява да бъдат направени картинки, които се отварят по различен начин в зависимост от устройствата. За целта трябва да се добави клас .img-responsive на img тага. Този клас добавя max-width: 100%; height:auto, така че картинката да се ръководи от родителския елемента
<img src="..." class="img-responsive" alt="Responsive image">
Containers
С помощта на класа .container може много лесно да се оформя и центрира даден текст.
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Типография
Headings
Всички HTML хединги са имплементирани в Bootstrap (h1..h6). Също така могат да се добавят подзаглавия по 2 начина: първият е чрез тага small, а вторият е когато се добави клас .small - тогава се появява по малък текст в по-светъл цвят.
<h1>h1. Bootstrap heading <small>Secondary text</small></h1> <h2>h2. Bootstrap heading <small>Secondary text</small></h2> <h3>h3. Bootstrap heading <small>Secondary text</small></h3> <h4>h4. Bootstrap heading <small>Secondary text</small></h4> <h5>h5. Bootstrap heading <small>Secondary text</small></h5> <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
Addresses
Могат да се добавят адреси. Default-ната настройка за адресите е display:block.
<address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address>
Blockquotes
Този таг се използва, за да се отбележи някакъв цитат :)
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <small>Someone famous in <cite title="Source Title">Source Title</cite></small> </blockquote>
Lists
- Подреден списък - ordered list - чрез различни атрибути списъкът може да е с арабски или римски цифри, азбука и т.н.
- Неподреден списък - unordered list - стандартната стойност за неподредените списъци са булетите, но чрез допълнителна настройка те може да изчезнат или да се заменят с по-подходящ символ или картинка
-
Definition list - списъкът съдържа dt (дефинитион терм) и dd(definition of definition term) елементи
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
<dl class="dl-horizontal"> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> </dl>
Код
Има 2 начина да се представи код в Bootstrap:
- чрез таг code - той е за код Inline
For example, <code>section</code> should be wrapped as inline.
- чрез таг pre - той е за код block
<p>Sample text here...</p>
Таблици
Има различни атрибути, които Bootstrap предоставя на своите клиенти:
-
Stripped table - появява се раирана таблица
# First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter -
Bordered table - таблица с рамка
# First Name Last Name Username 1 Mark Otto @mdo Mark Otto @TwBootstrap 2 Jacob Thornton @fat 3 Larry the Bird @twitter
-
Hover table - Светлосив background ще се добави при попадане на курсура на мишката
# First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter
-
Condensed table - падинга се намалява на половина
# First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter
Форми
Формите в Bootstrap са 3 вида:
-
Vertical form
<form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> -
Inline form
<form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-default">Sign in</button> </form> -
Horizontal form
<form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form>
Бутони
Стандартния клас, който Bootstrap предоставя за бутоните е .btn.
Същестуват различни атрибути, чрез които могат да се модифицират бутоните според нуждите на клиента - бутони, представляваши позитивни (btn-success) или негативни действия (btn-danger), информационни бутони (btn-info), предупредителни бутони (btn-warning) и други. Също така могат да се регулират формата и размерите им.
Bootstrap Advanced Features
В следващите няколко абзаца ще представим няколко от по-интересните фийчъри, които предоставя bootstrap.
Dropdown Меню
За да може читателя да придобия най-ясна представа за това как изглежда дизайна ще покажем менюто в този сайт.
Както виждате на картинката менюто Компоненти представлява dropdown меню. След натискане на "Компоненти" се появява подменю. Може да се реализира по следния начин:
Accordion menu
Акордиън менютата се използват изключително често при създаването на web страници. Чрез тях може да се управлява голямо количество текст под формата на меню - то може да се стане изключително подредено и прибрано, а и изглеждащо добре.
Сега ще демонстрираме едно такова меню (за да го тествате натиснете на някои от линковете - What is HTML? / What is Twitter Bootstrap? / What is CSS? ):
HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. Learn more.
Twitter Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions.
CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc.
Popovers
Това са изскачащи съобщения при натискане на определен бутон. За разлика от останалите атрибути при този трябва да се добави и скрипт към кода:
$(function () { $("[data-toggle='popover']").popover(); });
Картинки
Картинките могат да изглеждат по следния начин:
<img src="img/test.jpg" alt="test" class="img-rounded"> <img src="img/test.jpg" alt="test" class="img-circle"> <img src="img/test.jpg" alt="test" class="img-thumbnail">