Разработка макетов на основе сетки II: Bootstrap и не только

  1. Реализация макета на основе сетки
  2. Bootstrap - это гораздо больше, чем Bootstrap
  3. Использование Bootstrap
  4. Ссылка на Bootstrap CDN
  5. Самозанятый Bootstrap CSS
  6. Использование Bootstrap Sass для импорта и компиляции с нашими собственными стилями
  7. Настройка Bootstrap
  8. style.scss
  9. Использование Bootstrap mixins
  10. STYLE.SCSS
  11. ИНДИВИДУАЛЬНЫЙ BOOTSTRAP.SCSS
  12. ИНДИВИДУАЛЬНЫЙ STYLE.SCSS
  13. НОВЫЙ СВЕТЯЩИЙСЯ И СЕМАНТИЧЕСКИЙ МАРКУ

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

Теперь пришло время проверить, как мы можем использовать Bootstrap. Для этого мы реализуем очень простой дизайн, используя разные подходы, все они основаны на Bootstrap, и проверим, что подразумевает их использование, и каковы их преимущества и недостатки.

Реализация макета на основе сетки

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

В окне браузера среднего размера компоновка меняется: правая сторона оборачивается под левой и основной частью, а ширина нижнего колонтитула не изменяется. Для экранов меньшего размера все разделы занимают 100% размера окна, укладываясь один под другим.

Примечание: здесь мы не будем иметь дело с элементами одинаковой высоты, поскольку это можно сделать с помощью встроенных инструментов Bootstrap. Таким образом, высота всех секций задается в CSS, а также цвета и не связаны с реализацией сетки.

Bootstrap - это гораздо больше, чем Bootstrap

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

Использование Bootstrap

В этой статье мы собираемся использовать Bootstrap тремя различными способами и посмотрим, как они влияют на наш код. Мы будем:

  • Ссылка на BootstrapCDN, чтобы получить CSS
  • Самостоятельная загрузка загруженной сетки Bootstrap
  • Получите SASS / LESS Bootstrap, импортируйте его с нашими стилями и скомпилируйте
  • Получите SASS / LESS Bootstrap, используйте его миксины, чтобы получить более семантическую разметку

Ссылка на Bootstrap CDN

Это самый простой вариант. Bootstrap содержит файлы, которые вам нужны - в данном случае CSS - и вам просто нужно сослаться на него. Так, просто возьмите ссылку BootstarpCDN , поместите его в свой HTML, и вы готовы к работе.

Вот как будет выглядеть разметка для реализации нашего дизайна при связывании с Bootstrap CDN:

<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> < meta http-equ = "X-UA-совместимый" контент = "IE = Edge, chrome = 1" /> <link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap. min.css "rel =" stylesheet "> <link href =" ./ styles / min / style.css "rel =" stylesheet "> <title> Начальная загрузка CDN </ title> </ head> <body class =" container-liquid "> <header class =" row "> <nav class =" col-md-9 col-md-offset-3 col-lg-8 col-lg-offset-2 navigation-content "> Это навигация </ nav> </ header> <main class = "row"> <aside class = "col-md-3 col-lg-2 left-aside"> Это в стороне </ aside> <section class = " col-md-9 col-lg-8 section-content "> Это раздел </ section> <aside class =" col-md-12 col-lg-2 справа "> <div class =" aside- content "> Это aside </ div> </ aside> </ main> <footer class =" row "> <div class =" col-md-9 col-md-offset-3 col-lg-8 col -lg-offset-2 footer-content "> Это нижний колонтитул </ div> </ footer> </ body> </ Html>

Если мы поближе рассмотрим нашу разметку, в строках 13-15 у нас есть код для заголовка с навигацией внутри.

'Какие? Нет класса для окон меньшего размера?

Ты помнишь, что мы говорили в первой части этой серии? Bootstrap - это первая мобильная платформа, и это означает, что ее классы сетки работают от начальной точки останова и выше.

«Ну, но никаких классов вообще !?»

Ага. Нет классов для более узких размеров, так как наша компоновка начинается со 100% ширины, и так все равно ведут себя блочные элементы.

Тем не менее, в строке 14 у нас есть класс, определяющий диапазон в 9 столбцов для окон средней ширины, и еще один, который сообщает браузеру толкать этот элемент шириной в 3 столбца вправо.

И затем, для больших размеров окон браузера класс, определяющий 8-полосный интервал ширины элемента и который должен быть перемещен на 2 столбца вправо.

И наконец, класс, который я дал этому элементу, чтобы придать ему стиль.

Подводя итог: 5 классов на один элемент. Это много уродливого несемантического раздувания, которым наши бабушки не гордятся. И нам это не нравится

Самозанятый Bootstrap CSS

Единственная разница в разметке, если вы используете хостинг Bootstrap CSS, в строке 8:

<link href = "./ styles / min / bootstrap.min.css" rel = "таблица стилей">

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

Использование Bootstrap Sass для импорта и компиляции с нашими собственными стилями

Это вариант, который может показаться не таким уж большим, но мы будем использовать его в следующей статье.

Использование Bootstrap-Sass / Less - не самый быстрый вариант. Это означает настройку хотя бы минимальной среды разработки, так как исходный код должен быть скомпилирован. В этой статье мы увидим, как это влияет на наш код и производительность нашего сайта, в следующей статье. Как в сторону, Bootstrap до v.3 был написан в LESS - хотя они переходят на SASS с Bootstrap 4 ,

Настройка Bootstrap

В этом случае настройка будет минимальной, так как мы просто создадим файл style.scss, в который мы импортируем наши стили и большой двоичный объект Bootstrap со всеми его импортами. Вы заметите, что все импорта в этом случае указывают на node_modules, так как я установил Bootstrap-Sass с помощью npm. Но это единственная сделанная настройка.

style.scss

@import 'custom-bootsrap'; @import 'custom-style';

заказ bootstrap.scss

/ *! * Bootstrap v3.3.6 (http://getbootstrap.com) * Copyright 2011-2015 Twitter, Inc. * Лицензия под MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * / // Основные переменные и миксины @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins"; // // Сброс и зависимости @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/normalize"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/print"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/glyphicons"; // Базовый CSS @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/type"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/code"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/grid"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/tables"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/forms"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/buttons"; // Компоненты @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/component-animations"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/dropdowns"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/button-groups"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/input-groups"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/navs"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/navbar"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/pagination"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/pager"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/labels"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/badges"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/jumbotron"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/thumbnails"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/alerts"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/progress-bars"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/media"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/list-group"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/panels"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/wells"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/close"; // Компоненты с JavaScript @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/modals"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/tooltip"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/popovers"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/carousel"; // служебные классы @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/utilities"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";

Наша разметка немного отличается от предыдущей версии. Теперь есть только одна ссылка на таблицу стилей.

<link href = "./ styles / min / style.css" rel = "stylesheet">

Да, мы сохраняем строку в нашем html, но на самом деле мы делаем гораздо больше, так как мы сохраняем также запрос к серверу. Подробнее об этом в следующей статье о производительности.

Использование Bootstrap mixins

Эта опция наиболее гибкая, так как мы можем настроить CSS и избавиться от всех классов сетки раздувания, которые Bootstrap вводит в нашу разметку.

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

STYLE.SCSS

Здесь нет никаких изменений.

ИНДИВИДУАЛЬНЫЙ BOOTSTRAP.SCSS

Здесь происходит много интересного. Я сделал копию исходного файла _bootstrap.scss, как в предыдущем примере, и закомментировал все, кроме двух файлов: миксины и переменные. Именно эти два будут использованы при компиляции окончательного CSS.

На самом деле, вы можете просто избавиться от этих закомментированных строк. Я оставил их, чтобы вы могли иметь наглядное представление обо всем, что мы не компилируем с этой опцией.

/ *! * Bootstrap v3.3.6 (http://getbootstrap.com) * Copyright 2011-2015 Twitter, Inc. * Лицензия под MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * / // Основные переменные и миксины @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables"; @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins"; // // Сброс и зависимости // @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/normalize"; // @import "bootstrap / print"; // @import "bootstrap / glyphicons"; // // // Базовый CSS // @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding"; // @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/type"; // @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/code"; // @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/grid"; // @import "bootstrap / tables"; // @import "bootstrap / forms"; // @import "bootstrap / buttons"; // Компоненты // @import "bootstrap / component-animations"; // @import "bootstrap / dropdowns"; // @import "bootstrap / button-groups"; // @import "bootstrap / input-groups"; // @import "bootstrap / navs"; // @import "bootstrap / navbar"; // @import "bootstrap / breadcrumbs"; // @import "bootstrap / pagination"; // @import "bootstrap / pager"; // @import "bootstrap / tags"; // @import "bootstrap / badges"; // @import "bootstrap / jumbotron"; // @import "bootstrap / thumbnails"; // @import "bootstrap / alerts"; // @import "bootstrap / progress-bars"; // @import "bootstrap / media"; // @import "bootstrap / list-group"; // @import "bootstrap / Panel"; // @import "bootstrap / responseive-embed"; // @import "bootstrap / wells"; // @import "bootstrap / close"; // Компоненты w / JavaScript // @import "bootstrap / modals"; // @import "bootstrap / tooltip"; // @import "bootstrap / popovers"; // @import "bootstrap / carousel"; // служебные классы // @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/utilities"; // @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";

ИНДИВИДУАЛЬНЫЙ STYLE.SCSS

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

Поскольку я закомментировал файл grid.scss в custom-bootstrap.scss - среди других - мы не собираемся генерировать все предопределенные классы сетки, доступные в Bootstrap при компиляции, а только те, которые мы используем.

Сейчас мы вызываем миксины, отвечающие за создание поведения макета, которого мы хотим добиться, используя @include из каждого тега классов / элементов и передавая в качестве аргумента этим миксинам количество столбцов, к которым мы хотим, чтобы элемент охватывал или быть оттесненным вправо. И все это остается в стороне CSS / SASS.

body {@include-фиксированный контейнер; } header, main, footer {@include make-row; } nav, .section-content, .footer-content {@include make-md-column (9); @include make-lg-column (8); } nav, .footer-content {@include make-md-column-push (3); @include make-lg-column-push (2); } .left-aside {@include make-md-column (3); } .right-aside {@include make-md-column (12); } .left-aside, .right-aside {@include make-lg-column (2); }

Я писал выше, что разметка, полученная в результате использования классов Bootstrap, была раздутой, а не семантической. И на самом деле, было то, что я не упомянул, тот факт, что если мы напишем весь этот код, который на самом деле определяет макет, мы не разделяем вопросы.

Не рекомендуется и не рекомендуется включать элементы стиля / макета в HTML, и до сих пор мы фактически формировали макет в разметке.

НОВЫЙ СВЕТЯЩИЙСЯ И СЕМАНТИЧЕСКИЙ МАРКУ

<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> < meta http-equ = "X-UA-совместимый" content = "IE = Edge, chrome = 1" /> <link rel = "stylesheet" href = "./ styles / min / style.css"> <title> Bootstrap сеточные миксины </ title> </ head> <body> <header> <nav class = "navigation-content"> Это навигация </ nav> </ header> <main> <aside class = "left-aside" > Это в стороне </ aside> <section class = "section-content"> Это в разделе </ section> <aside class = "right-aside"> Это в стороне </ aside> </ main> < нижний колонтитул> <div class = "footer-content"> Это нижний колонтитул </ div> </ footer> </ body> </ html>

Как мы уже обсуждали, разметка не должна содержать логику стиля, и это обычная жалоба на Bootstrap от тех, кому она не нравится. Но, как вы можете видеть сейчас, при настройке Bootstrap разметка выглядит красивее и более семантически - пожалуйста, простите меня за имена классов - чем это было раньше, и макет можно изменить, просто отредактировав CSS.

Что мы узнали в этом уроке:

  • Как построить макет на основе классов Bootstrap
  • Как использовать настроенные версии Bootstrap
  • Как использовать миксины Bootstrap для более семантической разметки
  • Как различные опции влияют на наш код
Какие?
Нет класса для окон меньшего размера?
Ты помнишь, что мы говорили в первой части этой серии?