Установить с помощью Yarn bootstrap@4.0.0-alpha.6 на рельсах 5.1
Я следую этим урокам по установке Bootstrap с Yarn, это была команда для новой версии Bootstrap 4 на рельсах 5.1, которые смотрят здесь:
yarn add bootstrap@4.0.0-alpha.6
Итак, я заметил, что был установлен начальный загрузчик 4 альфа 6, JQuery3 и Tether. Так что это уже было добавлено на.gitignore:
/node_modules
/yarn-error.log
И уже был настроен в моем config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join('node_modules')
Мне нужно поставить на мое application.js
//= require rails-ujs
//= require turbolinks
//= require bootstrap/dist/js/bootstrap
//= require_tree .
В моем приложении.scss
/*
*= require bootstrap/dist/css/bootstrap
*= require_tree .
*= require_self
*/
Я спрашиваю, нужно ли для работы application.js и application.scss поставить JQuery и Tether для работы? Как?
Я пытаюсь это: application.js
//= require rails-ujs
//= require turbolinks
//= require bootstrap/dist/js/bootstrap
//= require jquery/dist/jquery
//= require tether/dist/js/tether
//= require_tree .
application.scss
/*
*= require bootstrap/dist/css/bootstrap
*= require tether/dist/css/tether
*= require_tree .
*= require_self
*/
Я не ставлю *= require jquery/dist/jquery потому что эта папка не дистиллированная /css, как остальные для JQuery. Это что за конфигурация для установки с Yarn?
вот мой: tree node_modules
node_modules
├── bootstrap
│ ├── CHANGELOG.md
│ ├── Gruntfile.js
│ ├── LICENSE
│ ├── README.md
│ ├── dist
│ │ ├── css
│ │ │ ├── bootstrap-grid.css
│ │ │ ├── bootstrap-grid.css.map
│ │ │ ├── bootstrap-grid.min.css
│ │ │ ├── bootstrap-grid.min.css.map
│ │ │ ├── bootstrap-reboot.css
│ │ │ ├── bootstrap-reboot.css.map
│ │ │ ├── bootstrap-reboot.min.css
│ │ │ ├── bootstrap-reboot.min.css.map
│ │ │ ├── bootstrap.css
│ │ │ ├── bootstrap.css.map
│ │ │ ├── bootstrap.min.css
│ │ │ └── bootstrap.min.css.map
│ │ └── js
│ │ ├── bootstrap.js
│ │ └── bootstrap.min.js
│ ├── grunt
│ │ ├── change-version.js
│ │ ├── configBridge.json
│ │ ├── gcp-key.json.enc
│ │ ├── npm-shrinkwrap.json
│ │ ├── postcss.js
│ │ ├── sauce_browsers.yml
│ │ └── upload-preview.sh
│ ├── js
│ │ ├── dist
│ │ │ ├── alert.js
│ │ │ ├── button.js
│ │ │ ├── carousel.js
│ │ │ ├── collapse.js
│ │ │ ├── dropdown.js
│ │ │ ├── modal.js
│ │ │ ├── popover.js
│ │ │ ├── scrollspy.js
│ │ │ ├── tab.js
│ │ │ ├── tooltip.js
│ │ │ └── util.js
│ │ ├── src
│ │ │ ├── alert.js
│ │ │ ├── button.js
│ │ │ ├── carousel.js
│ │ │ ├── collapse.js
│ │ │ ├── dropdown.js
│ │ │ ├── modal.js
│ │ │ ├── popover.js
│ │ │ ├── scrollspy.js
│ │ │ ├── tab.js
│ │ │ ├── tooltip.js
│ │ │ └── util.js
│ │ └── tests
│ │ ├── README.md
│ │ ├── unit
│ │ │ ├── alert.js
│ │ │ ├── button.js
│ │ │ ├── carousel.js
│ │ │ ├── collapse.js
│ │ │ ├── dropdown.js
│ │ │ ├── modal.js
│ │ │ ├── phantom.js
│ │ │ ├── popover.js
│ │ │ ├── scrollspy.js
│ │ │ ├── tab.js
│ │ │ └── tooltip.js
│ │ └── vendor
│ │ └── qunit.js
│ ├── package.json
│ └── scss
│ ├── _alert.scss
│ ├── _badge.scss
│ ├── _breadcrumb.scss
│ ├── _button-group.scss
│ ├── _buttons.scss
│ ├── _card.scss
│ ├── _carousel.scss
│ ├── _close.scss
│ ├── _code.scss
│ ├── _custom-forms.scss
│ ├── _custom.scss
│ ├── _dropdown.scss
│ ├── _forms.scss
│ ├── _grid.scss
│ ├── _images.scss
│ ├── _input-group.scss
│ ├── _jumbotron.scss
│ ├── _list-group.scss
│ ├── _media.scss
│ ├── _mixins.scss
│ ├── _modal.scss
│ ├── _nav.scss
│ ├── _navbar.scss
│ ├── _normalize.scss
│ ├── _pagination.scss
│ ├── _popover.scss
│ ├── _print.scss
│ ├── _progress.scss
│ ├── _reboot.scss
│ ├── _responsive-embed.scss
│ ├── _tables.scss
│ ├── _tooltip.scss
│ ├── _transitions.scss
│ ├── _type.scss
│ ├── _utilities.scss
│ ├── _variables.scss
│ ├── bootstrap-grid.scss
│ ├── bootstrap-reboot.scss
│ ├── bootstrap.scss
│ ├── mixins
│ │ ├── _alert.scss
│ │ ├── _background-variant.scss
│ │ ├── _badge.scss
│ │ ├── _border-radius.scss
│ │ ├── _breakpoints.scss
│ │ ├── _buttons.scss
│ │ ├── _cards.scss
│ │ ├── _clearfix.scss
│ │ ├── _float.scss
│ │ ├── _forms.scss
│ │ ├── _gradients.scss
│ │ ├── _grid-framework.scss
│ │ ├── _grid.scss
│ │ ├── _hover.scss
│ │ ├── _image.scss
│ │ ├── _list-group.scss
│ │ ├── _lists.scss
│ │ ├── _nav-divider.scss
│ │ ├── _navbar-align.scss
│ │ ├── _pagination.scss
│ │ ├── _reset-text.scss
│ │ ├── _resize.scss
│ │ ├── _screen-reader.scss
│ │ ├── _size.scss
│ │ ├── _table-row.scss
│ │ ├── _text-emphasis.scss
│ │ ├── _text-hide.scss
│ │ ├── _text-truncate.scss
│ │ ├── _transforms.scss
│ │ └── _visibility.scss
│ └── utilities
│ ├── _align.scss
│ ├── _background.scss
│ ├── _borders.scss
│ ├── _clearfix.scss
│ ├── _display.scss
│ ├── _flex.scss
│ ├── _float.scss
│ ├── _position.scss
│ ├── _screenreaders.scss
│ ├── _sizing.scss
│ ├── _spacing.scss
│ ├── _text.scss
│ └── _visibility.scss
├── jquery
│ ├── AUTHORS.txt
│ ├── LICENSE.txt
│ ├── README.md
│ ├── bower.json
│ ├── dist
│ │ ├── core.js
│ │ ├── jquery.js
│ │ ├── jquery.min.js
│ │ ├── jquery.min.map
│ │ ├── jquery.slim.js
│ │ ├── jquery.slim.min.js
│ │ └── jquery.slim.min.map
│ ├── external
│ │ └── sizzle
│ │ ├── LICENSE.txt
│ │ └── dist
│ │ ├── sizzle.js
│ │ ├── sizzle.min.js
│ │ └── sizzle.min.map
│ ├── package.json
│ └── src
│ ├── ajax
│ │ ├── jsonp.js
│ │ ├── load.js
│ │ ├── parseXML.js
│ │ ├── script.js
│ │ ├── var
│ │ │ ├── location.js
│ │ │ ├── nonce.js
│ │ │ └── rquery.js
│ │ └── xhr.js
│ ├── ajax.js
│ ├── attributes
│ │ ├── attr.js
│ │ ├── classes.js
│ │ ├── prop.js
│ │ ├── support.js
│ │ └── val.js
│ ├── attributes.js
│ ├── callbacks.js
│ ├── core
│ │ ├── DOMEval.js
│ │ ├── access.js
│ │ ├── init.js
│ │ ├── nodeName.js
│ │ ├── parseHTML.js
│ │ ├── ready-no-deferred.js
│ │ ├── ready.js
│ │ ├── readyException.js
│ │ ├── stripAndCollapse.js
│ │ ├── support.js
│ │ └── var
│ │ └── rsingleTag.js
│ ├── core.js
│ ├── css
│ │ ├── addGetHookIf.js
│ │ ├── adjustCSS.js
│ │ ├── curCSS.js
│ │ ├── hiddenVisibleSelectors.js
│ │ ├── showHide.js
│ │ ├── support.js
│ │ └── var
│ │ ├── cssExpand.js
│ │ ├── getStyles.js
│ │ ├── isHiddenWithinTree.js
│ │ ├── rmargin.js
│ │ ├── rnumnonpx.js
│ │ └── swap.js
│ ├── css.js
│ ├── data
│ │ ├── Data.js
│ │ └── var
│ │ ├── acceptData.js
│ │ ├── dataPriv.js
│ │ └── dataUser.js
│ ├── data.js
│ ├── deferred
│ │ └── exceptionHook.js
│ ├── deferred.js
│ ├── deprecated.js
│ ├── dimensions.js
│ ├── effects
│ │ ├── Tween.js
│ │ └── animatedSelector.js
│ ├── effects.js
│ ├── event
│ │ ├── ajax.js
│ │ ├── alias.js
│ │ ├── focusin.js
│ │ ├── support.js
│ │ └── trigger.js
│ ├── event.js
│ ├── exports
│ │ ├── amd.js
│ │ └── global.js
│ ├── jquery.js
│ ├── manipulation
│ │ ├── _evalUrl.js
│ │ ├── buildFragment.js
│ │ ├── getAll.js
│ │ ├── setGlobalEval.js
│ │ ├── support.js
│ │ ├── var
│ │ │ ├── rcheckableType.js
│ │ │ ├── rscriptType.js
│ │ │ └── rtagName.js
│ │ └── wrapMap.js
│ ├── manipulation.js
│ ├── offset.js
│ ├── queue
│ │ └── delay.js
│ ├── queue.js
│ ├── selector-native.js
│ ├── selector-sizzle.js
│ ├── selector.js
│ ├── serialize.js
│ ├── traversing
│ │ ├── findFilter.js
│ │ └── var
│ │ ├── dir.js
│ │ ├── rneedsContext.js
│ │ └── siblings.js
│ ├── traversing.js
│ ├── var
│ │ ├── ObjectFunctionString.js
│ │ ├── arr.js
│ │ ├── class2type.js
│ │ ├── concat.js
│ │ ├── document.js
│ │ ├── documentElement.js
│ │ ├── fnToString.js
│ │ ├── getProto.js
│ │ ├── hasOwn.js
│ │ ├── indexOf.js
│ │ ├── pnum.js
│ │ ├── push.js
│ │ ├── rcssNum.js
│ │ ├── rnothtmlwhite.js
│ │ ├── slice.js
│ │ ├── support.js
│ │ └── toString.js
│ └── wrap.js
└── tether
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── bower.json
├── component.json
├── dist
│ ├── css
│ │ ├── tether-theme-arrows-dark.css
│ │ ├── tether-theme-arrows-dark.min.css
│ │ ├── tether-theme-arrows.css
│ │ ├── tether-theme-arrows.min.css
│ │ ├── tether-theme-basic.css
│ │ ├── tether-theme-basic.min.css
│ │ ├── tether.css
│ │ └── tether.min.css
│ └── js
│ ├── tether.js
│ └── tether.min.js
├── docs
│ ├── 1-Overview
│ │ ├── 1-why_you_should_use_tether.md
│ │ ├── 2-repositioning.md
│ │ └── 3-why_we_dont_support_IE_8.md
│ ├── 2-Examples
│ │ ├── 1-list_of_examples.md
│ │ └── 2-projects_using_tether.md
│ ├── 3-Advanced
│ │ ├── 1-embedding_tether.md
│ │ └── 2-extending_tether.md
│ ├── coffee
│ │ └── intro.coffee
│ ├── css
│ │ └── intro.css
│ ├── intro.md
│ ├── js
│ │ ├── intro.js
│ │ └── markAttachment.js
│ ├── sass
│ │ └── intro.sass
│ └── welcome
│ ├── browser-demo.html
│ ├── coffee
│ │ └── welcome.coffee
│ ├── css
│ │ ├── browser-demo.css
│ │ ├── prism.css
│ │ └── welcome.css
│ ├── index.html
│ ├── js
│ │ ├── drop.js
│ │ ├── jquery.js
│ │ ├── log.js
│ │ ├── tether-v0.1.3.js
│ │ └── welcome.js
│ └── sass
│ ├── _inline-block.sass
│ ├── browser-demo.sass
│ └── welcome.sass
├── examples
│ ├── chosen
│ │ ├── chosen-sprite.png
│ │ ├── chosen-sprite@2x.png
│ │ ├── chosen.css
│ │ ├── chosen.js
│ │ └── index.html
│ ├── common
│ │ └── css
│ │ └── style.css
│ ├── content-visible
│ │ └── index.html
│ ├── dolls
│ │ ├── dolls.css
│ │ ├── dolls.js
│ │ └── index.html
│ ├── element-scroll
│ │ └── index.html
│ ├── enable-disable
│ │ └── index.html
│ ├── facebook
│ │ ├── facebook.css
│ │ └── index.html
│ ├── out-of-bounds
│ │ └── index.html
│ ├── pin
│ │ └── index.html
│ ├── resources
│ │ ├── css
│ │ │ └── base.css
│ │ └── js
│ │ ├── jquery.js
│ │ └── log.js
│ ├── scroll
│ │ └── index.html
│ ├── simple
│ │ └── index.html
│ ├── testbed
│ │ └── index.html
│ ├── tooltip
│ │ └── index.html
│ └── viewport
│ ├── colors.css
│ └── index.html
├── gulpfile.js
├── package.json
└── src
├── css
│ ├── helpers
│ │ ├── _tether-theme-arrows.sass
│ │ ├── _tether-theme-basic.sass
│ │ └── _tether.sass
│ ├── mixins
│ │ ├── _inline-block.sass
│ │ └── _pie-clearfix.sass
│ ├── tether-theme-arrows-dark.sass
│ ├── tether-theme-arrows.sass
│ ├── tether-theme-basic.sass
│ └── tether.sass
└── js
├── abutment.js
├── constraint.js
├── markAttachment.js
├── shift.js
├── tether.js
└── utils.js
80 directories, 346 files
1 ответ
Вам понадобится Jquery для правильной работы функций Bootstrap, связанных с javascript. Я считаю, что вам нужен только Tether, если вы используете компоненты Bootstrap, такие как подсказки.
Заказ в application.js вопросы. Jquery и Tether, если вам это нужно, должны быть загружены до начальной загрузки.
//= require rails-ujs
//= require turbolinks
//= require jquery/dist/jquery
//= require tether/dist/js/tether
//= require bootstrap/dist/js/bootstrap
//= require_tree .