Если вы никогда не слышали о Bootstrap, фреймворке, разработанном Twitter для создания красивых веб-сайтов, вы пропустите! Bootstrap позволяет довольно быстро и легко создавать веб-сайты без особых знаний CSS (каскадные таблицы стилей). Если вы новичок в программировании для Интернета, вам не нужно ничего знать о CSS, чтобы начать изучать, как работает Bootstrap; все, что вам нужно, это один HTML-документ. Мы собираемся взглянуть на Bootstrap, показать вам, что это такое, как это работает, и если это хороший вариант для каждого сайта, который вы создаете.
Вставка Bootstrap API в ваш HTML-файл
У вас есть несколько вариантов вставки Bootstrap в ваш основной файл проекта. Первый вариант - вставить все необходимые файлы Bootstrap в ваш проект. Вы можете сделать это, загрузив пакет и загрузив его в папку вашего проекта. Вам, конечно, придется связать основной CSS-файл Bootstrap с вашим документом. На официальном сайте Bootstrap есть пошаговое руководство, как это сделать.
Другой вариант - пропустить загрузку пакета и использовать сеть доставки контента (CDN). CDN позволяет связать основные файлы Bootstrap с вашим HTML-документом, даже не загружая его. Это, конечно, не всегда хорошо для профессиональных веб-сайтов, так как я не слишком быстро оставлю свой бизнес или страницу портфолио на произвол судьбы, если этот сервер когда-нибудь выйдет из строя. Лучше всего, чтобы файлы были в вашем проекте, но для изучения CDN все будет в порядке.
Чтобы вставить Bootstrap в ваш HTML-документ, вам просто нужно поместить следующий код внутри
тег в вашем HTML-документе:После того, как эти ссылки будут вставлены в этот заголовочный тег, вы должны начать использовать классы Bootstrap. Ваш документ должен выглядеть примерно так:
Бутстрап и классы
Элементы Bootstrap разбиты на классы, которые представляют собой просто набор предварительно написанных CSS, которые вы можете вставить в свою разметку. Вставить классы в разметку очень просто, вам просто нужно знать имя класса, который вы хотите использовать, и затем применить его к одному из ваших HTML-элементов, используя значение class = ”classname”, как обсуждалось в предыдущей статье.
Трудная часть - выяснить, как все это работает вместе, чтобы создать что-то красивое. Вы можете проверить все различные классы, доступные в Bootstrap, прямо из официальной документации. Теперь освоение Bootstrap - другая история. Это не то, чему мы или кто-то еще можем научить вас. Вы можете смотреть учебник после учебника, но чтобы научиться пользоваться фреймворком, это сопровождается большим количеством проб и ошибок. И это требует от вас практического участия в ваших собственных проектах.
Имея это в виду, я умоляю вас запустить собственный HTML-проект на вашем компьютере с помощью Atom или другого текстового редактора, посмотреть, что такое классы HTML и CSS, а затем начать играть с Bootstrap. И если вы знаете достаточно разметки, возможно, даже создайте свой собственный сайт-портфолио в качестве тестового упражнения.
Является ли Bootstrap приемлемым вариантом для каждого сайта?
Bootstrap - это отличный фреймворк, но подходит ли он для каждого сайта, который вы создаете? Это действительно зависит от разработчика, а также от требований проекта. Во многих профессиональных средах у вас не будет выбора, какие технологии вы используете, так как это будет в значительной степени зависеть от руководителя проекта. Если указанный Project Manager выберет использовать Bootstrap, вы также будете комбинировать его с кучей пользовательских CSS. Это то, что обычно делает ваш сайт уникальным и отличается от других сайтов, использующих Bootstrap.
Лично я не вижу Bootstrap как отличный вариант для каждого сайта. Конечно, это может помочь и обеспечить некоторые ярлыки, но в конечном итоге я обнаружил, что проектирование с нуля с помощью CSS - это лучший маршрут в значительной степени благодаря контролю над ним. Но, повторюсь, если вы только начинаете заниматься веб-программированием, совсем не плохо использовать Bootstrap, но не полагайтесь на него в своей карьере.
Стоит отметить, что если вы начинающий разработчик, вам не следует использовать Bootstrap для всех проектов в вашем портфолио. Может случиться так, что вы можете быть опытным с API, но вы не совсем знаете, как обходиться с CSS. Тем не менее, хорошо иметь приличную смесь обоих в вашем портфолио (или даже исключительно CSS, так как это легко подхватить Bootstrap).
закрытие
Это все, что Bootstrap в двух словах. Как я упоминал ранее, я призываю вас начать собственный HTML-проект и добавить несколько различных классов к элементам, чтобы начать играть с фреймворком. Вы можете найти все различные компоненты, предлагаемые Bootstrap, с пояснениями и примерами кода здесь.
Bootstrap действительно отличный инструмент, но не забывайте полагаться только на него! Приятно быть знакомым с ним и разбираться в нем, а также убедиться, что вы погрузились в CSS, чтобы по-настоящему понять, что происходит за кулисами. Не только это, но и глубокие познания в CSS дополняют Bootstrap, позволяя вам по-настоящему создавать уникальные и красивые веб-сайты с собственными настройками.
