ОСНОВНОЕ

WORDPRESS

Операционные системы

Базы данных

Фреймворк Bootstrap

Обычно чем больше у человека ума, тем меньше значения он ему придает (Л. Мерсье).

Bootstrap – Настройка окружающей среды

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
Bootstrap - Настройка окружающей среды

Попробуйте электронный вариант Bootstrap

Пример html кода на Bootstrap:
 

Очень легко установить и начать использовать Bootstrap. В этой главе будет рассказано, как загрузить и установить Bootstrap. Мы также обсудим файловую структуру Bootstrap, и продемонстрируем его использование на примере.

Скачивание Bootstrap

Вы можете скачать последнюю версию Bootstrap на сайте http://getbootstrap.com/. При нажатии на эту ссылку, вы можете увидеть экран, как показано ниже:

Bootstrap - Настройка окружающей среды

При нажатии на кнопку DownloadBootstrap, страница перенаправит на другую страницу. Здесь вы можете увидеть три кнопки:

Bootstrap - Настройка окружающей среды

  • Download Bootstrap – Щелкнув по этой кнопке, вы можете загрузить скомпилированную и уменьшенную версии Bootstrap CSS, JavaScript и шрифты. Нет документации или оригинальных исходных файлов кода не включены.
  • Download Source – При нажатии на нее, вы можете получить последний Bootstrap LESS и исходный код JavaScript непосредственно из GitHub.
  • Download Sass – При нажатии, вы можете получить последнюю Bootstrap LESS, Sass для легкого включения в Rails, Compass, или Sass только для проектов.

Если вы работаете с неоткомпилированным исходным кодом Bootstrap, вы должны скомпилировать файлы LESS для создания используемых CSS – файлов. Для компиляции LESS файлов в CSS, Bootstrap официально поддерживает только Recess, CSS Hinter Twitter, основанный на less.js.

Для лучшего понимания и простоты использования, мы будем использовать готовую версию Bootstrap на протяжении всего урока. По мере того как создаются файлы и вам не придется беспокоиться каждый раз об уменьшении, включая отдельные файлы для индивидуальной функциональности. На момент написания этой обучающей программы была загружена последняя версия (Bootstrap 3).

Файловая структура

Скомпилированный Bootstrap

После того, как загрузятся скомпилированные версии Bootstrap, извлеките файл ZIP, и вы увидите следующую структуру файлов/каталогов:

Скомпилированный Bootstrap

Как вы можете видеть, компилируются CSS и JS (bootstrap. *), а также скомпилированные и уменьшенные CSS и JS (bootstrap.min. *). Шрифты от Glyphicons включены, так как это дополнительная тема Bootstrap.

Исходный код Bootstrap

Если вы загрузили исходный код Bootstrap, то структура файла будет выглядеть следующим образом:

Исходный код Bootstrap

  • Файлы less/, js/, и fonts/ являются исходным кодом для Bootstrap CSS, JS, и значки шрифтов (соответственно).
  • Папка dist/ включает в себя все перечисленные в разделе загрузки скомпилированного выше.
  • docs-assets/, examples/, и все * .html файлы документации Bootstrap.

Шаблон HTML

Базовый шаблон HTML с использованием Bootstrap будет выглядеть следующим образом:

 

Здесь вы можете увидеть файлы jquery.js , bootstrap.min.js и bootstrap.min.css, которые включены, чтобы сделать нормальный HTM файл шаблона Bootstrapped. Просто убедитесь, чтобы включить библиотеку JQuery, прежде чем включать библиотеку Bootstrap.

Более подробная информация о каждом из элементов фрагмента кода выше будет обсуждаться в главе Bootstrap обзор CSS.

Пример

Теперь давайте попробуем пример использования шаблона выше.

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Простая логическая игра "Поймай кота". Задача игры окружить кота точками так, чтобы он не смог убежать с поля. Постигла неудача - начни игру снова!

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close