Как построить Bootstrap из исходников

👁 17 просмотров

Настройка инструментов

Bootstrap использует скрипты NPM для их построения. Наш package.json включает подходящие методы для работы с фреймворком, включающие компиляцию кода, запуск тестов и многое другое.

Используя систему построения Bootstrap можно запустить документацию локально, вам всего лишь нужно скачать исходники последней версии Bootstrap и Node.js. В следующих шагах предполагается, что вы готовы к подводным камням:

  1. Загружаем и устанавливаем Node.js, который будет необходим для управления зависимостями Bootstrap;
  2. Переходим в корень папки скачанных исходников /bootstrap  и выполняем команду npm install для установки наших локальных зависимостей, находящихся в списке файла package.json;
  3. Устанавливаем Ruby, устанавливаем Bundler при помощи команды gem install bundler, и в конце запускаем команду установки bundle install. Это должно установить все зависимости Ruby, такие как Jekyll и плагины.

Замечания для пользователей Windows. Необходимо читать это руководство для получения Jekyll и установить без проблем.

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

Bootstrap использует скрипты NPM для построения. Наш package.json включает методы для работы с фреймворком, включая компиляции кода, запуска тестов и другое.

 

Использование скриптом NPM

Наш package.json включает следующие команды и задачи:

Задача Описание
npm run dist npm run dist создает папку /dist с скомпилированными файлами. Используются SassAutoprefixer и UglifyJS.
npm test Похоже на npm run dist и плюс это запустит документацию локально.
npm run docs Построение и склейка CSS/JavaScript для документации. Вы сможете затем запустить документацию локально npm run docs-serve.

Раскрытие выпадающего меню при наведении в Bootstrap 3/4

👁 87 просмотров

По-умолчанию выпадающиее меню в Bootstrap раскрывается при клике и сворачивается тоже только при клике мышкой.

Было бы не плохо, чтоб раскрытие и сворачивание меню происходило при наведении мышки. И это сделать совершенно не сложно! Для этого нужно лишь добавить CSS правило:

.dropdown:hover > .dropdown-menu { 
    display: block; 
}

И выпадающее меню реагирует на наведение.