Rails Bootstrap dropdown下拉菜单没反应解决方法

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #ffffff }
span.s1 { }

Mac环境

Rails 5.1.4

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #ffffff }
span.s1 { }

ruby 2.4.1

bootstrap v3.3.7

------------------坑区-------------------

Ruby on Rails Tutorial Fourth Edition教程

第8章基本登录功能

代码清单 8.19:修改布局中的链接

app/views/layouts/_header.html.erb

....代码省略....

----------------------------------------

-----------------跳出坑区----------------

学习以上教程被卡在这章节中,问题是 “借助 Bootstrap 实现了下拉菜单”,按照教程的方法写了之后,下拉菜单是没有任何反应的。

我的处理方法是原基础上重新安装Bootstrap,可以查看安装的README.rd 。

接着去下载Bootstrap (Sass),解压出来,复制 dropdown.js 文件,

/bootstrap-sass-3.3.7/assets/javascripts/bootstrap/dropdown.js
到你的web目录下/app/assets/javascripts/ 放这里

安装完后重启服务器,就会发现dropdown下拉菜单已经正常运行了。

以上方法如果有什么问题或错误,请告诉我一下,毕竟我是新手,不太会。

----------------------------------------

时间: 2024-08-05 11:12:37

Rails Bootstrap dropdown下拉菜单没反应解决方法的相关文章

Bootstrap按钮式下拉菜单

前面的话 按钮式下拉菜单仅从外观上看,和下拉菜单效果基本上是一样的.不同的是普通的下拉菜单是block元素,而按钮式下拉菜单是inline-block元素.本文将详细介绍Bootstrap按钮式下拉菜单 概述 按钮式下拉菜单其实就是普通的下拉菜单,唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”,display从block换成了inline-block <div class="btn-group"> <button type=&qu

Bootstrap的下拉菜单float问题

在学习bootstrap中的下拉菜单时,遇到下面情况: <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"

深入理解BootStrap Item8 -- 下拉菜单

1.下拉菜单(基本用法) 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件: ? LESS版本:对应的源码文件为 dropdowns.less ? Sass版本:对应的源码文件为 _dropdowns.sass ? 编译后的Bootstrap版本:查看bootstrap.css文件第3004行-第3130行 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本

创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来.   Bootstrap提供了不少的前端UI组件.带下拉菜单的文本框就是其中之一,效果图如下(真要自己完全设计,还得费一番功夫)   关于该组件的详情参看Bootstrap官网.带下拉菜单的文本框   看到上面的效果图,使我想到WinForm编程中的DropDownList控件.不过,和DropDownList控件相比,还缺少以下内容 1.当点击菜单中的

巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)

:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为这个动作赋予了更加多的功能——就如同:hover 一样你可以做一些样式定义. 先上效果图 正如标题所说,本文是教你如何巧用CSS3 :target 伪类制作Dropdown下拉菜单,原生HTML+CSS,无JavaScript.为了吸引各位往下看,先上实际例子,再进行剖析. Duang~ 实际例子其

bootstrap的下拉菜单

本文章将重点介绍 Bootstrap 下拉菜单.下拉菜单是可切换的,用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 1.将下拉菜单触发器和下拉菜单都包裹在 放在class.dropdown 里,或者另一个声明了 position: relative; 的元素. 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me

Bootstrap 关于下拉菜单的使用

需要将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素. <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" ari

Firemonkey TComboBox 下拉菜单字型修改方法 (D10)

在 FMX 下的 TComboBox 下拉菜单字型修改有二种方法: 使用 Style,需先设定好 Style 后,再指定预设项的 Style,方法如下: procedure TForm1.FormCreate(Sender: TObject); var i: Integer; begin ComboBox2.DropDownKind := TDropDownKind.Custom; Combobox2.ListBox.DefaultItemStyles.ItemStyle := 'listbox

android下拉菜单spinner的使用方法

Spinner控件也是一种列表类型的控件,它的继承关系如下: java.lang.Object    ? android.view.View      ? android.view.ViewGroup        ? android.widget.AdapterView<Textends android.widget.Adapter>          ? android.widget.AbsSpinner           ? android.widget.Spinner android