Вредоносное ПО (malware) - это назойливые или опасные программы,...
На этом уроке Вы научитесь подключать платформу Twitter Bootstrap 3 к сайту, а также узнаете, из каких файлов она состоит.
Формы распространения платформы Twitter BootstrapДля изучения платформы Twitter Bootstrap необходимо иметь:
Скомпилированная и минимизированная версия платформы Twitter Bootstrap 3 - это основная форма поставки этой платформы, которую выбирают большинство веб-разработчиков. Данная форма поставки отличается простотой её подключения к вашему сайту, так как она содержит предварительно подготовленные и минимизированные файлы CSS и JavaScript, а также иконки в формате шрифта.
Версия платформы с исходными кодами включает в себя, кроме предварительно откомпилированных файлов CSS и JavaScript, ещё исходные коды этой платформы (файлы Less и JavaScript), документацию на английском языке, различные примеры, информацию о лицензии и многое другое.
На этом уроке мы рассмотрим подключение предварительно скомпилированной и минимизированной версии, которую можно скачать по ссылке приведённой выше. В этой форме поставке платформы Twitter Bootstrap 3 для нас имеют наибольший интерес именно минимизированные (сжатые) версии скомпилированных файлов, так как они имеют меньший размер и, следовательно, увеличивают скорость загрузки веб-страниц сайта.
Но перед тем как перейти к подключению платформы Twitter Bootstrap к веб-странице необходимо рассмотреть её структуру на файловом уровне.
Файловая структура платформы Bootstrap 3После загрузки, предварительно скомпилированной и минимизированной версии Bootstrap 3 на компьютер, ее необходимо распаковать с помощью любого архиватора в каталог вашего веб-проекта.
Если эту папку рассмотреть, то мы увидим, что платформа Twitter Bootstrap состоит из 3 каталогов ("CSS", "FONTS" и "JS") и файлов.
Bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff
Файлы платформы представлены в 2 видах:
- 1 вид - это предварительно скомпилированные файлы CSS и JavaScript (bootstrap.css , bootstrap-theme.css , bootstrap.js)
- 2 вид - это предварительно скомпилированные и минимизированные (сжатые) файлы CSS и JavaScript (bootstrap.min.css , bootstrap-theme.min.css , bootstrap.min.js)
2 вид файлов более предпочтительно использовать для сайта, так как они содержат точно такой же код, как и файлы 1 вида, но в сжатом состоянии. Следовательно, сайты, которые используют 2 вид файлов платформы Twitter Bootstrap 3, загружаются быстрее.
Кроме этих файлов, в данную поставку входят ещё 4 файла шрифта "Glyphicons" (glyphicons-halflings-regular.eot , glyphicons-halflings-regular.svg , glyphicons-halflings-regular.ttf , glyphicons-halflings-regular.woff), которые отличаются друг от друга только форматом, в котором хранится данный шрифт. Шрифт "Glyphicons" состоит из 200 иконок из набора "Glyphicon Halflings".
Внимание: для работы скриптов платформы Twitter Bootstrap 3 (bootstrap.js и bootstrap.min.js) необходимо иметь подключенную последнюю версию библиотеки jQuery.
Создание веб-страницы на HTML 5 и подключения к ней платформы Twitter Bootstrap 3Итак, мы рассмотрели структуру и назначение файлов платформы Twitter Bootstrap 3. Теперь пришло время подключить данную платформу с помощью скомпилированных и минимизированных файлов к веб-странице. Рассмотрим этот процесс пошагово. В результате наших действий мы хотим получить веб-страницу на HTML 5, к которой подключена платформа Twitter Bootstrap 3. Для демонстрации того что платформа работает, создадим в данной веб-странице кнопку, при нажатии на которую будет показываться всплывающая панель с сообщением.
Шаг 1. Создание HTML страницы
Откройте ваш любимый редактор кода и создайте файл с именем index и расширением html . Наберите или вставьте в текстовый редактор, следующий код:
DOCTYPE html > Basic Bootstrap Template Нажмите на кнопку
Шаг 2. Подключение платформы Bootstrap 3 к веб-странице
Чтобы подключить платформу Twitter Bootstrap 3 к веб-странице необходимо выполнить следующее:
Примечание: файлы JavaScript лучше всего подключать перед закрывающим тегом body (т.е. перед ), так как это повысит скорость загрузки основного контента веб-страницы.
DOCTYPE html > Basic Bootstrap Template Нажмите на кнопку $ (function () { $ ("" ).popover() })Шаг 3. Сохранение веб-страницы и проверка работы компонента Bootstrap
После создания веб-страницы, к которой подключена платформа Twitter Bootstrap 3, её необходимо сохранить в файл с расширением html (Например: "index.html"). После этого созданную веб-страницу необходимо открыть в веб-браузере и проверить работу компонента Bootstrap "Popovers".
Примечание: При сохранении файла веб-страницы в текстовом редакторе обратите внимание на его расширение, которое должно быть "html". Так как некоторые текстовые редакторы, такие например как блокнот, автоматически сохраняют файлы с расширением "txt".
Файловая структура проекта, в основу которого положена платформа Twitter Bootstrap 3:
Демонстрация работы компонента Bootstrap "Popovers":
Нажмите на кнопку
Используя возможности фреймворка Bootstrap, Вы сможете самостоятельно и быстро верстать современный сайт.
Вёрстка сайта - дело не сказать чтобы очень сложное, но довольно муторное. Помимо того, что нужно оснастить сайт требуемым функционалом, нужно ещё чтобы он был красивым! Такую красоту, обычно, делает дизайнер в Фотошопе. А задача верстальщика при этом сделать так же как на картинке. И вот для этого уже приходится попотеть...
Где-то с год назад я работал в команде с одним дизайнером над созданием сайта. И он после просмотра готового макета задал мне вопрос: "А ты что, не используешь сетку?". В Фотошопе он, оказывается, всё рисовал по направляющим, чтобы было ровно, однако в обычном HTML подобных средств выравнивания нет.
И вот тогда я и решился познакомиться с технологией, которая уже не первый год была у многих на устах - Bootstrap .
Зачем нужен BootstrapЧтобы понять, нужен ли Вам Bootstrap, необходимо сначала понять, что это такое и для чего. Кратко отвечая на вопрос, скажу, что Bootstrap - это набор стилей, скриптов (а в 3-й версии ещё и готовых символьных шрифтов), которые можно применять для быстрой вёрстки различных блоков сайта. При этом большинство этих блоков изначально поддерживают адаптивность и прилично выглядят на экранах мобильных устройств без каких-либо дополнительных действий с Вашей стороны.
Чтобы лучше понять, что же может Bootstrap и для чего конкретно его можно применить, предлагаю Вам взглянуть на следующую схему:
Сразу стоит сказать, что, несмотря на довольно хороший функционал, в Bootstrap часто не хватает некоторых популярных средств. Например, в нём нет:
- сетки для вертикального выравнивания блоков (но есть свойства для выравнивания текстовых элементов);
- свойств для адаптивного масштабирования текста (нужно использовать сторонние библиотеки или собственные механизмы);
- средств для вёрстки полноэкранных лэндингов;
- некоторых популярных плагинов (нормального слайдера, вертикальных табов, поэкранной прокрутки и т.п.);
- ряда свойств для позиционирования.
Справедливости ради следует сказать, что недавно вышел Bootstrap 4, который довольно сильно отличается по реализации и функционалу от более распространённой версии Bootstrap 3. Однако, в рамках данной статьи мы рассмотрим именно проверенную временем и стабильную 3-ю версию (последняя на данный момент - 3.3.7).
Установка BootstrapЧтобы начать работу с Bootstrap его нужно правильно подключить в Ваш HTML-документ. Сделать это можно несколькими способами.
Внешнее подключение через Bootstrap CDNКак в своё время было с популярной библиотекой jQuery (кстати, её наличие тоже обязательно), Bootstrap на сегодняшний день тоже обзавёлся собственной системой доставки контента (CDN). Это означает, что Вам можно ничего не качать для его установки - достаточно просто прописать ссылки на нужные Вам компоненты в Вашем HTML-документе.
Минимально необходимым набором компонентов для работы Bootstrap является его таблица стилей и файл скриптов (bootstrap.css и bootstrap.js, соответственно). Стили Бутстрапа нужно подключить в секции перед объявлением своих стилей (style.css), а скрипты можно отправить в "подвал" сайта для ускорения загрузки страницы. Кстати, для этой же цели лучше использовать минифицированные версии файлов, ссылки на которые выглядят так:
Рекомендуется также подключать CSS-файл темы , в котором содержатся уникальные стили оформления Вашей версии Bootstrap (о том, как её сделать речь пойдёт немного ниже). Его следует также поместить перед объявлением Вашей основной таблицы стилей, но после общих стилей Бутстрапа. Ссылка на подключение темы выглядит так:
В итоге Ваш файл index.html с подключённым Bootstrap 3 может выглядеть примерно следующим образом (можете скопировать его и сразу начать работать):
Bootstrap-шаблон
Привет, Мир! Я - заголовок на Bootstrap!
Установка при помощи менеджеров пакетовЕсли Вы дружите с такой полезной вещью как консоль, то, наверняка, Вы хотя бы слышали о том, что существуют специальные менеджеры пакетов, которые позволяют автоматически устанавливать на Ваш сайт различные скрипты и даже целые CMS. Bootstrap сегодня добавлен в большинство репозиториев пакетных менеджеров, поэтому для его установки будет достаточно выполнить всего одну команду:
| Bower | $ bower install bootstrap |
| npm | $ npm install bootstrap@3 |
| Composer | $ composer require twbs/bootstrap |
Для экспериментов с Bootstrap вполне подойдёт первый вариант с внешним подключением. Однако, для реализации практических задач на реальных сайтах лучше, на мой взгляд, свести к минимуму количество внешних библиотек. Поэтому лучше скачать Бутстрап и подключить его локально. А сделать это можно двумя способами.
Способ первый - самый очевидный. Заходим на официальную страницу загрузки и жмём кнопку "Download Bootstrap" :
У Вас скачается архив, который будет содержать три папки (css, fonts и js) с файлами. Распакуйте их в отдельную директорию и создайте в ней же свой index.html, к которому можно будет подключить все стили, скрипты и шрифты. В качестве основы для содержимого HTML-документа можете взять вышеприведённый код с заменой ссылок на компоненты Bootstrap с внешних на локальные:
Кстати, в папках Bootstrap по умолчанию имеется несколько лишних файлов, которые можно убрать для экономии места. Например, в папке css можно удалить все файлы с расширением.map, а также неминифицированные (без приписки.min) файлы темы и стилей (останется только два файла: bootstrap.min.css и bootstrap-theme.min.css). Из папки js удаляем всё, кроме файла bootstrap.min.js. Шрифты (если они нужны) не трогаем. В итоге у Вас должна получиться такая структура файлов:
Данный способ хорош всем кроме того, что в стандартной поставке Bootstrap могут быть включены не все плагины и используется только стандартное оформление в плане стилей. Если же Вы делаете не просто тестовую страничку, а реальный сайт, то Вам, наверняка, потребуется многое изменить в стандартном шаблоне оформления.
Так вот, чтобы потом не копаться в файлах, Вы можете заранее подогнать тему Bootstrap под свои требования. Для этого от Вас потребуется знание английского и понимание хотя бы базовых принципов вёрстки на CSS. Чтобы создать собственную сборку Bootstrap идём на специальную страницу и заполняем многочисленные поля в форме, которая позволяет задать свои стили буквально для любого элемента на Вашем будущем сайте:
Занятие это довольно небыстрое, но значительно быстрее, нежели ручная правка готового кода стилей и скриптов. На мой взгляд, стоит потратить лишние минут 20-40, чтобы впоследствии сэкономить себе пару часов поисков параметров, которые нужно будет изменить.
Когда все правки внесены, жмите кнопку "Compile and Download" в самом низу и Ваша кастомная сборка Бутстрапа скачается в виде архива. Кстати, помимо уже знакомых нам папок, данная версия архива будет содержать ещё и файл config.json . Он содержит в себе список всех переменных, которые мы правим на странице настроек. Поэтому в будущем Вы можете загрузить этот файл и сразу скачать настроенный Bootstrap без необходимости вводить все параметры вручную!
Как работать с документациейИтак, на данный момент мы уже имеем готовый HTML-документ с подключённым к нему Bootstrap. Но мы пока не знаем, как с этим Бутстрапом работать... Чтобы это узнать, нужно ознакомиться с весьма обширной документацией на официальном сайте или его русскоязычной версии (есть и ещё один неплохой русскоязычный перевод).
На мой взгляд, лучше всё же пользоваться оригинальной документацией, поскольку она новее и не содержит никаких двусмысленностей в отличие от переводов. К тому же структура основного меню на официальном сайте более логична - основные разделы документации вынесены в левую часть, а различные дополнительные в правую.
Основными разделами справки по Bootstrap являются:
- Getting started (Основы) - содержит информацию о способах подключения Bootstrap к Вашему проекту и несколько шаблонов, которые можно использовать для начала работы;
- CSS - описывает все существующие классы CSS для Bootstrap и даёт примеры их применения в готовом коде;
- Components (Компоненты) - данный раздел даёт рекомендации по принципам использования специфических для Bootstrap компонентов;
- JavaScript - знакомит нас с примерами использования скриптов Bootstrap и его плагинов.
Дополнительно имеются также разделы с готовыми темами оформления, выставкой работ на Bootstrap, вакансиями, блогом (а на русскоязычной версии ещё и полноценным форумом), но это уже разделы вторичные. Для освоения Bootstrap нам нужно будет сосредоточить своё внимание на вышеупомянутых.
Документация весьма обширна и в ней по началу можно очень легко запутаться. Чтобы этого не произошло - главное понять структуру и принцип описания материала в ней. Классической инструкции здесь, по-сути, нет - всё изложено в конкретных примерах. При этом для каждого примера может иметься несколько вариантов с описанием различий и условий применения.
Структурно описание происходит в том же порядке, в котором обычно происходит вёрстка. То есть, в начале описываются общие сущности, затем конкретизируются элементы по принципу сверху вниз. Например, в разделе CSS всё начинается с описания доктайпа, МЕТА-тегов и заканчивается частными случаями использования препроцессоров Less и Sass.
Для упрощения поиска нужной сущности можно использовать боковое меню в правом сайдбаре. Увы, поиск по документации здесь не предусмотрен...
Одним из самых важных моментов пр освоении Bootstrap является понимание его сетки . Сетка Bootstrap являет собой нечто вроде готовых ячеек, в которые можно вкладывать любой контент. При этом содержимое этих "ячеек" выравнивается нужным нам образом и при изменении размеров экрана корректно адаптируется под новую его ширину.
Информацию о сетке мы можем найти в разделе справки CSS - Grid system :
Здесь всё расписано довольно обстоятельно, однако, если кратко и более понятно, то сетку Bootstrap можно сравнить с использовавшимся когда-то принципом табличной вёрстки. Здесь так же нужно создать контейнер (аналог таблицы -
| ).
Общий алгоритм работы с сеткой Bootstrap можно свести к следующим шагам: Всего в Bootstrap существует 4 базовых класса колонок , которые можно комбинировать между собой для лучшего управления адаптивностью на разных экранах:
На практике чаще всего применяют класс.col-md- с цифрой, указывающей на 1/12 часть от общей ширины экрана. Например, чтобы сверстать одну колонку на весь экран, мы применим класс.col-md-12. Для двух колонок по пол-экрана - два блока с классами.col-md-6. Для трёх колонок, соответственно, три с.col-md-4 и т.д. Кстати, необязательно чтобы колонки были равными между собой по размерам. Вполне можно комбинировать (в пределах 12 штук, конечно) ширину, например, .col-md-4 и.col-md-8 или.col-md-2, .col-md-3 и.col-md-7. Можно даже не использовать всю ширину, сделав, к примеру, в ряде лишь одну колонку, допустим, .col-md-5:
Колонки можно сдвигать по отношению к начальной сетке координат по горизонтали или отображать не по порядку. Например, чтобы разместить две колонки.col-md-4 по центру страницы мы можем применить сдвиг, добавив к нашей первой блоку-колонке ещё один класс .col-md-offset- 2 ((12-(4+4))/2=2). А, чтобы изменить порядок, добавляют классы.col-md-push- (для сдвига колонки на нужный интервал) и.col-md-pull- (для перетаскивания колонки к началу строки):
Наконец, колонки можно вкладывать внутрь других колонок в строке. Причём делать это можно двумя способами: с вложением в новый контейнер и с вложением только в новую строку. Если Вы вложите в колонку новый контейнер с набором собственных строк и колонок, то к нему будут применены все стили, характерные для контейнера. При добавлении же только строки, стили сохраняются как для колонки (не будет лишних отступов и т.п.):
Как видим, позиционировать блоки-колонки в Bootstrap не так уж и сложно. Сетка - весьма удобное изобретение, которое "убивает" сразу двух "зайцев": делает Вашу вёрстку аккуратнее с точки зрения дизайнеров и автоматически добавляет адаптивности Вашей веб-страничке. Единственное, что следует помнить, нельзя нарушать структуру вложений, например, напрямую добавлять колонку в контейнер или внутрь другой колонки без объявления новой строки. Дополнительно прочесть о работе со стилями в Bootstrap Вы сможете в разделе документации CSS . А по сетке, по сути и всё. Движемся дальше. Компоненты BootstrapПомимо сетки, очень полезной фишкой Bootstrap является целый набор стандартных компонентов, которые используются в большинстве современных сайтов. Фактически пользуясь лишь этими компонентами, Вы можете быстро сверстать полноценный сайт с адаптивной панелью меню, активными "хлебными крошками", различными баннерами и информерами, кнопками и выпадающими менюшками, пагинацией и даже готовыми иконочными шрифтами! И, что характерно, всё это добро создаётся, как и сетка, простым добавлением к нужному DIV-у требуемых классов! Правда, кое-где, нужно также соблюдать структуру вложенности блоков (например, для создания меню), но особой сложности, я думаю, это не составит. Тем более, что на странице с описанием компонентов имеется достаточно примеров. Здесь же мы рассмотрим только некоторые частные случаи. Работа с иконочным шрифтомBootstrap 3 имеет в своей базовой поставке неплохой иконочный шрифт - Glyphicons. Смысл подобных шрифтов в том, что вместо буквенных символов они содержат в себе различную векторную графику. В отличие от обычных растровых картинок, изображения иконочных шрифтов прекрасно масштабируются без потери качества, поэтому они и получили такое распространение с популяризацией адаптивной вёрстки. В новом Bootstrap 4 иконочного шрифта пока нет (возможно его заменят более популярным FontAwesome), но в нашей 3-ей версии шрифт есть и его можно использовать. Главным же требованием к такому использованию является вставка нужного символа посредством отдельно выделенного под него HTML-элемента . К примеру, нам нужно вставить рядом с некой цифрой символ русского рубля. В таблице со списком иконок шрифта Glyphicons под его изображением копируем название класса (а точнее сразу двух) "glyphicon glyphicon-ruble" и применяем его к тегу , который вставляем после нашей цифры: Стоимость - 999 Однако, часто требуется не просто вставить ту или иную иконку, но и изменить, например, её размер и цвет. Для этого в Bootstrap рекомендуется не переназначать стандартные стили для нужного класса с символом, а дописать к списку классов SPAN, который его вставляет, ещё один дополнительный класс с нужными параметрами оформления или дописать стили через атрибут style . Например, так: Myrub{font-size:10px; color:green;} Стоимость - 999 Стоимость - 999
Как уже говорилось выше, Bootstrap имеет довольно много различных реализаций всяческих блоков текста. Практически все они реализуются простым добавлением к нужному DIV-у соответствующего класса, но имеют визуальные различия. Для сравнения предлагаю одну и ту же фразу с заголовком, текстом и кнопкой оформить в виде различных типов блоков: Заголовок Кнопка
Практически все типы блоков, кроме, разве что, джамботрона и замечаний, никак не влияют на стилизацию содержимого самого блока. Изменяется лишь фон, обрамление и немного смещается позиция контента. Внутри джамботрона (класс - jumbotron) весь текст выглядит немного больше от стандартного размера. Данный тип блока иногда называют баннером и часто используют в качестве заголовочного экрана-слайда в лэндингах (популярные одностраничные сайты). Он позволяет выделить основную информацию, сфокусировав на ней внимание пользователя как раз за счёт небольшого увеличения шрифтов. Наилучшего же эффекта можно достичь, если дополнить класс джамботрона классом.text-center, который выровняет содержимое баннера по центру страницы! Заголовок Кнопка Кстати, особенностью джамботрона является то, что его можно растянуть во весь экран без отступов и рамки. Для этого нужно немного нарушить правила вёрстки Bootstrap и вынести блок с классом.jumbotron за пределы всех строк и контейнеров. Вместо этого контейнер со строками и ячейками нужно будет разместить внутри полученного полноэкранного баннера!
Заголовок Кнопка
Жалко только, что в Bootstrap нету классов для вертикального выравнивания содержимого того же джамботрона и увеличения блока на весь экран по высоте. Цены бы ему не было тогда:) Но, всё это можно доделать своими руками при необходимости. Своим не совсем стандартным оформлением интерес также представляют замечания (alerts) и панели (panels). Замечания добавляются стандартно классом.alert, однако, для уточнения типа уведомления добавляется ещё один из четырёх возможных классов: Уведомление типа "Успех" (зелёный фон) Уведомление типа "Информация" (голубой фон) Уведомление типа "Предупреждение" (жёлтый фон) Уведомление типа "Опасность" (красный фон) Что касается панелей , то здесь разнообразие ещё больше! Стандартно панель добавляется классом .panel , однако, как и замечание, требует после себя класса, который уточнит тип панели (как правило, .panel-default ). Но и это ещё не всё! Как минимум, наша панель должна иметь вложенный блок с классом.panel-body для размещения основного контента, а, как максимум, может иметь собственный заголовок (.panel-heading с опциональным классом.panel-title внутри) и футер (.panel-footer ): Заголовок со специальным классом.panel-title Основной контент панели Футер панели
Кроме того, панели в Bootstrap могут быть нестандартными и различаться визуальным оформлением в соответствии с контекстом их использования. Контексты, в основном, совпадают с контекстами алертов, но имеют ещё и пятый вариант в ярко-синих тонах- .panel-primary . Кроме того, аналогично замечаниям, существуют классы.panel-success, .panel-info, .panel-warning и.panel-danger:
До сих пор мы рассматривали только относительно простые шаблоны кода Bootstrap. Однако, в нём есть готовые решения для создания довольно сложных элементов интерфейса. Они, как правило, требуют использования JavaScript-плагинов, которые можно получить, собрав собственную сборку Bootstrap. И сейчас мы рассмотрим довольно популярный элемент, который принято называть каруселью или слайдером. Он позволяет циклично прокручивать внутри себя различный контент в виде изображений с поясняющими подписями или блоков текста. В плане размещения в коде карусель Bootstrap напоминает джамботрон - она занимает всю ширину контейнера, в который вложена или страницы, если используется вне контейнеров. Взглянём на немного модифицированный и переведённый код карусели с официального сайта: СЛАЙД 1 СЛАЙД 2 СЛАЙД 3 Назад Вперёд Думаю, из комментариев Вам понятно, что, где и как объявляется (единственный нюанс - адреса картинок Вам нужно поменять на свои, поскольку у меня они пустые). Если Вы скопируете себе вышеприведённый код, то у Вас получится вот такая неплохая карусель, которую можно потом довести до нужного вида дополнительными классами оформления:
Управлять поведением карусели можно при помощи jQuery (если Вы знакомы с его синтаксисом) или посредством data-атрибутов , которые применяются к блоку, где инициируется наша карусель. В примере выше у нас есть атрибут, задающий скорость смены слайдов в 5000 миллисекунд (5 сек.) - data-interval . Кроме него Вы можете менять и другие опции:
Частой задачей в разработке также является создание модальных окон. В веб-исполнении - это блоки, которые отображаются поверх основного контента страницы с затемнением фона. Bootstrap позволяет создавать такие псевдоокна довольно быстро и просто. Вот пример простейшего полностью функционального модального окна: Показать окно × Заголовок модального окна Какой-то текст:) Закрыть Сохранить
Для вызова модального окна нужна кнопка, ссылка или другой кликабельный элемент, который должен иметь два обязательных data-атрибута: data-toggle со значением "modal " (обозначает поведение кнопки вызова модали) и data-target , значением которого должен быть идентификатор блока, содержащего разметку модального окна (для ссылки можно использовать в этой роли стандартный href ). Сам блок модального окна должен обязательно иметь:
В общем, структура - довольно логичная и простая. Главное - соблюдать её не забывать об обязательных атрибутах. ВыводыВ рамках одной статьи, увы, нельзя коснуться всех аспектов работы с Bootstrap. Данный фреймворк постоянно развивается и совершенствуется, обрастая всё новыми возможностями. Именно поэтому за последние годы он стал одним из самых популярных в сайтостроении. Когда я писал эту статью, в первую очередь я хотел показать основные принципы работы с Бутстрапом и более понятным языком объяснить наиболее часто используемые в нём сущности. Однако, если Вы что-то не поняли, рекомендую Вам попробовать воспользоваться одним из визуальных редакторов Bootstrap . Они наглядно продемонстрируют Вам все возможные элементы и позволят быстро получить собственную настроенную его сборку. Конечно, в Bootstrap есть далеко не всё, что нужно веб-разработчику в повседневной работе. Однако, фреймворк можно настраивать и дорабатывать под свои нужды, а также дополнять сторонними плагинами, которые обычно интегрируются в проект без особых проблем. Поэтому желаю Вам успешного освоения Бутстрапа для экономии своего драгоценного времени! P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного. Как же установить bootstrap? Для начало нам нужно заполучить дистрибутив на официальном сайте бутсрап . На странице руководства будет предложено несколько вариантов установки: Скачать версию production (конечный продукт который можно использовать ) и версию development ( содержит все исходники) Различие между этими версиями в том, что версия production уже скомпилирована и оптимизирована, то есть полностью готова к употреблению, а версия для разработки, наоборот, содержит исходный код, который нужно будет скомпилировать. Добавлю, что версию для разработки можно установить с помощью пакетных менеджеров, таких как: bower или composer, а версию для production - при помощи CDN.После того, как мы скачали нужный нам дистрибутив и распаковали его, в нашем случае это production версия, рассмотрим структуру приложения. И так у нас есть три каталога: css, js, и fonts. Bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2 В каталоге css лежат минифицированные версии css (обычно несут в себе префикс min) и не минифицированные, которые удобно читать и можно использовать в качестве исходного кода. Также к каждому файлу прилагается карта источника (кода) *.map (требуются для отладки в браузере) . bootstrap.css - это основной файл, в нем можно найти всё что делает bootstrap таким крутым и популярным css фреймвороком. bootstrap-theme.css - это небольшая тема, которая переопределяет стили основного файла и добавляет новое отображение для некоторых компонентов (хорошей практикой считается не затрагивать исходный код библиотек и фреймворков, это позволит избежать массы проблем, если вдруг мы решим обновиться) так что bootstrap-theme.css можно использовать как хорошую базу. JS включает также две версии файлов (минифицированная и нет) и содержит в себе стандартные плагины (карусель, модальные окна и т.д.) , а также небольшой набор инструментов, более подробную информацию можно узнать на официальном сайте бутстрапа в разделе javascript . Теперь можно приступить непосредственно к подключению файлов bootstrap. Создадим в корне нашего приложения index.html и зададим базовую разметку, добавив в неё наши файлы: Bootstrap 101 Template Hello, world! Перед закрывающимся тегом добавим стили: bootstrap.min.css и bootstrap-theme.min.css (важно! файл со стилями, который будет переопределять стили другого файла, нужно размещать последним, поэтому файл bootstrap-theme.min.css расположен именно в конце) . Что касается скриптов: если вы заметили, добавлена библиотека jQuery, так как у bootstrap есть жесткая зависимость, и плагины просто не смогут функционировать. Порядок подключения будет следующим: jquery.min.js, bootstrap.min.js Почему именно в таком порядке? Все просто: плагины нуждаются в jquery, как машины в топливе, поэтому сначала нужно заправить авто. Последний нюанс, подключать скрипты лучше всего в конце документа, перед закрывающим тегом , чтобы браузер не тратил время на загрузку и выполнение, а быстро отрисовывал документ. Вот собственно и все, осталось лишь наполнить сайт и добавить необходимые компоненты, для это используйте Перед загрузкой убедитесь, что у вас имеется редактор кода (мы рекомендуем Sublime Text 3) и некоторые знания в области HTML и CSS. Здесь мы не будем затрагивать исходные файлы, но скачать и изучить их Вы всегда можете сами. Мы сфокусируем наше внимание на начале работы с компилированными файлами Bootstrap. Загрузка компилированных файловСамый быстрый способ начать работу: получить компилированные и минимизированные версии наших CSS, JS, и изображений. Никаких документов или исходных файлов. 2. Структура файловВ загруженных файлах вы обнаружите следующую структуру и содержание, сгруппированные логически по общим свойствам и содержащие обе версии: минимизированную и компилированную. После загрузки распакуйте сжатую папку, чтобы увидеть структуру (компилированого) Bootstrap. Она должна быть примерно такой: bootstrap / +-- css / ¦ +-- bootstrap . css ¦ +-- bootstrap . min . css +-- js / ¦ +-- bootstrap . js ¦ +-- bootstrap . min . js +-- img / ¦ +-- glyphicons - halflings . png ¦ +-- glyphicons - halflings - white . png L-- README . mdЭто основная форма Bootstrap: компилированные файлы для быстрого и легкого использования почти в любом Web-проекте. Мы предоставляем вам компилированные CSS и JS (bootstrap.*), и также компилированные и минимизированные CSS и JS (bootstrap.min.*). Файлы изображений сжаты при помощи ImageOptim , приложения Mac для сжатия изображений в PNG. Пожалуйста, обратите внимание, что все плагины JavaScript требуют jQuery. 3. Что включеноBootstrap оснащен HTML, CSS и JS для всех видов работы, они все перечислены в категориях, которые вы можете найти в верхней части страницы . Разделы документов Поддерживаемые элементыОбщие стили для тела (body) для сброса типа и фона, стилей ссылок, сетки шаблонов и двух простых элементов разметки. Стили CSSСтили для общих элементов HTML: оформления, кода, таблиц, форм и кнопок. Также включает в себя Glyphicons , великолепный набор иконок. КомпонентыОсновные стили для простых компонентов интерфейса: вкладок и кнопок, панелей навигации, сообщений, заголовков страниц и др. Плагины JavascriptКак и компоненты, эти плагины Javascript являются интерактивными компонентами для всплывающих подсказок, информационных блоков, модальных компонентов и др. Список компонентовВсе вместе компоненты и плагины Javascript содержат следующие элементы интерфейса:
После короткого введения мы сфокусируем внимание на использовании Bootstrap. Для этого мы применим основной шаблон HTML, который включает все элементы, перечисленные в . Вот как выглядит типичный файл HTML : Чтобы сделать такой шаблон Bootstrap , просто присоедините соответствующие файлы CSS и JS: И все настроено! Добавив эти два файла, вы можете с помощью Bootstrap разрабатывать сайт или приложение. Рекомендуем почитать
Лучшие программы для восстановления данных с любых носителей информации.... 
Здравствуйте.Одна из самых распространенных причин, по которым тормозит... |
