9 Bootstrap Font Awesome Bootstrap Font Awesome Simple- Greeter 9.1 Bootstrap CSS/JavaScript Bootstrap PC Web SimpleGreeter Bootstrap Bootstrap 4 Bootstrap 4 2017 1 Bootstrap 4 Gemfile Gemfile 49 gem 'spring-watcher-listen', '~> 2.0.0' 50 end 51 + 63
9 Bootstrap Font Awesome 52 + gem 'bootstrap', '4.0.0.alpha6' 53 + gem 'tether-rails' Gem bootstrap tether-rails Bootstrap JavaScript Tether Ctrl-C Rails Gem $ bundle app/assets/stylesheets application.css $ rm app/assets/stylesheets/application.css application.scss app/assets/stylesheets/application.scss 1 @import "bootstrap"; 2 @import "*"; app/assets/javascripts application.js app/assets/javascripts/application.js 13 //= require jquery 14 //= require jquery_ujs 15 //= require turbolinks 16 + //= require tether 17 + //= require bootstrap-sprockets 18 //= require_tree. app/views/layouts application.html.erb 64
9.2 Card app/views/layouts/application.html.erb 1 <!DOCTYPE html> 2 <html> 3 <head> 4 + <meta name="viewport" content="width=device-width, initial-scale=1"> 5 <title><%= @document_title %></title> viewport meta width=device-width initial-scale=1 9.2 Card Web Bootstrap Web Bootstrap component Card app/views/hello show.html.erb app/views/hello/show.html.erb 4 - <p>hello, <%= @name %>!</p> 4 + <div class="card"> 5 + <div class="card-block"> 6 + <p>hello, <%= @name %>!</p> 7 + </div> 65
9 Bootstrap Font Awesome 8 + </div> 1. p div 2. div class card 3. div class card-block div p class HTML Bootstrap card card-block 1.25rem Rails 9.1 9.1 Card 66
9.2 Card Bootstrap HTML card-text 9.1 Hello, world! show.html.erb app/views/hello/show.html.erb 5 <div class="card-block"> 6 - <p>hello, <%= @name %>!</p> 6 + <p class="card-text">hello, <%= @name %>!</p> 7 </div> card-text 0 Bootstrap p 1rem 1rem 9.2 67
9 Bootstrap Font Awesome 9.2 Card card-text Card show.html.erb app/views/hello/show.html.erb 4 - <div class="card"> 4 + <div class="card m-3"> class div m-3 m-3 spacing 1 m p 2 0 0 1 0.25rem 2 0.5rem 3 1rem 4 1.5rem 5 3rem 68
9.3 m-t-1 2 9.1 9.1 2 t r b l x y Card 1rem 9.3 9.3 Card 9.3 show.html.erb 69
9 Bootstrap Font Awesome app/views/hello/show.html.erb 4 <div class="card m-3"> 5 - <div class="card-block"> 5 + <div class="card-block card-inverse card-success"> 6 - <p class="card-text">hello, <%= @name %>!</p> 6 + <p class="card-text text-center lead">hello, <%= @name %>!</p> 7 </div> 8 </div> card-inverse card-text card-success #5cb85c success 9.2 9.2 16 card-primary #0275d8 card-success #5cb85c card-info #5bc0de card-warning #f0ad4e card-danger #d9534f Bootstrap blue red primary danger 9.2 3 danger text-center lead 1.25rem 9.4 70
9.4 Font Awesome 9.4 Card 9.4 Hello, world! Chrome A SimpleGreeter 9.4 Font Awesome Font Awesome HTML 9.5 Web 9.5 Font Awesome http//fontawesome.io/icons/ 71
9 Bootstrap Font Awesome Gemfile 1 Gemfile 52 gem 'bootstrap', '~> 4.0.0.alpha6' 53 gem 'tetehr-rails' 54 + gem 'font-awesome-sass' Ctrl-C Rails Gem font-awesome-sass $ bundle app/assets/stylesheets application.scss app/assets/stylesheets/application.scss 1 @import "bootstrap"; 2 + @import "font-awesome-sprockets"; 3 + @import "font-awesome"; 4 @import "*"; 9.5 Font Awesome Font Awesome app/views/hello show.html.erb app/views/hello/show.html.erb 6 - <p class="card-text text-center lead">hello, <%= @name %>!</p> 6 + <p class="card-text text-center lead"> 7 + <i class="fa fa-smile-o"></i> 8 + Hello, <%= @name %>! 9 + </p> 72
9.5 Font Awesome class fa i Font Awesome i fa- class smile-o fa-smile-o Rails 9.6 Hello, world! 9.6 Font Awesome 73