Bootstrap: Быстрое создание современных сайтов - Страница 7

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

Изменить фон Jumbotron, отцентрировать текст и добавить отступы можно с помощью CSS и класса. text-center.

Bootstrap Page Header

Класс. page-header добавляет горизонтальный разделитель после заголовка.

Page Header H1

This is some text. 

This is another text. 

Page Header H2

This is some text. 

This is another text. 

Bootstrap: Быстрое создание современных сайтов - image57_56d78536d03802eb7d7bc9f1_jpg.jpeg

Bootstrap Wells

С помощью класса. well можно добавить ощущение глубины элементу или контейнеру.

some data

some data

Bootstrap: Быстрое создание современных сайтов - image58_56d78535d03802eb7d7bc9ee_jpg.jpeg

Bootstrap: Быстрое создание современных сайтов - image59_56d78534d03802eb7d7bc9eb_jpg.jpeg

С помощью класса class=«well well-sm» или класса class=«well well-lg» можно уменьшить или увеличить высоту well-контейнера соответственно:

Small Well

Normal Well

Large Well

Bootstrap: Быстрое создание современных сайтов - image60_56d78533d03802eb7d7bc9e8_jpg.jpeg

Bootstrap Alerts

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

Для создания сообщения Bootstrap Alert используется класс. alert с одним из четырех классов. alert-success,.alert-info,.alert-warning или. alert-danger, которые обеспечивают соответствующий цвет фона и шрифта текста.

× 

Success! This alert box could indicate a successful or positive action.

× 

Info! This alert box could indicate a neutral informative change or action.

× 

Warning! This alert box could indicate a warning that might need attention.

× 

Danger! This alert box could indicate a dangerous or potentially negative action.

Bootstrap: Быстрое создание современных сайтов - image61_56d78532d03802eb7d7bc9e5_jpg.jpeg

Кнопку закрытия при этом обеспечивает элемент × .

Дополнительно класс class=«alert alert-success fade in» добавляет анимацию при закрытии сообщения.

Нажатие кнопки закрытия можно обрабатывать с помощью Javascript.

× 

Success! This alert box could indicate a successful or positive action.

С помощью класса. alert-link вместо текста сообщения можно вставлять ссылку.

× 

Info!

This alert box could indicate a neutral informative change or action.

Кнопки и группы кнопок

Для создания стилизованной цветом кнопки используется класс. btn совместно с одним из классов. btn-default,.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-danger,.btn-link.

Bootstrap: Быстрое создание современных сайтов - image62_56d78531d03802eb7d7bc9e2_jpg.jpeg

Вышеуказанные классы могут применяться для элементов ,

Success 

Bootstrap: Быстрое создание современных сайтов - image63_56d7852fd03802eb7d7bc9df_jpg.jpeg

Дополнительно классы. btn-lg,.btn-md,.btn-sm,.btn-xs регулируют размер кнопки.

Оригинальный текст книги читать онлайн бесплатно в онлайн-библиотеке Knigger.com