sunnyblik (sunnyblik) wrote,
sunnyblik
sunnyblik

Category:

Изучаем css framework Twitter Bootstrap

Что  такое Twitter Bootstrap
Bootstrap, как и любой другой css фреймворк - это подготовленная css библиотека, которая позволяет использовать готовые элементы при верстке страниц, что позволяет упростить и ускорить работу верстальщика.

Преимущества Bootstrap:


  • сетка из 12 столбцов для расположения элементов на странице

  • предназначен как для начинающих верстальщиков, так и профессионалов

  • написан на less, что дает большой фронт работы ( например, изменять кол-во столбцов, ширину и расстояние между ними)

  • Responsive design.(Адаптивный дизайн) Меняется ширина макета, в зависимости от ширины окна браузера. Например, на 17'' мониторе сайт будет отображен по ширине во весь экран. А также на 19'' мониторе - сайт по ширине тоже будет отображен во весь экран. Это достигается за счет разной ширины столбцов сетки.

  • Кроссплатформленность ( все браузеры (включая IE7), мобильные устройства, планшеты, смартфоны.) Есть также возможность скрывать элемент для определенного устройства.


Скачиваем Bootstrap, обзор скачанных файлов
Переходим на эту страницу
И у нас есть выбор:


  • нажать на кнопку "Download Bootstrap  (v2.0.4)". На момент написания этой статьи версия v2.0.4. В этом случае вы скачаете архив, в котором будут лежать папки: css, js, img. То есть в папке "css" уже будут лежать скомпилированные файлы стилей css.

  • или же перейти на Гитхаб и оттуда скачать zip архив, в котором будут исходники на less + тотже набор что и в первом случае, а также примеры страниц.

Попутно обязательно ознакомьтесь с функционалом boostrap, просмотрите ссылки в шапке странице (Overview, Scaffolding, Base CSS, Components, Javascript plugins, Using LESS, Customize, Examples) Все эти элементы можно лего будет создавать

Что такое скомпилированные и не скомпилированные файлы
Так как изначально bootstrap написан на less (язык стилей). То есть, для того чтобы получить файлы *.css - нужно файлы less скомпилировать в файлы css. Первый вариант нам и предлагает скачать уже готовые файлы css.
! Важно обратить внимание, что только в браузере FireFox будет работать less локально (т.е. если будете запускать со своего компьютера, без веб сервера)

Итак, мы скачиваем архив Download Bootstrap  (v2.0.4) и распаковываем.
В результате у нас есть папка bootstrap, а в ней:


  • css

  • img ( 2 файла с белыми и черными иконками)

  • js (файл javascript для тех элементов bootstrap, которые его требуют: например, раскрывающийся список, галерея картинок и тд)

Рассмотрим файлы стилей, которые есть в папке css:


  • bootstrap.css - сами стили bootstrap. Это обязательный файл для подключения.

  • bootstrap-responsive.css - отвечает за адаптивную разметку. Реагирует на изменение размера окна. (различная ширина столбцов: 42px, 60px, 70px)
    Если этот css не подключить то ширина столбца будет 60px (ширина макета 980, как для монитора 17")


Уроки Twitter Bootstrap. Создаем простую страничку:
ДЕМО | СКАЧАТЬ

Вы можете скачать или посмотреть мой пример. Я специально его сделал простым. Думаю, вам будет несложно в него вникнуть, посмотрев исходный код.
Если есть у Вас вопросы - пишите, постараюсь помочь!

Сведения по bootstrap, которые важно знать:
1. Контент страницы нужно обязательно вложить в <div class="container"></div>
2. Строки обозначаются:
3. В нужную нам строку вкладываем нужные нам по ширине столбцы. например мы можем сейчас вложить 1 столбец во всю ширину <div class="span12"></div>. Всего ширина составляет 12 столбцов.Например, мы может в нашу строку вложить следующие столбцы: , главное, чтобы в сумме они давали число 12.
4. Резиновая разметка: При резиновой верстке идет плавное растягивание ширины столбцов. Ширина столбцов зависит от ширины окна браузера. Для того чтобы на нашем сайте была резиновая разметка нужно заменить
и  все
на следующий класс:
и

5.
Классы, которые можно применить:
class="well" - показывает границы блока.например в div, p.
.pull-right в нем прописано следующее: {float: right;}
.pull-left {float: left;}
.hide {display: none;}

6. Работа с таблицами. Иногда нужно указать фиксированный размер столбцов таблицы. По умолчанию ширина задается автоматически. Наглядный пример https://github.com/twitter/bootstrap/issues/863

7. При работе с bootstrap есть 2 места указания своих стилей:

  1. редактирование непосредственно сам файл bootstap.css

  2. создание своего style.css, и подключение.

Первый вариант удобен тем, что вы приспосабливаете исходники bootstrap под себя. Однако во втором случае вы сможете легко обновить bootstrap. Оба варианта могут существовать. Какой выбрать - решать вам, исходя из ваших задач.

8. В свойствах класса "row" указан {margin-left: -20px}
поэтому:
"row" обязательно внутри себя должен содержать "span".
или
писать "row-fluid", тогда внутри можно не писать "span".
Иначе все съедет влево.
Пример:





  1. <!-- row -->

  2. <!-- правильное отображение текста - когда span вложен в row -->

  3. <div class="row">

  4. <div class="span12">

  5. <p>Текст отображается правильно</p>

  6. </div>

  7. </div>


  8. <!-- не правильное отображение текста - когда span не вложен в row -->

  9. <div class="row">

  10. <p>Текст съезжает влево</p>

  11. </div>


  12. <!--А теперь тоже самое прописываем только с row-fluid -->

  13. <!-- правильное отображение текста - когда span вложен в row-fluid -->

  14. <div class="row-fluid">

  15. <div class="span12">

  16. <p>Текст отображается правильно</p>

  17. </div>

  18. </div>


  19. <!-- правильное отображение текста - когда span не вложен в row-fluid -->

  20. <div class="row-fluid">

  21. <p>Текст отображается правильно</p>

  22. </div>

подсвечен с помощью Likecode.ru

9. Если вы пишите на less, то компилировать файлы less в css можно следующими способами:

  • он лайн на сайте http://leafo.net/lessphp/

  • или же у себя на сервере через crbhgn php

  • на стороне клиента, предварительно подключив библиотеку less.js Этот вариант не совсем удобен тем, что если у клиента будет отключен javascript, то он не увидит никаких стилей.


И дополнительно, полезный материал, который я нашел в инете:

Полезные ссылки:
Галереия, календарь, кнопки и другое: http://internetwebsitedesign.biz/twitter/20-beautiful-resources-that-complement-twitter-bootstrap

Генерация кнопоки под bottstrap http://www.plugolabs.com/twitter-bootstrap-button-generator/
Календарь для bootstrap:

Видеоуроки, статьи:
Web Design tut+ (Закладки, навигация, tabs, заголовки)
Краткая статья на английском
Ajah подгрузка из MySQL в input поле через bootstrap (php + mysql + bootstrap)


Видеоуроки от Sorax:

1 урок. 7. Быстрый макет страницы. Простая навигация + подключение style.less
много фонов: http://subtlepatterns.com/
2 урок. 8. Разметка web-страницы с Bootstrap. Азы. строки и столбцы. резиновая разметка
3 урок. 10. Таблицы, формы, кнопки, иконки .
используем less часть 1
используем less часть 2

Полезные дополнения и фитчи:


  1. 18 инструментов bootstrap

  2. Как добавить несколько уровней вложения меню

  3. Bootstrap по русски

  4. Kickstrap — форк Twitter Bootstrap

  5. Небольшой совет тем, кто захочет использовать Bootstrap'ные иконки: они сохранены в растре, поэтому для разных размеров/цветов нужно делать новые спрайты. Лучше выбрать WebSymbols — они прилично выглядят (см. driversworld.us/app/feedback/), векторные, да и лицензия у них приятнее: www.justbenicestudio.com/studio/websymbols/

  6. Платные темы и шаблоны

  7. http://bootsnipp.com - на сайте собраны готовые сверстанные элементы на bootstrap (формы, таблицы, вкладки, карусель слайдеры и много другое)

  8. http://tutorialzine.com/2013/07/50-must-have-plugins-for-extending-twitter-bootstrap/ - готовые плагины для бустрэпа. Особенно отметил - http://twitter.github.io/typeahead.js/



Проекты, которые мне понравились, сделанные с помощью bootsrap:
http://builtwithbootstrap.com - каталог сайтов, сделанных на bootstrap
http://accentudate.com - сайт знакомств
http://wrapbootstrap.com/preview/WB003U894 - оформлены новости
http://bragthemes.com/blog/ - блог с кнопками
http://www.bitblue.cl/ -обтекание текстом справа картинок
http://logobro.com/ - сайт по разработке логотипов
http://www.phil-taylor.com - сайт визитка с новостями
http://phpdev.by/ - cообщество PHP разработчиков в Беларуси
http://likecode.ru/ - подсветка кода для блогов
Tags: bootstrap
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 10 comments