Заголовок
    
Колонка 1
    
Колонка 2
   
  
  
  
 

 

  
Заголовок
  
Колонка 1
  
Колонка 2
  
Заголовок
 

Серый цвет
Основной текст
Цвет для сообщения об успехе
Цвет для информации
Цвет для предупреждений
Цвет для сообщений об ошибках

Основной текст
Цвет для сообщения об успехе
Цвет для информации
Цвет для предупреждений
Цвет для сообщений об ошибках

Борщ

  
Хозяйке на заметку
  
Борщ получится вкуснее, если добавить в него немного соли.

Мясо отварить до готовности. Промыть свеклу, очистить, 
  нарезать соломкой и тушить с помидорами до полуготовности.
  
Бульон процедить, мясо нарезать кусочками. В бульон добавить 
  нарезанный дольками картофель, довести до кипения, опустить нарезанную 
  соломкой свежую капусту и варить 10-15 минут, добавить пассерованные 
  овощи, болгарский перец, нашинкованный тонкой соломкой, 
  специи и довести до готовности.
Готовому борщу дать настояться в течение 20-25 минут. 
  При подаче к столу добавить сметану, мясо, зелень.

 добавлен класс bg-info, а также ограничена его ширина. Само обтекание в стилях делается с помощью свойства float, которое продолжает воздействовать и на нижние элементы. Об этом говорит сайт https://intellect.icu . Для отмены действия float применяется класс clearfix, он добавляется к любому нижележащему элементу.

Вау!! 😲 Ты еще не читал? Это зря!

Документация по использованию классов в Bootstrap

http://getbootstrap.com/css/

 

 

Текст в Bootstrap  

По умолчанию размер шрифта основного текста установлен как 14px, а межстрочное расстояние (значение свойства line-height) — 1.428. Между абзацами текста (элемент 

) введено дополнительное расстояние в 10 пикселей.

Заголовки 

Для заголовков применяются знакомые из HTML элементы с 

 по 

. Их стиль немного отличается от исходного (рис. 1).

Рис. 1. Вид заголовков текста

Заголовки допустимо немного уменьшить самостоятельно, если внутрь вставить элемент , получится такая комбинация.

Заголовок первого уровня

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

Рис. 2. Уменьшенные заголовки

Лид

Лидом в журналистике называют первый абзац статьи привлекающий внимание и дающий краткое представление о содержании статьи. Обычно он по своему виду немного отличается от основного текста. Чтобы указать лид достаточно к абзацу или колонке добавить класс lead, как показано в примере 1.

Пример 1. Создание лида

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

Результат данного примера показан на рис. 3.

Рис. 3. Вид лида в браузере

Аббревиатура

Аббревиатура это сложносокращенное слово (колхоз) или слово, полученное из первых букв слов предложения (КГБ). Для обозначения аббревиатур в тексте применяется элемент , а для расшифровки внутрь него добавляется атрибут title (пример 2).

Пример 2. Аббревиатура

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

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

При добавлении класса initialism к элементу  для него устанавливается свойство font-size со значением 90%, тем самым аббревиатура выводится уменьшенного размера.

CSS

Цитаты

Для оформления больших цитат в HTML применяется элемент 

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

Рис. 4. Вид цитаты в браузере

Если сама цитата делается весьма традиционно, то подпись к ней добавляется с помощью элемента  или 

Пример 3. Добавление цитаты

 
Нельзя сказать человеку: «Ты можешь творить. 
  Так давай, твори». Гораздо вернее подождать, пока он 
  сам не скажет: «Я могу творить, и я буду творить, хотите 
  вы этого или нет».
 
Айзек Азимов

Цитату можно инвертировать, тогда линия будет справа, а текст выравниваться также по правому краю (рис. 5).

Рис. 5. Цитата, выравненная по правому краю

Просто добавьте класс pull-right к 

.

...

Листинг

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

 используется для многострочного кода (пример 4).

Пример 4. Вывод программы

Функция checkParent() вызывается 
  с параметрами src и dest.
function checkParent (src, dest) {
  while (src != null) {
    if (src.tagName == dest) 
      src = src.parentElement
    }
  return null
}

Результат данного примера показан на рис. 6.

Рис. 6. Вид кода программы в браузере

Элемент 

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

 

Изображения в  Bootstrap  

Для оформления изображений есть несколько классов — img-rounded, img-circle и img-thumbnail. Чтобы изменить стиль отображения картинок просто добавьте один из этих классов к элементу . На рис. 1 показаны результаты применения каждого класса.



а. Оригинальное изображение

б. img-rounded	в. img-circle	г. img-thumbnail

Рис. 1. Изменение стиля изображения

Класс img-rounded скругляет уголки у картинки, img-circle делает ее круглой, а img-thumbnail добавляет рамку вокруг изображения.

В примере 1 показано, как вывести фотографию и задать ее стиль.

Пример 1. Круглая картинка

 
  
  
  
 
 
  

   

    

    
Настоящий боевой котик. Почему боевой, спросите вы? 
     Так ведь только опасных животных держат на привязи, 
     чтобы они никому случаем не навредили.
   
  
  
  
 

Любые выводимые изображения имеют исходные размеры, но для адаптивного дизайна лучше, когда ширина картинки подстраивается под ширину колонки. Для этого к элементу  достаточно добавить класс img-responsive, как показано в примере выше. Заметьте, что классы для адаптивного размера и стиля изображения вполне сочетаются между собой. В результате при уменьшении размера окна мы увидим и уменьшение самой картинки (рис. 2).

Рис. 2. Вид фотографии при уменьшении размеров окна

 Списки в Bootstrap  

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

Горизонтальный список

Такой список обычно используется для создания меню, к элементу 

 для этого нужно только добавить класс list-inline (пример 1).

Пример 1. Горизонтальное меню

• Сепульки
• Сепулькарии
• Сепуление

Вот как выглядит подобное меню (рис. 1). Стиль средней ссылки меняется при наведении на нее курсора.

Рис. 1. Горизонтальный список

Список определений

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

, термин — элементом 

, а его определение — с помощью 

 (пример 2).

Пример 2. Список определений

Сепульки

Важный элемент цивилизации ардритов с планеты Энтеропия.

Сепулькарии

Устройства для сепуления.

Сепуление

Занятие ардритов с планеты Энтеропия.

Bootstrap предлагает сделать такой список нагляднее за счет горизонтального расположения термина и определения. К элементу 

 достаточно добавить класс dl-horizontal (пример 3).

Пример 3. Горизонтальный список определений

Сепульки

Важный элемент цивилизации ардритов с планеты Энтеропия.

Сепулькарии

Устройства для сепуления.

Сепуление

Занятие ардритов с планеты Энтеропия.

Результат данного примера показан на рис. 2.

Рис. 2. Горизонтальный список определений

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

Рис. 3. Список определений

 

Таблицы в Bootstrap  

Для базового оформления таблиц в элемент 

 достаточно включить класс table. Вид оформленной через стили таблицы показан на рис. 1.

Рис. 1. Таблица

Рамки вокруг таблицы нет, строки таблицы отделяются друг от друга линиями. Чтобы таблица представляла собой сетку добавьте класс table-bordered (пример 1).

Пример 1. Сетка

	2021	2022	2023
Рубины	43	51	79
Изумруды	28	34	48
Сапфиры	29	57	36

Заметьте, что класс table мы сохраняем и добавляем к нему новые классы. Результат данного примера показан на рис. 2.

Рис. 2. Сетка

Можно добавить к нашему набору еще один класс table-hover и тогда при наведении на строку таблицы она будет подсвечиваться серым цветом (рис. 3). Строки внутри  не выделяются таким образом.

Рис. 3. Выделение строки таблицы

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

Рис. 4. Чередующиеся строки

Такой формат опять же