Jak dodać Twitter Bootstrap do aplikacji Ruby on Rails

Przez:, 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ć.

Musisz się zalogować by móc oznaczyć tutorial jako ukończony żeby śledzić swój postęp



Komentarze

  • Z dnia: amykang napisał:

    Love your tutorials so far. Short and easy to follow.
  • Z dnia: Frank napisał:

    Great! Easy to follow along, and it is great to see the changes in the app right away! Thanks for posting these!
  • Z dnia: Amanda napisał:

    This is just what I was looking for. Excellent! Thank you for sharing.

Dodaj komentarz

Możesz się zalogować by skomentować