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

Шрифт
Интервал

стр.



Контейнер для таблицы

добавляет горизонтальную прокрутку для экранов менее 768px.



Вопросы:


Как стилизовать таблицу горизонтальными разделителями?

Ответ: добавить класс. table.


Как стилизовать таблицу повторяющимся разным фоном строк?

Ответ: добавить класс. table-striped.


Как добавить границы к ячейкам таблицы?

Ответ: добавить класс. table-bordered.


Как добавить изменение фона строки при наведении курсора?

Ответ: добавить класс. table-hover.


Как уменьшить отступ ячеек наполовину?

Ответ: добавить класс. table-condensed.


Как сделать разноцветным фон строк таблицы?

Ответ: применить классы. success,.danger,.warning

Изображения

Bootstrap предлагает три вида формы изображений:

Класс. img-rounded – прямоугольник с закругленными углами.

«»

Класс. img-thumbnail – изображение в прямоугольнике с отступом и серой рамкой.

«»

Bootstrap Jumbotron

Jumbotron представляет собой контейнер с серым фоном и закругленными углами для размещения в нем объявления со ссылкой типа «Посмотреть подробнее».



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

Обертка

для Jumbotron обеспечивает отступ от краев экрана.

Bootstrap Tutorial

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. 



Без контейнера

углов у Jumbotron видно не будет, так как он будет распространяться на всю ширину экрана.

Изменить фон 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 Wells

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

some data

some data





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

Small Well

Normal Well

Large Well


Bootstrap Alerts

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

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


стр.

Похожие книги