x
 
Василий
19 октября 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Зачем дизайнеру Бутстрап?


Чтобы быстрее создавать интерфейсы в едином стиле, разработчики Твитера создали Бутстрап — коллекцию ХТМЛ- и ЦСС-шаблонов. В Бутстрапе есть всё необходимое для прототипирования: адаптивная сетка, настроенная типографика, формы, кнопки, навигация, карусели и попапы.

С Бутстрапом легко сверстать статью с адаптивом, врезками и фактоидами:

Редакторам: верстка статьи в Бутстрапе. Вебинар Максима Ильяхова

Или собрать свой Пинтерес без помощи программистов:

<!--
  navbar — задаёт шапку сайта,
  navbar-light, bg-light включают её светлую версию.
-->
<nav class="navbar navbar-light bg-light">
  <!-- Логотип или название сайта. -->
  <a class="navbar-brand" href="#">Шминтерест</a>

  <form class="form-inline">
    <!-- Кнопка с зеленой обводкой. -->
    <button class="btn btn-outline-success" type="submit">
      Добавить фото
    </button>
  </form>
</nav>

<!--
  jumbotron — лид, въезд на плашке.
-->
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <!-- display-3 увеличивает кегль и интерлиньяж. -->
    <h1 class="display-3">Арбатов</h1>
    <p class="lead">
      Нет, это не <nobr>Рио-де-Жанейро</nobr>,
      это гораздо хуже
    </p>
  </div>
</div>

<!--
  container-fluid — контейнер для содержимого страницы.
-->
<div class="container-fluid">
  <!--
    row — этаж, флекс-контейнер.
    justify-content-center выравнивает его содержимое
    по центру.
  -->
  <div class="row justify-content-center">
    <!--
      col-xs-12 заставляет элемент использовать
      все 12 колонок. col-lg-8 заставляет элемент
      использовать 8 колонок на широких экранах.
    -->
    <div class="col-xs-12 col-lg-8">
      <div class="card-columns">
        <!-- Карточка с картинкой или текстом. -->
        <div class="card">
          <img class="card-img"
            src="https://unsplash.it/250/500">
        </div>

        <!-- ... -->
      </div>
    </div>
  </div>
</div>

Что дальше

P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор закрыт. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Комментарии

Женя Волков
19 октября 2017

Если разбираетесь в HTML и CSS, то не советую использовать Пингенду. Довольно неудобный текстовый редактор, сомнительная польза от интерфейса и риск сгенерировать запутанный и грязный код, перетаскивая блоки мышью.

Виталий Ким
24 октября 2017

Дизайнеру Бутстрап нужен затем же, зачем строителю готовые блоки и кирпичи ;-).

Можно каждый раз делать свои, но тогда строительство каждого объекта будет долгим, и не факт, что каждый элемент будет качественно изготовлен (сроки-то поджимают).

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

А можно воспользоваться готовыми стандартами и материалами, составить их как нужно, и получится дом, достаточного качества и в приемлемые сроки.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Расскажите об обязанностях технического директора в бюро Как попросить клиента помочь с дебагом? 1 Как бороться с багами? Часть восьмая: порефлексировать Как бороться с багами? Часть седьмая: исправить




Недавно всплыло

Можно ли достичь эффекта переливания без встраивания видео на сайт? 1 6 1 2