Что такое Bootstrap и как его использовать?

1. цели
2. Почему рамки важны? Нужно ли использовать один?
3. Создание базового шаблона с помощью Bootstrap
4. Привет, мир!
5. сетка
6. Иконки
7. Добавление пользовательских стилей в Bootstrap
8. Заключение

Если у вас есть какой-либо интерес к веб-разработке, вы, вероятно, слышали о начальная загрузка , Согласно официальному сайту, Bootstrap является самой популярной платформой HTML, CSS и JS для разработки адаптивных, мобильных первых проектов в Интернете. Звучит здорово! Теперь, как мне это использовать?

Было бы легко отправить вас к своим Начиная страницу и назовите это днем. Их руководство по установке действительно содержит множество полезной информации - ссылки на CDN, пояснения по установке с помощью Bower, npm и Composer, информацию об интеграции с Autoprefixer и LESS, набор шаблонов, лицензий и переводов - но это, безусловно, не пошаговое руководство по началу работы (что вполне может быть в духе автодидактизма).

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

Это руководство предназначено как первый взгляд на Bootstrap для начинающих, поэтому не будем вдаваться в интеграцию с LESS и Sass, которые являются более промежуточными / продвинутыми концепциями. Несмотря на то, что он написан для текущей стабильной версии Bootstrap 3, концепции останутся неизменными для будущих версий.

цели

• Узнайте, что такое интерфейсный фреймворк и как он может быть полезен
• Узнайте, как правильно включить CSS и JavaScript в Bootstrap и приступить к настройке

Prerequities

• Базовые знания и понимание HTML и CSS

Что такое Bootstrap?

Bootstrap можно свести к трем основным файлам:

Кроме того, Bootstrap требует JQuery функционировать. jQuery - чрезвычайно популярная и широко используемая библиотека JavaScript, которая одновременно упрощает и добавляет кросс-браузерную совместимость с JavaScript.

Все остальное, с чем вы можете столкнуться при изучении документации Bootstrap - Grunt, Gulp, Sass, LESS, bower, npm и т. Д. - не обязательно для начала работы с Bootstrap. Это исполнители задач, препроцессоры, средства установки и менеджеры пакетов, поэтому не расстраивайтесь, если вы еще не знаете, как их использовать.

Почему рамки важны? Нужно ли использовать один?

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

Некоторые способы, которыми фреймворки могут помочь вам:

• Предотвратить повторение между проектами
• Используйте адаптивный дизайн, чтобы ваш сайт адаптировался к экранам различных размеров - мобильным, настольным и всем, что между ними.
• Добавьте согласованность в дизайн и код между проектами и разработчиками
• Быстро и легко прототип новых конструкций
• Обеспечить кросс-браузерную совместимость

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

Сетки вероятно, является одним из наиболее важных аспектов структуры. Это основа, на которой создается весь макет. Помимо этого, Bootstrap's основной CSS также добавит полезные стили к формам, таблицам, кнопкам, спискам и изображениям, а также к полнофункциональным панелям навигации, а основной JavaScript добавит полезный код для создания модалов, каруселей, оповещений, всплывающих окон, выпадающих меню и аккордеонов.

Давай начнем!

Создание базового шаблона с помощью Bootstrap

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

Шаг первый - скачать Bootstrap , Zip-файл поставляется с каталогами css , fonts и js . Разархивируйте его и сохраните файлы в каком-то каталоге. Bootstrap не поставляется с HTML, но у них есть «Hello, World!» страница, чтобы начать в документации, поэтому мы будем использовать это как index.html .

Привет, мир!

<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8" /> <meta http-equ = "X-UA-Compatible" content = "IE = edge" /> < meta name = "viewport" content = "width = device-width, initial-scale = 1" /> <title> Шаблон начальной загрузки 101 </ title> <link href = "css / bootstrap.min.css" rel = "таблица стилей "/> </ head> <body> <h1> Привет, мир! </ h1> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </ script> <script src = "js / bootstrap.min .js "> </ script> </ body> </ html>

Достаточно легко начать. У нас есть базовые теги doctype, html, head и body. Тэг meta name = "viewport" особенно важен для адаптивного дизайна - он гарантирует, что ваш сайт имеет соотношение 1: 1 к окну просмотра (размер экрана).

Кроме того, мы просто добавляем базовый CSS Bootstrap в <head> ...

<link href = "css / bootstrap.min.css" rel = "stylesheet" />

jQuery через Google CDN перед закрывающим тегом </ body> ...

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

и загрузчик ядра JavaScript.

<script src = "js / bootstrap.min.js"> </ script>

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

Ну, это все, что вам нужно для начала работы с Bootstrap! Давайте проверим наш удивительный новый сайт.

...отличный!

Хотя у нас ничего нет, в кратчайшие сроки мы можем копировать и вставлять документы и иметь хороший, функционирующий веб-сайт. Прежде всего, мы добавляем наиболее существенную верхнюю панель навигации Bootstrap. Я сделал упрощенную версию их пример навигационной панели , Разместите этот код прямо под открывающим тегом <body>.

<nav class = "navbar navbar-inverse navbar-static-top"> <div class = "container"> <div class = "navbar-header"> <button type = "button" class = "navbar-toggle свернутый" данные -toggle = "collapse" data-target = "# bs-example-navbar-collapse-1" aria-extended = "false"> <span class = "sr-only"> Переключить навигацию </ span> <span class = "icon-bar"> </ span> <span class = "icon-bar"> </ span> <span class = "icon-bar"> </ span> </ button> <a class = "navbar-brand "href =" # "> Balance Web Development </ a> </ div> <div class =" collapse navbar-collapse "id =" bs-example-navbar-collapse-1 "> <ul class =" nav navbar- nav navbar-right "> <li> <a href =" # "> О программе </ a> </ li> <li class =" dropdown "> <a href =" # "class =" dropdown-toggle "data- toggle = "dropdown" role = "button" aria-haspopup = "true" aria-extended = "false"> Услуги <span class = "caret"> </ span> </ a> <ul class = "dropdown-menu "> <li> <a href =" # "> Desig n </ a> </ li> <li> <a href = "#"> Разработка </ a> </ li> <li> <a href = "#"> Консалтинг </ a> </ li> < / ul> </ li> <li> <a href = "#"> Контакт </ a> </ li> </ ul> </ div> </ div> </ nav>

Это похоже на запутанный беспорядок, но это не так сложно. В первой строке я определяю весь бар как панель навигации, выбираю схему темного цвета с помощью navbar-inverse и выбираю использование navbar-static-top вместо фиксированного (липкого) заголовка.

<nav class = "navbar navbar-inverse navbar-static-top"> </ nav>

Контейнер устанавливает максимальную ширину содержимого в пределах вашей полноэкранной навигационной панели.

<div class = "container"> </ div>

Класс заголовка navbar содержит информацию о бренде, где вы можете разместить свой логотип или название компании. Мы делаем сайт для вымышленной технологической компании Balance Web Development (ну, это лучше, чем их старый сайт! ).

Кнопка скрыта на рабочем столе и становится выпадающим меню гамбургера на мобильном телефоне (каждая <span class = "icon-bar"> - это строка в гамбургере).

<div class = "navbar-header"> <button type = "button" class = "navbar-toggle collabsed" data-toggle = "collapse" data-target = "# bs-example-navbar-collapse-1" aria- extended = "false"> <span class = "sr-only"> Переключить навигацию </ span> <span class = "icon-bar"> </ span> <span class = "icon-bar"> </ span> <span class = "icon-bar"> </ span> </ button> <a class = "navbar-brand" href = "#"> Balance Web Development </ a> </ div>

Остальная часть кода представляет собой неупорядоченный список, выровненный по правому краю, который служит как нашим рабочим, так и мобильным меню.

Я решил, что хочу один из тех больших, занимающих много места, привлекающих внимание заголовков, который в терминах Bootstrap называется jumbotron. Здесь не так много всего, только jumbotron с контейнером и копией.

<div class = "jumbotron"> <div class = "container"> <h1> Готов. Задавать. Код. &lt;/ h1> <p> Готовы ли вы подкрепить свое кросс-совместимое модное слово? Мы нахальные, ровные и семантические, так чего же вы ждете? </ p> <br /> <p> <a class = "btn btn-primary btn-lg" href = "#" role = "button"> Загрузить бесплатную пробную версию »</ a> <a class =" btn btn -primary btn-lg "href =" # "role =" button "> Подробнее» </ a> </ p> </ div> </ div>

Есть дополнительное пространство, которое нам не нужно, но я хочу посмотреть, как далеко Bootstrap сможет нас продвинуть без переопределения стилей. Как вы можете видеть, у нас уже есть довольно хороший, адаптируемый макет без написания ни одной строки CSS.

сетка

Последнее, что я сделаю, это добавлю некоторый основной контент, который будет в виде сетки. Сетки рядные ...

которые содержат столбцы.

<div class = "row"> <div class = "col-md-6"> </ div> <div class = "col-md-6"> </ div> </ div>

Bootstrap работает в системе с 12 колонками, поэтому, если вы добавите до 12, вы получите золотую награду. Приведенный выше пример будет содержать два столбца шириной 50% (6/12), которые будут складываться на мобильном устройстве и станут шириной 100%.

<div class = "container"> <div class = "row"> <div class = "col-md-4"> <span class = "glyphicon glyphicon-cloud" aria-hidden = "true"> </ span> <h3> Cloud Computable </ h3> <p> Donec id elit non mi porta gravida at eget metus. Fusce Dapibus, Tellus AC Cursus Commodo, Cortor Mauris Condimentum Nibh. </ p> </ div> <div class = "col-md-4"> <span class = "glyphicon glyphicon-floppy-disk" aria-hidden = "true"> </ span> <h3> Обратная совместимость < / h3> <p> Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem Ipsum Dolor. </ p> </ div> <div class = "col-md-4"> <span class = "glyphicon glyphicon-console" aria-hidden = "true"> </ span> <h3> Без графического интерфейса </ h3 > <p> Vestibulum id ligula porta felis euismod semper. Fusce Dapibus, Tellus AC Cursus Commodo, Cortor Mauris Condimentum Nibh. </ p> </ div> </ div> </ div>

Здесь вы можете видеть, что у меня есть три столбца с четырьмя из двенадцати, и при 3 x 4 = 12 все работает.

Иконки

Я также добавил в несколько glyphicons для украшения. Glyphicons - это встроенный набор иконок, который поставляется с Bootstrap. Если вы не загружаете свои шрифты или перемещаете их в другой каталог, эти значки не будут работать.

<span class = "glyphicon glyphicon-floppy-disk" aria-hidden = "true"> </ span>

Использование glyphicon всегда будет тем же кодом, и только класс glyphicon-floppy-disk изменится.

Теперь я доволен основой моего макета.

Добавление пользовательских стилей в Bootstrap

Неплохо для того, чтобы зайти так далеко, не касаясь линии стиля. Это профессиональный, отзывчивый и удобный браузер. Это определенно не творческий или уникальный. После закладки фундамента вы захотите добавить свой собственный дизайн.

Если вы знаете LESS или Sass, вы можете поиграть в Обширная область настройки Bootstrap и загрузите свою собственную версию Bootstrap. Мы используем «ванильный CSS», то есть CSS без препроцессора. К счастью, вы можете просто добавить дополнительную таблицу стилей ниже ядра Bootstrap

Не модифицируйте ядро ​​Bootstrap - вам гораздо лучше переопределить существующие стили.

<link href = "css / bootstrap.min.css" rel = "таблица стилей" /> <link href = "css / custom.css" rel = "таблица стилей" /> <link href = "https: //fonts.googleapis .com / css? family = Montserrat: 400,700 "rel =" stylesheet "type =" text / css "/>

Я добавил ссылку на шрифт Google под названием Монсеррат , Если вы никогда раньше не использовали Google Font, все, что вам нужно сделать, это добавить таблицу стилей шрифта к вашей голове и изменить семейство шрифтов для вашего желаемого элемента.

Теперь мы наконец-то начали укладку. Всего через несколько минут я смогу превратить мой скучный, общий макет Bootstrap в веселый, плоский макет. Во-первых, я собираюсь избавиться от этого надоедливого пространства между navbar и jumbotron.

.navbar {margin-bottom: 0; }

Несколько простых стилей для основных тегов. Я загружаю шрифт Montserrat на всю страницу, я выделил жирным шрифтом заголовки и сделал фон темным, а текст - светлым.

body {background: # 3e4649; цвет: # f7f7f7; семейство шрифтов: «Монтсеррат», без засечек; } h1, h2 {font-weight: bold; } p {font-size: 16px; цвет: #cdcdcd; }

Я собираюсь сделать jumbotron зеленым и центрированным.

.jumbotron {справочная информация: # 27a967; белый цвет ; выравнивание текста: по центру; } .jumbotron p {color: white; размер шрифта: 26 пикселей; }

Я собираюсь превратить кнопки в «призрачные кнопки», которые являются прозрачными кнопками с рамкой. Я также добавляю поля, чтобы они правильно складывались на мобильных устройствах.

.btn-primary {color: #fff; цвет фона: прозрачный; цвет бордюра: белый; нижнее поле: 5 пикселей; } .btn-primary: hover {color: # 27a967; цвет фона: белый; цвет бордюра: белый; }

Я собираюсь сделать навигационную панель другого оттенка темного, сделать ссылки светлее и изменить цвет фона при наведении.

.navbar-inverse {background: # 2e2f31; граница: 0; } .navbar-inverse .navbar-nav li a {color: # f7f7f7; размер шрифта: 16 пикселей; } .navbar-inverse .navbar-nav li a: hover {background: # 27a967; }

У выпадающего меню есть свои классы, поэтому я также собираюсь изменить цвет фона и добавить немного отступов.

.dropdown-menu {background: # 2e2f31; радиус границы: 0; граница: 0; } .dropdown-menu li a {padding: 10px; } .navbar-inverse .navbar-nav .dropdown-menu li a: hover {background: # 2c463c; }

Вернувшись в свой HTML, я собираюсь обернуть тег раздела вокруг моей сетки и назвать его призывом к действию. Я также собираюсь создать класс с большим количеством глифов и добавить его к каждому значку.

<section class = "призыв к действию"> <span class = "глификон-глификон-облако-глификон-большой" aria-hidden = "true"> </ span> </ section>

Последними штрихами в моем коде будут центрирование нижнего вызова, добавление поля margin-bottom к тегам p, чтобы они правильно складывались на мобильных устройствах, и увеличение моих глификонов.

.call-to-action {text-align: center; }. призыв к действию p {margin-bottom: 30px; семейство шрифтов: без засечек; } .glyphicon-large {font-size: 100px; }

С одной маленькой страницей кода я полностью изменил свой макет. Отсюда вы можете быть гораздо более креативным.

Конечно, я также выложил демо как Codepen.

Заключение

Надеюсь, вы узнали немного о Bootstrap и фреймворках из этого урока. Это едва ли царапает поверхность того, на что способен Bootstrap - но вы можете взять это отсюда. Документация огромна, и если вы когда-нибудь не сможете понять, как что-то сделать, скорее всего, быстрый поиск в Google укажет вам правильное направление.

Я бы посоветовал вам поиграть и создать собственные рамки для личных проектов, которые помогут вам лучше понять адаптивный дизайн.

Я пишу о JavaScript, программировании и дизайне интерфейса. Присоединяйтесь к более чем 6000 других разработчиков, чтобы не отставать от моего контента. Отписаться всякий раз, когда. Никогда не спам, реклама или партнерские ссылки.

Похожие

Комментарии