LibKing » Книги » Компьютеры и Интернет » Прочая околокомпьтерная литература » Тимур Машнин - Bootstrap: Быстрое создание современных сайтов

Тимур Машнин - Bootstrap: Быстрое создание современных сайтов

Тут можно читать онлайн Тимур Машнин - Bootstrap: Быстрое создание современных сайтов - ознакомительный отрывок. Жанр: Прочая околокомпьтерная литература, издательство Литагент Ридеро. Здесь Вы можете читать ознакомительный отрывок из книги ознакомительный отрывок из книги онлайн без регистрации и SMS на сайте LibKing.Ru (ЛибКинг) или прочесть краткое содержание, предисловие (аннотацию), описание и ознакомиться с отзывами (комментариями) о произведении.
Тимур Машнин - Bootstrap: Быстрое создание современных сайтов


Тимур Машнин - Bootstrap: Быстрое создание современных сайтов краткое содержание

Bootstrap: Быстрое создание современных сайтов - описание и краткое содержание, автор Тимур Машнин, читайте бесплатно онлайн на сайте электронной библиотеки LibKing.Ru
Bootstrap представляет собой свободный фреймворк интерфейсов для быстрой и простой Web разработки. Bootstrap предоставляет шаблоны дизайна, основанные на HTML и CSS для разметки, форм, кнопок, таблиц, навигации, диалоговых окон, каруселей изображений и многого другого, а также дополнительные плагины JavaScript. На основе Bootstrap можно легко создавать сайты с «отзывчивым дизайном», одинаково хорошо выглядящие на всех типах устройств, от небольших телефонов до настольных компьютеров.

Bootstrap: Быстрое создание современных сайтов - читать онлайн бесплатно ознакомительный отрывок

Bootstrap: Быстрое создание современных сайтов - читать книгу онлайн бесплатно (ознакомительный отрывок), автор Тимур Машнин

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

Тимур Машнин

© Тимур Машнин, 2016

© Тимур Машнин, дизайн обложки, 2016


Создано в интеллектуальной издательской системе Ridero

Начало работы с Bootstrap

Пригласить автора в проект admin@tmsoftstudio.com


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

Bootstrap был разработан Марком Отто и Джейкобом Торнтон для Twitter, и выпущен как продукт с открытым исходным кодом в августе 2011 года на GitHub.

Bootstrap можно загрузить на сайте getbootstrap.com или включить как ссылку на хранилище CDN (Content Delivery Network):

<! – Latest compiled and minified CSS – >

<link rel=«stylesheet» href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<! – jQuery library – >

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>

<! – Latest compiled JavaScript – >

<script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>

Использование Bootstrap требует включения элементов и атрибутов! DOCTYPE, lang и charset:

<!DOCTYPE html>

<html lang=«en»>

<head>

<meta charset=«utf-8»>

</head>

</html>

Разработка сайта с «отзывчивым дизайном» всегда начинается с создания дизайна для мобильного телефона, а затем уже для планшета и далее для настольного компьютера – это называется принципом mobile-first. Поэтому подгоним ширину веб страницы под ширину экрана мобильного устройства, чтобы пользователь не елозил по странице в поисках контента, с помощью мета тега viewport:

<meta name=«viewport» content=«width=device-width, initial-scale=1»>

Два Bootstrap класса. container и. container-fluid обеспечивают контейнер для контента.

<div class=«container»>

<h1> My First Bootstrap Page </h1>

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

</div>

Или

<div class=«container-fluid»>

<h1> My First Bootstrap Page </h1>

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

</div>

Класс. container имеет фиксированную ширину для трех типов экранов:

.container {

padding-right: 15px;

padding-left: 15px;

margin-right: auto;

margin-left: auto;

}

@media (min-width: 768px) {

.container {

width: 750px;

}

}

@media (min-width: 992px) {

.container {

width: 970px;

}

}

@media (min-width: 1200px) {

.container {

width: 1170px;

}

}

Класс. container-fluid охватывает всю ширину viewport:

.container-fluid {

padding-right: 15px;

padding-left: 15px;

margin-right: auto;

margin-left: auto;

}

Bootstrap Grid System

Bootstrap табличная система позволяет создать до 12 столбцов на странице.

Если вы хотите использовать меньшее количество столбцов, можно группировать столбцы вместе, чтобы создавать более широкие столбцы:



Столбцы Bootstrap Grid System будут перестраиваться автоматически в зависимости от размера экрана.




Для создания строки со столбцами нужно создать контейнер с классом. row, например, <div class=«row»>, в который включить столбцы:

<div class=«row»>

<div class=«col-*-*"> </div>

<div class=«col-*-*"> </div>

<div class=«col-*-*"> </div>

</div>

Выглядеть это будет следующим образом:



Вместо первой звездочки можно поставить один из четырех классов:

xs – для телефонов

sm – для планшетов

md – для настольных компьютеров

lg – для больших мониторов

Вместо второй звездочки указывается, сколько столбцов из 12 данный столбец объединяет.

Например, если указать col-md-6:

<div class=«row»>

<div class=«col-md-6»> col-md-6 </div>

<div class=«col-md-6»> col-md-6 </div>

</div>

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




Или если вы хотите сделать:

1 колонка для небольших устройств

2 колонки для малых и средних устройств

4 колонки для больших устройств

Тогда укажите:

<div class=«row»>

<div class=«col-sm-6 col-lg-3»>

This is part of our grid.

</div>

<div class=«col-sm-6 col-lg-3»>

This is part of our grid.

</div>

<div class=«col-sm-6 col-lg-3»>

This is part of our grid.

</div>

<div class=«col-sm-6 col-lg-3»>

This is part of our grid.

</div>

</div>

Если у вас есть четыре столбца разной высоты:



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



Чтобы достичь этого, нужно применить блок:

<div class=«clearfix visible-xs-block»> </div>

<div class=«clearfix visible-sm-block»> </div>



<section class=«row»>

<section class=«col-xs-6 col-sm-6 col-md-3 col-lg-3»>

<div class=«alert alert-danger»> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </div>

</section>

<section class=«col-xs-6 col-sm-6 col-md-3 col-lg-3»>

<div class=«alert alert-info»> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div>

</section>

<div class=«clearfix visible-xs-block»> </div>

<div class=«clearfix visible-sm-block»> </div>

<section class=«col-xs-6 col-sm-6 col-md-3 col-lg-3»>

<div class=«alert alert-info»> Lorem ipsum dolor sit amet. </div>

</section>

<section class=«col-xs-6 col-sm-6 col-md-3 col-lg-3»>

<div class=«alert alert-info»> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros. </div>

</section>

</section>

Здесь для управления видимостью элемента используется класс visible. Для сокрытия элемента используется класс hidden:





Таким образом, если применить класс visible-sm-block, элемент будет виден только на планшете, если применить класс hidden-sm, элемент будет скрыт на планшетах.

Для увеличения отступа между столбцами, можно использовать класс col-*-offset-*, где первая звездочка это классы xs, sm, md, lg (обычно используют только md), а вторая звездочка это значение от 1 до 11. При использовании этого класса, за сценой применяется свойство margin-left.





Тимур Машнин читать все книги автора по порядку

Тимур Машнин - все книги автора в одном месте читать по порядку полные версии на сайте онлайн библиотеки LibKing.




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


Отзывы читателей о книге Bootstrap: Быстрое создание современных сайтов, автор: Тимур Машнин. Читайте комментарии и мнения людей о произведении.


Понравилась книга? Поделитесь впечатлениями - оставьте Ваш отзыв или расскажите друзьям


Прокомментировать
Большинство книг на сайте опубликовано легально на правах партнёрской программы ЛитРес. Если Ваша книга была опубликована с нарушениями авторских прав,
пожалуйста, направьте Вашу жалобу на abuse@libking.ru или заполните форму обратной связи.
img img img img img