Jak dodać Twitter Bootstrap do aplikacji Ruby on Rails
Przez: Lukasz Muzyka, Z dnia:
OK, budujemy naszą aplikację. Dotychczas nie była to najlepiej wyglądająca strona we wszechświecie. Nigdy nie jest za wcześnie na stworzenie lepszego wyglądu naszej strony (tak byśmy nie wstydzili pochwalić się postępami). Niestety pisanie własnego CSS jest czasochłonne, nie wspominając, że sam zamysł jest cięzki do zniesienia. Aby rozwiązać ten problem będziemy używać TwitterBootstrap jako sposób na wystarczające przyspieszenie tego procesu.
TwitterBootstrap to zbiór klas CSS, których możemy użyć do stylizacji naszej strony. Bootsrtap jest bardzo wyczerpujący i możliwy do przystosowania, właśnie to sprawia, że jest świetnym narzędziem. To tylko niektóre z powodów, dlaczego jest on używany na tysiącach, jeżeli nie milionach, stron.
Aby dodać Bootstrap do naszej aplikacji będziemy używać gema bootstrap-sass.
Krok 1: Dodaj gem Bootstrap
Na początek, przjdźmy do Gemfile i dodajmy tam gem.
Gemfile
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3' ###### THIS SHOULD ALREADY BE THERE
gem 'bootstrap-sass', '~> 3.1.1'
Załadujmy ten gem:
bash
$ bundle install
Krok 2: File Stwórz własny plik custom.css
Natępnym krokiem jest import Bootrstap-a do naszego pliku CSS. By tego dokanać, otwórz /app/assets/stylesheets i swórz tam nowy plik, nazwij go "custom.css.scss". U góry tego pliku dodaj to:
/app/assets/stylesheets/custom.css.scss
@import "bootstrap";
.field_with_errors { @extend .has-error; }
.alert-notice { @extend .alert-info; }
.alert-alert { @extend .alert-danger; }
Ostatnie 3 linijkinaprawiają niektóre sprzeczności pomiędzy działaniem Devise i nazawmi klas bootstrap. Zapewni to poprawne wyświtlanie alertów.
Krok 3: Zmodyfikuj Aplikację
Następnie, musimy dodać bootstrap JavaScript do naszej aplikacji. Otwórz /app/assets/javascripts/application.js i dodaj linijkę:
/app/assets/javascripts/application.js
//= require bootstrap
Tutaj przedstawiamy gdzie ta linijka powinna się znajdować:
/app/assets/javascripts/application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .
Jeżeli miałeś uruchomiony serwer, w celu zobaczenia zmian, powinieneś go zrestartować. W oknie terminala, gdzie masz uruchomiony serwer aplikacji naciśnij ctrl + c żeby go zatrzymać i odpalić ponownie:
$ rails server
Krok 4: Zmień plik Produkcji
Zanim dodamy zmiany i wypchniemy je do Heroku musimy zmienić jedną rzecz w naszym pliku konfiguracyjnym produkcji:
config/environments/production.rb
config.assets.compile = true
Krok 5: Wypchnij aplikację do Heroku
bash
$ git add .
$ git commit -a -m "added bootstrap"
$ git push
$ git push heroku master
Skończyłeś. Bootstrap teraz działa w Twojej aplikacji. Jeżeli dokonywałeś zmian przedstawionych w tym tutorialu możesz przejść do strony domowej i zobaczyć jak zmieniła się czcionka. To zaledwie czubek góry lodowej. W edycję naszego HTML zagłębimy się bardziej kiedy będziemy mieli więcej treści, nad którą będzie można popracować.
Komentarze
Dodaj komentarz
Możesz się zalogować by skomentować
Z dnia: amykang napisał:
Z dnia: Frank napisał:
Z dnia: Amanda napisał:
This is just what I was looking for. Excellent! Thank you for sharing.
Z dnia: oscar ordenes gonzalez napisał:
Bien explicado, llevare a la practica y revisare que funcione.
Mil gracias
Thanks for the explanation, clear. I will apply and review.