Css

Преимущества и недостатки фреймворка Bootstrap

Преимущества, которые даёт фреймворк Bootstrap при разработке на его основе frontend части сайтов и интерфейсов админок:

  • высокая скорость создания качественной адаптивной вёрстки даже начинающими веб-разработчиками (достигается это благодаря использованию готовых компонентов, созданных профессионалами);
  • кроссбраузерность и кроссплатформеннось (корректное отображение и работа сайта во всех поддерживаемых этим фреймворком браузерах и операционных системах);
  • наличие большого количество готовых хорошо продуманных компонентов, протестированных огромным сообществом веб-разработчиков на различных устройствах;
  • возможность настройки под свой проект, достигается это посредством изменения SCSS переменных и использования Bootstrap миксинов (можно изменить количество колонок, цвета, радиуса скруглений углов элементов, отступы между колонками и многое другое);
  • низкий порог вхождения; для работы с фреймворком не обязательно иметь глубокие знания по HTML, CSS, JavaScript и jQuery (достаточно знать только основы вышеперечисленных технологий);
  • наличие хорошо продуманного дизайна компонентов и согласованности (в Bootstrap все компоненты выполнены в едином стиле);
  • наличие огромного сообщества, большого количества статей, рецептов и видеоматериалов; всё это при желании поможет не только хорошо разобраться в фреймворке, но и найти ответы практически на любые вопросы.

Фреймворк Bootstrap – это проект с открытым исходным кодом, доступным на Github. Он имеет лицензию MIT. Это означает, что его можно использовать бесплатно как в личных, так и в коммерческих проектах.

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

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

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

Оформление строчных (inline) текстовых элементов HTML5

Bootstrap содержит стили для основных HTML5 inline элементов: , , , , , , , , и .

…для выделения текста, имеющего актуальность в другом контексте…

для выделения текста, который был удалён из документа

для выделения текста, который потерял уже свою актуальность

……

…для разметки текста, который стилистически отличается от обычного текста (например, является невнятным или содержит ошибки в написании слов) …

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

…для разметки важного текста… …для разметки текста, который имеет эмоциональную окраску..

…для разметки текста, который имеет эмоциональную окраску…

для разметки текста, стилистически отличающегося от обычного текста, без передачи ему какого-либо особого значения или значимости (например, для выделения ключевых слов, названий продуктов в обзоре)

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

Как сделать текст жирным, наклонным или подчёркнутым

В Bootstrap 4 для этих целей уже есть подготовленные классы , , и .

Жирный текст…

Нормальный (не жирный текст)…

Текст, имеющий тонкое начертание…

Курсивный текст…

Если используете Bootstrap 3, то вы их можете добавить следующие стили в свой файл CSS, а затем использовать их в HTML (посредством добавления к элементам необходимых классов):

.font-weight-bold {
  font-weight: 700;
}
.font-weight-normal {
  font-weight: 400;
}
.font-weight-light {
  font-weight: 300;
}
.font-italic {
  font-style: italic;
}
.text-underline {
  text-decoration: underline;
}

Размер шрифта и высота строки

В Bootstrap 3 в качестве размера шрифта () по умолчанию используется фиксированная величина, равная 14px. Высота строки () имеет значение 1.428. Эти CSS-свойства применяются к элементу страницы .

body {
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
}

В Bootstrap 4 изменился подход к заданию размера шрифта. Она перестала быть фиксированной, теперь она задаётся с помощью единицы измерения .

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  /* размер шрифта */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
}

1rem равен размеру шрифта, который установлен для элемента . Данная единица измерения является относительной, т.к. она зависит от размера шрифта, который установлен для всего документа.

html {
  font-size: 16px;
}

В данном случае будет равен .

Но так как в стилях Bootstrap 4 элементу html явно не устанавливается размер шрифта, то данное значение будет браться из браузера.

Например, в десктопной версии браузера Chrome настройка размера шрифтов осуществляется на странице «Настройки» в разделе «Вид страниц». По умолчанию данное значение равно 16px. Если данное значение, например, увеличить до 18px, то 1rem в Bootstrap 4 будет уже равен 18px.

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

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

/* в Bootstrap 3: */
/* установить для всей страницы */
body {
  font-size: 16px;
}
/* для установить для элементов с классом main */
.main {
  font-size: 14px;
}
/* в Bootstrap 4: */
body {
  font-size: 1rem;
}
.main {
  font-size: 1.1rem;
}

Если же вы хотите сделать размер шрифта на разных устройствах разным, то можно воспользоваться медиа запросами:

/* текст на мобильной версии меньше, чем на других устройствах */
/* на xs */
body {
  font-size: 14px;
}
/* на sm */
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
/* на md */
@media (min-width: 992px) {
  html {
    font-size: 18px;
  }
}
/* на lg */
@media (min-width: 1200px) {
  html {
    font-size: 20px;
  }
}

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

Данные единицы зависят от ширины или высоты viewport. = 1% от ширины viewport, — 1% от высоты viewport, — 1% от ширины или высоты, а именно от того значения, которое меньше, — 1% от ширины или высоты, а именно от того значения, которое больше.

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vw;
}
.main {
  font-size: 2vwin;
}

Если какое-то CSS свойство не работает, то вы можете усилить его, добавив к нему :

h1 {
  font-size: 5.9vw !important;
}

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

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

Например:

II. Классы и компоненты

глава третья

Оформление контента

  • Оформление и работа с текстом
  • Стилизация HTML списков
  • Средства Bootstrap для оформления изображений
  • Оформление HTML таблиц

  • CSS для HTML элемента figure
  • Классы платформы для HTML форм

  • Примеры оформления форм

  • Вспомогательные классы

  • Оформление заголовков

глава четвёртая

Компоненты

  • Breadcrumb (навигационные
    цепочки, хлебные крошки)
  • Collapse и создание на базе него
    аккордеона
  • Dropdowns (выпадающие
    списки)
  • Jumbotron
    (оформление ключевой информации)
  • Modal (модальные окна для
    веб-страницы)
  • Navs (навигационные
    блоки)
  • Navbar (основное меню
    сайта)
  • Panels (Bootstrap 3
    панели)
  • Popovers (всплывающие панели)
  • Scrollspy (выделение ссылок на
    основании положения прокрутки)
  • Tabs (Bootstrap 3 вкладки)
  • Thumbnails (Bootstrap 3
    галерея)
  • Alerts (сообщения)
  • Badges (бейджи)
  • Buttons (кнопки)
  • Carousel (карусель)
  • Pagination (навигационный блок для пагинации)
  • Progress (индикаторы выполнения)
  • Tooltips (всплывающие подсказки)

только для Bootstrap 3

  • Иконки Glyphicons
  • Affix (sticky-позиционирование
    элементов)

только для Bootstrap 4

  • Card (карточка)
  • Spinners (Спиннеры)
  • Navbar (основное меню)

глава пятая

Классы помощники

  • Управление отображением элементов (Bootstrap 4)

  • Классы для работы с flexbox (Bootstrap 4)

  • Управление margin и padding отступами (Bootstrap 4)

  • Управление границами и скруглениями углов элементов (Bootstrap 4)

Примеры

Уведомления доступны для любой длины как текста, так и опциональной кнопки отмены. Для правильной стилизации используйте один из 8 требуемых контекстуальных классов (например, ). Для строчного отклонения используйте .

Это основное уведомление — check it out!

Это дополнительное уведомление — check it out!

Это уведомление об успехе — check it out!

Это уведомление об опасности — check it out!

Это уведомление-предупреждение — check it out!

Это инфо-уведомление — check it out!

Это светлое уведомление — check it out!

Это темное уведомление — check it out!

Использование вспомогательных технологий

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

Цвет ссылки

Используйте класс для соответствия цвета ссылок цветам уведомлений.

Это основное уведомление с .

Это дополнительное уведомление с .

Это уведомление об успехе с .

Это уведомление об опасности с .

Это уведомление-предупреждение с .

Это инфо-уведомление с .

Это светлое уведомление с .

Это темное уведомление с .

Дополнительное содержимое

Уведомления также могут содержать элементы HTML – заголовки, параграфы и т.п.

Отличная работа!

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

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

Отмена («крестик»)

Использование JS-плагина уведомлений дает возможность закрыть «крестиком» любое строчное уведомление.

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

Вот демо:

Holy guacamole! You should check in on some of those fields below.

×

Цвет

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

Все цвета

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

Blue (Голубой)

Indigo (Индиго)

Purple (Пурпурный)

Pink (Розовый)

Red (Красный)

Orange (Оранжевый)

Yellow (Желтый)

Green (Зеленый)

Teal (Морской волны)

Cyan (Небесный)

Вот как использовать это в Sass:

Цветовые классы также доступны для настройки параметров and .

Цветовые классы (Color utility classes) в BS4 – класс с единственной целью и функцией, который всегда и везде делает одно и то же.

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

Цвета тем

Мы используем «субсеты» (т.е. буквально «поднабор», где X — часть набора, входящая в набор Z) цветов, чтобы создать уменьшенную цветовую палитру для генерации цветовых схем, которые доступны как переменные и карта Sass в файле .

Primary (Главный)

Secondary (Второстепенный)

Success (Успех)

Danger (Опасность)

Warning (Предупреждение)

Info (Инфо)

Light (Светлый)

Dark (Темный)

Оттенки серого

Большой набор переменных серого и карта Sass в файле для последовательно идущих оттенков в вашем проекте.

100

200

300

400

500

600

700

800

900

В файле вы найдете наши переменные цветов и карту Sass. Вот пример карты Sass для .

Добавляйте, удаляйте или изменяйте значения цветов в карте, чтобы обновить их в прочих местах BS4. К сожалению, сегодня не каждый компонент BS4 использует (или поддерживает) эту цветовую карту Sass. Мы постараемся исправить это. А пока планируйте заранее использование переменных и цветовой карты Sass.

Android stock browser

Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.

Select menus

On elements, the Android stock browser will not display the side controls if there is a and/or applied. (See this StackOverflow question for details.) Use the snippet of code below to remove the offending CSS and render the as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.

Want to see an example? Check out this JS Bin demo.

Как это работает

На высоком уровне, блочная система работает так:

  • Существует три основных компонента—контейнера, строки и столбцы.
  • Контейнеры— для фиксированной ширины или на полную ширину—центрирует содержание вашего сайта и помогает выровнять содержание блока.
  • «Rows» — горизонтальные группы столбцов, которые обеспечивают чтобы столбцы выстроились правильно.
  • Контент должен быть помещен в столбцах, и только колонки могут быть непосредственными потомками строк.
  • Классы столбце указано количество столбцов, которые вы хотите использовать из 12 возможных в ряду. Так что если вы хотите три равные ширины столбцов, нужно использовать .
  • Столбец устанавливаются в процентах, так они всегда изменчивый и размерами по отношению к родительскому элементу.
  • Столбцы имеют горизонтальную для создания промежутка между отдельными столбцами.
  • Есть пять грид уровней, по одному для каждой : сверхмалые, малые, средние, большие, и очень большие.
  • Грид уровни основываются на минимальной ширине, то есть они применяются к ярусу и всем, кто выше его (например, применим для малых, средних, больших, и очень больших устройств).
  • Вы можете использовать предопределенные грид классов или Sass примеси для более семантической разметки.

Звучит хорошо? Отлично, давайте перейдем посмотрев все это на примерах.

Список группы

@list-group-bg

Цвет фона в

@list-group-border

Цвет рамок

@list-group-border-radius

Радиус рамки список группы

@list-group-hover-bg

Цвет фона одиночного элемента списка при наведении

@list-group-active-color

Цвет текста активного элемента списка

@list-group-active-bg

Цвет фона активного элемента списка

@list-group-active-border

Цвет рамки активных элементов списка

@list-group-active-text-color

Цвет текста для содержимого внутри активных элементов списка

@list-group-disabled-color

Цвет текста пришедших в негодность элементов списка

@list-group-disabled-bg

Цвет фона инвалидов список itemsText цвет инвалидов элементов списка

@list-group-disabled-text-color

Цвет текста для содержимого внутри пришедших в негодность элементов списка

@list-group-link-color

@list-group-link-hover-color

@list-group-link-heading-color

Выравнивание

Используйте утилиты выравнивания flexbox для выравнивания столбцов по вертикали и горизонтали. Internet Explorer 10-11 не поддерживает вертикальное выравнивание элементов Flex, когда контейнер Flex имеет , как показано ниже.

Вертикальное выравнивание

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Горизонтальное выравнивание

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Без пробелов между колонками

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

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

Нужно создать дизайн «edge-to-edge» (контент плотно прилегает к краям девайса)? Уберите родительский класс или .

Вот как это работает на практике. Заметьте, что вы можете продолжить использовать это со всеми остальными предустановленными классами сеток (включая ширину колонок, «отзывчивые» ярусы, переопределения и прочее).

.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4

Обертка колонки

Если больше 12-ти колонок разместить в одном ряду, каждая дополнительная колонка обернется в новую строку.

.col-9
.col-4Поскольку 9 + 4 = 13 > 12, этот div шириной 4 колонки «обернется» в новую строку как смежный юнит.
.col-6Последующие столбцы продолжаются вдоль новой строки.

Разрывы колонок

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

.col-6 .col-sm-3
.col-6 .col-sm-3

.col-6 .col-sm-3
.col-6 .col-sm-3

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

.col-6 .col-sm-4
.col-6 .col-sm-4

.col-6 .col-sm-4
.col-6 .col-sm-4

Важные глобальные атрибуты

БÃÂÃÂÃÂÃÂðÿ òúûÃÂÃÂðõàýõúþÃÂþÃÂÃÂõ óûþñðûÃÂýÃÂõ ÃÂÃÂøûø ø ýðÃÂÃÂÃÂþùúø, þ úþÃÂþÃÂÃÂàòðü ýõþñÃÂþôøüþ ÷ýðÃÂàÿÃÂø ÃÂðñþÃÂõ àýøü; òÃÂõ ÃÂÃÂø ÃÂÃÂøûø ø ýðÃÂÃÂÃÂþùúø ÿþÃÂÃÂø ÿþûýþÃÂÃÂÃÂàøüõÃÂàôõûþ àø ë÷ðÃÂþÃÂõýÃÂû ÿþô ýþÃÂüðûø÷ðÃÂøàúÃÂþÃÂÃÂñÃÂðÃÂ÷õÃÂýÃÂàÃÂÃÂøûõù.

HTML5 doctype

Bootstrap ÃÂÃÂõñÃÂõàøÃÂÿþûÃÂ÷þòðýøàdoctype ëHTML5û. ÃÂõ÷ ýõóþ àòðàòþ÷ýøúýÃÂàýõúþÃÂþÃÂÃÂõ ÿÃÂþñûõüàÃÂþ ÃÂÃÂøûÃÂüø.

ëÃÂÃÂ÷ÃÂòÃÂøòÃÂùû üõÃÂð-ÃÂÃÂó

Bootstrap ÃÂð÷ÃÂðñðÃÂÃÂòðûÃÂàúðú mobile first, ÃÂ.õ. õóþ ýðÃÂÃÂÃÂþùúø ÿÃÂõöôõ òÃÂõóþ þÿÃÂøüø÷øÃÂþòðýàÿþô üþñøûÃÂýÃÂõ ÃÂÃÂÃÂÃÂþùÃÂÃÂòð, ð ÃÂö ÿþÃÂþü àÿþüþÃÂÃÂàüõôøð-÷ðÿÃÂþÃÂþò üàÿþôóþýÃÂõü üðÃÂÃÂÃÂðñ úþüÿþýõýÃÂþò úðú ýðü ýõþñÃÂþôøüþ ýð ÿÃÂþÃÂøàÃÂÃÂÃÂÃÂþùÃÂÃÂòðÃÂ. ÃÂÃÂÃÂðòÃÂÃÂõ ÃÂÃÂþàúÃÂÃÂþú úþôð ò :

ÃÂàüþöõÃÂõ ÿþÃÂüþÃÂÃÂõÃÂàÿÃÂøüõàÃÂÃÂþóþ ò ôõùÃÂÃÂòøø ýð ÃÂÃÂÃÂðýøÃÂõ .

àð÷üõàÃÂøÃÂøýàø òÃÂÃÂþÃÂàÃÂûõüõýÃÂð

ÃÂûàñþûÃÂÃÂõù ÿÃÂþÃÂÃÂþÃÂàüðÃÂÃÂÃÂðñøÃÂþòðýøàò CSS üàø÷üõýÃÂõü óûþñðûÃÂýþõ ÷ýðÃÂõýøõ àýð . íÃÂþ óðÃÂðýÃÂøÃÂÃÂõÃÂ, ÃÂÃÂþ ýõ ñÃÂôõàòûøÃÂÃÂàýð úþýõÃÂýÃÂàòÃÂÃÂøÃÂûõýýÃÂàÃÂøÃÂøýàÃÂûõüõýÃÂð; þôýðúþ üþöõàÃÂþ÷ôðÃÂàÿÃÂþñûõüàôûàÃÂÃÂþÃÂþýýøàÿÃÂøûþöõýøù, ÃÂðúøàúðú Google Maps øûø ÿþøÃÂúþòþù ôòøöþú Google.

àÃÂþü ÃÂõôúþü ÃÂûÃÂÃÂðõ, úþóôð òðü ýðôþ ÿÃÂõþôþûõÃÂàÃÂÃÂø òþ÷üþöýÃÂõ ñðóø, ôõûðùÃÂõ ÃÂðú:

á øÃÂÿþûÃÂ÷þòðýøõü ÃÂÃÂðóüõýÃÂð úþôð, ÿÃÂøòõôõýýþóþ òÃÂÃÂõ, òûþöõýýÃÂõ ÃÂûõüõýÃÂàâ òúûÃÂÃÂðàÃÂóõýõÃÂøÃÂþòðýýÃÂù ÃÂõÃÂõ÷ ø úþýÃÂõýàâ ñÃÂôÃÂàòÃÂõ ýðÃÂûõôþòðÃÂà÷ðôðýýÃÂù ôûàúûðÃÂÃÂð .

ã÷ýðùÃÂõ ñþûÃÂÃÂõ þ ñûþúþòþù üþôõûø ø ÿðÃÂðüõÃÂÃÂø÷ðÃÂøø ÃÂð÷üõÃÂþò ýð CSS Tricks.

Заводские Android браузеры

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

Меню выбора

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

Хотите увидеть пример? Проверьте это JS Bin demo.

Что такое bootstrap

Это фреймворк из трёх языков HTML/CSS/JS. Благодаря большому функционалу верстать сайты становится легко и быстро, ну конечно если во всем разобраться.

Появился в стенах компании Twitter и назывался «Twitter Bootstrap». Но из-за того что его захотели сделать всемирным пришлось отказаться от слова Twitter в названии. По моему личному опыту в bootstrap есть ряд плюсов:

  1. Быстрость верстки — большое количество готовых компонентов даёт возможность не останавливаться на обыденностях.
  2. Адаптивность — возможность настраивать размеры блоков сайта в зависимости от ширины устройства, как для компьютера так и для телефона.
  3. Популярность — из-за которой существует большое количество статей и уроков, а также форумов. Поэтому по любому пустяку, в котором вы сомневаетесь можете найти ответ на просторах интернета или задать вопрос на форуме.
  4. Bootstrap можно использовать для создания сайтов с различными CMS — WordPress, Joomla, Opencart.

Заголовки и параграфы

Из всех элементов заголовков: и — удалены . Для удобных «отступов» заголовкам добавлен margin-bottom: , а параграфам — margin-bottom: .

Заголовок Пример
h1. Заголовок Bootstrap
h2. Заголовок Bootstrap
h3. Заголовок Bootstrap
h4. Заголовок Bootstrap
h5. Заголовок Bootstrap
h6. Заголовок Bootstrap

Списки

Из всех списков , и — удален , а установлен в . Вложенные списки без .

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Для более легкой стилизации, удобной иерархии и красивых отступов, у списков описания () обновлены марджины . У значение стало , а . стали жирными.

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

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

У элемента удален , а единицами измерения его стали .

.example-element {
  margin-bottom: 1rem;
}

Таблицы

Таблицы слегка адаптированы — изменен , сдвинуты границы, и теперь таблицы имеют последовательное выравнивание . Дополнительные изменения для границ, паддинга и еще кое-чего – в классе .

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

Формы

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

  • У убраны границы, паддинги и марджины; так что теперь они могут быть легко использованы как «обертки» для отдельных форм ввода или групп форм ввода.
  • Элементы , как и , тоже изменены, и теперь отображаются как сортируемый заголовок.
  • Элементы получили значение для возможности применения марджина .
  • К элементам , , и по большому счету, адресуется лишь normalize.css, но Reboot также удаляет их марджин и устанавливает .
  • Элементы изменены – теперь их можно изменять в размере лишь вертикально, потому что горизонтальное изменение часто «ломает» разметку страницы.

Эти изменения (и еще) показаны внизу.

Элементы misc

Адрес

Элемент обновлен – теперь вместо дефолтного браузерного : стоит . теперь наследуется и добавлен . Элемент добавлены для контактной информации ближайшего «наследника» (или описания работы в целом). Сохраняйте форматирование добавлением в конец строк.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103P: (123) 456-7890
Full Name

Цитата

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

Строчные элементы

Базовые стили элемента созданы так, что они «заставляют» его выделяться среди параграфа текста.

Nulla attr vitae elit libero, a pharetra augue.

Резюме

Курсор по умолчанию всегда стремится к курсору текста , так что мы переназначили его на «указатель» для обозначения возможности взаимодействия с объектом по клику.

Некоторые детали

Подробнее о деталях.

Еще подробности

Вот еще подробности о деталях.

Атрибут HTML5

HTML5 добавляет новый глобальный атрибут — , который не отображается по умолчанию имеет значение . Позаимствовав эту идею из PureCSS, мы добавили в нее !important (), чтобы избежать случайного «перекрытия» этого свойства и показа скрытого . Хотя не имеет встроенной поддержки в IE10, явное объявление его в вашем CSS решает эту проблему для данного браузера.

Частичная несовместимость с jQuery

несовместим с методами и jQuery. Поэтому мы пока не особенно одобряем использование с другими методами управления свойством элементов .

Чтобы лишь скрыть видимость элемента без его «исчезания» из разметки, т.е. без изменения свойства , используйте вместо класс .

Ссылка на основную публикацию