<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

Как устроена сетка Bootstrap

Как устроена сетка Bootstrap

Сетка Bootstrap состоит из 12 колонок, так как число 12 делится на большое количество чисел без остатка. Деление на числа 2, 3, 4, 6, 12, позволяет получить много вариантов равных частей. Для верстки любого макета, 12 колонок вполне достаточно. Основу сетки Bootstrap составляют 3 обязательных класса, по аналогии с табличными тегами.

.container --> <table>    // контейнер
.row --> <tr>    // ряд
.col-x-x --> <td>    // колонка, где x будет с разными значениями

Классический пример сетки с двумя колонками.

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            Первая колонка
        </div>
        <div class="col-sm-6">
            Вторая колонка
    </div>
</div>

Контейнеры в Bootstrap 4

Сетка должна быть обернута в класс .container или .fluid-container. В чем разница? Класс .container задает фиксированную ширину. Это значит, что при увеличении размеров экрана, блоки не будут растягиваться на всю ширину страницы.

Класс .fluid-container будет тянуть блоки на всю ширину страницы, как резина.


Ряды в Bootstrap 4

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

<div class="container">
<div class="row">
    <div class="col-md-12">
        Шапка
    </div>
<div class="row">
    <div class="col-md-8">
        Контент
    </div>
<div class="col-md-4">
        Колонка справа
    </div>
<div class="row">
    <div class="col-md-12">
        Подвал
    </div>
</div>

Колонки в Bootstrap 4

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

.col-          // extra small (<576px) для мобильных
.col-sm       // small
.col-md      // medium
.col-lg     // large
.col-xl    // extra large (>1200px) для больших десктопов

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

.col-sm-6     // на маленьких экранах блок займет 6 колонок
.col-lg-3     // на большом экране тот же блок займет 3 колонки

В HTML разметке мы прописываем блоку, сколько ему колонок занимать на маленьком и большом экране.

<div class="col-sm-6 col-lg-3"></div> </code>

Ширина колонок

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

Как получить 5 колонок одинаковой ширины?

Для этого есть специальный класс .col.

<div class="container">
     <div class="row">
        <div class="col">Column 1</div>
        <div class="col">Column 2</div>
        <div class="col">Column 3</div>
        <div class="col">Column 4</div>
        <div class="col">Column 5</div>
    </div>
</div>

Высота колонок

А как насчет высоты, вертикального выравнивания? И здесь так же можно не волноваться. В сетке Bootstrap 4 все колонки имеют одинаковую высоту, независимо от количества контента.


Отступы у колонок

У Bootstrap есть классы для добавления отступов колонок, которые начинаются со слова offset, затем указывается величина экрана и количество колонок. Сдвинуть элемент вправо на 3 колонки.

<div class="row">
    <div class="col-md-3 offset-md-3"></div>
</div>

Вложенные колонки

В колонку можно вкладывать новую сетку, где также доступны все 12 колонок. Класс .container во вложенной сетке прописывать уже не нужно, сразу создаем ряд.

<div class="col-md-12">
    <div class="row">
        <div class="col-md-6">
             Вложенный блок 1
        </div>
        <div class="col-md-6">
            Вложенный блок 2
        </div>
    </div>

Горизонтальное выравнивание колонок

Для горизонтального выравнивание относительно главной оси, в Bootstrap есть классы:

justify-content-center //     по центру
justify-content-start //     в начале главной оси
justify-content-end //     в конце главной оси

Заключение

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

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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