Bootstrap что это такое и с чего начать изучение


Содержание материала:

Bootstrap Начало работы

Что такое Bootstrap?

  • Bootstrap — это бесплатная интерфейсная платформа для быстрой и удобной разработки веб-сайтов
  • Bootstrap включает в себя HTML и CSS на основе шаблонов дизайна для типографии, формы, кнопки, таблицы, навигация, модальные, изображения карусели и многие другие, а также дополнительные плагины JavaScript
  • Bootstrap также дает вам возможность легко создавать адаптивные дизайны

Что такое Адаптивный веб-дизайн?

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

История начальной загрузки

Bootstrap была разработана Марком Отто и Джейкобом Торнтоном в Твиттере и выпущена в качестве продукта с открытым исходным кодом в августе 2011 на GitHub.

В июне 2014 Bootstrap был проектом No1 на GitHub!

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

  • Простота в использовании: Кто-нибудь с только базовые знания HTML и CSS может начать использовать Bootstrap
  • Адаптивные функции: Адаптивный CSS Bootstrap адаптируется к телефонам, планшетам и рабочим столам
  • Мобильный-первый подход: В Bootstrap 3 стили Mobile-First являются частью базовой платформы
  • Совместимость с браузером: Bootstrap совместим со всеми современными браузерами (Chrome, Firefox, Internet Explorer, Safari и Opera)

Где получить Bootstrap?

Существует два способа начать использование Bootstrap на собственном веб-узле.

  • Скачать Bootstrap из getbootstrap.com
  • Включить Bootstrap из CDN

Загрузка начальной загрузки

Если вы хотите скачать и хост Bootstrap самостоятельно, перейдите на getbootstrap.com, и следуйте инструкциям там.

Bootstrap CDN

Если вы не хотите загружать и размещать Bootstrap самостоятельно, вы можете включить его в CDN (сеть доставки контента).

Макскдн предоставляет поддержку CDN для CSS и JavaScript Bootstrap. Вы также должны включить JQuery:

MaxCDN:

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

Jquery
Bootstrap использует jQuery для плагинов JavaScript (например, модальные, подсказки и т.д.). Однако, если вы просто используете CSS часть Bootstrap, вам не нужно jQuery.

Создание первой веб-страницы с помощью Bootstrap

1. Добавление документа HTML5

Bootstrap использует HTML-элементы и свойства CSS, для которых требуется документ HTML5.

Всегда включайте в начало страницы тег документа HTML5 вместе с атрибутом lang и правильным набором символов:

2. Bootstrap 3-первый мобильный

Bootstrap 3 предназначен для реагирования на мобильные устройства. Стили мобильных устройств являются частью базовой платформы.

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

w >деталь устанавливает ширину страницы для того чтобы последовать за шириной экрана прибора (которая будет меняться в зависимости от прибора).

initial-scale=1 деталь задает начальный уровень масштабирования при первой загрузке страницы обозревателем.

3. контейнеры

Bootstrap также требуется содержащий элемент для переноса содержимого сайта.

Есть два контейнера классов на выбор:

  1. .container класс обеспечивает адаптивный контейнер с фиксированной шириной
  2. .container-fluid класс предоставляет контейнер с полной шириной, охватывающий всю ширину видового экрана

Две базовые страницы начальной загрузки

В следующем примере показан код базовой страницы начальной загрузки (с контейнером с фиксированной шириной ответа):

Краткое введение в Bootstrap

Bootstrap — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.

Цель этого руководства — показать, как настроить систему для правильного использования JS- и CSS-компонентов Bootstrap.

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

Официальный сайт предлагает несколько способов подключения фреймворка к своему проекту:

  • Скачать скомпилированные файлы JS и CSS. Скачав файлы на локальную машину, вы можете выбрать, какую версию включить в свой проект – минифицированную или стандартную. Этот вариант подходит при работе со своим проектом локально и не требует от проекта доступа в Интернет.
  • Скачать исходники файлов. Этот вариант подойдёт, если вы знакомы с работой менеджеров задач и сборщиками (Gulp, Grunt, webpack) и уже создали собственную конфигурацию. В таком случае вы вряд ли захотите копировать исходники Bootstrap в свой проект.
  • Включить в проект файлы через CDN. Похоже на первый вариант, но не придётся скачивать никаких файлов. Это самый быстрый способ использовать Bootstrap в своей разработке, но требует постоянного доступа к Интернету.
  • Подключить через npm. Вероятно, самый оптимальный вариант, особенно, если вы собираетесь создать полноценное приложение, а не просто опытный образец.
  • Варианты с использованием RubyGems, Composer и NuGet.

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

  1. Создания прототипов или приложений.
  2. Реализации Reset (альтернативы Normalize.css).
  3. Вёрстки с помощью Grid .

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

Практика

Предполагается, что вы знакомы с Sass и каким-либо сборщиком . Кроме того, вам потребуется npm.

Сначала нужно добавить в проект необходимые зависимости:

Типовая структура проекта выглядит так:

Стоит пояснить, какие преимущества предоставляет такая структура. Сначала рассмотрим папку styles , а затем перейдём к scripts .

Styles

Эта папка содержит две вложенные директории app и vendor , а также два файла с теми же именами.

  • Папка app будет содержать все компоненты вашего приложения, переменные, настраиваемые стили и так далее.
  • Папка vendor используется для зависимостей. В данном случае это только Bootstrap, расположенный в соответствующей директории. Для каждой зависимости выделяется отдельная вложенная папка.

Необходимо подключить Bootstrap и код нашего приложения в файле app.scss . Это делается следующим образом:

Теперь обратите внимание на папку styles/app . Там всего два файла:

  • В файле _base описываются стили. Может расширяться с помощью Normalize.css .
  • В _variables размещаются переменные приложения.

В vendor.scss импортируются зависимости. Сейчас единственная наша зависимость — Bootstrap, поэтому этот файл содержит только одну строку.

Рассмотрим файлы в папке styles/vendor/bootstrap .

  • В _core импортируются наши переменные и три основных файла Bootstrap, без которых фреймворк не сможет работать:
  • _main импортирует файл _core.scss вашего проекта в самом верху, а также все необходимые файлы Bootstrap SASS из папки node_modules :

В Webpack (автор использует этот сборщик) знак тильды (

) указывает, что файлы нужно искать в папке node_modules . Если вы используете, например, Grunt, то нужно установить grunt-sass-tilde-importer. Если какие-то из представленных компонентов не использованы в проекте, ни в коем случае не надо удалять сами файлы, нужно лишь закомментировать их импорт.

  • _variables изначально пуст. В нём переопределяют переменные Bootstrap под конкретный проект.

В каждой переменной Bootstrap установлен флаг !default . Таким образом, если проект содержит заранее определённые переменные, то они будут использованы вместо дефолтных.

Scripts

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

Начать следует с файла scripts/vendor.js , который просто импортирует файлы из папки vendor :

Необходимо инициализировать jQuery в объекте window, в противном случае Bootstrap не сможет скомпилироваться. Кроме того, это всё равно придётся сделать, если вы планируете использовать jQuery в приложении. Импорт jQuery в файле scripts/vendor/jquery.js :

Как и в файле vendor , придётся импортировать каждый модуль отдельно. Вы также можете закомментировать неиспользуемые компоненты, чтобы исключить их из проекта. Содержимое файла scripts/vendor/jquery.js :

Следует отметить, что модуль Util используется везде, кроме компонентов Button и Popover.

Курс BOOTSTRAP

Интерактивный онлайн курс BOOTSTRAP верстки сайтов для начинающих — Онлайн уроки Bootstrap с нуля

Bootstrap — это популярный CSS фреймворк для создания сайтов. С помощью Bootstrap Вы научитесь верстать сайты быстро и эффективно, благодаря применению готовых компонентов фреймворка. В видеокурсе Вы изучите основы адаптивной верcтки на BOOTSTRAP с нуля и примените знания полученные в уроках на практике. Создавайте верстку собственных сайтов с применением Bootstrap в 5 раз быстрее!

Онлайн курс BOOTSTRAP верстки сайтов с нуля

Поделитесь страницей с друзьями

О курсе — Чему Вы научитесь?

Посмотрите видео об онлайн курсе по верстке на BOOTSTRAP для начинающих. Вы узнаете, как эффективно построить обучение основам Bootstrap и научиться самому создавать адаптивную верстку веб сайтов с нуля в 5 раз быстрее.

В процессе обучения Вы получите знания и навыки:

  • Быстрая адаптивная верстка сайта
  • Основные классы и компоненты Bootstrap
  • Красивые формы для ввода логина и пароля
  • Галерея изображений на сайте за 2 минуты
  • “Умное” адаптивное меню для сайта
  • Одностраничные сайты за 1-3 дня
  • Красивые иконки для элементов за 1 минуту
  • Адаптивность изображений под любой экран
  • Полезные советы и материалы

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

План курса

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

Bootstrap обучение с нуля – Уроки Bootstrap 3.0 для начинающих (Первый урок)

Поиск
Рубрики

Уроки Bootstrap 3.0 для начинающих (Первый урок)

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

Шаг 1. Идем на официальный сайт и качаем Bootstrap 3.0 — вот ссылка http://getbootstrap.com/getting-started/ (качать то что выделено красным прямоугольником)

Шаг 2. Содержимое архива извлекаем заходим во внутрь папки dist создаем файл index.html желательно использовать кодировку utf-8

Шаг 3. Открываем созданный файл и прописываем следующий код

Сохраняем код который прописали и щелкаем index.html. После запуска index.html увидим следующее

Продолжение во втором уроке.
для тех кто не понял где и как выкладываю архив — Скачать

Ссылки на уроки:

1. Второй урок
2. Третий урок
3. Четвертый урок

Основы bootstrap для начинающих. Урок №1

Основы bootstrap для начинающих. Урок №1

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

Итак, в уроке №1 я попробую объяснить, что такое Bootstrap и зачем он нужен.

○ Что такое Bootstrap?
Twitter Bootstrap – это набор готовых инструментов (кода, стили, скрипты) для создания адаптивных сайтов с использованием HTML, CSS и javascript.
Из готовых CSS-стилей и javascript можно построить адаптивную сетку для сайта, вывести кнопки, выпадающее меню, иконки, всплывающие подсказки, слайдер и т. д.
Вот один из примеров, как выглядит сайт, построенный на фреймворке Bootstrap:

○ Зачем нужен Bootstrap?
Самое главное преимущество Bootstrap в том, что адаптивный сайт с ним делается намного быстрее.

Фреймворк Bootstrap состоит из таких папок:

→ В папке css хранятся готовые CSS стили
→ В папке js хранится файл с набором готовых js-сценариев
→ В папке fonts хранятся шрифты.

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

Предыдущая запись
Основы CMS WordPress. Урок №1
Следующая запись
Форматирование текста в HTML. Основы HTML для начинающих. Урок №3

Bootstrap для начинающих — Awebdesign Blog

Начнем с общих слов, что бутстрап сейчас — самая популярная и распрастраненная платформа для создания адаптивных сайтов.

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

Основное преимущество бутстрапа в том, что можно моментально менять верстку (количество колонок, момент перепада блоков на следующий уровень и т.п.) БЕЗ необходимости открывать листы стилей. Не нужно переписывать ширины блоков для разных размеров экрана — бутстрап сделает все за вас. Более того, используя бутстрап НЕ ЗАДАВАЙТЕ ширины никаким блокам! Это очень сильно мешает адаптивности и респонсивности макета. Также нельзя ставить горизонтальные маргины, макет «сыпется».

В последнем уроке «Ура! Мы собрали свой первый резиновый макет» рассказано о свойстве box-sizing: border-box. В уроке вы могли понять, что свойство box-sizing определяет интерпретацию браузером обводки — считать ли бордер частью дива? Если див равен 300 пикселям в ширину, а рамка — 10 пикселям, то итоговая ширина дива будет 280 пикселей (300 — 2*10)? Или 300? В бутстрапе все дивы соответствуют правилу box-sizing: border-box. Это значит, что вы можете задавать любые рамки дивам без боязни, что они перестанут «влезать» в отпущенный им ряд и упадут на следующую строку.

В чем инновационность бутстрапа

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

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

Но на нынешний момент существует около 100 вьюпортов (размеров экранов), и это число растет.

Как заверстать одну и ту же страницу для всех возможных вьюпортов?

Первый и очевидный шаг — сделать таблицы «резиновыми» — дать колонкам ширины в процентах, а не в пикселях. Этим мы и занимались в предыдущем уроке.

До появления смартфонов этот способ нас спасал. Но на телефонах, как можно представить — контент не может влезть в ширину экрана таким же образом, как в десктоп. Если у вас в ряду 6 колонок с текстом, то на телефоне, даже если ширина колонки будет равна всего одному слову, таблица все равно не влезет в ширину экрана.

Мы стали верстать дивами, так как, в отличие от таблицы с жестким делением на колонки внутри строк, дивы могут «падать» вниз, на «следующую строку».

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

Бутстрап наконец-то дал нам возможность без усилий верстать на табличный лад, НО ДИВАМИ, с использованием их преимущества «падать» на следующие строки. Его структура очень напоминает верстальные сетки печатных изданий, только если бы эти сетки были жидкими, и кубики «перетекали» на новое место при изменении ширины общего листа.

Вы можете легко понять этот принцип, исследовав любую современную вордпресс тему, например: http://demo.elitelayers.com/highfill/.

Откройте сайт в Google Chrome, нажмите в любом месте правой кнопкой мыши, выберите Inspect.

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

Десктоп:

Мобильный:

Да, не забудьте в хедер файла вставить строку . Она скажет браузеру на телефоне, что сайт нужно показывать в масштабе 1:1. По умолчанию браузер на телефоне показывает десктопную версию, уменьшенную так, чтобы сайт «влез» в телефон. Нам же нужно, чтобы сайт «потёк».

Итак, с чего начать

Идем на сайт бутстрапа: getbootstrap.com.

Жмем большую кнопку Download, скроллимся до вот этого момента:

Нам нужна кнопка в первой слева колонке (выделенная у меня сиреневым). Качаем бутстрап. Распаковываем архив и смотрим, что там у нас лежит. Папку fonts можно целиком закинуть в новый проект. А вот в js и css лежит много лишнего. Вряди ли вам понадобится дополнительная тема bootstrap-theme.min.css. По сути, вам нужно перекинуть в свою папку css только 1 файл: bootstrap.min.css, а в папку js — bootstrap.min.js.

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

C чего начать

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

Загрузка

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

Bootstrap

Компилированый и минимизированный CSS, JavaScript, и шрифты. Нет документов или оригинальные исходные файлы не включены.

Исходный код

Исходный Less, JavaScript, и файлы шрифтов, вместе с нашими документами. Требуется компилятор Less и другие настройки.

Bootstrap перенесен из Less в Sass для легкого включения в Rails, Compass, или проекты Sass-only.

Bootstrap CDN

Сотрудники MaxCDN любезно предоставили поддержку CDN для Bootstrap CSS и JavaScript. Просто используйте эти ссылки Bootstrap CDN.

Установка с помощью Bower

Вы также можете установить и управлять Bootstrap’ы Less, CSS, JavaScript, и шрифты, используя Bower:

Установить с помощью npm

Вы также можете установить Bootstrap используя npm:

require(‘bootstrap’) загрузит все Bootstrap’ы jQuery плагины на объект jQuery. На bootstrap сам модуль ничего не экспортирует. Вы можете вручную загрузить Bootstrap’ы jQuery плагины индивидуально загрузки /js/*.js файлы верхнего уровня пакета каталог.

Bootstrap’ы package.json содержит некоторые дополнительные метаданные в следующих разделах:

  • less — путь к Bootstrap’ы основным источником Less файл
  • style — путь к Bootstrap’ы не сжатый CSS, который был предварительно скомпилированные с использованием стандартных настроек (нет настройки)

Установить с помощью Composer

Вы также можете установить и управлять Bootstrap Less, CSS, JavaScript, и шрифты, используя Composer:

Autoprefixer необходимых для Less/Sass

Bootstrap использует Autoprefixer заниматься CSS вендорных префиксов. Если вы компилируете Bootstrap от Less/Sass источник а не через наш Gruntfile, Вам необходимо интегрировать Autoprefixer в процессе построения себя. Если вы используете предварительно скомпилированные Bootstrap или через наш Gruntfile, вам не нужно беспокоиться об этом, потому что Autoprefixer уже интегрированы в Gruntfile.

Что включено

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

Требуется jQuery

Обратите внимание, что все JavaScript плагины требуют jQuery должны быть подключены, как показано на стартовом шаблоне. Обратитесь в наш bower.json чтобы посмотреть какие версии jQuery поддерживаются.

Сборник кода Bootstrap 3

После загрузки, разархивируйте сжатые каталоги. Вы должны увидеть нечто похожее на это:

Это является наиболее базовая форма Bootstrap: собранные файлы, для их быстрой вставки в любой веб-проект. Мы предоставляем сборник CSS и JS ( bootstrap.* ), а также ее минимизированный вариант ( bootstrap.min.* ). CSS карты источника ( bootstrap.*.map ) are available for use with certain browsers’ developer tools. Как дополнительные опции тем Bootstrap — также предоставляются шрифты с Glyphicons.

Топ-пост этого месяца:  Урок 23. JavaScript. События клавиатуры и элементов форм

Исходный код Bootstrap

Исходный код Bootstrap включает прекомпелированный CSS, JavaScript, и средства шрифтов, вместе с исходным Less, JavaScript, и документацией. Более конкретно, оно включает в себя следующее и более:

less/ , js/ , и fonts/ вашего исходного CSS, JS, и иконки (соответственно). Папка dist/ включает в себя все перечисленные предкомпилированные загрузки, что в разделе выше. Папка docs/ включает в себя исходный код для нашей документации, и examples/ использования Bootstrap. Кроме того, любой другой включенный файл обеспечивает поддержку для пакетов, информацию о лицензиях и развитии.

Компиляция CSS и JavaScript

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

Установка Grunt

Чтобы установить Grunt, необходимо сначала загрузить и установить node.js (которая включает в себя npm). npm расшифровывается для узлов упакованных модулей и это способ управления зависимостями развития посредством node.js.

Then, from the command line:

  1. Установите grunt-cli в глобальном масштабе npm install -g grunt-cli .
  2. Передите в главный /bootstrap/ каталог, а затем запустите npm install . npm посмотрите на package.json файл и автоматически установите необходимые местные зависимости, перечисленные в нем.

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

Доступные команды Grunt

grunt dist (Просто собрать CSS и JavaScript)

Регенерирует каталог /dist/ с скомпилированными и уменьшенными CSS и файлами JavaScript. Обычно для пользователя Bootstrap , это команда необходима.

grunt watch (Счетчик)

Часы уменьшают исходные файлы и автоматически перекомпилирует их в CSS при каждом сохранении изменений.

grunt test (Выполнить тесты)

Запуск У jshint и the Помощью qunit тестов (автоматически) в Помощи phantomjs.

grunt docs (сборка и проверка документов активов)

Сборка и тестирование CSS, JavaScript, и прочих активов, которые используются при локальном использовании документации через bundle exec jekyll serve .

grunt (Построить абсолютно все и запустить тесты)

Компиляции and минифайлы CSS and JavaScript, строит сайт документаций, запускает HTML5 валидатор против документов, восстанавливает активы настройщика, и многое другое. Требует Jekyll. Обычно это необходимо, только если вы взломали сам загрузчик Bootstrap.

Поиск и устранение неисправностей

Если у вас возникли проблемы с установкой зависимостей или запуска команд Grunt, сначала удалить /node_modules/ каталог сгенерированный npm. Затем, повторите npm install .

Базовый шаблон

Начните с базовым HTML шаблоном, или измените эти примеры. Мы надеемся, что вы настроите наши шаблоны и примеры, адаптируя их для своих нужд.

Ниже приведен HTML-код, который использует минимизированную версию Bootstrap-документа.

Примеры шаблонов

На шаблоне, что представлен выше, Bootstrap создает множество компонентов. Мы рекомендуем Вам настроить и адаптировать Bootstrap в соответствии с потребностями Вашего индивидуального проекта.

Получить исходный код для каждого примера ниже загрузив Bootstrap хранилище. Примеры можно найти в docs/examples/ каталога.

Использование фреймворка

Стартовый шаблон

Ничего кроме базового: сборник CSS, JavaScript, и использован контейнер.

Темы Bootstrap

Настройте темы Bootstrap чтобы разнообразить вид страниц.

Разметки

Несколько примеров макетов разметки со всеми четырьмя уровнями вложенности и прочее.

Jumbotron

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

Узкий Jumbotron

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

Navbars в действии

Навигационное меню

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

Статическое навигационное меню

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

Фиксированное навигационное меню

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

Пользовательские компоненты

Крышка

Одностраничный шаблон для построения простых и красивых домашних страниц.

Карусель

Сочетание в шаблоне нав. меню и карусели, с добавлением некоторых новых компонентов.

Простой блог в две колонки с пользовательской навигацией, заголовком, и видом.

Панель приборов

Базовая структура для администратора приборная панель с фиксированным боковым меню и панели навигации.

Страница входа

Шаблон пользовательской формы настроен для простого входа на сайт.

Выровненное нав. меню

Создание компонованого нав. меню с выровненными ссылками. Внимание! Не очень дружит с Safari.

Фиксированный Нижний колонтитул

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

Липкий Нижний колонтитул навигации

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

Эксперименты

Неадаптивный Bootstrap

Легко отключить адаптивность Bootstrap согласно нашим документам.

Off-холст

Создание навигационного off-canvas меню с возможностью переключения для Bootstrap.

Инструменты

Bootlint

Bootlint — это официальный Bootstrap на 1 инструмент. Он автоматически проверяет для нескольких распространенных ошибок HTML на веб-страницах, использующих Bootstrap в достаточно «ванильным» образом. Ванильный Bootstrap — х компонентов/виджетов требуют от своих частей DOM соответствуют определенные структуры. Bootlint проверяет экземпляры Bootstrap компоненты правильно структурированный HTML. Попробуйте добавить Bootlint на Bootstrap веб-разработки компиляторов, так что ни одна из распространенных ошибок, замедлить развитие проекта.

Сообщество

Оставайтесь в курсе развития Bootstrap и обратитесь к сообществу за полезными ресурсами.

  • Прочитайте и подпишитесь на Официальный Bootstrap Блог.
  • Общайтесь с другими Bootstrapperами с помощью IRC в irc.freenode.net сервер, на ##bootstrap канала.
  • Для получения справки по использованию Bootstrap, спросите на Сайте stackoverflow, используя тег twitter-bootstrap-3 .
  • Разработчики должны использовать ключевое слово bootstrap на пакеты, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичных механизмов доставки для максимального обнаружения.
  • Найти вдохновляющие примеры людей, строящих с Bootstrap на Bootstrap Экспо.

Вы также можете перейти на @getbootstrap на Twitter к последним сплетням и удивительным музыкальным клипам.

Отключение адаптивности

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

Шаги для блокировки адаптивного просмотра

  1. Опустите просмотр как об этом сказано в документах CSS
  2. Переопределить width на .container Для каждого грид уровня, с одной ширины, например width: 970px !important; быть уверены, что это происходит после умолчанию Bootstrap CSS. Можно избежать !important с медиа запросы или какой-селектор-фу.
  3. Если вы используете навигационное меню, удалите все меню, которые могут сворачиваться/разворачиваться.
  4. Для макета разметки используйте классы .col-xs-* как дополнение или вместо классов medium/large. Не волнуйтесь, для extra-small устройств разметка масштабируется для всех размеров экранов.

Вам еще нужно Respond.js для IE8 (так как наш медиа запросы еще есть и должны быть обработаны). Это отключает «мобильный сайт» аспекта Bootstrap.

Шаблон Bootstrap с заблокированной адаптивностью

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

Миграция с версии v2.х v3.х

Хотите перенести из старой версии Bootstrap v3.х? Проверьте наши руководство по миграции.

Браузер и поддержка устройств

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

Поддержка браузерами

В частности, мы поддерживаем последние версии из следующих браузеров и платформ.

Альтернативные браузеры, которые используют последнюю версию WebKit, blink, или Гекко, будь то напрямую или через веб-платформы просмотреть API, явно не поддерживается. Однако, Bootstrap должна (в большинстве случаев) дисплей и работает в этих браузерах, а также. Более конкретные сведения приводятся ниже.

Мобильных устройств

Вообще говоря, Bootstrap поддерживает последние версии браузеров каждой крупной платформы по умолчанию. Обратите внимание, что прокси-браузеры (такие как Опера Мини, Турбо-режим в Opera мобильный, браузер, Амазонки шелк) не поддерживаются.

Chrome В Firefox Safari
Android Supported Supported N/A
iOS Supported Supported Supported

Браузеры для ПК

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

Chrome В Firefox Internet Explorer Opera Safari
Mac Supported Supported N/A Supported Supported
Windows Supported Supported Supported Supported Not supported

В Windows мы поддерживаем Internet Explorer 8-11.

Для Firefox, в дополнение к последней нормальной стабильной версии, мы также поддерживаем последний Выпуск с расширенной поддержкой (СОЭ) версия браузера Firefox.

Неофициально, Bootstrap должен выглядеть и вести себя достаточно хорошо в Chromium и Chrome для Linux, Firefox для Linux, а также интернет Эксплорер 7, а также Microsoft края, хотя они официально не поддерживаются.

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

Internet Explorer 8 и 9

Internet Explorer 8 и 9 также поддерживается, однако помните, что некоторые свойства CSS3 и элементы HTML5 не в полной мере поддерживаются данным браузерами. Кроме того, Интернет Эксплорер 8 требует использования Respond.js для включения медиа поддержки запросов.

Свойство Интернет Эксплорер 8 Интернет Эксплорер 9
border-radius Not supported Supported
box-shadow Not supported Supported
transform Not supported Supported, with -ms prefix
transition Not supported
placeholder Not supported

Посетите Могу ли я использовать. для более детального ознакомления, какие свойства CSS3 и HTML5 поддерживаются различными браузерами.

Internet Explorer 8 и Respond.js

Примите во внимание следующие оговорки, при использовании Respond.js в вашей среде разработки, в рабочей среде Internet Explorer 8.

Respond.js и кросс-доменный CSS

Если вы храните Respond.js и CSS на разных (суб)доменах (например, на CDN) — это требует некоторых дополнительных установок. Ознакомьтесь с документацией Respond.js для уточнений.

Respond.js и file://

Через правила безопасности браузера, Respond.js не работает при просмотре через протокол file:// (например, когда вы открываете HTML файл локально). Чтобы протестировать настройки чувствительности в IE8, просматривайте ваши страницы через HTTP(S). Ознакомьтесь с документацией Respond.js для уточнений.

Respond.js и @import

Respond.js не работает с CSS, на которые ссылаются как @import . В частности, некоторые конфигурации Drupal, как известно, используют @import . Ознакомьтесь с документацией Respond.js для уточнений.

Internet Explorer 8 и box-sizing

IE8 не в полной мере поддерживает box-sizing: border-box; при комбинировании с min-width , max-width , min-height или max-height . По этой причине, начиная с v3.0.1, мы больше не поддерживаем max-width , .container .

Internet Explorer 8 и @font-face

IE8 имеет некоторые проблемы с @font-face в сочетании с :before . Bootstrap использует эту комбинацию с его символичной иконкой. Если страница кэшируется, и загружается без мыши по окну (т.е. нажать кнопку обновления или загрузки в встроенном кадре), то страница вынесена до загрузки шрифтов. При наведении курсора на страницу (тело) покажет некоторые значки и зависший над остальными иконами покажет также. Смотреть выпуск #13863 для деталей.

Режим совместимости с IE

Bootstrap не поддерживает режим совместимости в старых версиях Internet Explorer. Чтобы быть уверенным, что вы используете последнюю версию такого режима для IE, просмотрите включен соответствующий тег на вашей странице:

Подтвердите режим документа, открыв средства отладки: нажмите F12 и проверьте «Document Mode».

Этот тег входит в состав всех Bootstrap документациий и примеров для обеспечения лучшей визуализации возможных в каждой поддерживаемой версии Internet Explorer.

Internet Explorer 10 на Windows 8 и Windows Phone 8

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

Однако, это не работает для устройств, работающих под управлением Windows Phone 8 версий старше, чем Обновления 3 (а.к.а. GDR3), поскольку это вызывает такие устройства, чтобы главным образом показать основной рабочий стол вместо узкого «phone» view. Для решения этой проблемы вам необходимо включать следующие CSS и JavaScript, чтобы обойти ошибку.

Для получения дополнительной информации и руководства по использованию, просмотрите Windows Phone 8 и Device-Width.

Один за одним, мы включаем это в документацию и примеры Bootstrap в качестве демонстрации.

Процентное округления в Safari

Движок для отображения версий Safari до версии v7.1 для OS X и Safari для iOS В8.0 были некоторые проблемы с количеством десятичных знаков, используемых в нашем .col-*-1 грид классов. Так что если у вас 12 индивидуальный грид столбцы, Вы заметите, что они придумали короткие по сравнению с другими рядами колонн. Помимо обновления сафари на iOS, у вас есть несколько вариантов решений:

  • Добавить .pull-right в вашей последней колонки в разметке, чтобы получить жесткое выравнивание по правому краю.
  • Изменить проценты вручную, чтобы получить идеальное округления для Safari (более сложно, чем в первом варианте)

Модули, navbars, и виртуальные клавиатуры

Переполнение и прокрутка

Поддержка overflow: hidden на элемент весьма ограничен в iOS и Android. С этой целью, когда вы прокрутите мимо верхней или нижней части модального в любом из браузеров этих устройств, в контент начнет прокручиваться. Смотрите Хром ошибка № 175502 (исправлено в Chrome и V40) и В WebKit ошибка #153852.

текстовых полей iOS и прокрутки

Начиная с iOS 9.3, в то время как модальные открыт, если начальное касание прокрутки жест в пределах границы текста или

В содержание под модальным будет прокручиваться вместо модальных себя. Смотрите В WebKit ошибка № 153856.

Виртуальная клавиатура

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

Меню Навигации

Элемент .dropdown-backdrop не используется на iOS в навигации из-за сложности с z-index. Таким образом, чтобы закрыть выпадающие меню, необходимо просто нажать элемент выпадающего (или любой другой элемент, который будет генерировать событие нажатия в iOS).

Браузерное масштабирование

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

Липкий :hover / :focus на мобильном

Хотя реальное зависание не возможно на большинстве сенсорных экранов, мобильные браузеры эмулируют поддержку зависания и делают :hover «Липким». Другими словами, :hover стили начинают применяться после нажатия элемента и прекращают применение только после того, как пользователь нажимает какие-либо другие элементы. Поэтому :hover из Bootstrap’а может привести к нежелательному «залипанию» на таких браузерах. Некоторые мобильные браузеры также делают :focus липкий. Пока что нет простого решения таких вопросов, помимо полного удаления таких стилей.

Печать

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

В частности, в Chrome версии 32 независимо от параметров отступов и размеров полей, Chrome при печати использует значительно более узкую область просмотра, чем физический размер бумаги при отображении медиа запросов. Это может привести к тому, при печати Bootstrap неожиданно активирует очень мелкую сетку. Смотри подробности в Ошибке #12078 и Ошибке Chrome #273306. Рекомендуемые обходные пути:

  • Примените extra-small разметку и убедитесь, что ваша страница выглядит приемлемо.
  • Настройка значения @screen-* Less переменных, чтобы ваш бумага для принтера рассматривалась больше, чем extra-small.
  • Добавить Пользовательское медиа запросы изменение грид Размер точки останова для печати медиа только.

Также, как Сафари и v8.0, фиксированной ширины .container может вызвать Сафари использовать необычайно маленький размер шрифта при печати. См. #14868 и В WebKit ошибка #138192 Для более подробной информации. Одним из возможных обойти это, добавив следующие CSS:

Заводские Andro >Из коробки, Android 4.1 (и даже некоторые новые версии) ставят приложение Браузера в качестве веб-браузера по умолчанию(в отличие от Chrome). К сожалению, стандартные браузеры имеют множество ошибок и несоответствий с CSS в целом.

Меню выбора

На элементе, в Android браузере не будет отображаться элементы управления если есть border-radius и/или border . (Смотри этот вопросы на StackOverflow более детально.) Используйте фрагмент кода ниже, чтобы удалить этот CSS и сделать элемент без стиля на Android браузере. Избегать недовольство юзера помогает использование браузеров: Chrome, Safari и Mozilla.

Валидаторы

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

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

Наш HTML-документы также имеют некоторые тривиальным и несущественным HTML проверка предупреждения, в связи с наличие решения ошибок в Firefox.

Поддержка третьих сторон

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

Размерность блоков

Некоторое стороннее программное обеспечение, включая Google Maps и Google Custom Search Engine, конфликтуют с Bootstrap через * < box-sizing: border-box; >, то есть правило, которое создает padding (отступы) в итоге не влияет на ширину элемента. Узнайте больше об этом: box model sizing and at CSS Tricks.

В зависимости от контекста, вы можете переопределить box-sizing только там, где это необходимо (Вариант 1), либо сбросить его для целых областей (Вариант 2).

Доступность

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

Пропуск навигации

Если ваши навигации содержит множество ссылок и доходит до основного Контента в DOM, добавить Skip to main content ссылка до навигации (для простого объяснения, увидеть это Статья A11Y проект пропустить навигационные ссылки). С помощью .sr-only класс визуально скрывают перейдите по ссылке, и .sr-only-focusable класс будет гарантировать, что ссылка будет видна после целенаправленной (для зрячих пользователей клавиатура).

Благодаря давнему недостатки/ошибки в Chrome (см. вопрос 262171 в хром багтрекер) и Internet Explorer (см. эту статью на ссылки и фокус того), Вы должны убедиться, что цель вашей ссылке пропустить хотя бы программно фокусируемый, добавив tabindex=»-1″ .

Кроме того, может потребоваться явно подавляет видимый фокусировки на мишени (в частности, хром в настоящее время также устанавливает фокус на элементах с tabindex=»-1″ при щелчке мышкой) с #content:focus < outline: none; >.

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

Вложенные заголовки

При вложении заголовков (

), ваш основное заглавие документа должен быть

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

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

Цветовой контраст

В настоящее время, некоторые из умолчанию цветовые комбинации в Bootstrap (например, различные кнопки в стиле классы, часть кода подсветкой цвет основные блоки кода В .bg-primary контекстная фоне вспомогательный класс, и по умолчанию цвет ссылки при использовании на белом фоне) имеют низкую контрастность (ниже рекомендуемое соотношение 4.5:1). Это может вызвать проблемы для пользователей с ослабленным зрением или дальтонизмом. Эти цвета по умолчанию могут быть изменены, чтобы увеличить контрастность и четкость.

Дополнительные ресурсы

Лицензия FAQs

Bootstrap выпущено под лицензией MIT и имеет авторское право 2020 Twitter. Сведена к меньшим частям, и может быть описана следующими условиями.

Она требует:

  • Сохранить лицензии и уведомление об авторских правах, включенные в Bootstrap — х CSS и JavaScript файлов, когда вы используете их в ваших работах

Она позволяет:

  • Свободно скачивать и использовать Bootstrap, полностью или частично, для личного, частного, внутренних или коммерческих целях компании
  • Использовать Bootstrap в пакетах или в дистрибуции, которую вы сами создаете
  • Измените исходный код
  • Грант сублицензии изменять и распространять Bootstrap третьим лицам, не включенных в лицензии

Она запрещает:

  • Держите авторов и владельцев лицензий несет ответственности за ущерб, как Bootstrap предоставляется без гарантии
  • Держите создателей или владельцев авторских прав к ответственности Bootstrap
  • Распространять любую часть Bootstrap без ссылки на источник
  • Использовать любые пометки, которые относятся к Twitter, чтобы в такой способ явно или неявно продемонстрировал, что Twitter одобряет ваш дистрибутив
  • Использовать любые пометки, которые относятся к Twitter, чтобы в такой способ явно или неявно продемонстрировал будто вы создаете программное обеспечение по запросу Twitter

Она не требует:

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

Полная версия лицензии Bootstrap размещена в проекте репозитория более подробно.

Переводы

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

Мы не помогаем организовывать перевод, мы просто даем на них ссылки.

Перевели новый или есть перевод лучше? Откройте запрос, чтобы добавить его в наш список.

Спроектированы и построены со всей любовью в мире @mdo и @fat. Поддерживается основной командой с помощью наших спонсоров.

Введение


Обзор проекта, компонентов, а так же как начать с простого шаблона.

  • Скачать
  • Файловая структура
  • Что включено?
  • HTML-шаблон
  • Примеры
  • Что делать дальше?

1. Скачать

Перед скачиванием убедитесь что у Вас имеется удобный редактор кода (мы рекомендуем Sublime Text 2), а так же какое-либо понимание и знание технологий HTML и CSS. Здесь мы не дадим описание исходных файлов, но они находятся в свободном доступе на GitHub.

Скачать готовый проект

Быстрый способ начать: скачать скомпилированные и минифицированные файлы CSS, JS, и картинок.

Скачать исходники

Оригинальные файлы CSS и JavaScript, с текущей версией Bootstrap можно скачать через GitHub.

2. Файловая структура

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

Разархивировав скаченный архив (скомпилированного) Bootstrap’а. Вы увидите следующую структуру:

Это основной вид Bootstrap’а: скомпилированные файлы для начала быстрой работы, просто загрузите на сервер и Вы готовы к работе. Мы предоставили скомпилированные CSS и JS ( bootstrap.* ), наряду со скомпилированными и минифицированными CSS и JS ( bootstrap.min.* ) файлами. Картинки были сжаты через ImageOptim, приложение для Mac, позволяющее сжимать PNG-файлы.

Учитывайте что все JavaScript-плагины основаны на jQuery.

3. Что включено?

Bootstrap заряжен порцией высококачественного HTML, CSS, и JS для любого типа веб-разработки.

Документация

Шаблон

Глобальные стили для элемента body : изменение background’а, ссылки на стили, сетка шаблона и два простых макета.

Стили основных HTML элементов, оформление и шрифты, код, таблицы, формы и кнопки. Включая Glyphicons — набор иконок.

Компоненты

Основные стили компонентов интерфейса: вкладки и навигационные кнопки, навигационный бар (navbar), сообщения, заголовки страниц и т.п.

Javascript-плагины

Схоже с компонентами, Javascript-плагины оживляют ваш веб-проект, и Компоненты такие как всплывающие подсказки (tooltips), всплывающий контент (popovers), всплывающие окна (modals) и много других вкусностей.

Список компонентов

Вместе Компоненты и Javascript-плагины представляют следующий список элементов интерфейса:

  • Группы кнопок
  • Кнопки с выпадающими списками
  • Элементы навигации: вкладки, кнопки и списки
  • Навигационный бар (Navbar)
  • Этикетки
  • Бейджи
  • Заголовки страниц и элемент hero
  • Миниатюры
  • Сообщения
  • Индикаторы процесса (прогресса)
  • Всплывающие окна
  • Выпадающие списки
  • Всплывающие подсказки
  • Всплывающий контент
  • Стек вкладок
  • Каруселька
  • Вспомогательное меню input элемента (Typeahead)

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

4. Основной HTML шаблон

Вместо чтения красочных описаний Bootstrap’a, мы предлагаем Вам начать его использовать. Для начала создайте базовый HTML шаблон, который будет включать в себя все что писано в Файловой структуре.

Затем обратите внимание на стандартный HTML-файл:

Что бы Забутстреппить эту страничку, просто добавьте линк на CSS и JS файлы:

Все готово! Благодаря этим файлам, вы можете начать разрабатывать ваш сайт или приложение на Bootstrap’е.

5. Примеры

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

Основной сайт. Маркетинг.

Основной «Hero» элемент и три дополняющие колонки с информацией.

Плавающая разметка

Данный пример использует все преимущества динамического дизайна с плавающей шириной.

Стартаперский шаблон

Полнофункциональный шаблон, включающий в себя все фичи (HTML/CSS/LESS/JS) от Bootstrap.

Классический для продукта

Простой, легкий маркетинговый шаблон для проектов и команд.

Вход (Логин)

Классическая форма входа.

Подвал

Подвал привязанный к низу страницы.

Каруселька «jumbotron»

Интерактивный, приятный и веселый шаблон, подойдет как для продукта так и для команды.

Следующие шаги.

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

Курс Bootstrap 3

Интерактивный курс по верстке сайтов Bootstrap — обучение верстке сайтов

CSS фреймворк Bootstrap — это популярный инструмент для создания сайтов. С Bootstrap вам не придется верстать сайты с нуля благодаря готовым компонентам. Начните смотреть уроки Bootstrap и вы увидите как просто сделать верстку веб-сайта.

  • 50 заданий
  • 4 часа видео
  • Сертификат об окончании

О курсе

Bootstrap — это css-фреймворк с готовыми css-классами и html/jquery компонентами, с помощью которых, вы очень быстро сможете создать интерфейс веб-сайта, способный адаптироваться под мобильных устройства.

В уроках Bootstrap вы узнаете:

  • Что такое Grid-system и как позиционировать блоки на сайте
  • Как быстро сверстать веб-сайт с помощью Bootstrap
  • Как сделать горизонтальное и вертикальное меню
  • Какие существуют компоненты в Bootstrap
  • Как встроить адаптивный видеоплеер на сайт
  • Как вставить картинку на страницу и сделать ее адаптивной
  • Как быстро сделать карусель изображений на сайте

Уроки верстки Bootstrap построены таким образом, что вы сможете уже через несколько уроков Bootstrap создать основу каркаса сайта!

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

Создание сайтов на Bootstrap относится к Frontend(фронтенд) и специалисты со знанием Bootstrap ценятся на рынке труда. После завершения курса Bootstrap, мы рекомендуем проходить курс PHP/MySQL.

План курса

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

Что такое Bootstrap?

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

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

Всмотритесь в структуру страницы и разберитесь, как строятся макеты.

Измените размер окна браузера или используйте дополнение Chrome-а Viewport Resizer, чтобы узнать больше о медиа запросах утилит.

Поиграйтесь с сеткой Bootstrap.

На W3Schools вы найдете полное описание всех классов CSS, компонентов и модулей JavaScript с примерами «сделай сам»:

  • Сетка трассировки в Bootstrap
  • Типографская разметка текста, кнопки, формы и элементы форм, вспомогательные классы, изображения, таблицы
  • Значки символов, выпадающие списки, навигация

Просмотрите исходный код и попытайтесь ознакомиться с максимальным количеством классов, насколько это возможно. Узнайте об условиях их использования: как, когда и почему. Это поможет вам быстрее двигаться вперед при написании HTML и элементов пользовательского интерфейса (UI).

Понимание что такое Bootstrap становится еще важнее, если предстоит работать в команде. Мы не раз были свидетелями, когда каждый раз при добавлении нового кода CSS ломался UI на других страницах. Было довольно утомительно просматривать весь сайт и исправлять ошибки. Задумайтесь об издержках и деньгах, которые придется потратить на сверхурочное время разработчиков и помощь QA поддержки.

Пять ошибок при работе с Bootstrap, которые тратят время впустую

Центрирование текста или раскрывающихся блоков (DIV)

Но не center или

Изменение размера шрифта

Используйте lead или small:

В случае, если вам нужны более крупные или мелкие заголовки, не забывайте о .h1, .h2, .h3, .h4, .h5, .h6, .small. Используйте их так:

Запрет обтекания элементов или настройка элементов на автозапрет их дочерних записей, очистка отступов

Не создавайте новые классы, а используйте встроенный clearfix Bootstrap:

Изменение оформления или встраивание неупорядоченных списков и других элементов

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

Для чекбоксов (флажков) и радиокнопок есть checkbox-inline и radio-inline. И вы всегда можете добавить .form-inline к формам (не используйте ) для выровненных влево и inline-block-ов (встроенных блоков) управления.

Выбор размера кнопок

Хотите необычно большие или маленькие кнопки? Пропишите btn-lg, btn-sm, или btn-xs для дополнительных размеров.

Не изменяйте основные файлы фреймворка непосредственно

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

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

Тем не менее, если вы начинаете работать над большим сайтом с несколькими разработчиками, будет лучше держать все раздельно и организованно. Переместите файлы фреймворка за пределы основной пользовательской папки CSS и храните их в не редактируемой папке, удалите неиспользуемые CSS с помощью Grunt или Gulp плагинов grunt-uncss или gulp-uncss. Другой способ держать все раздельно — брать файлы фреймворка с CDN. Содержание кода фреймворка отдельно дает вам быструю возможность обновляться до последней версии. Это также помогает свести к минимуму количество проблем с масштабируемостью и стилизацией.

Используйте имеющиеся ресурсы Bootstrap

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

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

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

Он сэкономит вам много часов/дней работы при проектировании и кодировании UI. Каждый компонент и плагин тщательно документирован с примерами и блоками кода для более легкого использования и настройки. Он высоко ценится многими разработчиками и очень популярен как для прототипирования, так и для процесса создания. Это хороший инструмент для создания веб-сайтов, поддерживающих мобильные приложения. Bootstrap является замечательной отправной точкой для многих типов проектов; дает возможность передать проект в руки дизайнера и сказать «Сделай чтобы это выглядело прилично!» и у него не будет необходимости прорубать свой путь через код.

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

Тем, кто хочет разобраться в веб-разработке, рекомендуем профессию «Веб-разработчик» от GeekBrains.

Фото из архива NASA: запуск шаттла Atlantis из космического центра Кеннеди в 2010 году

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

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

Всмотритесь в структуру страницы и разберитесь, как строятся макеты.

Измените размер окна браузера или используйте дополнение Chrome-а Viewport Resizer, чтобы узнать больше о медиа запросах утилит.

Поиграйтесь с сеткой Bootstrap.

На W3Schools вы найдете полное описание всех классов CSS, компонентов и модулей JavaScript с примерами «сделай сам»:

  • Сетка трассировки в Bootstrap
  • Типографская разметка текста, кнопки, формы и элементы форм, вспомогательные классы, изображения, таблицы
  • Значки символов, выпадающие списки, навигация

Просмотрите исходный код и попытайтесь ознакомиться с максимальным количеством классов, насколько это возможно. Узнайте об условиях их использования: как, когда и почему. Это поможет вам быстрее двигаться вперед при написании HTML и элементов пользовательского интерфейса (UI).

Понимание что такое Bootstrap становится еще важнее, если предстоит работать в команде. Мы не раз были свидетелями, когда каждый раз при добавлении нового кода CSS ломался UI на других страницах. Было довольно утомительно просматривать весь сайт и исправлять ошибки. Задумайтесь об издержках и деньгах, которые придется потратить на сверхурочное время разработчиков и помощь QA поддержки.

Пять ошибок при работе с Bootstrap, которые тратят время впустую

Центрирование текста или раскрывающихся блоков (DIV)

Но не center или

Изменение размера шрифта

Используйте lead или small:

В случае, если вам нужны более крупные или мелкие заголовки, не забывайте о .h1, .h2, .h3, .h4, .h5, .h6, .small. Используйте их так:

Запрет обтекания элементов или настройка элементов на автозапрет их дочерних записей, очистка отступов

Не создавайте новые классы, а используйте встроенный clearfix Bootstrap:

Изменение оформления или встраивание неупорядоченных списков и других элементов

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

Для чекбоксов (флажков) и радиокнопок есть checkbox-inline и radio-inline. И вы всегда можете добавить .form-inline к формам (не используйте

C чего начать

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

Загрузка

Bootstrap (текущая v3.3.1) имеет несколько способов чтобы начать работу, каждый из которых интересен в зависимости от уровня опыта и конкретной потребности использования. Посмотрите что лучше всего подходит именно вам.

Bootstrap

Компилирований и минимизированный CSS, JavaScript, и шрифты. Нет документов или оригинальные исходные файлы не включены.

Исходный код

Исходный Less, JavaScript, и файлы шрифтов, вместе с нашими документами. Требуется компилятор Less и другие настройки.

Bootstrap перенесен из Less в Sass для легкого включения в Rails, Compass, или проекты Sass-only.

Bootstrap CDN

Сотрудники MaxCDN любезно предоставили поддержку CDN для Bootstrap CSS и JavaScript. Просто используйте эти ссылки Bootstrap CDN.

Установка с помощью Bower

You can also install and manage Bootstrap’s Less, CSS, JavaScript, and fonts using Bower:

Что включено

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

Требуется jQuery

Обратите внимание, что все JavaScript плагины требуют jQuery должны быть подключены, как показано на стартовом шаблоне. Обратитесь в наш bower.json чтобы посмотреть какие версии jQuery поддерживаются.

Сборник кода Bootstrap 3

После загрузки, разархивируйте сжатые каталоги. Вы должны увидеть нечто похожее на это:

Это является наиболее базовая форма Bootstrap: собранные файлы, для их быстрой вставки в любой веб-проект. Мы предоставляем сборник CSS и JS ( bootstrap.* ), а также ее минимизированный вариант ( bootstrap.min.* ). CSS source maps ( bootstrap.*.map ) are available for use with certain browsers’ developer tools. Как дополнительные опции тем Bootstrap — также предоставляются шрифты с Glyphicons.

Исходный код Bootstrap

Исходный код Bootstrap включает прекомпелированный CSS, JavaScript, и средства шрифтов, вместе с исходным Less, JavaScript, и документацией. Более конкретно, оно включает в себя следующее и более:

less/ , js/ , и шрифты/ вашего исходного CSS, JS, и иконки (соответственно). Папка dist/ включает в себя все перечисленные предкомпилированные загрузки, что в разделе выше. Папка docs/ включает в себя исходный код для нашей документации, и примеры/ использования Bootstrap. Кроме того, любой другой включенный файл обеспечивает поддержку для пакетов, информацию о лицензиях и развитии.

Компиляция CSS и JavaScript

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

Установка Grunt

Чтобы установить Grunt, необходимо сначала загрузить и установить node.js (которая включает в себя npm). npm расшифровывается для узлов упакованных модулей и это способ управления зависимостями развития посредством node.js.

Then, from the command line:

  1. Установите grunt-cli в глобальном масштабе npm установки -g grunt-cli .
  2. Передите в главный /bootstrap/ каталог, а затем запустите npm install . npm посмотрите на package.json файл и автоматически установите необходимые местные зависимости, перечисленные в нем.

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

Доступные команды Grunt

grunt dist (Просто собрать CSS и JavaScript)

Восстанавливает /dist/ каталог с составленные и уменьшенные CSS и JavaScript файлы. Обычно для пользователя Bootstrap , это команда необходима.

grunt watch (Счетчик)

Часы уменьшают исходные файлы и автоматически перекомпилирует их в CSS при скаждом сохранении изменений.

grunt test (Выполнить тесты)

Запуск JSHint и the QUnit тестов (автоматически) в PhantomJS.

grunt docs (Build & test the docs assets)

Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via jekyll serve .

grunt (Построить абсолютно все и запустить тесты)

Компиляции and минифайлы CSS and JavaScript, строит сайт документаций, запускает HTML5 валидатор против документов, восстанавливает активы настройщика, и многое другое. Требует Jekyll. Обычно это необходимо, только если вы взломали сам загрузчик Bootstrap.

Поиск и устранение неисправностей

Если у вас возникли проблемы с установкой зависимостей или запуска команд Grunt, сначала удалить /node_modules/ каталог сгенерированный npm. Затем, повтор npm install .

Базовый шаблон

Начните с базовым HTML шаблоном, или измените эти примеры. Мы надеемся, что вы настроите наши шаблоны и примеры, адаптируя их для своих нужд.

Ниже приведен HTML-код, который использует минимизированную версию Bootstrap-документа.

Примеры шаблонов

На шаблоне, что представлен выше, Bootstrap создает множество компонентов. Мы рекомендуем Вам настроить и адаптировать Bootstrap в соответствии с потребностями Вашего индивидуального проекта.

Использование фреймверка

Стартовый шаблон

Ничего кроме базового: сборник CSS, JavaScript, и использован контейнер.

Темы Bootstrap

Настройте темы Bootstrap чтобы разнообразить вид страниц.

Разметки

Несколько примеров макетов разметки со всеми четырьмя уровнями вложенности и прочее.

Jumbotron

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

Узкий Jumbotron

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

Navbars в действии

Навигационное меню

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

Статическое навигационное меню

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

Фиксированное навигационное меню

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

Пользовательские компоненты

Cover

Одностраничный шаблон для построения простых и красивых домашних страниц.

Карусель

Сочетание в шаблоне нав. меню и карусели, с добавлением некоторых новых компонентов.

Простой блог в две колонки с пользовательской навигацией, заголовком, и видом.

Панель приборов

Базовая структура для администратора приборная панель с фиксированным боковым меню и панели навигации.

Страница входа

Шаблон пользовательской формы настроен для простого входа на сайт.

Выровненное нав. меню

Создание компонованого нав. меню с выровненными ссылками. Внимание! Не очень дружит с Safari.

Sticky footer

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

Sticky footer with navbar

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

Эксперименты

Неадаптивный Bootstrap

Легко отключить адаптивность Bootstrap согласно нашим документам.

Offcanvas

Создание навигационного off-canvas меню с возможностью переключения для Bootstrap.

Инструменты

Bootlint

Bootlint is the official Bootstrap HTML linter tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly «vanilla» way. Vanilla Bootstrap’s components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project’s development.

Сообщество

Оставайтесь в курсе о развитии Bootstrap и обратитесь к сообществу за полезные ресурсы.

  • Прочитайте и подпишитесь на Официальный Bootstrap Блог.
  • Общайтесь с другими Bootstrapperами с помощью IRC в irc.freenode.net сервер, на ##bootstrap channel.
  • Для получения справки по использованию Bootstrap, спросите на StackOverflow using the tag twitter-bootstrap-3 .
  • Найти вдохновляющие примеры людей, строящих с Bootstrap на Bootstrap Expo.

Вы также можете перейти на @twbootstrap on Twitter к последним сплетням и удивительным музыкальным клипам.

Блокировка адаптивности

Bootstrap автоматически адаптирует просмотр страниц под несколько размеров экранов. Здесь показано как заблокировать такую возможность, чтобы страницы отображались как в этом нечувствительном шаблоне.

Шаги для блокировки адаптивного просмотра

  1. Не создавайте с именем viewport как об этом сказано в документах CSS
  2. Отмените width , .container для каждого уровня разметки определенной ширины, например так : width: 970px !important; Убедитесь, что этот код идет после включения основного кода Bootstrap CSS. При желании можно избежать !important с медиа-запросами или со специальным селектором.
  3. Если вы используете навигационное меню, удалите все меню, которые могут сворачиваться/разворачиваться.
  4. Для макета разметки используйте классы .col-xs-* как дополнение или вместо классов medium/large. Не волнуйтесь, разметка с классом xs (extra small) масштабируется для всех размеров экранов.

Вам все еще нужен Respond.js для IE8 (поскольку наши медиа-запросы все еще существуют и должны обрабатываться). Это заблокирует свойство «мобильность сайта» Bootstrap.

Шаблон Bootstrap с заблокированной адаптивностью

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

Переход с v2.x на v3.x

Посмотрите на переход из старой версии Bootstrap на v3.x? Ознакомьтесь наше руководство по переходу.

Браузер и поддержка устройств

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

Поддержка браузерами

В частности, мы поддерживаем последние версии из следующих браузеров и платформ. На Windows, мы поддерживаем Internet Explorer 8-11. Более конкретная информация поддержки предоставлена ниже.

Chrome Firefox Internet Explorer Opera Safari
Android Поддерживается Поддерживается N/A Не поддерживается N/A
iOS Поддерживается N/A Не поддерживается Поддерживается
Mac OS X Поддерживается Поддерживается Поддерживается Поддерживается
Windows Поддерживается Поддерживается Поддерживается Поддерживается Не поддерживается

Bootstrap должен достаточно хорошо выглядеть и вести себя в Chromium и Chrome для Linux, Firefox для Linux, и Internet Explorer 7, хотя они официально не поддерживаются.

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

Internet Explorer 8 и 9

Internet Explorer 8 и 9 также поддерживается, однако помните, что некоторые свойства CSS3 и элементы HTML5 не в полной мере поддерживаются данным браузерами. Кроме того, Internet Explorer 8 требует использования Respond.js, чтобы разрешить поддержку медиа запросов.

Свойство Internet Explorer 8 Internet Explorer 9
border-radius Не поддерживается Поддерживается
box-shadow Не поддерживается Поддерживается
transform Не поддерживается Поддерживается с префиксом -ms
transition Не поддерживается
placeholder Не поддерживается

Посетите Can I use. для более детального ознакомления, какие свойства CSS3 и HTML5 поддерживаются различными браузерами.

Internet Explorer 8 и Respond.js

Примите во внимание следующие оговорки, при использовании Respond.js в вашей среде разработки, в рабочей среде Internet Explorer 8.

Respond.js и кросс-доменный CSS

Если вы храните Respond.js и CSS на разных (суб)доменах (например, на CDN) — это требует некоторых дополнительных установок. Ознакомьтесь с документацией Respond.js для уточнений.

Respond.js и file://

Через правила безопасности браузера, Respond.js не работает при просмотре через протокол file:// (например, когда вы открываете HTML файл локально). Чтобы протестировать настройки чувствительности в IE8, просматривайте ваши страницы через HTTP(S). Ознакомьтесь с документацией Respond.js для уточнений.

Respond.js и @import

Respond.js не работает с CSS, на которые ссылаются как @import . В частности, некоторые конфигурации Drupal, как известно, используют @import . Ознакомьтесь с документацией Respond.js для уточнений.

Internet Explorer 8 и box-sizing

IE8 не в полной мере поддерживает box-sizing: border-box; при комбинировании с min-width , max-width , min-height или max-height . По этой причине, начиная с v3.0.1, мы больше не поддерживаем max-width , .container .

Internet Explorer 8 и @font-face

IE8 имеет некоторые проблемы с @font-face в сочетании с :before . Bootstrap использует эту комбинацию с его символичной иконкой. Если страница кэшируется, и загружается без мыши по окну (т.е. нажать кнопку обновления или загрузки в встроенном кадре), то страница вынесена до загрузки шрифтов. При наведении курсора на страницу (тело) покажет некоторые значки и зависший над остальными иконами покажет также. Смотреть выпуск #13863 для деталей.

Режим совместимости с IE

Bootstrap не поддерживает режим совместимости в старых версиях Internet Explorer. Чтобы быть уверенным, что вы используете последнюю версию такого режима для IE, просмотрите включен соответствующий тег на вашей странице:

Подтвердите режим документа, открыв средства отладки: нажмите F12 и проверьте «Document Mode».

Этот тег входит в состав всех Bootstrap документациий и примеров для обеспечения лучшей визуализации возможных в каждой поддерживаемой версии Internet Explorer.

Internet Explorer 10 на Windows 8 и Windows Phone 8

Internet Explorer 10 не отличает ширину устройства ширины окна просмотра, и таким образом не правильно применяет медіазапити в Bootstrap CSS. Как правило, это можно быстро починить добавив следующий код CSS:

Однако, это не работает для устройств, работающих под управлением Windows Phone 8 версий старше, чем Update 3 (a.k.a. GDR3), поскольку это вызывает такие устройства, чтобы главным образом показать основной рабочий стол вместо узкого «phone» view. Для решения этой проблемы вам необходимо включать следующие CSS и JavaScript, чтобы обойти ошибку.

Для получения дополнительной информации и руководства по использованию, просмотрите Windows Phone 8 и Device-Width.

Один за одним, мы включаем это в документацию и примеры Bootstrap в качестве демонстрации.

Процентное округления в Safari

The rendering engine of versions of Safari prior to v7.1 for OS X and Safari for iOS v8.0 had some trouble with the number of decimal places used in our .col-*-1 grid classes. So if you had 12 individual grid columns, you’d notice that they came up short compared to other rows of columns. Besides upgrading Safari/iOS, you have some options for workarounds:

  • Добавить .pull-right в вашей последней колонки в разметке, чтобы получить жесткое выравнивание по правому краю.
  • Изменить проценты вручную, чтобы получить идеальное округления для Safari (более сложно, чем в первом варианте)

Модули, navbars, и виртуальные клавиатуры

Переполнение и прокрутка

Поддержка overflow: hidden для элемента достаточно ограничена в iOS и Android. В браузере этих устройств, при прокруткі за пределы верхней или нижней модальной части, начинает прокручиваться содержание в .

Виртуальная клавиатура

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

Navbar Dropdowns

Элемент .dropdown-backdrop не используется на iOS в навигации из-за сложности с z-index. Таким образом, чтобы закрыть выпадающие меню, необходимо просто нажать элемент выпадающего (или любой другой элемент, который будет генерировать событие нажатия в iOS).

Браузерное масштабирование

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

Печать

Even in some modern browsers, printing can be quirky.

In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap’s extra-small grid being unexpectedly activated when printing. See #12078 for some details. Suggested workarounds:

  • Примените extra-small разметку и убедитесь, что ваша страница выглядит приемлемо.
  • Настройка значения @screen-* Less переменных, чтобы ваш бумага для принтера рассматривалась больше, чем extra-small.
  • Добавте пользовательские запросы, чтобы изменить размер разметки точек останова только для печатных СМИ.

Also, as of Safari v8.0, fixed-width .container s can cause Safari to use an unusually small font size when printing. See #14868 for more details. One potential workaround for this is adding the following CSS:

Android stock браузер

Из коробки, Android 4.1 (и даже некоторые новые релизы по-видимому) ставит с браузера приложение, как в веб-браузере по умолчанию(в отличие от Chrome). К сожалению, браузер приложение имеет множество ошибок и несоответствий с CSS в целом.

Select меню

На элементе, в Android браузере не будет отображаться элементы управления если есть border-radius и/or border . (Смотри этот вопрос по StackOverflow более детально.) Используйте фрагмент кода ниже, чтобы удалить этот CSS и сделать элемент без стиля на Android браузере. Агент пользователя фырканье предотвращает помехи с Chrome, Safari, and Mozilla браузерами.

Валидаторы

In order to provide the best possible experience to old and buggy browsers, Bootstrap uses CSS browser hacks in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren’t yet fully standardized, but these are used purely for progressive enhancement.

These validation warnings don’t matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don’t interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.

Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for a certain Firefox bug.

Поддержка третьих сторон

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

Размерность блоков

Некоторое стороннее программное обеспечение, включая Google Maps и Google Custom Search Engine, конфликтуют с Bootstrap через * < box-sizing: border-box; >, то есть правило, которое создает padding (отступы) в итоге не влияет на ширину элемента. Узнайте больше об этом: box model sizing and at CSS Tricks.

В зависимости от контекста, вы можете переопределить box-sizing только там, где это необходимо (Вариант 1), либо сбросить его для целых областей (Вариант 2).

Доступность

Bootstrap следует общим веб-стандартам, и—при минимальных дополнительных усилиях—может быть использован для создания сайтов, доступных через AT .

Пропуск навигации

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

Вложенные заголовки

При вложении заголовков (

), ваш основное заглавие документа должен быть

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

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

Цветовой контраст

Currently, some of the default color combinations available in Bootstrap (such as the various styled button classes, some of the code highlighting colors used for basic code blocks, the .bg-primary contextual background helper class, and the default link color when used on a white background) have a low contrast ratio (below the recommended ratio of 4.5:1). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.

Дополнительные ресурсы

Лицензия FAQs

Bootstrap выпущено под лицензией MIT и имеет авторское право 2020 Twitter. Сведена к меньшим частям, и может быть описана следующими условиями.

Она требует:

  • Включите лицензию и уведомление об авторских правах в ваших работах

Она позволяет:

  • Свободно скачивать и использовать Bootstrap, полностью или частично, для личного, частного, внутренних или коммерческих целях компании
  • Использовать Bootstrap в пакетах или в дистрибуции, которую вы сами создаете
  • Измените исходный код
  • Грант сублицензии изменять и распространять Bootstrap третьим лицам, не включенных в лицензии

Она запрещает:

  • Держите авторов и владельцев лицензий несет ответственности за ущерб, как Bootstrap предоставляется без гарантии
  • Держите создателей или владельцев авторских прав к ответственности Bootstrap
  • Распространять любую часть Bootstrap без ссылки на источник
  • Использовать любые пометки, которые относятся к Twitter, чтобы в такой способ явно или неявно продемонстрировал, что Twitter одобряет ваш дистрибутив
  • Использовать любые пометки, которые относятся к Twitter, чтобы в такой способ явно или неявно продемонстрировал будто вы создаете программное обеспечение по запросу Twitter

Она не требует:

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

Полная версия лицензии Bootstrap размещена в проекте репозитория более подробно.

Переводы

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

Мы не помогаем организовывать перевод, мы просто даем на них ссылки.

Перевели новый или есть перевод лучше? Откройте запрос, чтобы добавить его в наш список.

Designed and built with all the love in the world by @mdo and @fat.

Maintained by the core team with the help of our contributors.

Code licensed under MIT, documentation under CC BY 3.0.

Как сверстать веб-страницу. Часть 2 — Bootstrap

Введение

Уважаемый читатель, эта статья является второй частью цикла статей, посвященных вёрстке.

В первой части мы верстали шаблон Corporate Blue от студии Pcklaboratory с помощью стандартных средств на чистом HTML и CSS. В данной статье мы попробуем сверстать этот же шаблон, но с помощью CSS фреймворка Bootstrap 3.

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

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

Об использовании Bootstrap

В настоящее время есть несколько способов работы со стилями Bootstrap.

Без использования LESS

Для новичков сам Bootstrap рекомендует следующий подход: нужно скачать с сайта скомпилированный Bootstrap и положить его в свой проект, ничего не изменяя. Затем нужно создать свой пустой CSS файл и подключить его после bootstrap.css.

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

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

С использованием LESS

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

Существует большое количество способов скомпилировать LESS файлы и Bootstrap оставляет это на усмотрение разработчика. Сам Bootstrap использует для компиляции Grunt, вы можете предпочесть плагин для продуктов JetBrains, а мы, поскольку статья ориентирована на новичков, посмотрим в сторону более простых решений. Такими решениями являются программы WinLess для Windows, SimpLESS для Mac или Koala для Linux. Все эти программы делают примерно одно и то же: получают на вход папку с LESS файлами и слушают изменения в них. Как только вы вносите изменения в любой файл – тут же он компилируется в указанный CSS файл. Таким образом вам нет необходимости запускать компиляцию руками после каждого изменения. Вы изменяете LESS файл, сохраняете его и тут же видите изменения на сайте в уже скомпилированном, сжатом виде.

Создание проекта

Первым шагом давайте создадим простую структуру файлов для нашего проекта.

  • Создаем папку с названием проекта, например whitesquare-bootstrap.
  • В ней нужно создать две вложенные папки: src – для исходных файлов и www – для файлов конечного сайта.
  • В папке www создаем пустую папку images и пустой файл index.html.
  • Затем нужно скачать сам Bootstrap и скопировать содержимое архива в папку www нашего проекта.
  • Поскольку мы решили использовать LESS в нашем проекте, то придется еще скачать исходники Bootstrap и скопировать оттуда папку less в папку src нашего проекта.
  • Рядом с появившейся папкой less/bootstrap создадим два пустых файла styles.less и variables.less. В них мы будем перебивать переменные Bootstrap и описывать свои стили. Такой подход позволит потом быстро обновить Bootstrap.

Затем нужно настроить компиляцию LESS файлов в CSS. Посмотрим, как это делается в WinLess. Сначала нажмите «Add folder» и укажите путь до папки с LESS файлами:
C:\whitesquare-bootstrap\src\less
Затем у вас появится список всех файлов этой папки. Можно убрать все галочки. Нас интересуют последние два файла styles.less и variables.less. Кликните на них правой кнопкой и выберите из контекстного меню «Select output file» и укажите путь, куда будут компилироваться CSS файлы:
..\..\www\css\styles.css
..\..\www\css\variables.css
После этого любое изменение этих LESS файлов с сохранением будет приводить к перекомпиляции CSS файлов.

Предварительный осмотр

После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:

  • Как будут нарезаться изображения?
  • Какие будут использоваться компоненты?
  • Какими будут основные стили?
  • Какой макет страницы у нас получится?

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

Общие изображения

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

Сохраняем изображение карты:

Сохраним логотипы следующим образом:

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

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

Компоненты

Основное отличие вёрстки с помощью Bootstrap от вёрстки нативными средствами заключается в том, что Bootstrap вводит такое понятие, как компоненты. Компоненты представляют из себя часто используемые готовые HTML блоки с предопределенными стилями. Иногда компоненты используют JavaScript. Верстальщик может использовать как готовый компонент, так и определить свой внешний вид для него. Для этого часто нужно лишь поменять значение переменных в Bootstrap. Если нужны более гибкие изменения, верстальщик всегда может изменить HTML и CSS по своему усмотрению.

Если окинуть взглядом наш шаблон, то можно увидеть, что нам понадобятся следующие компоненты:

  1. Для верстки колонками — сеточная система (row, col)
  2. Для поиска – инлайновая форма (form-inline), сгруппированные контролы (input-group), кнопка (btn)
  3. Для навигации — навигационная панель (navbar) и сама навигация (nav)
  4. Для отображения подменю – группированный список (list-group)
  5. Для блока карты – визуальная панель (panel)
  6. Для отображения большого центрального блока – jumbotron
  7. Для отображения рамок фотографий – миниатюры (thumbnail)

Более подробно на каждом компоненте мы остановимся, когда он нам встретится в вёрстке.

Основные стили

В Bootstrap все стили по умолчанию уже заданы, нам нужно только их перебить, если они отличаются от нашего дизайна. Сделаем это в файле src/less/variables.css.

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

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

А теперь заменим настройки Bootstrap на свои:

Все переменные, которые есть в Bootstrap можно посмотреть на странице http://getbootstrap.com/customize/

После того, как мы закончили с переменными, давайте начнем прописывать стили нашего дизайна в файле styles.less. Сначала подключим сам Bootstrap и наши переменные:

Не все стили, заданные Bootstrap по умолчанию можно изменить переменными, давайте сделаем это вручную:

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

Затем опишем фон страницы и верхнюю полоску:

Далее в тексте не будет указываться в какой файл пишутся стили. Просто запомните, что все переменные мы сохраняем в файл variables.less, а CSS стили будем хранить в styles.less.

Каркас HTML

Вёрстку сайта начинаем традиционно с каркаса HTML. Вставляем в файл index.html код простейшего шаблона со страницы Getting started, предварительно убрав всё лишнее:

В этом блоке создается HTML5 структура документа. В title указываем название нашей страницы – Whitesquare. Метатегом viewport указываем, что ширина страницы на мобильных устройствах будет равна ширине экрана и начальный масштаб будет 100%. Затем подключается файл стилей. И для версий Internet Explorer меньше девятой подключаем скрипты, позволяющие правильно отображать нашу верстку.

Макет

В данном случае, мы видим, что сайт состоит из двух частей: основного контейнера с содержимым, который центрируется на экране и тянущегося футера. Основной контейнер состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), навигация (nav) и название страницы (.heading).

Давайте добавим в body следующий код:

Здесь нам встречается первый компонент Bootstrap – колонки. Родительскому элементу колонок задается класс «row», а классы колонок начинаются с префикса «col-», затем идет размер экрана (xs, sm, md, lg), а заканчиваются относительной шириной колонки.

Колонке можно задавать одновременно различные классы со значениями для экранов, например >
У нас классы «col-md-7» и «col-md-17» указывают, что блоки представляют из себя колонки шириной 7 и 17 относительно родительского контейнера. По умолчанию сумма ширин колонок в Bootstrap равняется 12, однако мы увеличили это число вдвое для достижения нужной нам гибкости.

Далее опишем нужные нам отступы:

Данную конструкцию мы поместили внутрь body. Синтаксис LESS позволяет вкладывать правила друг в друга, которые потом скомпилируются в такие конструкции:

Такой подход позволяет видеть структуру HTML прямо внутри CSS и дает некую «область видимости» правилам.

Логотип

Вставляем логотип в тег header:

Дополнительных стилей не требуется.

Поиск

Для того чтобы создать поиск, нам понадобятся следующие компоненты Bootstrap: инлайновая форма, сгруппированные контролы и кнопка.
В теге header создаем инлайновую форму, выровненную по правому краю. Поля такой формы обязательно должны иметь класс «form-control» и label.

В форму мы помещаем компонент «сгруппированные контролы». Группировка контролов позволяет убрать отступ между вводом текста и кнопкой и как бы слить их в единый элемент.
Он представляет из себя div с классом «input-group» и полями, а кнопка такого компонента помещается в блок с классом «input-group-btn».

Поскольку нам не нужно показывать label для поля поиска — скроем его классом «sr-only». Это нужно для специальных устройств чтения с экрана.

Кнопке добавляется класс «btn-primary», означающий, что это первичная кнопка данной формы.

Всё, что нам осталось — это задать в стилях ширину форме поиска.

Для отображения меню возьмем компонент «навигационная панель» и поместим в него компонент «навигация», которая представляет из себя список со ссылками. Для навигации добавляется класс «navbar-nav», который применяет специальные стили навигации внутри навигационной панели.

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

Помимо настраиваемых параметров, опишем дополнительные в стилях – это текст в верхнем регистре и наш специфический шрифт:

Заголовок страницы

Заголовок страницы помещается в div с классом «heading».

И имеет следующие стили:

Здесь мы рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.

Подменю

При создании подменю, мы не будем использовать компонент «навигация», так как по стилям он нам не очень подходит, гораздо больше нам подойдет компонент «группированный список». Каждый элемент такого компонента имеет класс «list-group-item».

Подменю нужно разместить в теге aside. Список ссылок создаем аналогично главному меню.

В настройках компонента укажем, что все группированные списки нужно показывать с фоном и рамкой компонента «панель»:

И применяем к подменю следующие стили:

Сначала возвращаем элементам списка стандартные стили, так как Bootstrap их перебил на свои. Добавляем отступ снизу. Для подменю применяется более тонкий шрифт и квадратные маркеры. А для ссылок задаем цвета, верхний регистр и убираем подчеркивание. Амперсанд в коде «&.active» по синтаксису LESS во время компиляции заменится на родительский селектор: «.submenu li.active».

Контент сайдбара

В контенте сайдбара помимо подменю располагается также изображение с расположением офисов.

Для его отображения нам подойдет компонент «панель», а точнее его вариация «основная панель» (panel-primary) для раскраски заголовка. Этот компонент содержит блок заголовка (panel-heading) и блок содержания панели (panel-body). Изображению карты добавляем класс «img-responsive», который позволит картинке уменьшаться при маленькой ширине экрана.

В переменных Bootstrap мы уже задали цвет для фона панели (panel-bg), а теперь укажем, что «primary» панель будет иметь серую рамку дефолтной панели, а не голубую, как задано по умолчанию:

Теперь в стилях сайта нужно изменить стандартные настройки панелей, которые не изменяются через переменные:

Здесь мы убрали тень у панелей, поставили свои отступы и задали свой шрифт заголовка.

Цитата

Вёрстку контента начнём с добавления цитаты.

Этот элемент страницы больше всего похож на компонент Jumbotron. Добавим его в колонку контента:

Через переменные для компонента jumbotron зададим белый цвет текста и брэндовый голубой фон:

И опишем наши стили:

В них мы убираем скругление углов, отступы компонента и декорации цитаты, заданные Bootstrap по умолчанию. Также добавим стили наших шрифтов.

Контент

Все стили для текста контента мы уже добавили. Поэтому остается добавить только три параграфа с самим текстом.

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

Класс «thumbnail» превращает изображения в компонент «миниатюра». Он сделает за нас всю работу по стилизации изображений. Единственное, что нам осталось — это установить свой отступ и цвет рамки в переменных для этого компонента:

Блок «Our team»

При верстке этого блока добавим сначала заголовок:

А затем добавим блок с классом «team», который состоит из двух строк, содержащих карточки сотрудников. Каждая карточка – это колонка. Карточка имеет ширину равную четырем колонкам нашей сетки. Все карточки кроме первой в строке имеют отступ слева, который создается классом «col-md-offset-1». Содержимое карточки состоит из изображения и описания (.caption)

После создания разметки зададим этим элементам следующие стили:

Помимо отступов и стилей шрифтов, которые тут задаются, мы изменили класс «col-md-offset-1». Ему пришлось задать отступ 3.7%, т.к. стандартный отступ был слишком большой.

Футер

Футер состоит из четырёх больших блоков: ленты Твиттера, карты сайта, социальных ссылок и логотипа с копирайтом.

Для начала создадим контейнер футера с этим блоками:

И применим к нему оформление:

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

Лента Твиттера

Верстаем содержимое ленты Твиттера:

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

Карта сайта

Карта сайта представляет собой две равные колонки со ссылками:

Ссылкам задаем цвет, шрифт и отступ между ними.

Социальные ссылки

Вставляем набор ссылок в блок с классом «social».

Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классам отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью CSS сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.

Копирайт

Блок с копирайтом и логотипом – это картинка со ссылкой и параграф с текстом под ней.

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

На этом вёрстка закончена. Готовый проект можно скачать здесь.

Добавить комментарий