[英]How to make bootstrap navbar work in my Rails movie review application
I included all the files that are needed to run the bootstrap, but the navbar is not working, it looks like normal HTML.我包含了运行引导程序所需的所有文件,但导航栏不起作用,它看起来像正常的 HTML。
gemfile:宝石文件:
source 'https://rubygems.org'
git_source(:github) do |repo_name|
repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
"https://github.com/#{repo_name}.git"
end
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2', '>= 5.2.4.2'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.7'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '>= 2.15'
gem 'selenium-webdriver'
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
gem 'web-console', '>= 3.3.0'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
gem 'devise', '~> 4.7', '>= 4.7.1'
gem 'paperclip', '~> 6.1'
gem 'bootstrap-sass', '~> 3.4', '>= 3.4.1'
gem 'jquery-rails', '~> 4.4'
gem 'jquery-turbolinks', '~> 2.1'
gem 'rails-ujs', '~> 0.1.0'
gem 'sassc-rails', '~> 2.1', '>= 2.1.2'
application.js:应用程序.js:
//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
application.scss:应用程序.scss:
@import "bootstrap-sprockets";
@import "bootstrap";
This is the header file that I used for Navbar, _header.html.erb:这是我用于导航栏的 header 文件,_header.html.erb:
<nav class="navbar" navbar-default role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only"> Toggle Navigation</span>
<span class="icon-bar"> </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to "Movies Reviews", root_path, class: "navbar-brand" %>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<% if user_signed_in? %>
<li><%= link_to "New Movie" , new_movie_path, class: "active" %> </li>
<li> <%= link_to "Account", edit_user_registration_path %></li>
<% else %>
<li> <%= link_to "Sign Up", new_user_registration_path, class: "active" %></li>
<li> <%= link_to "Sign In", new_user_session_path, class: "active" %></li>
<% end %>
</ul>
<form class="navbar-form navbar-right">
<div class="form_group">
<input type="text" class="form-control" placeholder="search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</nav>
And application.html.erb:以及应用程序.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>Moviereview</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= render 'layouts/header' %>
<% flash.each do |name, msg|%>
<%= content_tag(:div ,msg, class:"alert alert_info")%>
<% end %>
<%= yield %>
</body>
</html>
I saw the same question and applied all the answers in that but don't get the proper result.我看到了同样的问题并应用了所有答案,但没有得到正确的结果。 Here is the output I am getting:这是我得到的 output:
Did you install bootstrap and its required dependencies with from the terminal?您是否从终端安装了引导程序及其所需的依赖项?
yarn add bootstrap jquery popper.js
Installing bootstrap in Ruby on Rails 6:在 Rails 6 上的 Ruby 中安装引导程序:
https://getbootstrap.com/
https://github.com/twbs/bootstrap-rubygem
// Gemfile.rb
gem 'bootstrap', '~> 4.4.1'
gem 'jquery-rails'
// Console
bundle install
yarn add bootstrap@4.3.1 jquery popper.js
// application.scss
@import "bootstrap";
// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require("webpack")
environment.plugins.append("Provide", new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
}))
module.exports = environment
// packs/application.js
import "bootstrap"
Source: https://gist.github.com/yshmarov/758a04798c3400cf125de27659dab43e/#file-gem-bootstrap资料来源: https://gist.github.com/yshmarov/758a04798c3400cf125de27659dab43e/#file-gem-bootstrap
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.