rld*_*rld 4 jquery twitter-bootstrap tether yarnpkg ruby-on-rails-5.1
我正在按照本教程安装Bootstrap with Yarn这是在rails 5.1上新版Bootstrap 4的命令,他们在这里观看:
yarn add bootstrap@4.0.0-alpha.6
所以我注意到它安装了bootstrap 4 alpha 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 .
在我的application.scss中
/*
*= require bootstrap/dist/css/bootstrap
*= require_tree .
*= require_self
*/
我的问题是,有必要将app.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
小智 6
您需要Jquery才能使Bootstrap的javascript相关功能正常运行.我相信如果你使用像工具提示这样的Bootstrap组件,你只需要Tether.
application.js事情的顺序.如果需要,Jquery和Tether需要在Bootstrap之前加载.
//= require rails-ujs
//= require turbolinks
//= require jquery/dist/jquery
//= require tether/dist/js/tether
//= require bootstrap/dist/js/bootstrap
//= require_tree .
| 归档时间： |
|
| 查看次数： |
1699 次 |
| 最近记录： |