Использование sass. Препроцессор Sass

Общий алгоритм работы с сеткой Bootstrap можно свести к следующим шагам:

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

• .col-xs- (extra small) - разметка для мобильных телефонов с шириной экрана менее 768px;
• .col-sm- (small) - разметка для мобильных устройств с шириной экрана от 768px до 992px;
• .col-md- (medium) - базовый класс разметки колонок для устройств с шириной экрана от 992px до 1200px;
• .col-lg- (large) - класс разметки колонок для устройств с большим экраном шириной от 1200px и выше.

На практике чаще всего применяют класс.col-md- с цифрой, указывающей на 1/12 часть от общей ширины экрана. Например, чтобы сверстать одну колонку на весь экран, мы применим класс.col-md-12. Для двух колонок по пол-экрана - два блока с классами.col-md-6. Для трёх колонок, соответственно, три с.col-md-4 и т.д.

Кстати, необязательно чтобы колонки были равными между собой по размерам. Вполне можно комбинировать (в пределах 12 штук, конечно) ширину, например, .col-md-4 и.col-md-8 или.col-md-2, .col-md-3 и.col-md-7. Можно даже не использовать всю ширину, сделав, к примеру, в ряде лишь одну колонку, допустим, .col-md-5:

Колонки можно сдвигать по отношению к начальной сетке координат по горизонтали или отображать не по порядку. Например, чтобы разместить две колонки.col-md-4 по центру страницы мы можем применить сдвиг, добавив к нашей первой блоку-колонке ещё один класс .col-md-offset- 2 ((12-(4+4))/2=2). А, чтобы изменить порядок, добавляют классы.col-md-push- (для сдвига колонки на нужный интервал) и.col-md-pull- (для перетаскивания колонки к началу строки):

Наконец, колонки можно вкладывать внутрь других колонок в строке. Причём делать это можно двумя способами: с вложением в новый контейнер и с вложением только в новую строку. Если Вы вложите в колонку новый контейнер с набором собственных строк и колонок, то к нему будут применены все стили, характерные для контейнера. При добавлении же только строки, стили сохраняются как для колонки (не будет лишних отступов и т.п.):

Как видим, позиционировать блоки-колонки в Bootstrap не так уж и сложно. Сетка - весьма удобное изобретение, которое "убивает" сразу двух "зайцев": делает Вашу вёрстку аккуратнее с точки зрения дизайнеров и автоматически добавляет адаптивности Вашей веб-страничке. Единственное, что следует помнить, нельзя нарушать структуру вложений, например, напрямую добавлять колонку в контейнер или внутрь другой колонки без объявления новой строки.

Дополнительно прочесть о работе со стилями в Bootstrap Вы сможете в разделе документации CSS . А по сетке, по сути и всё. Движемся дальше.

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

И, что характерно, всё это добро создаётся, как и сетка, простым добавлением к нужному DIV-у требуемых классов! Правда, кое-где, нужно также соблюдать структуру вложенности блоков (например, для создания меню), но особой сложности, я думаю, это не составит. Тем более, что на странице с описанием компонентов имеется достаточно примеров. Здесь же мы рассмотрим только некоторые частные случаи.

Bootstrap 3 имеет в своей базовой поставке неплохой иконочный шрифт - Glyphicons. Смысл подобных шрифтов в том, что вместо буквенных символов они содержат в себе различную векторную графику. В отличие от обычных растровых картинок, изображения иконочных шрифтов прекрасно масштабируются без потери качества, поэтому они и получили такое распространение с популяризацией адаптивной вёрстки.

В новом Bootstrap 4 иконочного шрифта пока нет (возможно его заменят более популярным FontAwesome), но в нашей 3-ей версии шрифт есть и его можно использовать. Главным же требованием к такому использованию является вставка нужного символа посредством отдельно выделенного под него HTML-элемента .

К примеру, нам нужно вставить рядом с некой цифрой символ русского рубля. В таблице со списком иконок шрифта Glyphicons под его изображением копируем название класса (а точнее сразу двух) "glyphicon glyphicon-ruble" и применяем его к тегу , который вставляем после нашей цифры:

Стоимость - 999

Однако, часто требуется не просто вставить ту или иную иконку, но и изменить, например, её размер и цвет. Для этого в Bootstrap рекомендуется не переназначать стандартные стили для нужного класса с символом, а дописать к списку классов SPAN, который его вставляет, ещё один дополнительный класс с нужными параметрами оформления или дописать стили через атрибут style . Например, так:

Myrub{font-size:10px; color:green;}

Стоимость - 999

Стоимость - 999

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

Заголовок

Кнопка

Практически все типы блоков, кроме, разве что, джамботрона и замечаний, никак не влияют на стилизацию содержимого самого блока. Изменяется лишь фон, обрамление и немного смещается позиция контента.

Внутри джамботрона (класс - jumbotron) весь текст выглядит немного больше от стандартного размера. Данный тип блока иногда называют баннером и часто используют в качестве заголовочного экрана-слайда в лэндингах (популярные одностраничные сайты). Он позволяет выделить основную информацию, сфокусировав на ней внимание пользователя как раз за счёт небольшого увеличения шрифтов. Наилучшего же эффекта можно достичь, если дополнить класс джамботрона классом.text-center, который выровняет содержимое баннера по центру страницы!

Заголовок

Кнопка

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

Заголовок

Кнопка

Жалко только, что в Bootstrap нету классов для вертикального выравнивания содержимого того же джамботрона и увеличения блока на весь экран по высоте. Цены бы ему не было тогда:) Но, всё это можно доделать своими руками при необходимости.

Своим не совсем стандартным оформлением интерес также представляют замечания (alerts) и панели (panels). Замечания добавляются стандартно классом.alert, однако, для уточнения типа уведомления добавляется ещё один из четырёх возможных классов:

Уведомление типа "Успех" (зелёный фон)

Уведомление типа "Информация" (голубой фон)

Уведомление типа "Предупреждение" (жёлтый фон)

Уведомление типа "Опасность" (красный фон)

Что касается панелей , то здесь разнообразие ещё больше! Стандартно панель добавляется классом .panel , однако, как и замечание, требует после себя класса, который уточнит тип панели (как правило, .panel-default ). Но и это ещё не всё! Как минимум, наша панель должна иметь вложенный блок с классом.panel-body для размещения основного контента, а, как максимум, может иметь собственный заголовок (.panel-heading с опциональным классом.panel-title внутри) и футер (.panel-footer ):

Заголовок со специальным классом.panel-title

Основной контент панели

Футер панели

Кроме того, панели в Bootstrap могут быть нестандартными и различаться визуальным оформлением в соответствии с контекстом их использования. Контексты, в основном, совпадают с контекстами алертов, но имеют ещё и пятый вариант в ярко-синих тонах- .panel-primary . Кроме того, аналогично замечаниям, существуют классы.panel-success, .panel-info, .panel-warning и.panel-danger:

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

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

СЛАЙД 1

СЛАЙД 2

СЛАЙД 3

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

P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.

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

Скачать Bootstrap можно с официального сайта getbootstrap.com . На главной странице жмем на кнопку «Download Bootstrap ».

После клика нас переносит на страницу, на которой предлагается несколько видов скачивания. В рамках данной статьи мы рассмотрим обычное скачивание полной версии фреймворка.

После скачивания и распаковки архива мы получаем три папки:

• CSS - папка со стилями
• JS - папка с js скриптами
• FONTS - папка с иконочными шрифтами

Это и есть весь фреймворк. Для дальнейшей работы с Bootstrap я создам папку с одноименным названием bootstrap , в папке создам один пустой файл index.html и буду наполнять папку и файл попутно с разбором фреймворка в данной статье, а в конце поста дам ссылку, чтобы Вы могли посмотреть результат. Если будите повторять за мной, то поймете, что работать с фреймворком действительно легко.

Из скаченного фреймворка нам потребуется папка fonts полностью, один файл стилей из папки css с названием bootstrap.css или bootstrap.min.css и аналогично один скрипт из папки js с названием bootstrap.js или bootstrap.min.js .

Отличие файлов с «.min.» от обычных в том, что файлы с «.min.» оптимизированные, то есть код написан в одну строку без переносов строк и пробелов, поэтому они весят меньше обычных, а содержимое файлов абсолютно одинаковое.

Теперь я создам в своей папке bootstrap папку css , помещу в нее файл bootstrap.min.css и создам папку js , в которую положу bootstrap.min.js . Дополнительно в папке css создам пока пустой файл style.css для добавления собственных стилей.

Нужные файлы фреймворка перенесены, и теперь будем работать только с файлом index.html . Чтобы не писать код самостоятельно, обратимся к документации, на странице скачивания официального сайта ниже есть уже готовый HTML-скелет документа, копируем его и вставляем в наш индексный файл.

В скелете уже подключаются наш файл стилей, js скрипт и библиотека jQuery , но если вы делаете не на «бутстраповском » шаблоне, а на каком-то своем, то нужно между тегами подключить файл стилей bootstrap.min.css , а после него созданный style.css .

Затем перед закрывающим тегом сначала подключаем библиотеку jQuery .

А после библиотеки подключаем js скрипт.

В общем, HTML-скелет документа получается вот такой.

Bootstrap

Подготовительный процесс закончен, Bootstrap подключен, можно идти дальше и заняться наполнением нашей WEB-страницы компонентами фреймворка.

Документация у фреймворка очень хорошая, что делает его простым в использовании. В главном меню официального сайта несколько разделов: «Getting started », «CSS », «Components », «JavaScript » и «Custimize », на странице каждого раздела в правой колонке находятся названия разных компонентов, кликнув по которым показывается их описание и варианты использования в виде готового кода.

Если сложности с английским языком, то в сети есть несколько ресурсов с переведенной документацией, вот адрес одного из таких сайтов www.oneskyapp.com/ru/docs/bootstrap . Также можно воспользоваться каким-нибудь переводчиком для браузера, перевод будет, конечно, кривоватый, но суть написанного будет ясна. В общем, просто нужно читать документацию, брать примеры кода и практиковаться.

Как я говорил в прошлой статье, сетка работает по принципу таблицы, включая в себя ряды .row и колонки .col , колонок может быть максимум двенадцать. К классу.col добавляются префиксы (lg , md , sm , xs), которые указывают ширину данного столбца на конкретном разрешении экрана.

Оборачиваются ряды со столбцами в блок с классом .container или классом.container-fluid . Различие между ними в том, что у класса.container максимальная ширина 1170 пикселей, а у класса.container-fluid — ширина не ограничена, то есть на всю ширину экрана, даже если разрешение экрана очень большое. Полную информацию о сетке Bootstrap смотрите в документации раздела «CSS ».

При помощи сетки фреймворка сделаем классическую разметку нашей страницы (шапка, контент, боковая колонка и подвал), для этого создадим три ряда и четыре колонки, получается вот такой код.

HEADER CONTENT SIDEBAR FOOTER

Для разделения блоков я прописал два дополнительных класса: .block , .block2 и добавил в них по паре правил в созданном файле style.css .

Block{ background: #eee; border: 1px solid #000; } .block2{ background: #ccc; border: 1px solid #000; }

Добавим иконочный шрифт к нашим заголовкам. В разделе «Components » выбираем понравившиеся иконки, копируем текст под изображением, этот текст является классом. Создаем внутри тега заголовка тег и вставляем скопированный класс.

HEADER

Теперь не мешало добавить какое-то меню. Для этого в разделе «Components » переходим в «Navbar », выбираем понравившееся меню, копируем код и после открывающего тега , вставляем.

Осталось заполнить «conten t» и «sidebar ». Все делаем по той же схеме: выбираем компонент в документации, читаем описание, копируем и вставляем в нужное место. Я добавлю форму и кнопку, кликнув по которой будет вызываться модальное окно с таблицей.

Вот так просто, всего за 5 минут, мы набросали простейший макет страницы, адаптивный под все устройства, при этом практически не писали код самостоятельно. Перейдите по ссылке и посмотрите полученный результат.

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

Приветствую всех гостей моего блога и гиков веб-разработки. Сегодняшняя публикация будет посвящена ознакомлению с таким востребованным фреймворком, как Bootstrap. Прочитав текущую статью, вы узнаете, для чего он был создан, как работать с bootstrap и как его устанавливать, какие инструменты предоставляет данный фреймворк и где его чаще всего применяют. Ну а теперь вперед разбирать новый материал!

Bootstrap – это фреймворк, разработанный специально для верстки фронтенда (внешнего интерфейса) веб-сервисов и приложений.

Он включает в себя стандартные шаблоны, состоящие для типографии, кнопок, форм, различных меню, в том числе и выпадающих меню, таблиц, модальных окон, навигации, слайдеров (обычных и в виде карусели) и других инструментов, и также всевозможные плагины на .

Наиболее популярные среди них – это Tooltip, который отвечает за всплывающие окна, Dropdown — отвечающий за выпадающие списки, Carousel, организовывающий прокручиваемый слайдер, и еще некоторые.

С полным списком существующих плагинов, шаблонов и компонентов можно ознакомиться на официальном сайте http://getbootstrap.com/getting-started/ . Также с его помощью начиная со второй версии можно создавать отзывчивую верстку.

Считаю, что вам нужно знать немного истории создания описываемого инструмента, чтобы понимать, что к чему.

Bootstrap был создан Марком Отто и Джейкобом Торнтоном специально для социальной сети Twitter. Он выступал в качестве внутренней библиотеки. Именно поэтому иногда можно встретить название Twitter Bootstrap.

Изначально библиотека называлась Twitter Blueprint. Однако к тому моменту, как продукт был выпущен в широкие массы (а это случилось 19 августа 2011 года), его наименование было изменено на Bootstrap. На сегодняшний день существует четыре версии фреймворка.

Наиболее заметной и востребованной на данный момент является Bootstrap 3 . В нем впервые была использована концепция mobile first . Помимо этого, было внедрено множество поправок и улучшений.

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

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

Итак, при подключении описываемого фреймворка вам предоставляется возможность использовать такие готовые элементы, как:

• Всевозможные компоненты, в которые входят: панели навигации, выпадающие списки, кнопки, индикаторы процесса, разбиения на страницы и другие;
• JavaScript-плагины, среди которых есть переходы, модальные и выпадающие элементы, всплывающие блоки и подсказки, сворачивание, реализация вкладок, слайдеры и другие;
• Шаблоны сеток, в том числе и плавающих;
• Макеты;
• И конечно же реализация отзывчивого дизайна.

Стоит отдельное внимание уделить сеткам или как о них еще говорят верстке макетов. Сейчас будет небольшой спойлер, уж простите меня, ведь я решил посвятить данной теме отдельную статью, но ничего не поделать!

Благодаря данному инструменту Bootstrap очень часто используется для написания сайтов. Потому что это действительно грамотный и мощный механизм для блочной верстки. Создателями фреймворка было предусмотрено максимальное количество колонок – 12. Этого более чем достаточно для установки «каркаса» .

Помимо этого, в некоторых ситуациях использование Бутстрапа не только упрощает код, а и значительно экономит ваше время. При этом не стоит опасаться, что какие-то элементы не будут работать в проблемных браузерах (да-да, я намекаю на IE), потому что Bootstrap полностью совместим со .

Существует несколько вариантов подключения данного инструмента. Пожалуй, начну с установки загрузочного файла.

Итак, на официальном сайте по ссылке , можно скачать текущие версии Bootstrap-а. Все очень просто. Просто выбираете подходящий для вас установочный пакет и нажимаете на кнопку «Download». На этом же сайте вы можете скачать альфа-версию Bootstrap 4.

Второй способ – это конечно же использование CDN. Так, чтобы подключить последние версии фреймворка, вам необходимо вставить вот такую ссылку:

Если вам нужно подключить уменьшенную версию JavaScript, то коперните вот эту строчку:

Ну а темы подключаются следующим образом:

На русифицированном веб-сайте можно посмотреть обучающее видео по подключению данного фреймворка (http://mybootstrap.ru/video-obuchenie-twitter-bootstrap/ ).

Вот и все, друзья, пришло время прощаться. Не забывайте делиться интересными публикациями с коллегами, а также подписываться на обновления моего блога. Пока-пока!

С уважением, Роман Чуешов

Прочитано: 213 раз

Итак, чтобы начать подключение, нужно перейти на официальный сайт. В нашем случае это getbootstrap.com, именно на нем содержится вся необходимая информация.

В главном меню кликните по пункту Getting Started. На русский язык он переводится: “C чего начать”. Действительно, на этой странице вы найдете все необходимое для работы. В первую очередь вы увидите вот что:

Bootstrap предлагает нам скачать себя в нескольких вариантах. Первый – это просто стандартная последняя версия фреймворка, в которой есть все компоненты. Два следующих варианта – это less и sass исходники. Пока я не рекомендую вам их трогать, если вы не знаете, как работать с этими технологиями.

Это исходники, с их помощью вы можете переделать boostrap под себя. Опять же, если знаете, как работать с ними.

Пока нас устраивает первый вариант, жмите на кнопку скачивания и сохраняйте себе на компьютер архив с самой актиуальной версией фреймворка.

Отлично, после скачивайте разархивируйте архив и перейдите в папку. В конечной папке вы увидите три каталога – css, js и fonts. Эти три директории и нужно будет скопировать в папку вашего проекта.

Перед этим вы можете просмотреть все эти папки. В первую очередь, папку css. В ней лежит 2 css-файла и их минифицированные версии. Это bootstrap.css и bootstrap-theme.css. Соответственно, первый с кодом самого фреймворка. А второй предназначен для темизации. У обоих файлов есть, как я уже сказал, минифицированные версии. Они весят на 10-15% меньше за счет того, что код в них размещен в одну строку.

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

Далее у нас папка fonts. В ней содержится иконочный шрифт bootstrap, благодаря которому вы абсолютно без проблем сможете вставлять на веб-странице более 200 иконок, менять их размеры и цвет. По сути, это картинки, которыми можно очень шибко управлять. При увеличении размеров качество иконок не становится хуже, так как они векторные, то есть svg-формата.

В папке js содержится файл, необходимый для работы всех javascript-компонентов, которые заложены в фреймворк. Например, это модальные окна, табы и подсказки. Хорошо, немного с содержимым мы разобрались, время переходить непосредственно к подключению.

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

Отлично, тем нужно создать файл index.html. Я сделаю это с помощью редактора Notepad++. Стоп-стоп, может вы уже по привычке начали писать начальную html-разметку, не нужно этого делать, сейчас мы вставим все готовое. Прокрутите страницу Getting Started ниже, там вы увидите Basic Template, то есть базовый шаблон html-страницы.

Смело копируйте этот код к себе в файл. Сейчас мы его немного разберем.

Сразу видим, что используется доктайп, характерный для html5. В теге html видим параметр lang, можете сменить его с en на ru.

Далее начинается секция head, в ней задается кодировка страницы. Следующие строчки достаточно важны, ни в коем случае их не удаляйте. Там, где видите IE-edge – это строка кода, которая обеспечивает корректную работу фреймворка вместе с браузером IE.

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

Ну а далее у нас начинается непосредственно подключение файлов фреймворка. К слову, все комментарии, которые есть на скриншоте выше (они выделены серым цветом), вы можете удалить, кроме четырех строчек, которые начинаются со слов if it IE 9 и заканчиваются endif. Эти строки нужны нам для того, чтобы для браузера IE подгружались дополнительные файлы из внешнего хранилища, которые обеспечат поддержку адаптивности и элементов html5.

Первым делом, в коде подключается css-файл фреймворка. Как видите, на примере выше подключается сжатая версия, вы же можете подключить несжатую, просто удалив из адреса.min.

Javascript-файлы же подключаются перед закрывающим тегом body. Как видите, тут подключается не только сам фреймворк bootstrap, но и библиотека jquery. Дело в том, что для корректной работы фреймворка эта библиотека нужна и подключается она из внешнего хранилища.

Все очень просто. Откройте наш index.html в любом браузере, если вы увидите там такое, то все работает:

Если бы вы допустили какие-то ошибки при подключении фреймворка, то внешний вид заголовка был бы таким:

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

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

Ура, я подключил Bootstrap!

Это уже точно доказало, что фреймворк работает и использует свои стили. Как видите, даже по умолчанию у bootstrap достаточно хорошее оформление для элементов, хотя и очень простое.

Но давайте мы пока вернемся на страницу Getting Started, ведь это был не единственный способ подключения фреймворка. Еще один вариант – подключить с внешнего хранилища, то есть из cdn. Он годится тогда, когда вы не планируете ничего редактировать в коде фреймворка, а просто хотите максимально быстро подключить его. Тогда удобнее всего вам будет использовать его именно из cdn.

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

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

Что ж, друзья, на этом я буду заканчивать эту статью, потому что основную задачу мы выполнили –рассмотрели, как подключить бутстрап, а далее остается только научиться пользоваться им. Далее вы можете самостоятельно просмотреть примеры использования, скопировать их на свою страницу.

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

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

Поиск

Мы можем оповещать вас о новых статьях,
чтобы вы всегда были в курсе самого интересного.

Продолжить Нет, спасибо