Er zijn een paar verschillende manieren om Bootstrap te integreren in uw Rails 5 app, maar we krijgen het werkend door het installeren van de officiële Bootstrap gem. De instructies op de Github pagina van de gem zijn geweldig, dus het volgende is eigenlijk gewoon een herdruk van wat je daar zult vinden.
voeg de edelsteen toe aan uw Gemfile.
#GEMFILE gem 'bootstrap', '~> 4.3.1' voer bundle install uit op de commandoregel.
$ bundle install Include the Bootstrap CSS
bevestig dat uw toepassing css-bestand een .scss extensie gebruikt. Het kan een .css bestand zijn, in welk geval u het als volgt moet wijzigen:
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss Verwijder alle *= require en *= require_tree statements uit het Sass-bestand, en gebruik in plaats daarvan @import om Sass-bestanden te importeren. Importeer dan de bootstrap stijlen!
//app/assets/stylesheets/application.scss @import "bootstrap"; u hebt nu alle bootstrap stijlen klaar om te gaan! We zijn nog niet klaar.
inclusief de Bootstrap Javascript
veel van de Bootstrap componenten zijn afhankelijk van Javascript en jQuery, dus we moeten de Bootstrap javascript bestanden importeren en jQuery installeren als dat nodig is. jQuery is al opgenomen als uw Rails versie is minder 5.1. In dat geval, voeg gewoon bootstrap en popper (een Javascript library bootstrap hangt af van voor positionering) in uw app/assets/javascripts/application.js manifest bestand.
//app/assets/javascripts/application.js //= require popper //= require bootstrap als uw Rails versie 5.1+ is, moet u jQuery toevoegen. Installeer hiervoor het jquery-rails gem, bundle intsall en voeg de bibliotheken toe aan uw application.js manifest bestand. Bijvoorbeeld:
#GEMFILE gem 'jquery-rails' $ bundle install //app/assets/javascripts/application.js //= require jquery3 //= require popper //= require bootstrap nu zijn we klaar om de stijlen aan te passen!
Bootstrap aanpassen
Er zijn veel Bootstrap-variabelen die u kunt definiëren om uw app een eigen stijl te geven. We veranderen gewoon snel de achtergrondkleur van het lichaam en de themakleuren om snel te laten zien hoe je aan de slag kunt. Het belangrijkste punt is dat je deze variabelen moet instellen voor je @import "bootstrap"; regel.
We zullen de themakleuren aanpassen aan het signaalthema van deze Bootstrap-themasite en onze lichaamsachtergrond veranderen in lichtgrijs.
//app/assets/stylesheets/application.scss $body-bg: #e2e2e2; $theme-colors: ( "primary": #FF304F, "secondary": #CACACA, "success": #015668, "info": #0F81C7, "warning": #0DE2EA, "danger": #06648C, "light": #ececec, "dark": #222222 ); @import "bootstrap"; //bootstrap gem nu kunt u de standaard Bootstrap stijlen gebruiken, maar ze zullen uw aangepaste kleuren hebben!
.container .row .col-md %button.btn.btn-primary Primary %button.btn.btn-secondary Secondary %button.btn.btn-success Success %button.btn.btn-danger Danger %button.btn.btn-warning Warning %button.btn.btn-info Info %button.btn.btn-light Light %button.btn.btn-dark Dark Er zijn veel andere leuke trucs en hulpprogramma ‘ s die Bootstrap biedt om de look en feel van uw app verder aan te passen. Ik zou aanraden om de documentatie te lezen om meer te leren, maar ik hoop dat het bovenstaande helpt om je op weg te helpen.
