在rails 5.1上安装Yarn bootstrap@4.0.0-alpha.6 [英] install with Yarn bootstrap@4.0.0-alpha.6 on rails 5.1
本文介绍了在rails 5.1上安装Yarn bootstrap@4.0.0-alpha.6的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在关注这个教程安装Bootstrap with Yarn这是命令rails 5.1上的新版Bootstrap 4谁在这里观看：
I'm following this tutorials for install Bootstrap with Yarn this was the command for the new version of Bootstrap 4 on rails 5.1 who watch here:
yarn add bootstrap@4.0.0-alpha.6
所以我注意到它安装了bootstrap 4 alpha 6，JQuery3和Tether。
所以它已经在.gitignore上添加了：
So I notice it was installed the bootstrap 4 alpha 6, JQuery3 and Tether. So it was already added on .gitignore the:
/node_modules
/yarn-error.log
已经在我的config / initializers / assets.rb中设置
And was already Set up in my config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join('node_modules')
我需要放上我的application.js
I need to put on my application.js
//= require rails-ujs
//= require turbolinks
//= require bootstrap/dist/js/bootstrap
//= require_tree .
在我的application.scss
In my application.scss
/*
*= require bootstrap/dist/css/bootstrap
*= require_tree .
*= require_self
*/
我的问题是有必要穿上application.js和application.scss JQuery和Tether的工作原理？怎么样？
My ask is it's necessary to put on application.js and application.scss the JQuery and Tether for work? How?
我试试这个：
application.js
Im' trying this: 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
application.scss
/*
*= require bootstrap/dist/css/bootstrap
*= require tether/dist/css/tether
*= require_tree .
*= require_self
*/
我不放 * =需要jquery / dist / jquery 因为没有像JQuery的其他文件那样提取此文件夹/ css。
这是用Yarn安装的配置吗？
I don't put *= require jquery/dist/jquery because don't have this folder distilled/css like the others for JQuery.
It's that the configuration for install with 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
推荐答案
您需要Jquery才能使Bootstrap的javascript相关功能正常运行。我相信如果你使用像工具提示这样的Bootstrap组件，你只需要Tether。
You will need Jquery in order for Bootstrap's javascript related features to function properly. I believe you only need Tether if you are using Bootstrap components like tooltips.
application.js 中的顺序很重要。如果需要，Jquery和Tether需要在Bootstrap之前加载。
The order in application.js matters. Jquery, and Tether if you need it, needs to be loaded in before Bootstrap.
//= require rails-ujs
//= require turbolinks
//= require jquery/dist/jquery
//= require tether/dist/js/tether
//= require bootstrap/dist/js/bootstrap
//= require_tree .
这篇关于在rails 5.1上安装Yarn bootstrap@4.0.0-alpha.6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
