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

Bootstrap: Быстрое создание современных сайтов
Название: Bootstrap: Быстрое создание современных сайтов
Автор:
Жанр: Книги о компьютерах
Серии: Нет данных
ISBN: Нет данных
Год: Не установлен
О чем книга "Bootstrap: Быстрое создание современных сайтов"

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

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


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

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


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

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

Пригласить автора в проект [email protected]


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

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

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

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

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

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

My First Bootstrap Page

This is some text. 

Или

My First Bootstrap Page

This is some text. 

Класс. 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, например,

, в который включить столбцы:

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



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

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

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

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

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

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

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

col-md-6 

col-md-6 

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




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

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

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

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

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

This is part of our grid.

This is part of our grid.

This is part of our grid.

This is part of our grid.

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



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



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



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.

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.

Lorem ipsum dolor sit amet.

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.

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





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


С этой книгой читают
Создание пользовательских индикаторов и советников для торговой платформы MetaTrader 5 с использованием языка программирования MQL5.
В многопроцессорных системах многопоточность решает проблему параллельного выполнения кода с наименьшими затратами.Поэтому многопоточность используется в большинстве реальных приложений.И Java, как и большинство языков программирования, поддерживает многопоточность.Познакомьтесь с реализацией процессов и потоков в Java, с управлением и синхронизацией потоков.Узнайте о пуле потоков, потокобезопасных коллекциях, синхронизаторах и параллельных поток
Разработка индикаторов и советников с использованием языка программирования MQL5 для платформы MetaTrader 5. Второе издание, исправленное и дополненное.
Эта книга предназначена для тех, кто хочет научиться программировать на языке Java.С этой книгой вы обучитесь объектно-ориентированному программированию на платформе Java SE и научитесь применять принципы ООП на практике.Эта книга охватывает важные аспекты программирования на языке Java, начиная с основ и заканчивая объектно-ориентированным подходом и командной разработкой кода.
С точки зрения инженера.Любое договорное знание.В Небытии.Настоящего.Является Софизмом.Истина непознаваема.В данной книге излагаются.Софизмы об Иннатизме и Tabula rasa.А также излагаются Софизм об Апперцепции по Канту, Софизм об Антиципации по Канту и Софизм Термодинамика..С точки зрения инженера.Настоящее.Странного Мига в Бытие.Непознаваемо.
С точки зрения инженера.Любое договорное знание.В Небытии.Настоящего.Является Софизмом.Истина, Творение, Сущее и Бытие.Непознаваемы.В данной книге излагаются.Творение Дуализма Небытия и Бытия.Трактат о Творении Дуализма.
…Поистине неисповедимы пути Господни. Мы не можем знать, куда он направит нас завтра, через месяц, через год. Как отзовется наше слово, наше действие – все это в руках и помыслах Всевышнего.Но мы точно знаем, что он нас бережет, он не дает нам испытаний, которых мы не могли бы вынести. Он ведет нас так, как надо.
В издании представлены материалы по новой перспективной технологии – мобильной электронной подписи (МЭП). В брошюре представлены теоретические основы технологии, рассмотрены перспективы и применение МЭП. И в качестве практической части – установка и применение мобильной электронной подписи.
Ваш стоп-ордер когда-нибудь исполнялся по цене, которая оказывалась самой низкой или высокой за день? Простое невезение? Что ж, вполне возможно. А если это случалось не раз? У вас никогда не возникало чувства, будто рынок играет против вас? На самом деле так оно и есть. Объясняя повседневную механику рынка FOREX и проливая свет на бесчестные манипуляции со стороны дилеров, автор предлагает трейдерам проверенные практикой техники трейдинга, которы
Ей дорого пришлось заплатить за право любить. Сперва – утратить иллюзии, затем – душевный покой, ну а дальше… Даша, медсестра наркологического центра, пытается выяснить, отчего погиб в Венеции, во время карнавала, ее возлюбленный – талантливый скульптор. Она ведет собственное расследование и заходит слишком далеко… На ее пути появляются люди, с которыми трудно спорить.
Принц Джелал-Ад-Дин восемь лет мечтал доказать отцу, царю Капии, что его мать убил сводный брат, коварный наследник престола Визар-Ад-Дин. Чтобы разобраться в событиях восьмилетней давности он решился на отчаянный шаг – заключить сделку с древним богом подземного мира Анбу. Но чтобы разузнать вожделенную правду, сначала надо раскопать дорогу глубоко в недра земли к престолу бога. Тем временем годы жизни царя клонятся к закату, и если он умрет, то
В отличие от своих собратьев Илья не горит желанием обрести истинную пару. Товарно-денежные отношения – это лучшее, что может быть между мужчиной и женщиной. Яна ненавидит его все душой, ведь ОН – убийца ее отца. Один из предателей! Тот, кто лишил нормальной жизни, отобрав все: дом, детство и родительскую любовь. А теперь враг ищет ее!Содержит нецензурную брань.