bootstrap sass
v3.4.1
bootstrap-sass — это версия Bootstrap 3 на базе Sass, готовая к использованию прямо в ваших приложениях на базе Sass.
Это Бутстрап 3 . Для Bootstrap 4 используйте Rubygem Bootstrap, если вы используете Ruby, и основной репозиторий в противном случае.
См. соответствующее руководство для выбранной вами среды:
Рубин на рельсах.
Бауэр.
НПМ / Node.js.
bootstrap-sass легко добавить в Rails с помощью конвейера ресурсов.
В ваш Gemfile вам необходимо добавить гем bootstrap-sass и убедиться, что гем sass-rails присутствует — он добавляется в новые приложения Rails по умолчанию.
драгоценный камень 'bootstrap-sass', '~> 3.4.1' драгоценный камень 'sassc-rails', '>= 2.1.0'
bundle install и перезапустите сервер, чтобы файлы стали доступны через конвейер.
Импортируйте стили Bootstrap в app/assets/stylesheets/application.scss :
// "bootstrap-sprockets" необходимо импортировать до "bootstrap" и "bootstrap/variables"@import "bootstrap-sprockets";@import "bootstrap";
bootstrap-sprockets необходимо импортировать до bootstrap , чтобы шрифты значков работали.
Убедитесь, что файл имеет расширение .scss (или .sass для синтаксиса Sass). Если вы только что создали новое приложение Rails, вместо этого оно может иметь файл .css . Если этот файл существует, он будет обслуживаться вместо Sass, поэтому переименуйте его:
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
Затем удалите все *= require_self и *= require_tree . утверждения из файла sass. Вместо этого используйте @import для импорта файлов Sass.
Не используйте *= require в Sass, иначе ваши другие таблицы стилей не смогут получить доступ к миксинам или переменным Bootstrap.
Bootstrap JavaScript зависит от jQuery. Если вы используете Rails 5.1+, добавьте драгоценный камень jquery-rails в свой Gemfile:
драгоценный камень 'jquery-rails'
$ установка пакета
Требуйте Bootstrap Javascripts в app/assets/javascripts/application.js :
//= требуется jquery//= требуются загрузочные звездочки
bootstrap-sprockets и bootstrap не должны быть включены в application.js одновременно.
bootstrap-sprockets предоставляет отдельные файлы Bootstrap Javascript (например, alert.js или dropdown.js ), а bootstrap предоставляет объединенный файл, содержащий все файлы Bootstrap Javascript.
При использовании пакета bootstrap-sass Bower вместо драгоценного камня в Rails настройте ресурсы в config/application.rb :
# Pathsroot.join('vendor', 'assets', 'bower_comComponents').to_s.tap do |bower_path| config.sass.load_paths << Bower_path
config.assets.paths << Bower_pathend# Предварительная компиляция Bootstrap fontsconfig.assets.precompile << %r(bootstrap-sass/assets/fonts/bootstrap/[w-]+.(?:eot|svg|ttf|woff2?)$ )# Минимальная точность номера Sass, необходимая для bootstrap-sass::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max Замените операторы Bootstrap @import в application.scss на:
$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";@import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets";@import "bootstrap-sass/assets/stylesheets/bootstrap";
Замените директиву Bootstrap require в application.js на:
//= требуется bootstrap-sass/assets/javascripts/bootstrap-sprockets
Пожалуйста, убедитесь, что sprockets-rails имеют версию не ниже 2.1.4.
bootstrap-sass больше не совместим с Rails 3. Последняя версия bootstrap-sass, совместимая с Rails 3.2, — v3.1.1.0.
Пакет bootstrap-sass Bower совместим с node-sass 3.2.0+. Вы можете установить его с помощью:
$ Bower установить Bootstrap-sass
Sass, JS и все остальные ресурсы расположены в assets.
По умолчанию в главном поле bower.json указан только основной файл _bootstrap.scss и все статические ресурсы (шрифты и JS). По умолчанию это совместимо с такими менеджерами активов, как Wiredep.
Если вы используете mincer с node-sass, импортируйте Bootstrap следующим образом:
В application.css.ejs.scss (примечание .css.ejs.scss ):
// Импорт путей к ресурсам мясорубки helper Integration@import "bootstrap-mincer";@import "bootstrap";
В application.js :
//= требуются загрузочные звездочки
См. также этот пример манифеста.js для мясорубки.
$ npm установить bootstrap-sass
По умолчанию импортируется весь Bootstrap.
Вы также можете импортировать компоненты явно. Чтобы начать с полного списка модулей, скопируйте файл _bootstrap.scss в свои ресурсы как _bootstrap-custom.scss . Затем закомментируйте ненужные вам компоненты из _bootstrap-custom . В файле Sass приложения замените @import 'bootstrap' на:
@import 'bootstrap-custom';
bootstrap-sass требует минимальной точности номера Sass 8 (по умолчанию — 5).
Точность устанавливается для Ruby автоматически при использовании драгоценного камня sassc-rails . При использовании версии npm или Bower с Ruby вы можете установить ее с помощью:
::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max
Bootstrap требует использования Autoprefixer. Autoprefixer добавляет префиксы поставщиков к правилам CSS, используя значения из Can I Use.
Чтобы соответствовать уровню совместимости браузеров исходного Bootstrap, установите для параметра browsers Autoprefixer значение:
[ "Android 2.3", "Android >= 4", "Chrome >= 20", "Firefox >= 24", "Explorer >= 8", "iOS >= 6", "Opera >= 12", "Safari >= 6 дюймов]
assets/javascripts/bootstrap.js содержит весь JavaScript Bootstrap, объединенный в правильном порядке.
Если вы используете Sprockets или Mincer, вместо этого вам могут потребоваться bootstrap-sprockets для загрузки отдельных модулей:
// Загружаем весь Bootstrap JavaScript//= требуются bootstrap-sprockets
Вы также можете загружать отдельные модули, если вам также требуются какие-либо зависимости. Вы можете проверить зависимости в документации Bootstrap JS.
//= требуется bootstrap/scrollspy//= требуется bootstrap/modal//= требуется bootstrap/dropdown
Шрифты упоминаются как:
"#{$icon-font-path}#{$icon-font-name}.eot" По умолчанию $icon-font-path имеет значение bootstrap/ если используются помощники пути к активу, и ../fonts/bootstrap/ в противном случае.
При использовании bootstrap-sass с Compass, Sprockets или Mincer вы должны импортировать соответствующие помощники пути перед самим Bootstrap, например:
@import "bootstrap-compass";@import "bootstrap";
Импортируйте Bootstrap в файл Sass (например, application.scss ), чтобы получить все стили, примеси и переменные Bootstrap!
@import "начальная загрузка";
Вы также можете включить дополнительную тему Bootstrap:
@import "бутстрап/тема";
Полный список переменных Bootstrap можно найти здесь. Вы можете переопределить их, просто переопределив переменную перед директивой @import , например:
$navbar-default-bg: #312312;$light-orange: #ff8c00;$navbar-default-color: $light-orange;@import "bootstrap";
Bootstrap доступен как модуль Eyeglass. После установки Bootstrap через NPM вы можете импортировать библиотеку Bootstrap через:
@import "bootstrap-sass/bootstrap"
или импортируйте только те части Bootstrap, которые вам нужны:
@import "bootstrap-sass/bootstrap/variables";@import "bootstrap-sass/bootstrap/mixins";@import "bootstrap-sass/bootstrap/carousel";
Версия Bootstrap для Sass может отличаться от исходной версии последним номером, известным как PATCH. Версия исправления может опережать соответствующую второстепенную версию. Это происходит, когда нам нужно выпустить изменения, специфичные для Sass.
До версии 3.3.2 версия Bootstrap for Sass отражала исходную версию с дополнительным номером для изменений, специфичных для Sass. Это было изменено из-за проблем совместимости Bower и npm.
Восходящие версии по сравнению с версиями Bootstrap for Sass:
| вверх по течению | Сасс |
|---|---|
| 3.3.4+ | такой же |
| 3.3.2 | 3.3.3 |
| <= 3.3.1 | 3.3.1.х |
Всегда обращайтесь к CHANGELOG.md при обновлении.
Если вы хотите помочь с разработкой самого bootstrap-sass, прочитайте этот раздел.
Синхронизация bootstrap-sass с исходными изменениями из Bootstrap раньше была трудоемким ручным процессом, подверженным ошибкам. В Bootstrap 3 мы представили конвертер, который автоматизирует это.
Примечание. Если вы просто хотите использовать Bootstrap 3, см. раздел установки выше.
Изменения, внесенные в проект Bootstrap, теперь можно внести с помощью задачи convert rake.
Вот пример запуска, который извлекает главную ветку из основного репозитория twbs/bootstrap:
rake convert
Это приведет к преобразованию последней версии LESS в Sass и обновлению до последней версии JS. Чтобы преобразовать конкретную ветку или версию, передайте имя ветки или хеш фиксации в качестве первого аргумента задачи:
rake convert[e8a1df5f060bf7e6631554648e0abde150aedbe4]
Последняя версия скрипта конвертера находится здесь и выполняет следующие действия:
Преобразует исходные файлы Bootstrap LESS в соответствующий файл SCSS.
Копирует весь исходный код JavaScript в assets/javascripts/bootstrap , манифест Sprockets в assets/javascripts/bootstrap-sprockets.js и объединение в assets/javascripts/bootstrap.js .
Копирует все исходные файлы шрифтов в assets/fonts/bootstrap .
Устанавливает Bootstrap::BOOTSTRAP_SHA в version.rb в ветку sha.
Этот конвертер полностью конвертирует исходный LESS в SCSS. Преобразование происходит автоматически, но требует инструкций для определенных преобразований (см. выходные данные конвертера). Пожалуйста, отправляйте сообщения о проблемах GitHub, помеченных как conversion .
bootstrap-sass имеет ряд основных участников:
Томас Макдональд
Тристан Харвард
Питер Гумесон
Глеб Мазовецкий
и значительное число других участников.
bootstrap-sass используется для создания замечательных проектов в сети, включая Diaspora,rails_admin, Rails Tutorial Майкла Хартла, gitlabhq и kandan.
