Быстрое создание современных сайтов» онлайн полностью📖 — Тимура Машнина — MyBook.
Дизайнер обложки Тимур Машнин
© Тимур Машнин, 2020
© Тимур Машнин, дизайн обложки, 2020
ISBN 978-5-4474-6231-4
Создано в интеллектуальной издательской системе Ridero
Начало работы с Bootstrap
Пригласить автора в проект [email protected]
Bootstrap представляет собой свободный фреймворк интерфейсов для быстрой и простой Web разработки. Bootstrap предоставляет шаблоны дизайна, основанные на HTML и CSS для разметки, форм, кнопок, таблиц, навигации, диалоговых окон, каруселей изображений и многого другого, а также дополнительные плагины JavaScript. На основе Bootstrap можно легко создавать сайты с «отзывчивым дизайном» – сайты, которые одинаково хорошо выглядят на всех типах устройств, от небольших телефонов до настольных компьютеров.
Bootstrap был разработан Марком Отто и Джейкобом Торнтон для Twitter, и выпущен как продукт с открытым исходным кодом в августе 2011 года на GitHub.
<! – 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.
<meta name=«viewport» content=«width=device-width, initial-scale=1»>
Два Bootstrap класса. container и. container-fluid обеспечивают контейнер для контента.
<div class=«container»>
<h2> My First Bootstrap Page </h2>
<p> This is some text. </p>
</div>
Или
<div class=«container-fluid»>
<h2> My First Bootstrap Page </h2>
<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.
Перемещать столбцы вправо или влево можно с помощью классов col-md-push-* и col-md-pull-* соответственно, где звездочка это значение от 1 до 11. При этом за сценой используется CSS свойство left: и right:.
<div class=«col-md-4 col-md-push-4»> <p> green pushed 4 </p> </div>
<div class=«col-md-4 col-md-pull-4»> <p> red pulled 4 </p> </div>
Быстрое создание современных сайтов читать книгу онлайн бесплатно
1234567…10
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):
<! – 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»>
<h2> My First Bootstrap Page </h2>
<p> This is some text. </p>
</div>
Или
<div class=«container-fluid»>
<h2> My First Bootstrap Page </h2>
<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»>
Читать дальше
1234567…10
Топ-10 лучших книг для изучения Bootstrap Library от Twitter
Bootstrap — это быстрорастущая библиотека интерфейса и, возможно, самая популярная библиотека для веб-разработчиков.
Существует золотая лихорадка для Bootstrap 4, и с этим предстоящим выпуском все больше разработчиков погружаются в эту бесплатную библиотеку для разработчиков.
Но Bootstrap — это гораздо больше, чем просто основы. Его можно использовать в SPA и даже в базовых веб-проектах, чтобы сэкономить время с сетками и типографикой.
В этом посте я поделюсь самыми лучшими книгами для изучения Twitter Bootstrap с нуля. Большинство этих книг предназначены для начинающих, но несколько жемчужин предназначены для более продвинутых разработчиков.
Лучшая вводная книга по Bootstrap
С таким количеством замечательных книг для начинающих мне очень трудно выбрать какую-то одну. Но если бы мне пришлось, я бы выбрал Step By Step Bootstrap 3. Образцы кода великолепны, он длинный, но не слишком длинный, а информация актуальна сейчас как никогда раньше.
В будущем, когда выйдет v4, я могу изменить свое мнение. Но пока это мой голос за лучшую книгу для новичка, который хочет изучить Bootstrap.
1. Начальная загрузка за 24 часа
Я с большим уважением отношусь к серии «Sam’s Teach Yourself», потому что большинство их названий отлично подходят для обучения запутанным темам. И эта книга — еще один пример.
Сэмс Научись Bootstrap за 24 часа занимает 432 страницы и охватывает абсолютно все, что вам нужно знать о Bootstrap. Несмотря на название, я, честно говоря, не думаю, что кто-то смог бы прочитать книгу за один день. Но в совокупности можно было бы пройти через это за 24 часа, и вы бы ушли с глубоким знанием фреймворка Bootstrap.
В самых первых главах вы познакомитесь с абсолютными основами. Как загрузить и настроить Bootstrap, создать сетки и добавить различные компоненты.
В следующих главах вы будете создавать полноценные приложения, и после каждой главы вам будут задавать вопросы. Это заставляет вас задуматься о том, что вы узнали, и доказать себе, что вы понимаете Bootstrap.
Эта книга касается даже разработки Less/Sass и сторонних плагинов JavaScript, которые хорошо взаимодействуют с библиотекой Bootstrap.
Даже если у вас уже есть некоторые знания о Bootstrap, вы можете многому научиться из последующих глав этой книги. Это навязывает лучшие практики и заставляет задуматься о том, как разработать сайт с нуля.
2. Unraveling Bootstrap 3.3
В новейшей версии Bootstrap (до v4) есть чему поучиться и много чего попрактиковаться. К счастью, эта книга очень доступна по цене и содержит более 300 страниц информации о Bootstrap 3.
Unraveling Bootstrap 3.3 начинается с знакомства с Bootstrap и всеми имеющимися в вашем распоряжении функциями. Затем он быстро погружает вас в разработку макета с сетками и пользовательскими стилями.
Последующие главы посвящены компонентам, включая компоненты JavaScript, такие как модальные окна и карусели изображений.
Это гораздо более простая книга для начинающих и одна из самых современных книг, которые вы можете найти. Это слишком просто для опытных разработчиков, но полный новичок может взять эту книгу и без труда изучить все основы.
3. Jump Start Bootstrap
Лучшее в этой книге то, что она короткая и интересная. Всего 140 страниц, и вы можете легко проглотить эту книгу за день или два.
Тема все еще довольно подробная, и вы уйдете с реальным практическим знанием Bootstrap на примере.
Я думаю, что Jump Start Bootstrap — лучшее руководство для изучения реальных основ этой библиотеки. Вы узнаете, почему это так полезно и как это может сэкономить ваше время при работе над проектом. Автор учит вас на реальных примерах, которые заставляют вас писать код.
У вас должны быть предварительные знания HTML/CSS, но в остальном вы готовы к работе. Если вам нужно быстро начать работу с Bootstrap, то Jump Start Bootstrap — прекрасный выбор.
4. Bootstrap на примерах
О Bootstrap на примерах можно много чего сказать, и я действительно многое сказал в своем недавнем обзоре этой книги.
Содержимое просто фантастическое, и вы узнаете абсолютно все о Bootstrap.
Примеры живых проектов научат вас, как реализовать более сложные компоненты JS, и автор даже углубляется в Bootstrap 4, охватывая некоторые из этих компонентов.
Эта книга поможет вам быстро освоить Bootstrap и даже немного продвинет вас вперед. Все начинается с простого руководства по сетке, но быстро переходит в детализированную изнанку компонентов Bootstrap.
Большинство разработчиков лучше учатся на практике, и эта книга подтолкнет вас к этому. Если вам не нравится JavaScript, эта книга может показаться вам слишком сложной. Однако, если у вас есть какие-то знания и вы хотите применить их к Bootstrap, я настоятельно рекомендую Bootstrap by Example.
5. Шаг за шагом Bootstrap 3
В этой книге, написанной Риванто Мегосинарсо, вы узнаете, как кодировать Bootstrap таким образом, чтобы сделать упор на адаптивные методы.
Сеть быстро движется к мобильной среде. На самом деле я бы сказал, что мы уже там. Step By Step Bootstrap 3 охватывает 230 страниц, которые действительно подталкивают вас к правильному способу написания кода Bootstrap.
Это, конечно, краткое введение, но это не полный обзор. Есть некоторые пропущенные функции и компоненты, которые не рассматриваются, а другие лишь кратко затрагиваются.
Однако, если вы новичок в Bootstrap и адаптивной разработке, то это руководство приведет вас туда, куда вам нужно. К концу вы почувствуете себя комфортно в написании кода на Bootstrap, и у вас будет достаточно знаний, чтобы научиться еще большему самостоятельно.
6. Bootstrap Site Blueprints Volume II
Наконец мы добрались до более продвинутого названия, которое действительно создано для опытных веб-разработчиков. Bootstrap Site Blueprints Vol II объясняет, как Bootstrap работает в сочетании с другими веб-библиотеками и методами.
Вы узнаете, как применить материальный дизайн к фреймворку, чтобы перезаписать существующие стили. Вы также узнаете, как включить в браузер сторонние библиотеки JavaScript для построения диаграмм и графики SVG.
Каждая глава содержит подробный пример того, как сразу же начать работу.
Вы узнаете, как создать собственный веб-сайт ресторана, макет Bootstrap для мобильных устройств, собственный макет блога/журнала и многие другие подобные проекты.
Эта книга с чертежами больше всего научит вас процессу разработки. Как только вы разберетесь с Bootstrap, легкая часть будет завершена. Теперь вы захотите включить Bootstrap в свой рабочий процесс с помощью Node/NPM, Less/Sass, Gulp/Grunt и других подобных инструментов.
Для того, чтобы по-настоящему отточить профессиональный рабочий процесс Bootstrap, я бы порекомендовал только эту книгу.
7. Радость Bootstrap
Тяжело изучать Bootstrap, не заглядывая в официальную документацию. Joy of Bootstrap экономит ваше время и избавляет от разочарований, рассказывая вам все, что вам нужно знать, в краткой, но точной форме.
Вы работаете над несколькими проектами, которые помогут вам понять особенности Bootstrap в реальном мире. Все образцы кода и превью можно увидеть на официальном веб-сайте книги (который также построен на Bootstrap).
В книге всего около 120 страниц, поэтому вы можете быстро с ней разобраться. Это проведет вас от полного новичка до человека, компетентного во всех основных частях фреймворка.
Некоторым разработчикам просто нужно быстрое и грязное введение в фреймворк. С более сложными предметами это просто невозможно. Но Bootstrap не входит в их число.
Я аплодирую автору Алану Форбсу за его безупречный стиль письма, понятные руководства и очень простой процедурный процесс изучения библиотеки Bootstrap с нуля.
8. Изучение Bootstrap 4
Я был поражен всеми новыми функциями и обновлениями в альфа-версии v4. Bootstrap, пожалуй, самая популярная библиотека интерфейса для веб-разработчиков, и эта новая версия радикально изменит то, как мы создаем веб-сайты.
Изучение Bootstrap 4 охватывает все новейшие функции этой библиотеки и помогает понять каждую из них. Вы также узнаете, как расширить библиотеку Bootstrap с помощью сторонних плагинов и расширений BS4.
Эта книга не для начинающих, и это также не полное введение в библиотеку Bootstrap. Вы уже должны быть знакомы с BS3 перед покупкой этой игры, и вы должны быть готовы немного поэкспериментировать с новейшей платформой BS4.
К сожалению, BS4 все еще находится на стадии тестирования, поэтому не готов к развертыванию. Это означает, что вам действительно не следует использовать его на рабочем веб-сайте.
Но разработчики всегда хотят учиться ради обучения, и эта книга — идеальный способ погрузиться с головой.
9. Освоение Bootstrap 4
Разработчики готовы перейти на Bootstrap v4, даже несмотря на то, что Twitter не указал точную дату публикации релиза. Приведенный выше заголовок «Изучение Bootstrap 4» — это моя рекомендация для разработчиков Bootstrap, которые хотят переключиться.
И если вы готовы зайти так далеко, я бы также порекомендовал Mastering Bootstrap 4, который превращает Bootstrap 4 в полноценный рабочий процесс.
Вы узнаете, как интегрировать Bootstrap с React/Angular и как оптимизировать свой код для запуска в Интернете.
Освоение Bootstrap 4 обучает вас на живых примерах и предполагает, что вы уже хорошо разбираетесь в библиотеке BS3. Эта книга поможет вам всегда быть впереди всех, когда Twitter публикует первую общедоступную версию v4.0.
Эта книга не обязательна, и некоторые разработчики могут предпочесть дождаться официального релиза, чтобы получить такую книгу.
Но я все равно не могу исключить ее из списка, потому что это одна из немногих книг, обучающих BS4 в готовом рабочем процессе.
10. Изучение веб-разработки с помощью Bootstrap и Angular
Я завершу этот пост очень продвинутой книгой, объединяющей два моих любимых фреймворка: Bootstrap и AngularJS.
Обучение веб-разработке с помощью Bootstrap и Angular охватывает 323 страницы подробных руководств и упражнений, объединяющих эти две библиотеки с открытым исходным кодом. У автора Стивена Рэдфорда есть способ объяснить каждый процесс шаг за шагом, так что вы никогда не потеряетесь.
Вы также будете использовать Less для предварительной обработки и Gulp+Grunt для запуска задач (тестирование обоих инструментов). Книга начинается с довольно простого обучения тому, как установить Bootstrap, затем установить Angular и создать рабочее пространство проекта.
Отсюда быстро нарастает. Вы создадите пользовательский макет с нуля с помощью сторонних инструментов, но книга не предполагает, что вы освоите любой из фреймворков. Вы можете начать с некоторого знания обоих и уйти очень компетентно с рабочим процессом Angular + Bootstrap.
К счастью, Bootstrap — одна из самых простых библиотек для начала работы. Но поскольку информации для переваривания так много, работать с онлайн-учебниками может быть сложно.
Я думаю, что абсолютные новички узнают больше всего из Step by Step Bootstrap 3 или даже Bootstrap за 24 часа, если вам нужно быстро погрузиться в бассейн.
По правде говоря, все вводные книги в этом списке великолепны. Некоторые длиннее других, некоторые дешевле других, а некоторые легче читать, чем другие.
Ознакомьтесь с обзорами некоторых из них и решите, какие из них помогут вам лучше понять Bootstrap.
Тем, кто хочет быстро перейти к BS4, следует ознакомиться с Learning Bootstrap 4 вместе с Mastering Bootstrap 4. Оба они охватывают новейшие функции Bootstrap, а также общие рабочие процессы для добавления связанных инструментов в процесс разработки.
Независимо от того, являетесь ли вы новичком, немного опытным пользователем или экспертом по Bootstrap, всегда есть чему поучиться. И с выходом Bootstrap 4 на горизонте я с нетерпением жду, что ждет в будущем этот интерфейсный фреймворк и сообщество веб-разработчиков.
Метки: Bootstrap
Автор: Алекс Тернер
Алекс — разработчик полного стека с многолетним опытом работы в цифровых агентствах и в качестве фрилансера. Он пишет об образовательных ресурсах и инструментах для программистов, строящих будущее Интернета.
Mastering Bootstrap 4 [Книга]
Описание книги
Узнайте, как создавать красивые веб-интерфейсы с широкими возможностями настройки, используя возможности Bootstrap 4
Об этой книге привлекательные веб-сайты, соответствующие вашим потребностям
Для кого предназначена эта книга
Эта книга предназначена для веб-разработчиков среднего уровня.
Книга не предназначена для введения в веб-разработку. Таким образом, книга предполагает, что читатели имеют четкое представление об основных концепциях веб-разработки, а также основные навыки работы с HTML, JavaScript и CSS.
Чему вы научитесь
- Создайте профессиональный веб-сайт на основе Bootstrap с нуля без использования сторонних шаблонов
- Примените сеточную систему Bootstrap, ориентированную на мобильные устройства, и добавьте отзывчивости и эстетических штрихов к элементам изображения
- Стилизуйте различные типы контента и научитесь создавать макет страницы с нуля, применяя возможности Bootstrap 4
- Воспользуйтесь преимуществами формы Bootstrap вспомогательные и контекстные классы
- Наполните свои веб-страницы жизнью и движением с помощью подключаемых модулей Bootstrap jQuery
- Широкие возможности настройки поведения и функций подключаемых модулей Bootstrap jQuery
- Оптимизируйте свой проект на основе Bootstrap перед развертыванием
- Включите Bootstrap в приложение AngularJS или React и используйте компоненты Bootstrap в качестве директив AngularJS или компонентов React разработчикам для быстрого создания отзывчивых веб-интерфейсов.
Прямо с первой главы погрузитесь в создание собственного веб-сайта Bootstrap с нуля. Ознакомьтесь с ключевыми функциями Bootstrap и быстро откройте для себя различные способы, которыми Bootstrap может помочь вам в разработке веб-интерфейсов. Затем пройдитесь по основным функциям, таким как система сетки, вспомогательные классы и адаптивные утилиты. Когда вы освоите их, вы узнаете, как структурировать макеты страниц, использовать формы, стилизовать различные типы контента и использовать различные компоненты навигации Bootstrap. Помимо прочего, вы также ознакомитесь с анатомией плагина Bootstrap, создадите свои собственные компоненты и расширите Bootstrap с помощью jQuery. Наконец, вы узнаете, как оптимизировать свой веб-сайт и интегрировать его со сторонними платформами.
К концу этой книги вы будете хорошо знать все тонкости фреймворка и сможете создавать настраиваемые и оптимизированные веб-интерфейсы.
Стиль и подход
Это всеобъемлющее пошаговое руководство поможет вам создать полноценный веб-сайт с помощью Bootstrap 4.
