Make Web-Sites not War
Make Web-Sites not War
Bootstrap – это популярный фрэймворк (библиотека), которая удобно, быстро и эффективно позволяет создавать адаптивные веб-страницы как для десктопного отображения, так и для мобильного. Это даже несколько больше, чем просто библиотека, как например, jQuery. Bootstrap – это целая платформа, если так можно выразиться. Он включается в себя как обширные технологии CSS, так и технологии JS. Интересной и полезной особенностью концепции Bootstrap является то, что все манипуляции со стилями с помощью него осуществляются только в HTML разметке документа с помощью классов.
При подключении Bootstrap к странице, он вносит ряд изменений в стили, которые не соотносятся с настоящими стилями этой страницы. По этой причине я вижу рациональным для демонстрации работы Bootstrap сделать отдельную, внешнюю веб-страницу, перейти на которую вы можете .
Так же мне бы хотелось дополнительно с акцентировать внимание на том, что лично я в применении технологий Bootstrap не вижу фундаментального смысла. Если вы достаточно хорошо знакомы с технологиями CSS, а именно с адаптивными технологиями, сеткой CSS Grid и CSS Flexbox, технологиями медиазапросов, то это позволит вам создавать столь же адаптивные веб-страницы, но с еще и более глубокой и гибкой их настройкой. В этом томе описания этой технологии будут описаны элементы, которые лично для меня кажутся уж слишком ограничивающими, превращающие разработчика в условного ребенка, который в погоне за скоростью не способен самостоятельно указать даже цвет текста. В виду всего этого, описание этого фреймворка будет весьма сжатым и в [описании] будет множество ссылок на внешние статьи учебников, так как мне не хотелось бы тратить на это слишком много времени. Если же вас заинтересует данная технология, то о ней всегда можно прочесть гораздо более исчерпывающее руководство, опять же, на том W3Schools. Снова отмечу, что да, технология действительно мощная, крайне полезна и универсальна для построения веб-сайтов, но лично я предпочитаю строить всё своими собственными руками.
Итак, как мы уже условились, ключ к красивому, а главное функциональному сайту кроется в его адаптивности, а именно, в его адаптивной (responsive) разметке элементов. То есть, разметка, реагирующая на различные размеры экранов устройств, на которых осуществляется загрузка веб-страницы и подстраивающаяся под них.
Прежде всего, основная задача для реализации подобного функционального поведения лежит на контейнерах. В Bootstrap контейнерами называются элементы <div> с классом 'container', которые содержат внутри себя какой-то элемент. Контейнеры являются основными и самыми необходимыми элементами в Bootstrap, если используется grid-система (установленная по умолчанию).
*для справки: grid-система в Bootstrap – это некая сетка размещения элементов на веб-странице. То есть, весь экран веб-сайта разбивается на колонки, а элементы внутри них способны автоматически подстраиваться друг под друга. В целом, CSS Grid-View, как мы говорили на странице посвященной CSS, во многом помогает в дизайне веб-страниц тем, что серьезно упрощает размещение элементов.
C помощью техники Grid-CSS и технологий Bootstrap мы можем разместить у себя на странице три адаптивных колонки текста одинаковой ширины, которые будут менять своё расположение в зависимости от размера экрана. Делаться это будет с помощью такого кода:
<div class="container">
<div class="row">
<div class="col-sm">
Одна из трех колонок
</div>
<div class="col-sm">
Одна из трех колонок
</div>
</div>
</div>
Grid-cистема в Bootstrap построена с помощью flexbox свойств и позволяет создавать до 12ти колонок по ширине страницы. Если использовать все 12 колонок нет необходимости, их можно группировать вместе, создавая более широкое пространство для контента. Как говорилось выше, grid-система адаптивна, то есть, чувствительна к ширине – колонки переустанавливаются (перераспределяются) автоматически, в зависимости от ширины экрана устройства. В Bootstrap есть набор классов, которые позволяют использовать и настраивать grid-систему, их всего пять и это:
Классы, описанные выше, как и любые классы в HTML, могут комбинироваться, сочетая в себе различные эффекты Bootstrap. Подводя итог, структура Bootstrap Grid выглядит следующим образом: сначала размещаются элементы <div> класса '.raw', то есть, строки, а в этих элементах <div> уже, соответственно, располагаются колонки разных классов, описанных в списке выше. Прописывать полное название классов не обязательно, Bootstrap может делать это автоматически, выставляя нужную ширину колонок. То есть, если установлено два элемента в контейнере с классом '.raw', то ширина колонок будет выставлена в 50%, если три то 33.33% и так далее.
Если нужно работать НЕ автоматически, то запись класса, внутри контейнера с классом '.raw' будет выглядеть так: '<div> class="col-*-*"', где первая звездочка означает значение адаптивности, то есть, тот элемент, который мы указывали в списке выше (к примеру, -sm). Вторая звездочка отображает число колонок, которое может изменяться, от одной до двенадцати для каждой строки.
Поподробнее остановившись на основных контейнерах для Bootstrap скажу, что есть два их типа: уже описанный '.container' – предоставляет собой фиксированную ширину контейнера и второй – '.container-fluid' – предоставляет ширину контейнера, который заполняет всю ширину экрана.
Topography – это оформление контента, в Bootstrap для этого есть установки по умолчанию:
Так же для заголовков можно использовать класс .display- (со значением от одного до шести) и с помощью него задавать размер и толщину текста для заголовка. Кроме того, при работе с заголовками можно использовать HTML элемент <small>, который позволяет создавать текст второстепенного значения прямо внутри заголовка – текст будет немного меньше и тоньше.
Элемент <mark> добавляет желтоватый фон для текста, так, будто его выделяет некий маркер светлого оттенка. Элемент <abbr> добавляет тексту нижнее подчеркивание точками.
вы можете подробнее прочесть про различные классы Bootstrap Topography на сайте W3Schools.
Так же Bootstrap позволяет использовать набор классов для добавления цветов текста. Если вы хоть немного знаете CSS, то смысла в настолько глубоком применении Bootstrap на своей веб-странице я не вижу, как я говорил выше, об этой технологии я рассказываю поверхностно. Поэтому так же на сайте W3Schools вы можете прочесть про все классы, позволяющие работать с цветами в Bootstrap. Там же можно прочесть и про классы, позволяющие задать цвет фона. Подробнее про то, как может выглядеть текст с применением подобных классов, а так же про применение других классов, задающих оформление, смотрите по ссылке Bootstrap из главы "Общие положения".
Nav Bar'ом в пользовательском интерфейсе называют панель навигации. Эту панель вы запросто можете встретить практически на любом сайте. Более того, как вы могли обратить внимание, даже на странице инструкции, которую вы сейчас читаете, в верхней её части есть такая панель (только сделанная не на Bootstrap). Bootstrap позволяет быстро установить панель навигации на свой сайт, к тому же, она будет адаптивной. Её код можно увидеть в HTML-файле страницы Bootstrap по ссылке выше и скопировать оттуда, но так же увидеть здесь, на картинке:
Ну а сейчас я вкратце расскажу, как же тут всё работает.
Всё начинается с семантического элемента <nav>, который по своей сути является тем же самым, что и контейнер <div>. Поэтому и семантический – для логического "понимательного" выделения элементов. Далее в этом элементе, как и в наших предыдущих примерах, встречаются классы. После тега <nav>, соответственно, идет класс, определяющий сам компонент навигационной строки, который так и называется – navbar. Следующий класс – navbar-expand-lg – класс, позволяющий создавать адаптивную разметку. Если вы перейдете на страницу Bootstrap, то можете попробовать всячески сворачивать окно браузера и увидеть, что навигационная панель сворачивается в так называемое "бургер-меню". Следующие два класса – navbar-light и bg-light – используются для настройки цветовой гаммы. Этими цветами можно управлять по той же схеме, что и в предыдущей главе, о чем подробнее можно прочесть на сайте Bootstrap. Кроме того, цвета можно задавать и вручную, для этого можно просто прописать style="background-color: 'цвет'.
Следующий класс – navbar-brand – используется для размещения лого веб-сайта, но в данном примере там размещено просто слово "Navbar".
Здесь описаны базовые классы для работы с панелью навигации. Для более подробного ознакомления со всеми остальными классами, можно посетить сайт Bootstrap. Но на самом деле, классы названы довольно наглядно, поэтому я бы рекомендовал попытаться самостоятельно исследовать их, скопировав код к себе в редактор.
Если вы к моменту прочтения этого текста уже пытались стилизовать формы или таблицы с помощью CSS, то вы понимаете, что делается это совсем не в две строки кода. У Bootstrap есть функционал, который позволяет делать это очень быстро и легко. Начнем с кода простой формы, где есть только строка электронной почты и пароля. Такие формы часто используются не для регистрации, а для входа пользователя на сайт:
В Bootstrap, конечно же, есть и более сложные формы, которые используются для регистрации. Более подробно о них можно прочесть на сайте Bootstrap, найдя статью "Forms".