Стартуем с Bootstrap

Bootstrap — один из самых известных фронтенд-фреймворков. Скорее всего вы о нем уже слышали. Если нет — мы расскажем.
10 февраля 201663Geek Brains3554014


Фото из архива NASA: запуск шаттла Atlantis из космического центра Кеннеди в 2010 году

Сначала кажется, что Bootstrap — легкий для новичков фреймворк. Это не так. Перед тем как окунуться в проект, поиграйтесь с фреймворком и получите опыт и понимание работы с его ключевыми элементами и компонентами. Это поможет избежать наиболее распространенных ошибок при работе с Bootstrap.

Лучшее, с чего стоит начать — документация. Но если вы считаете чтение документации скучным делом, и вместо этого предпочитаете читать код, то лучшее место для начала — сайт Bootstrap. Просмотрите исходный код сайта и проверьте каждый блок кода и его элементы. Это, вероятно, один из лучших и быстрых способов понять основы.

Всмотритесь в структуру страницы и разберитесь, как строятся макеты.

<div class="container">
    <div class="row">
    ...
    </div>
</div>

Измените размер окна браузера или используйте дополнение Chrome-а Viewport Resizer, чтобы узнать больше о медиа запросах утилит.

/* 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 (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Поиграйтесь с сеткой Bootstrap.

<div class="row">
    <div class="col-sm-7 col-md-9 col-xs-6">Left column</div>
    <div class="col-sm-5 col-md-3 col-xs-6">Right column</div> 
</div>

На W3Schools вы найдете полное описание всех классов CSS, компонентов и модулей JavaScript с примерами «сделай сам»:

  • Сетка трассировки в Bootstrap
  • Типографская разметка текста, кнопки, формы и элементы форм, вспомогательные классы, изображения, таблицы
  • Значки символов, выпадающие списки, навигация

Просмотрите исходный код и попытайтесь ознакомиться с максимальным количеством классов, насколько это возможно. Узнайте об условиях их использования: как, когда и почему. Это поможет вам быстрее двигаться вперед при написании HTML и элементов пользовательского интерфейса (UI).

Понимание Bootstrap становится еще важнее, если предстоит работать в команде. Мы не раз были свидетелями, когда каждый раз при добавлении нового кода CSS ломался UI на других страницах. Было довольно утомительно просматривать весь сайт и исправлять ошибки. Задумайтесь об издержках и деньгах, которые придется потратить на сверхурочное время разработчиков и помощь QA поддержки.

Пять ошибок при работе с Bootstrap, которые тратят время впустую

Центрирование текста или раскрывающихся блоков (DIV)

Используйте text-center

<p class="text-center">I am centered text</p>

center-block

<div class="center-block">I am centered text</div>

Но не center или <center>

Изменение размера шрифта

Используйте lead или small:

<p class="lead">I'm bigger paragraph text.</p>
<p class="small">I'm smaller paragraph text.</p>

В случае, если вам нужны более крупные или мелкие заголовки, не забывайте о .h1, .h2, .h3, .h4, .h5, .h6, .small. Используйте их так:

<h1 class="h2">Smaller Title with .h2</h1>
<h3 class="h1">Bigger Title with .h1</h3>
<h4 class="small">Smaller Title with .small</h4>

Запрет обтекания элементов или настройка элементов на автозапрет их дочерних записей, очистка отступов

Не создавайте новые классы, а используйте встроенный clearfix Bootstrap:

<div class="clearfix">...</div>

Изменение оформления или встраивание неупорядоченных списков и других элементов

Удалите дефолтный стиль списка и оставьте отступы в элементах списка. Это будет применено только к непосредственным дочерним элементам списка. В случае, если вам необходимо применить то же самое для вложенных списков, добавьте имя класса на них таким же способом.

<ul class="list-unstyled">
  <li>...</li>
</ul>
<ul class="list-inline">
  <li>...</li>
</ul>

Для чекбоксов (флажков) и радиокнопок есть checkbox-inline и radio-inline. И вы всегда можете добавить .form-inline к формам (не используйте <form>) для выровненных влево и inline-block-ов  (встроенных блоков) управления.

Выбор размера кнопок

Хотите необычно большие или маленькие кнопки? Пропишите btn-lgbtn-sm, или btn-xs для дополнительных размеров.

Не изменяйте основные файлы фреймворка непосредственно

При работе над большими проектами мы обнаружили, что лучший способ использовать фреймворк эффективно — создавать с его помощью новые, а не изменять его существующие основные файлы напрямую. Эта концепция одинакова для других платформ и библиотек, которые вы можете использовать в проекте.

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

Тем не менее, если вы начинаете работать над большим сайтом с несколькими разработчиками, будет лучше держать все раздельно и организованно. Переместите файлы фреймворка за пределы основной пользовательской папки CSS и храните их в не редактируемой папке, удалите неиспользуемые CSS с помощью Grunt или Gulp плагинов grunt-uncss или gulp-uncss. Другой способ держать все раздельно — брать файлы фреймворка с CDN. Содержание кода фреймворка отдельно дает вам быструю возможность обновляться до последней версии. Это также помогает свести к минимуму количество проблем с масштабируемостью и стилизацией.

Используйте имеющиеся ресурсы Bootstrap

С ростом популярности Bootstrap приходит и разнообразие полезных ресурсов: статьи, обучающие материалы, сторонние плагины и расширения, шаблоны и тематические надстройки. Вне зависимости от того, что вы ищете, вдохновение или фрагменты кода, вы будете иметь все необходимое, чтобы ускорить ваш прогресс.

Может сложиться впечатление, что располагая таким разнообразием ресурсов, любой бы мог воспользоваться их преимуществами и использовать их для своих проектов, но это не тот случай. Некоторые разработчики тратят свое время и замедляют разработку, пропуская некоторые большие фрагменты кода или ресурсы. Так же вы не должны слепо копировать и вставлять, вы должны понимать значительные части кода и адаптировать их к вашему стилю и техническим нуждам. Возможность найти и выбрать хорошие ресурсы и быть в состоянии эффективно использовать их — тоже умение и оно зависит от многолетнего опыта и знаний.

Bootstrap — один из лучших фреймворков, который предлагает вам большое количество инструментов и ресурсов для того, чтобы разгонять и ускорять процесс разработки приложений.

Он сэкономит вам много часов/дней работы при проектировании и кодировании UI. Каждый компонент и плагин тщательно документирован с примерами и блоками кода для более легкого использования и настройки. Он высоко ценится многими разработчиками и очень популярен как для прототипирования, так и для процесса создания. Это хороший инструмент для создания веб-сайтов, поддерживающих мобильные приложения. Bootstrap является замечательной отправной точкой для многих типов проектов; дает возможность передать проект в руки дизайнера и сказать «Сделай чтобы это выглядело прилично!» и у него не будет необходимости прорубать свой путь через код.

Самое главное, он позволяет вам разрабатывать вначале структуру и только потом заниматься шрифтами, цветами и разнообразными стилями. Потратьте время, чтобы изучить, что он может делать и разберитесь в том, как использовать его лучшим способом, чтобы вы могли получить то, что вы хотите быстрее.

 

Тем, кто хочет разобраться в веб-разработке, рекомендуем профессию «Веб-разработчик» от GeekBrains.

Новые комментарии