Текст книги "Bootstrap: Быстрое создание современных сайтов"

Текст добавлен: 16 октября 2020, 09:00

Автор книги: Тимур Машнин

Жанр: Компьютеры: прочее, Компьютеры

Возрастные ограничения: +12

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

Авторские права соблюдены

Текущая страница: 2 (всего у книги 7 страниц) [доступный отрывок для чтения: 2 страниц]

Скачать книгу

Шрифт:

- 100% +

Таблицы

Bootstrap класс. table стилизует HTML таблицу небольшим padding отступом и горизонтальными разделителями:

<thead>

<tr>

<th> Firstname </th>

<th> Lastname </th>

<th> Email </th>

</tr>

</thead>

<tbody>

<tr>

<td>[email protected] </td>

</tr>

<tr>

<td>[email protected] </td>

</tr>

<tr>

<td> Dooley </td>

<td>[email protected] </td>

</tr>

</tbody>

</table>

Дополнительно класс class=«table table-striped» добавляет чередующуюся смену фона строк таблицы.

Класс class=«table table-bordered» добавляет разделители к ячейкам таблицы.

Класс class=«table table-hover» добавляет изменение фона при наведении курсора на строку таблицы.

Класс class=«table table-condensed» уменьшает высоту строки.

С помощью классов success, danger, info, active, warning можно выделять цветом строки таблицы.

Контейнер для таблицы <div class=«table-responsive»> добавляет горизонтальную прокрутку для экранов менее 768px.

Вопросы:

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

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

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

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

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

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

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

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

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

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

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

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

Изображения

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

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

Класс. img-circle – изображение в круге с радиусом 500px.

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

Для того чтобы изображение автоматически подгонялось под размер экрана, используется класс. img-responsive, который применяет к изображению CSS стиль display: block; max-width: 100%; height: auto;.

Bootstrap Jumbotron

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

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

Обертка <div class=«container»> для Jumbotron обеспечивает отступ от краев экрана.

<h1> Bootstrap Tutorial </h1>

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

</div>

Без контейнера <div class=«container»> углов у Jumbotron видно не будет, так как он будет распространяться на всю ширину экрана.

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

<style>

.jumbotron {

background-color: #f4511e; /* Orange */

color: #ffffff;

padding: 100px 25px;

}

</style>

</div>

Bootstrap Page Header

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

<h1> Page Header H1 </h1>

</div>

<p> This is another text. </p>

<h2> Page Header H2 </h2>

</div>

<p> This is another text. </p>

</div>

Bootstrap Wells

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

some data

</div>

some data

</div>

<label for=«email»> Email address: </label>

</div>

<label for=«pwd»> Password: </label>

</div>

<label> <input type=«checkbox»> Remember me </label>

</div>

<button type=«submit» class=«btn btn-primary»> Submit </button>

</form>

</div>

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

<div class=«well well-sm»> Small Well </div>

<div class=«well»> Normal Well </div>

<div class=«well well-lg»> Large Well </div>

Bootstrap Alerts

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

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

<strong> Success! </strong> This alert box could indicate a successful or positive action.

</div>

<strong> Info! </strong> This alert box could indicate a neutral informative change or action.

</div>

<strong> Warning! </strong> This alert box could indicate a warning that might need attention.

</div>

<strong> Danger! </strong> This alert box could indicate a dangerous or potentially negative action.

</div>

Кнопку закрытия при этом обеспечивает элемент <a href=«#» class=«close» data-dismiss=«alert» aria-label=«close»> × </a>.

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

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

<strong> Success! </strong> This alert box could indicate a successful or positive action.

</div>

$(document).ready (function () {

$(".close").click (function () {

$("#myAlert").alert («close»);

});

</script>

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

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

</a>

</div>

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

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

<button type=«button» class=«btn btn-default»> Default </button>

<button type=«button» class=«btn btn-primary»> Primary </button>

<button type=«button» class=«btn btn-success»> Success </button>

<button type=«button» class=«btn btn-warning»> Warning </button>

<button type=«button» class=«btn btn-danger»> Danger </button>

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

<button type=«button» class=«btn btn-default»> Default </button>

<a type=«button» class=«btn btn-success»> Success </a>

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

<button type=«button» class=«btn btn-primary btn-lg»> Large </button>

<button type=«button» class=«btn btn-primary btn-md»> Medium </button>

<button type=«button» class=«btn btn-primary btn-sm»> Small </button>

<button type=«button» class=«btn btn-primary btn-xs»> XSmall </button>

Дополнительно класс. btn-block обеспечивает 100% ширину кнопки.

<button type=«button» class=«btn btn-primary btn-lg btn-block»> Button </button>

Класс. active переводит кнопку в нажатое состояние.

Класс. disabled делает кнопку некликабельной.

<button type=«button» class=«btn btn-primary disabled»> Disabled Primary </button>

Для смещения и центрирования кнопок дополнительно применяются классы. pull-left,.pull-right,.center-block.

Класс. btn-group позволяет скомпоновать группу кнопок в строку или столбец.

Горизонтальный макет:

<button type=«button» class=«btn btn-primary»> Button 1 </button>

<button type=«button» class=«btn btn-primary»> Button 2 </button>

<button type=«button» class=«btn btn-primary»> Button 3 </button>

</div>

Вертикальный макет:

<button type=«button» class=«btn btn-primary»> Button 1 </button>

<button type=«button» class=«btn btn-primary»> Button 2 </button>

<button type=«button» class=«btn btn-primary»> Button 3 </button>

</div>

Группа кнопок позволяет применить размер сразу ко всем кнопкам с помощью дополнительных классов. btn-group-lg,.btn-group-md,.btn-group-sm,.btn-group-xs.

<button type=«button» class=«btn btn-primary»> Button 1 </button>

<button type=«button» class=«btn btn-primary»> Button 2 </button>

<button type=«button» class=«btn btn-primary»> Button 3 </button>

</div>

Класс. btn-group-justified, группирующий кнопки <a> позволяет заполнить кнопками всю ширину экрана.

<a href=«#» class=«btn btn-primary»> Button 1 </a>

<a href=«#» class=«btn btn-primary»> Button 2 </a>

<a href=«#» class=«btn btn-primary»> Button 3 </a>

</div>

Для кнопок <button> этого же эффекта можно достичь, обернув каждую кнопку в контейнер div class=«btn-group»>.

<button type=«button» class=«btn btn-primary»> Button 1 </button>

</div>

<button type=«button» class=«btn btn-primary»> Button 2 </button>

</div>

<button type=«button» class=«btn btn-primary»> Button 3 </button>

</div>

С помощью класса. btn-group можно также сделать кнопку с выпадающим меню.

<li> <a href=«#»> Tablet </a> </li>

<li> <a href=«#»> Smartphone </a> </li>

</ul>

</div>

Или разделенную кнопку с меню.

</button>

<li> <a href=«#»> Tablet </a> </li>

<li> <a href=«#»> Smartphone </a> </li>

</ul>

</div>

Кнопку раскрытия меню можно делать разного размера.

Default

</button>

<li> <a href = «#»> Action </a> </li>

<li> <a href = «#»> Another action </a> </li>

<li> <a href = «#»> Something else here </a> </li>

<li> <a href = «#»> Separated link </a> </li>

</ul>

</div>

Primary

</button>

<li> <a href = «#»> Action </a> </li>

<li> <a href = «#»> Another action </a> </li>

<li> <a href = «#»> Something else here </a> </li>

<li> <a href = «#»> Separated link </a> </li>

</ul>

</div>

Success

</button>

<li> <a href = «#»> Action </a> </li>

<li> <a href = «#»> Another action </a> </li>

<li> <a href = «#»> Something else here </a> </li>

<li> <a href = «#»> Separated link </a> </li>

</ul>

</div>

Для раскрытия меню вверх, а не вниз используется класс. dropup.

Primary

</button>

<li> <a href = «#»> Action </a> </li>

<li> <a href = «#»> Another action </a> </li>

<li> <a href = «#»> Something else here </a> </li>

<li> <a href = «#»> Separated link </a> </li>

</ul>

</div>

Для объединения групп кнопок в панель используется класс. btn-toolbar, который дает небольшой отступ и обтекание слева для групп кнопок.

<button type = «button» class = «btn btn-default»> Button 1 </button>

<button type = «button» class = «btn btn-default»> Button 2 </button>

<button type = «button» class = «btn btn-default»> Button 3 </button>

</div>

<button type = «button» class = «btn btn-default»> Button 4 </button>

<button type = «button» class = «btn btn-default»> Button 5 </button>

<button type = «button» class = «btn btn-default»> Button 6 </button>

</div>

<button type = «button» class = «btn btn-default»> Button 7 </button>

<button type = «button» class = «btn btn-default»> Button 8 </button>

<button type = «button» class = «btn btn-default»> Button 9 </button>

</div>

Bootstrap Glyphicons

Bootstrap обеспечивает использование 260 значков набора Halflings библиотеки GLYPHICONS (http://glyphicons.com/) вместо изображений для ускорения загрузки страницы.

Значок glyphicon вставляется с помощью контейнера <span class=«glyphicon glyphicon-name»> </span>, где name – имя значка. Здесь есть отличие от сайта http://glyphicons.com, там синтаксис предлагается другой <span class=«halflings halflings-name»> </span>.

<span class=«glyphicon glyphicon-search»> </span> Search

</button>

<span class=«glyphicon glyphicon-print»> </span> Print

</a>

Вопрос :

Почему значок не отображается?

</div>

Ответ:

Отсутствует класс. glyphicon.

User

</button>

User

</button>

User

</button>

Изменить цвет и размер значка glyphicon также можно с помощью CSS.

.logo-small {

color: #f4511e;

font-size: 50px;

}

Значки и метки

С помощью контейнера <span class=«badge»> [число] </span> Bootstrap позволяет добавить количество сообщений, комментарий, обновлений и др.

<a href=«#»> Comments <span class=«badge»> 10 </span> </a>

<button type=«button» class=«btn btn-success»> Messages <span class=«badge»> 3 </span> </button>

<a href=«#»> Message <span class=«badge»> new 10 </span> </a>

Класс. label, совместно с классами. label-default,.label-primary,.label-success,.label-info,.label-warning,.label-danger в контейнере <span> позволяет добавить разноцветные метки.

<span class=«label label-default»> Default Label </span>

<span class=«label label-primary»> Primary Label </span>

<h3> <span class=«label label-success»> Success Label </span> </h3>

<span class=«label label-info»> Info Label </span>

<span class=«label label-warning»> Warning Label </span>

<span class=«label label-danger»> Danger Label </span>

Bootstrap Progress Bars

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

<span class=«sr-only»> 70% Complete </span> 70%

</div>

Здесь класс. sr-only обеспечивает информацию для людей с ограниченными возможностями.

Визуальное заполнение индикатора обеспечивает атрибут style=«width:70%».

С помощью Javascript заполнение индикатора меняется следующим образом:

$('.progress-bar’).css (’width’, value+'%').attr (’aria-valuenow’, value);

Дополнительно классы. progress-bar-success,.progress-bar-info,.progress-bar-warning,.progress-bar-danger изменяют цвет заполнения индикатора.

70% Complete (success)

</div>

70% Complete (info)

</div>

70% Complete (warning)

</div>

70% Complete (danger)

</div>

Дополнительно класс. progress-bar-striped делает индикатор полосатым.

40%

</div>

Дополнительно класс. active анимирует полосы индикатора.

40%

</div>

Размещение нескольких элементов <div class=«progress-bar»> в одном контейнере <div class=«progress»> поместит несколько индикаторов в одну строку.

Free Space

</div>

Warning

</div>

Danger

</div>

Вопрос:

Почему индикатор не работает?

70%

</div>

Ответ:

Отсутствует класс. progress-bar.

Bootstrap Pagination, Pager и Breadcrumbs

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

Для создания нумерации страниц список ссылок на страницы помещается в контейнер с классом. pagination, при этом текущая страница помечается классом. active.

</ul>

В качестве альтернативы текущую страницу можно пометить классом. disabled.

</ul>

Дополнительно с помощью классов. pagination-lg,.pagination-sm можно увеличить или уменьшить нумерацию страниц.

</ul>

</ul>

С помощью классов. pager,.previous,.next можно организовать кнопки перехода на предыдущую и следующую страницы.

<li class=«previous»> <a href=«#»> Previous </a> </li>

</ul>

Класс. disabled работает и для кнопок.

<li class=«previous disabled»> <a href=«#»> Previous </a> </li>

</ul>

Другой способ представления навигации страниц сайта – это хлебные крошки с помощью класса. breadcrumb.

<li> <a href=«#»> Private </a> </li>

<li> <a href=«#»> Pictures </a> </li>

<li class=«active»> Vacation </li>

</ul>

Внимание! Это не конец книги.

Если начало книги вам понравилось, то полную версию можно приобрести у нашего партнёра - распространителя легального контента. Поддержите автора!

Купить легальную копию

Страницы книги >> Предыдущая | 1 2

Скачать книгу "Bootstrap: Быстрое создание современных сайтов"

- 0
- 1
- 2
- 3
- 4
- 5
0 Оценок: 0

Правообладателям!

Данное произведение размещено по согласованию с ООО "ЛитРес" (20% исходного текста). Если размещение книги нарушает чьи-либо права, то сообщите об этом.

Читателям!

Оплатили, но не знаете что делать дальше?

Текст книги "Bootstrap: Быстрое создание современных сайтов"

Автор книги: Тимур Машнин

Жанр: Компьютеры: прочее, Компьютеры

Таблицы

Изображения

Bootstrap Jumbotron

Bootstrap Page Header

Bootstrap Wells

Bootstrap Alerts

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

Bootstrap Glyphicons

Значки и метки

Bootstrap Progress Bars

Bootstrap Pagination, Pager и Breadcrumbs

Популярные книги за неделю

Жанры библиотеки

Популярные серии книг

По году издания

Рекомендации