开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Bootstrap & Rails 6(没有webpack) -默认的bootstrap javascript不工作

Bootstrap是一个开源的前端框架，用于快速构建响应式的网页和应用程序。它提供了一套基于HTML和CSS的设计模板，以及一系列的JavaScript插件，可以帮助开发者快速搭建美观且兼容多种设备的界面。

Rails 6是一个开源的Web应用程序框架，使用Ruby语言编写。它遵循MVC（模型-视图-控制器）架构模式，提供了许多便利的工具和库，用于快速开发高质量的Web应用程序。

在没有Webpack的情况下，Bootstrap的JavaScript插件可能无法正常工作。这是因为Bootstrap的JavaScript插件通常依赖于jQuery库和一些其他的JavaScript库，而Rails默认未包含这些库。

要解决这个问题，可以按照以下步骤操作：

在Rails应用程序中引入jQuery库。可以通过在Gemfile文件中添加gem 'jquery-rails'，然后运行bundle install来安装jQuery库。
在应用程序的Javascript文件中引入Bootstrap的JavaScript插件。可以在app/assets/javascripts文件夹中创建一个custom.js（或其他自定义名称）文件，并在其中使用//= require bootstrap语句来引入Bootstrap的JavaScript插件。
确保在应用程序的布局文件中正确加载Javascript文件。在app/views/layouts文件夹中找到应用程序的布局文件（通常是application.html.erb），确保在<head>标签中的<%= javascript_include_tag 'application' %>之前添加<%= javascript_include_tag 'custom' %>，以确保正确加载Bootstrap的JavaScript插件。

完成以上步骤后，应该可以正常使用Bootstrap的JavaScript插件了。不过需要注意，Rails 6中默认的Sprockets Asset Pipeline并不适用于处理现代前端开发的需求，因此建议使用Webpacker或其他类似的工具来管理前端资源。

腾讯云提供了云计算服务，包括云服务器、云数据库、人工智能、云存储等。关于Bootstrap和Rails 6相关的云计算产品和服务，可以参考腾讯云的官方文档和产品介绍页面，以获取更详细的信息和相关链接。

相关搜索:Bootstrap 4 CSS - Overriding默认标题-侧:底部不工作 Bootstrap 4 Webpack Sass函数不工作 Bootstrap :为什么我的col 6不能工作？bootstrap.min.js:6未捕获的错误:Bootstrap的JavaScript需要bootstrap.min.js:6处的jQuery。引导程序3 bootstrap.min.js:6未捕获错误:Bootstrap的JavaScript需要bootstrap.min.js:6处的jQuery bootstrap中的切换按钮菜单不工作 Bootstrap的Javascript在Rails 6 webpacker设置中不起作用 Django中的Bootstrap Slider不工作 heroku上的rails 6、bootstrap 4、webpacker故障排除 Rails 6+ Bootstrap 5(webpack/纱线安装)-如何/在何处覆盖Bootstrap“主”颜色

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Rails 7 中引入 Bootstrap 5

在 Rails 7 中静态资源的管理已经从 “Webpacker” 改为了 “Import Maps”，用来简化基于 JavaScript 的工具和包管理器 Webpack、Yarn 或者 npm 的使用。

02

最受推荐的 9本全栈开发书籍，助web前端开发学习

如今全栈工程师在企业工作中占有的地位越来越高，无论是前端工程师，还是后端工程师，都在拼命向全栈发展！学习的方式有很多，大部分是喜欢通过书籍来学习新知识，今天，我们一起来盘点一下全站开发的大佬都推荐些什么书，这里我们罗列出最受推荐的十本书，希望能对大家有帮助！

01

Rails 7 中引入 Bootstrap 5

在 Rails 6 中有两种不同的工具可以用来管理前端的 CSS、JavaScript 以及 images 等资源，分别是 “Sprockets” 和 “Webpacker”，“Sprockets” 除了 Rails 应用外很少使用，但是 “Webpacker” 不仅在 Rails 中，在其他应用框架中也被广泛的使用。

05

rails -help

rails new APP_PATH [选项] //APP_PATH项目名称

03

[技术地图] vue-cli

这是一个新开的’实验性’文章系列，如其名‘技术地图’，这个系列计划剖析一些前端开源项目，可能会探讨这些项目的设计和组织、整理他们使用到技术栈。首先拿vue-cli小试牛刀，再决定后续要不要继续这个系列.

01

一小时内搭建一个全栈Web应用框架

把想法变为现实的能力是空想家与实干家的区别。不管你是在一家跨国公司工作，还是正在为自己的创业公司而努力，那些有能力将创意转化为真正产品的人，都具有宝贵的技能并拥有明显的实力。如果你能在不到一个小时的时间里创建一个全栈的Web应用，那么你就有能力为自己下一个伟大的想法迅速的的创建一个简单的MVP，或者在工作中快速构建一个新的应用程序。

04

Bootstrap入门学习（一）——简介、下载

Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。中文官网地址：http://www.bootcss.com/

03

GitHub 上的顶级项目都是做什么的？（一）

前一阵看到同事在用一个名叫 AirFlow 的工具，而我竟然素未耳闻，一番搜索之后发现这个工具是 Apache 的顶级项目，而且在 GitHub 上有 1w+ 的 Star。震惊之余，感觉有必要把 GitHub 上常用工具捋一遍，以避免以后发生重复造轮子的情况。计划是把 GitHub 上 5k+ Star 的项目都知道是做什么用的，每周看 50 个，数据来源是这里：https://gitstar-ranking.com/repositories。

02

如何使用本地 Docker 更好地开发？我们总结了这八条经验

如果你像我们一样需要运行许多不同的应用程序，那么将开发环境容器化可以极大地提高工作效率。这里有一些可以优化本地 Docker 环境的技巧。

04

GitHub 上的顶级项目都是做什么的？

前一阵看到同事在用一个名叫 AirFlow 的工具，而我竟然素未耳闻，一番搜索之后发现这个工具是 Apache 的顶级项目，而且在 GitHub 上有 1w+ 的 Star。

01

使用Ruby on Rails和Bootstrap开发社交网络平台的详细教程

在这篇博客中，我们将深入介绍如何使用Ruby on Rails（RoR）框架和Bootstrap前端框架共同开发一个简单而功能丰富的社交网络平台。Ruby on Rails提供了强大的后端支持，而Bootstrap则提供了灵活的前端组件，使得我们可以轻松创建现代化的用户界面。

01

后台管理UI的选择

最近要做一个企业的OA系统，以前一直使用EasyUI，一切都好，但感觉有点土了，想换成现在流行的Bootstrap为基础的后台UI风格，想满足的条件应该达到如下几个：

02

你不知道的 React 最佳实践

React 是一个用于开发用户界面的 JavaScript 库，是由 Facebook 在 2013 年创建的。 React 集成了许多令人兴奋的组件、库和框架[1]。当然，开发人员也可以自己开发组件。

01

bootstrap分页css样式,修改bootstrap-table中的分页样式

使用bootstrap-table时，使用$(“”)选择器没办法选中下方的分页button按钮，可能跟它是动态生成的有关吧。

03

如何成为一名Web前端开发人员？入行学习完整指南

经过如此多的试验和测试，而不是说你从头开始创建了所有内容，接着，你在网页上创建了第一个登录表单时，你感觉如何？

01

全栈工程师权威指南

根据 Stack Overflow 2016年开发者调查显示，全栈工程师是最受欢迎的开发者职业。毫无疑问现在有许多在线或个人课程来帮助程序员成为全栈开发者，甚至帮助这些开发者找到高薪的开发工作。一些流行的在线课程，例如：Lynda,Udacity,Coursera,Thinkful,General Assembly 。除了这些在线课程，还有好多个人的新手训练营来提供给web开发者必须的技能。在这篇文章中我不会讨论哪个在线或个人课程好，相反我会提供一个我认为成为全栈web开发者所需技能的权威指南。我将

如何在Ubuntu 14.04上使用Bower管理前端JavaScript和CSS依赖项

Bower是前端模块的包管理器，通常由JavaScript和/或CSS组成。它使我们可以轻松搜索，安装，更新或删除这些前端依赖项。

00

【前端必看】2017 年 JavaScript 全面崛起大运势

最受欢迎项目下面是年度最流行的项目，不区分类别。 Vue.js蝉联冠军 Vue.js 再次强势登顶年度排行榜冠军，今年在 GitHub 上新增了超过 40,000 的 star。相较于 2016

05

三款快速删除未使用CSS代码的工具

针对历史项目或项目中有引入CSS框架（如Bootstrap），可能会存在大量的 CSS 样式未被使用。这可能产生一些不良的影响，如：

03

source map 你知道多少？-- 调试、原理、渗透、还原源码

压缩 css 和 javascript 代码，是一种简单且见效明显的的提高 web 性能的方式。但是，当需要调试这些压缩文件中的代码时变成了“噩梦”。source map 是解决该问题的方式之一，其提供了一种将压缩文件中的代码映射回源文件中的原始位置的方法。

02

前端学习路线指南

这是你最初必须掌握的是网站的构建元素没得选! 随着你前端的学习进程,熟练掌握 HTML/CSS简单易学

02

前端生态系统：构建现代Web应用的完整指南

前端开发生态系统是一个日益发展和多样化的领域，涵盖了工具、框架、库和最佳实践，帮助开发者构建现代、高性能的Web应用。本文将深入探讨前端生态系统的关键组成部分，为您提供一份全面的指南，并提供带有实际代码示例的技巧，以构建出色的前端应用。

05

正确的Webpack配置姿势，快速启动各式框架！

在去年的这个时候，本骚年还在被Grunt和Gulp以及各种Requirejs、Seajs团团围住攻击，狼狈不堪。后面认识了Webpack之后，基本所有项目框架都拿它来构建了。

03

BootstrapVue使用入门

Getting Started | BootstrapVueGet started with BootstrapVue, based on the world’s most popular framework – Bootstrap v4, for building responsive, mobile-first sites using Vue.js

03

深入了解Webpack 5

本质上，有两种构建JavaScript应用程序的模式：开发和生产。以前，您已使用开发模式在本地开发环境中开始使用Webpack Dev Server。您可以更改源代码，Webpack再次将其捆绑，Webpack Dev Server会在浏览器中向您显示最新的开发版本。

03

在 Laravel 项目中使用 Bootstrap 框架

如官方文档所言，Laravel 并不强制你使用 CSS 框架，但是开箱提供了对 Bootstrap 的支持，在 resources/js/bootstrap.js（在 Laravel 5.7 之前的版本位于 resources/assets/js/bootstrap.js）中，我们可以看到对 bootstrap js库的引入：

03

前端资源、交流社区、技术博客等整理总汇

最近看到这篇前端资源总汇的文章，整理的非常详细，于是搬过来，方便自己后期查阅，侵删。

00

前端资源分享——只为更好前端

一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究ISUX腾讯社交用户体验设计，简称ISUX，腾讯设计团队网站CDC腾讯用户研究与体验设计部FEX百度Web前端研发部出品淘宝前端团队（FED）用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎360旗下前端开发团队出品阿里巴巴国际UED团队在更新的屏幕里创造出更好的产品和更优的体验EFE由百度多个遵循统一技术体系的前端团队所组成UXC覆盖了百度85%以上的产品体验设计二、开发社

前端资源分享-只为更好前端

阅读更多本文在GitHub的地址GitHub Front-end-resources

04

webpack系列---webpack介绍&基本使用

2.安装到项目依赖有时候我们的项目要依赖webpack，可以运行npm i webpack --save-dev

01

2017年 JavaScript 框架回顾 -- 后端框架

本文是2017年 JavaScript 框架回顾系列的最后的一篇文章，主要介绍 JavaScript 的后端框架情况。从上图中可以看到，Express 作为用 JavaScript 编写的后端服务的

03

深入了解Webpack

本质上，有两种构建JavaScript应用程序的模式：开发和生产。以前，您已使用开发模式在本地开发环境中开始使用Webpack Dev

07

2017年JS 框架回顾：后端框架

英文：Laurie Voss 译文：葡萄城控件 www.cnblogs.com/powertoolsteam/p/the-state-of-javascript-frameworks-2017-part-3-back-end-frameworks.html 本文是2017年 JavaScript 框架回顾系列的最后的一篇文章，主要介绍 JavaScript 的后端框架情况。第一篇：《2017 前端框架的现状》第二篇：《2017 年 JS 框架回顾：React 生态系统》 📷 从上图中可以看到，Expr

09

Webpack 详解

本质上，有两种构建JavaScript应用程序的模式：开发和生产。以前，您已使用开发模式在本地开发环境中开始使用Webpack Dev

02

前端设计入门

按照项目流程，一般是UI设计师设计好产品界面，前端工程师通过编码实现界面。通俗来说，UI设计师好比服装设计师，而开发工程师好比裁缝。

03

React 测试驱动教程

测试是开发周期中的一个重要组成部分。没有测试的代码被称为：遗留代码。对于我而言，第一次学习 React 和 JavaScript 的时候，感到很有压力。如果你也是刚开始学习 JS/React，并加入他们的社区，那么也可能会有相同的感觉。想到的会是：

02

2022 Web 年鉴 — JavaScript

大家好，我是 ConardLi。今天带大家来解读一个比较权威的 JavaScript 年度报告，我们一起来看看今年的 JavaScript 到底是什么样子。

02

分享 40 个免费的前端初学者视频教程

来源 | https://javascript.plainenglish.io/top-40-free-programming-courses-for-beginners-bc39253e784c

02

翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

摘要总结：本文介绍了一种用于Web应用程序的基于关键CSS和Webpack的代码拆分和优化方法。该方法通过将关键CSS与Webpack生成的非关键CSS进行拆分，在提高页面加载速度的同时，保留对关键CSS的访问权限，适用于对性能要求较高的Web应用程序，同时具有较好的可维护性。

08

基于 Express 应用框架的技术方案选型浅谈

现在的 Node 对于前端而言可以涵盖各个方面，包括命令行接口、插件、依赖库、脚手架以及 Web 服务等。本文是一篇对于 Node 使用的浅谈文章，会简单讲解一些个人使用 Node 的经验，分享的内容主要可分为三个方面：

03

Vue框架快速入门

Vue是现在最流行的前端框架之一，而且相对于其他两个框架React和Angular来说也更加易学，而且它的作者是国人，中文文档也很完善。当然Vue框架算是比较高级的框架，所以在使用过程中还需要JavaScript、JavaScript 2015、WebPack、NodeJS、npm、ESLint、JavaScript单元测试框架等其他知识和框架的使用方法。在学习Vue之前，最好先学习一下这些知识。由于Vue的中文文档比较完善，所以这里只介绍Vue框架的一些核心概念，详细的使用方法还得查看官方文档。

02

前端工程化：Webpack之常见配置详解

相信很多人在学习前端过程中，都接触过webpack。但可能在创建前端项目时，都只是用脚手架vue-cli的初始化命令跑一下，将webpack当成一个黑盒使用，刚开始我也是这样，但是虽然一切配置都能通过脚手架自动完成，我们不用学会如何手动去配置，但是我们也至少应该知道，webpack每条配置的作用。

01

一文带你了解2018年最流行的前端技术

2018年即将过半，前端开发这个行业又进一个台阶了。找来一个现代前端技术图谱看看，真是吓尿了——宝宝心里苦啊！

03

前端开发路线图——从小白到前端工程师

编者按：很多人都想学编程。但是苦于没有具体的步骤和指导。比如想找份前端开发的工作，却不知道应该先学习什么再学习什么，也不知道该选择什么样的工具。因为经常被人问到类似的问题，全栈开发者Kamran Ahmed索性在github上制订了一份现代前端开发的路线图，并且用一篇文章对前端开发的整个学习过程进行了详细解释。感兴趣的初学者不容错过。

01

前端插件以及部分细分网址梳理

图来源网络前端插件以及部分细分网址梳理插件 parallel.js: 前后端通用的一个并行库 zepto: 用于现代浏览器的兼容 jQuery 的库 totoro: 稳定的跨浏览器测试工具 TheaterJS: 一个用于模拟人输入状态的 JS 库 stellar.js: 前端用于实现异步滚动效果的库，现已不再维护 skrollr: 另一款实现一步滚动的开源库，使用人数众多，可实现各种狂拽酷炫掉渣天的前端效果，看真相 Framework7: 前端框架，是开发人员可以基于 web 技术构建 IOS7 程

09

Bootstrap使用及环境搭建详解

官网：https://getbootstrap.com/ 中文网：http://www.bootcss.com/

02

Github上开源的10大Javascript模板引擎，助力前端开发

目前前端主流的开发框架有Vue、React以及Angular等，但是依然有一部分开发人员并不会去使用这些框架，特别是一些偏向后端的开发者，可能依然在使用类似于jquery+Bootstrap的方式在开发一些项目，而且有些项目可能传统的方式更加合适。

03

现代前端开发路线图：从零开始，一步步成为前端工程师

编者按：很多人都想学编程。但是苦于没有具体的步骤和指导。比如想找份前端开发的工作，却不知道应该先学习什么再学习什么，也不知道该选择什么样的工具。因为经常被人问到类似的问题，全栈开发者Kamran Ahmed索性在github上制订了一份现代前端开发的路线图，并且用一篇文章对前端开发的整个学习过程进行了详细解释。感兴趣的初学者不容错过。

06

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭