<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

Данный курс научит Вас программировать на языке Python, который крайне желательно знать любому, кто хоть иногда имеет дело с компьютерами. Курс состоит из 6 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Пример адаптивной верстки на Bootstrap

Пример адаптивной верстки на Bootstrap

На этом уроке мы сверстаем одну секцию реального макета одностраничного сайта, используя только сетку из фреймворка Bootstrap. Это комбинированная верстка, когда для построения HTML структуры, используются готовые классы. А для стилизации элементов и задания отступов, пишутся свои классы.

Пример секции макета

На скриншоте изображена одна секция с направляющими. Мы видим, что фоновое изображение растягивается на всю ширину браузера, а ширина контентной части ограничивается двумя крайними направляющими и равняется 960 пикселям.

Пример адаптивной верстки на Bootstrap.

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

Наша секция мысленно делится на левую текcтовую часть и правую графическую часть. На больших и средних экранах левая половинка занимает 8 колонок (col-md-8), а правая - 4 колонки (col-md-4). Префикс md начинает работать в точке 768 пикселей и выше.

Создадим общий контейнер с фоновым изображением, растягивающимся от края до края.

<section class="app">
    ...
</section>


.app {
    background-image: url(/assets/img/app_bg.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Внутри секции поместим бутстраповские классы (базовую разметку). Все названия классов начинающиеся с app - пользовательские. Сначала всегда идет общий контейнер container со строками row, строка является контейнером для колонок col. В данном макете - одна строка и соответственно 2 колонки.

<section class="app">
  <div class="container">
   <div class="app__content">
    <div class="row">
     <div class="col-md-8">
      левая часть
     </div> <!-- /.col-8 -->
     <div class="col-md-4">
      правая часть
     </div><!-- /.col-4 -->
    </div><!-- /.row -->
   </div><!-- /.app__content -->
  </div><!-- /.container -->
</section><!-- /.app -->

Зачем в базовую разметку мы добавили класс app__content? Только для того, чтобы на больших мониторах ограничить контентную часть по ширине (максимум 960 пикселей) и выровнять её по центру.

.app__content {
    max-width: 960px;
    margin: 0 auto;
}

Заполняем контентом левую колонку.

<div class="col-md-8">
  <h2 class="app__title">
    Хотите получить бесплатную<br> юридическую консультацию?
  </h2>
  <ol class="app__list">
    <li>
      <span class="app__list__red">1.</span>
      Скачайте наше <a class="app__list__link" href="#">приложение Reworld</a>
      для iOS или Android
    </li>
    <li>
      <span class="app__list__red">2.</span>
      Посмотрите один из 150 познавательных видеороликов
    </li>
    <li>
      <span class="app__list__red">3.</span>
      Введите Ваш номер телефона и с Вами свяжется юрист для консультации
    </li>
  </ol>
</div> <!-- /.col-8 -->

и правую колонку

<div class="col-md-4">
  <div class="app__icon--android">
    <a href="#"><a href="#">
    <img src="assets/img/android-app-store.png" alt="android"><a href="#">
    </a>
  </div>
  <div class="app__icon--iOS">
    <a href="#">
    <img src="assets/img/iOS-app-store.png" alt="apple">
   </a>
  </div>
</div> <!-- /.col-4 -->

Однако это ещё не всё, нужно позаботиться о планшетах и смартфонах. В текущем положении, элементы слишком сильно прижаты по горизонтали.

При уменьшении экрана, блоки должны автоматически перестроится друг под друга и оба занимать по 12 колонок на всех дисплеях меньше 768 пикселей. Добавим col-sm-12 для устройств не меньше 576 пикселей и col-12. Класс col без префикса работает на экране, меньше 576 пикселей.

<div class="col-12 col-sm-12 col-md-8">..</div>
<div class="col-12 col-sm-12 col-md-4">..</div>

Пример адаптивной верстки на Bootstrap.

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

@media (max-width: 768px) {
  .app__title {
    padding-top: 50px;
    padding-bottom: 30px;
  }
  .app__list {
    padding-bottom: 20px;
  }
  .app__icon--android {
    padding-top: 40px;
    }

  .app__icon--iOS {
    padding-bottom: 60px;
  }
}


@media (max-width: 576px) {
  .app__list {
    padding-bottom: 50px;
  }
  .app__icon--android {
    padding-top: 0;
  }
}

Результат адаптивной верстки под мобильные устройства.

Пример адаптивной верстки на Bootstrap.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.