Руководство для начинающих по созданию адаптивного веб-сайта с помощью Bootstrap — часть 1

Последнее обновление: 5 июня 2019 г.

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

Что такое бутстрап?

Согласно официальному веб-сайту Bootstrap (getbootstrap.com), «Bootstrap — это самая популярная среда HTML, CSS и JavaScript для разработки адаптивных и мобильных проектов в Интернете». Проще говоря, Bootstrap — это исключительно простой фреймворк, помогающий ускорить веб-разработку переднего плана, а также привлекательный для разработчиков с разным уровнем квалификации.

Зачем использовать Bootstrap?

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

С чего начать

Чтобы начать работу с Bootstrap, вы должны посетить официальный сайт Bootstrap (http://getbootstrap.com/). Bootstrap — это проект с открытым исходным кодом, который размещается, разрабатывается и поддерживается на GitHub; это позволяет пользователям иметь доступ к исходному коду и понимать весь спектр фреймворка как инструмента для создания веб-сайтов.

Есть три способа загрузить текущую версию Bootstrap (v3.3.6): вы можете загрузить скомпилированную версию Bootstrap, вы можете загрузить исходный код Bootstrap и вы можете перенести платформу Bootstrap с Less на Sass. В этом случае, если вы новичок, я предлагаю просто загрузить готовую версию Bootstrap. Если вы хотите интегрировать фреймворк Bootstrap в проекты, предназначенные только для Rails, Compass или Sass, тогда вам следует перенести загрузку с Less на Sass.

После того, как вы загрузите файл Boostrap, вы должны разархивировать сжатую папку, чтобы увидеть структуру совместимого фреймворка Bootstrap. Посмотрите ниже, чтобы увидеть структуру файла:

Теперь вы можете просто поместить эти файлы в файловую систему любого веб-проекта, над которым вы работаете, и начать работу с Bootstrap для разработки и создания желаемого проекта. Для получения дополнительной информации о функциональности Bootstrap, которую мы рассмотрим во второй части этого поста, посетите веб-сайт getboostrap.com, чтобы просмотреть компоненты, функции CSS и функции JavaScript, доступные с помощью фреймворка.

Отзывчивый дизайн

Адаптивный дизайн — одна из отличительных черт фреймворка Bootstrap; Возможность гибкой разработки с помощью Bootstrap позволяет разработчикам разрабатывать единый веб-сайт, который может правильно форматироваться на всех платформах просмотра. Часто веб-сайт может быть хорошо спроектирован и пользовательский интерфейс оптимален только для одной конкретной платформы или размера экрана. Bootstrap прекрасно справляется с этими проблемами, позволяя разработчикам назначать определенным столбцам веб-страницы определенные размеры при чтении на меньшем экране. Существует четыре типа устройств, которые Bootstrap учитывает при создании адаптивных веб-сайтов:

• Очень маленькие устройства (смартфоны <768px)
• Маленькие устройства (планшеты >= 768 пикселей)
• Средние устройства (рабочие столы >= 992 пикселя)
• Большие устройства (рабочие столы >= 1200 пикселей)

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

Сеточная система

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

Вот пример обозначения системы сетки:

• Предопределенный класс строк создает строку
• В этой строке второй класс указывает «col-md-6».
• Это означает, что класс создает столбец, который охватывает 6 столбцов на веб-странице.
• «md» указывает, что это произойдет только на средних устройствах или рабочих столах, которые меньше или равны 768 пикселей.
• Класс «смещение» означает, что эти столбцы останутся пустыми. В этом случае смещение равно 3, поэтому три столбца останутся пустыми, чтобы дополнить часть содержимого.
  Эта сеточная система позволяет разработчикам быстро определять разделы контента и устанавливать соответствующие интервалы между контентом, чтобы получить чистый и отзывчивый дизайн.

Проблемы с Bootstrap

Размеры файлов JavaScript и CSS велики при прямой загрузке всех файлов Bootstrap. Это может привести к некоторым проблемам при создании быстрой страницы. Это связано с тем, что все файлы в файлах Bootstrap используются не полностью, и это может означать, что загрузка ненужных данных может стать проблемой. Это может повлиять на взаимодействие с пользователем, поэтому не стесняйтесь узнать об этом более подробно, посетив сообщение «Как использовать основы Bootstrap для улучшения взаимодействия с пользователем» (https://moz.com/ugc/how-to-use-bootstrap- основы для улучшения пользовательского опыта).

Я надеюсь, что вы все попробуете Bootstrap, так как это фантастическая среда для создания адаптивного и чистого дизайна веб-сайтов. Оставайтесь с нами, чтобы не пропустить следующий пост из этой серии, посвященный новым концепциям Bootstrap.

Автор: Эсме Васкес, младший веб-разработчик

мейкер, художник, геймер, кодер, веб-разработчик и блогер; Эсме является создателем недавней публикации в блоге Indiellect на сайте блога по управлению контентом Medium. Ее текущий опыт связан с веб-разработкой и разработкой игр; в настоящее время она работает и обучается SEO в That! Company в Лисбурге, Флорида, в качестве младшего веб-разработчика. Она стремится в будущем создавать видеоигры, которые отображают красоту человечества. Если у вас есть какие-либо вопросы, не стесняйтесь написать ей в Твиттере на @EsmeVazquez18 и/или добавить ее в LinkedIn.