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
1	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

Email address

Password

File input
Example block-level help text here.

Check me out

<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

Email address

Password

Remember me

<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

Email

Password

Remember me

<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 меню. След натискане на "Компоненти" се появява подменю. Може да се реализира по следния начин:

Accordion menu

Акордиън менютата се използват изключително често при създаването на web страници. Чрез тях може да се управлява голямо количество текст под формата на меню - то може да се стане изключително подредено и прибрано, а и изглеждащо добре.

Сега ще демонстрираме едно такова меню (за да го тествате натиснете на някои от линковете - What is HTML? / What is Twitter Bootstrap? / What is CSS? ):

1. What is HTML?

HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. Learn more.

2. What is Twitter Bootstrap?

Twitter Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions.

3. What is CSS?

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">