Ich bin ziemlich neu in Rails und Bootstrap. Ich habe Probleme, Bootstrap4 Theme auf einer Ruby Rails-Website zu integrieren. Alle Leerzeichen mit etwas Text werden angezeigt, wenn ich es versuche. Ich habe den Bootstrap-Rubygem BS4 installiert. Infact die Anwendung Website & alle grundlegenden BS-Styling funktioniert gut mit Standard-Sachen an Ort und Stelle. Allerdings habe ich wenig Glück beim Einbau this Bootswatch Flatly Theme wie ich dieses Styling recht mag. On this page for Flatly Bootswatch es gibt Ihnen 6 Dateien zum Herunterladen, i.e bootstrap.min.css, bootstrap.css, variable.less, bootswatch.less, _variables.sass, _bootswatch.sass. Ich nehme an, ich brauche nur die Sass-Dateien, die mit Unterstrich im Dateinamen beginnen. Also habe ich diese 2 Dateien in den Ordner "Assets/Stylesheets" gelegt. Es gibt keine js-Dateien zum Download auf der Website, also bin ich in Ordnung, anzunehmen, dass ich keine js-Dateien für Assets/Javascripts-Ordner brauche? Also ich habe keine js Dateien irgendwo eingefügt. Hier ist mein Setup: Gemfile:Bootstrap4 Theme in eine Ruby Rails-Website integrieren
source 'https://rubygems.org'(: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.1.3'
# 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', '~> 3.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.13'
gem 'selenium-webdriver'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
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'
gem 'listen', '>= 3.0.5', '< 3.2'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
#Added by me
group :production do
gem 'pg', '~> 0.21.0'
end
# Added by MS
gem 'bootstrap', '~> 4.0.0.beta'
gem 'jquery-rails', '~> 4.3', '>= 4.3.1'
gem 'sprockets-rails', '~> 3.2', '>= 3.2.1'
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>OmegaBlog</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<div class="container-fluid">
<%= render 'layouts/navigation' %>
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</body>
</html>
application.scss (sollte dieser application.css.scss und die Reihenfolge der @import Elemente korrekt genannt werden? ?? - ich habe Zweifel an dieser)
@import "bootstrap";
@import "variables";
@import "bootswatch";
application.js (wieder nicht sicher auf der Reihenfolge der aufgeführten Punkte hier)
!//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
Das Problem ist also, dass die Navbar alles weiß ist, die nur einige Text sichtbar:
<div class="bs-docs-section clearfix">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="navbar">Navbar</h1>
</div>
<div class="bs-component">
<nav class="navbar navbar-default">
<div class="container-fluid">
<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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</nav>
</div>
Ich habe für grundlegende Anweisungen für die detaillierte BS4 mit Rails gesucht 5.1 aber kein Glück !!
haben Sie überprüft, den Javascript-Inspektoren zu sehen, ob die CSS-404-Dateien und auch Steuer Verschiebung r getan, um die Seiten-Cache zu aktualisieren? –
Keine js Fehler oder 404s. Es sieht jedoch so aus, als ob es nicht meine benutzerdefinierten sasses trifft. Ich spiele mit der Reihenfolge der Dinge in application.scss herum. Vielen Dank! – TheMissingNTLDR