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

Автор

Страниц

Год

—

Bootstrap - это бесплатный фреймворк для создания интерфейсов веб-сайтов, который обеспечивает быструю и простую разработку. Он включает в себя множество шаблонов дизайна на основе HTML и CSS, предназначенных для различных элементов интерфейса - от форм и кнопок до навигации и каруселей изображений. Кроме того, Bootstrap предоставляет разнообразные плагины JavaScript для расширения функциональности сайтов.

Благодаря Bootstrap можно легко создавать адаптивные веб-сайты с отзывчивым дизайном, которые отлично отображаются на любых устройствах - от мобильных телефонов до настольных компьютеров. С помощью этого фреймворка возможно создание стильных и современных web-проектов, не требующих длительного и сложного программирования.

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

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

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

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

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

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

Продолжить чтение

Вам может понравиться: