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 Джанго или Рельсы? Как следить за качеством кода? Часть первая: зачем




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

2 Как найти себе замену 1 2 Хочу научиться сторителлингу 2