Разное

Здравствуйте. Попытался сегодня начать усваивать этот фреймворк. Неудачно. Что я делал?

1. Bootstrap 3 · Документация на русском языке Стал читать документацию, но ничего не понял. Как прорабатывать раздел Шаблоны? Просто смотреть их? Или это кирпичики, из которых придется делать сайты? Подружиться с документацией не удалось. Вопрос опытным пользователям: насколько полна документация на русском сайте (я посмотрел - клон официального английского)? Где брать недостающий материал?

2. Зашел на rutracker в поисках книги. По запросу bootstrap книг не оказалось. Там одни англоязычные видео-уроки, книг нет. Кроме одной, но не в том формате (djvu) Неужели так все просто?

3. На ozon'е даже за денежку русских книг не было.

4. Заприметил на рутрекере книгу Bootstrap Responsive Web Development на английском издательства O'Reilly. 110 страниц. Нашел книгу в pdf, скачал себе на планшет, буду разбираться.

Как работать с bootstrap?
1. Создать голый html-шаблон, подключить, что нужно.
2. Зайти в раздел Шаблоны русской документации. Выбрать нужный блок. Скопировать его со всеми стилями на сайт.
По такому принципу строиться работа с фреймворком?

но не в том формате (djvu)

А в чем проблема? DJVU можно открыть с помощью WinDjView

Мне попадались исключительно некачественные книги в формате djvu (чаще всего криво отсканенные). Кроме того, в djvu, в отличие от pdf (если pdf не скан), отсутствует возможность скопировать кусок текста/кода и вставить его на форум/в редактор. Кроме того, я читаю такие книжки на ipad. Там я знаю единственную читалку, которая поддерживает djvu, читалка бесплатная, а за поддержку djvu нужно заплатить 66 руб.

1. Понять принцип работы сетки (grid). То что там есть контейнер (резиновый и фиксированный) и 4 класса блоков на каждый из типов разрешений экрана.

Например, классика: базовый layout с сайдбаром

<div class="container">     <div class="row">         <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">             column 1          </div>          <div class="col-lg-2 col-md-2 col-sm-2 hidden-xs">             column 2          </div>     </div> </div>

видим что на больших (мониторы), средних (ноутбуки), маленьких (планшеты) размерах имеем обычный двухколоночный шаблон. А вот на экстамаленьких размерах (смартфоны) правая колонка, за счёт класса hidden-xs не будет показана.

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

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

В принципе, книга тут не особо нужна - надо просто начать пользоваться и всё само собой придёт. Главное свои старые парадигмы вёрстки поглубже засунуть, чтоб не мешали :)

Bootstrap довольно компактен, поэтому для него почти нет руководств, помимо официальной. Плюс его регулярно перепиливают. Учить особо его не нужно, как все, что касается программирования нужно использовать на практике и только потом читать. Сначала читать, а потом использовать тяжело. Идеальна схема - использовать, читать, использовать, использовать... Документация Bootstrap, кстати, на такой режим и заточена.
Начинаете делать, обращаясь за нужными элементами к руководству. Начните с кнопки и 12-колоночной верстки. Потом берите нужные вам элементы. Не торопитесь, просто используйте, хотя бы кнопки и 12-колоночную верстку. Все остальное автоматически потом к вам прилипнет само, по мере использования. Просто начните использовать то, что вам приглянулось, а Bootstrap ведь очень красивый и многим нравится.

зачем книги 110 страниц?
Вы можете освоить bootstrap за 2 дня

смотрите на примерах как зделано и все http://getbootstrap.com/getting-started/#examples

Как.. надо понять три вещи:
1. 12-ти колоночная модульная сетка - это основа основ бутстрапа. любой макет сайта вписывается в эту систему. почему именно 12 колонок, а не 13 или 14? Потому что 12 легко вписывается в золотое сечение. не буду расписывать тут, можно погуглить, что это, или прочесть эту статью http://habrahabr.ru/post/27491/.
2. все компоненты бутстрапа настраиваемы. то есть есть ядро - файл bootstrap.css и есть тема bootstrap-theme.css. ядро трогать не надо. а вот цвет, бордеры и прочее разных элементов, инпутов, кнопок и т.д. можно менять в теме. можно даже не использовать дефолтную тему, а скачать другую, например, тут http://designmodo.github.io/Flat-UI/ или придумать свою.
3. в бутстрапе есть много компонентов, которые упрощают верстку и дизайн, но не являются основными. они вспомогательны. их можно использовать, а можно и нет.

Чтобы быстро освоить бутстрап, надо хотя бы что-то сверстать с помощью него. начать лучше с сетки, потом с инпутов и прочих компонентов. дальше само пойдет.