Как создать несколько адаптивных столбцов с помощью Bootstrap 3
Опубликовано: 2022-02-16
Хотите улучшить отзывчивость своего сайта с помощью Bootstrap? Наиболее важным аспектом Bootstrap является его 12-колоночная сетка для мобильных устройств. Это то, что вы используете для создания адаптивного макета.
В этом видеоуроке вы создадите базовый веб-сайт с помощью Bootstrap и узнаете, как использовать сетку Bootstrap для создания адаптивного макета с несколькими столбцами.
Перед просмотром учебника
Прежде чем вы сможете следовать приведенному ниже видеоуроку и научиться создавать собственные адаптивные столбцы, вам потребуется:
- Базовое понимание того, что такое Bootstrap
- Базовое понимание того, что такое сеточная система Bootstrap
- Загрузите Bootstrap на жесткий диск
- Создайте базовый файл Bootstrap index.html для дальнейшего развития
Что такое бутстрап
- Bootstrap — это фреймворк для разработчиков HTML, CSS и JavaScript, работающих над адаптивностью веб-сайтов.
- Он состоит из уже готовых адаптивных стилей CSS для столбцов, списков, навигации, веб-форм и многих других веб-элементов.
Понимание системы сетки Bootstrap
- Система сетки Bootstrap классифицирует размеры экрана по четырем типам: очень маленький, маленький, средний и большой.
- Extra-small предназначен для мобильных телефонов. Small предназначен для планшетов, таких как I-Pad. Medium предназначен для настольных мониторов. А Large — только для больших настольных мониторов.
- Чтобы помочь вам точно настроить отзывчивость для этих четырех типов экранов, Bootstrap делит ширину устройств просмотра веб-страниц на сетку из 12 столбцов.
- Каждый из этих четырех типов Bootstrap Grid становится отзывчивым только в том случае, если вы назначаете ему собственный назначенный класс CSS.
- Например, чтобы блок div реагировал на очень маленькие устройства, он должен иметь собственный класс Bootstrap .col-xs-<number_of_columns_to_take>, например <div class="col-xs-6">.
Загрузка Bootstrap
- Перейдите на сайт getboostrap.com и нажмите кнопку «Загрузить Bootstrap»:
- Вы увидите страницу «Начало работы». Нажмите на кнопку «Скачать Bootstrap»:
- Сохраните этот файл на жестком диске вашего компьютера в любом месте. Его не нужно сохранять на веб-сервере.
- Разархивируйте этот файл и переименуйте извлеченную папку в «bootstrap».
Подготовка страницы index.html Basic Bootstrap
Шаг 1. Создайте файл index.html Bootstrap
- Вернитесь на страницу «Начало работы» (http://getbootstrap.com/getting-started/#download) и нажмите ссылку «Основной шаблон» на правой боковой панели:
- Вы увидите код «Базовый шаблон». Нажмите на кнопку «Копировать», чтобы скопировать код:
- Вставьте код «Basic Template» в текстовый редактор и сохраните его как index.html в той же папке, где вы сохранили папку «bootstrap». Теперь он станет главной страницей вашего сайта Bootstrap.
- Откройте только что созданный index.html и взгляните на свой базовый веб-сайт Bootstrap:
- Откройте файл index.html в текстовом редакторе и между открывающими тегами <body> и <h1> добавьте <div class="container"> (1). Закройте этот новый div после закрывающего тега </h1> (2) и сохраните файл:
- Проверьте внешний вид страницы и обратите внимание на сообщение «Hello World!». больше не прилипает к краю страницы и теперь немного смещен вправо, чтобы выглядеть немного опрятнее. Класс «контейнера» Bootstrap, который вы назначили этому div, добавил к этому тексту некоторое поле:
- Вернитесь к файлу index.html. Между тегами <h1> и </h1> замените «Hello World!» на «Трастхаб». Сохраните файл и проверьте интерфейс вашего сайта.
Шаг 2. Добавьте некоторый контент и боковую панель
- Вернитесь к файлу index.html и под кодом <h1>Trustub</h1> скопируйте и вставьте следующий код:
<div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> </div>- Вернитесь к интерфейсу вашего сайта. Обновите его. Теперь вы должны увидеть свой контент и боковую панель «Наша команда» без адаптивного макета с колонками:
- Вернитесь на сайт getbootstrap.com и в верхнем меню нажмите кнопку «CSS»:
- На боковой панели нажмите кнопку «Система сетки»:
- Прокрутите страницу вниз до раздела «Параметры сетки» (1) и обратите внимание на 12-колоночную систему сетки Bootstrap с ее четырьмя типами размеров экрана, их шириной и назначенными им префиксами классов CSS (2):
- Не беспокойтесь, если параметры системы сетки Bootstrap пока не имеют для вас смысла. Все это соберется для вас за секунду, когда вы начнете играть с ними на своем сайте.
- Откройте файл index.html еще раз и под <div class="row"> для существующего <div> введите класс "col-md-9". Теперь ваш новый div должен выглядеть "div class="col-md-9">:
- Теперь перейдите в свой div, расположенный прямо над заголовком <h2> «Out Team», и присвойте ему CSS-класс сетки Bootstrap «col-md-3». Сохраните файл:
- Вернитесь на свой сайт, чтобы увидеть это изменение в действии. Нажмите клавишу F5 на клавиатуре, чтобы обновить ваш сайт. Теперь вы увидите, что ваша область контента и боковая панель расположены рядом.
- Теперь ваш контентный блок занимает 9 из 12 доступных в его сетке Bootstrap колонок (75% всей ширины экрана рабочего стола). И ваша боковая панель занимает 3 из 12 столбцов сетки Bootstrap (25% всей ширины экрана рабочего стола):
Великолепно! Теперь все готово, чтобы следовать приведенному ниже видеоуроку. Давайте начнем.
Поздравляем! Вы только что узнали, как создать адаптивный макет веб-страницы с несколькими столбцами с помощью Bootstrap. Хотите узнать больше о Bootstrap? Если да, посетите наш канал OSTraining на YouTube и посмотрите «Учебники по Bootstrap Framework».