Cách thêm Bootstrap vào ứng dụng Ruby on Rails
Nếu bạn đang phát triển một ứng dụng Ruby on Rails , bạn có thể quan tâm đến việc thêm các kiểu vào dự án của bạn để tạo điều kiện cho user tham gia. Một cách để làm điều này là thêm Bootstrap , một khuôn khổ HTML, CSS và JavaScript được thiết kế để đơn giản hóa quá trình tạo các dự án web đáp ứng và sẵn sàng cho thiết bị di động. Bằng cách triển khai Bootstrap trong một dự án Rails, bạn có thể tích hợp các quy ước bố cục và các thành phần của nó vào ứng dụng của bạn để làm cho tương tác của user với trang web hấp dẫn hơn.Trong hướng dẫn này, bạn sẽ thêm Bootstrap vào một dự án Rails hiện có sử dụng gói webpack để phân phát các tài sản JavaScript và CSS của nó. Mục tiêu sẽ là tạo ra một trang web hấp dẫn về mặt hình ảnh mà user có thể tương tác để chia sẻ thông tin về cá mập:
Yêu cầu
Để làm theo hướng dẫn này, bạn cần :
- Máy local hoặc server phát triển chạy Ubuntu 18.04. Máy phát triển của bạn phải có user không phải root có quyền quản trị và firewall được cấu hình với
ufw. Để biết hướng dẫn về cách cài đặt điều này, hãy xem hướng dẫn Cài đặt server ban đầu với Ubuntu 18.04 của ta . - Node.js và npm được cài đặt trên máy local hoặc server phát triển của bạn. Hướng dẫn này sử dụng Node.js version 10.16.3 và npm version 6.9.0 . Để biết hướng dẫn về cách cài đặt Node.js và npm trên Ubuntu 18.04, hãy làm theo hướng dẫn trong phần “Cài đặt bằng PPA” của Cách cài đặt Node.js trên Ubuntu 18.04 .
- Ruby, rbenv và Rails được cài đặt trên máy local hoặc server phát triển của bạn, làm theo các Bước 1-4 trong Cách cài đặt Ruby on Rails với rbenv trên Ubuntu 18.04 . Hướng dẫn này sử dụng Ruby 2.5.1 , rbenv 1.1.2 và Rails 5.2.3 .
- Đã cài đặt SQLite, theo Bước 1 củaCách tạo Ứng dụng Ruby on Rails . Hướng dẫn này sử dụng SQLite 3 3.22.0 .
Bước 1 - Nhân bản Dự án và Cài đặt Phụ thuộc
Bước đầu tiên của ta sẽ là sao chép repository kích thích rails từ tài khoản GitHub của Cộng đồng DigitalOcean . Kho lưu trữ này bao gồm mã từ cài đặt được mô tả trong Cách thêm kích thích vào ứng dụng Ruby on Rails , mô tả cách thêm Stimulus.js vào dự án Rails 5 hiện có.
Sao chép repository vào một folder có tên là rails-bootstrap :
- git clone https://github.com/do-community/rails-stimulus.git rails-bootstrap
Điều hướng đến folder rails-bootstrap :
- cd rails-bootstrap
Để làm việc với mã dự án, trước tiên bạn cần cài đặt các phụ thuộc của dự án, được liệt kê trong Gemfile của nó. Sử dụng lệnh sau để cài đặt các đá quý cần thiết:
- bundle install
Tiếp theo, bạn sẽ cài đặt các phụ thuộc Yarn của bạn . Bởi vì dự án Rails 5 này đã được sửa đổi để phân phối nội dung với webpack, các phụ thuộc JavaScript của nó hiện được quản lý bởi Yarn. Điều này nghĩa là cần phải cài đặt và xác minh các phụ thuộc được liệt kê trong file package.json của dự án.
Chạy lệnh sau để cài đặt các phần phụ thuộc này:
- yarn install --check-files
--check-files kiểm tra đảm bảo rằng các file nào đã được cài đặt trong folder node_modules chưa bị xóa.
Tiếp theo, chạy di chuyển database của bạn:
- rails db:migrate
Sau khi quá trình di chuyển của bạn hoàn tất, bạn có thể kiểm tra ứng dụng đảm bảo rằng nó đang hoạt động như mong đợi. Khởi động server của bạn bằng lệnh sau nếu bạn đang làm việc local :
- rails s
Nếu bạn đang làm việc trên một server phát triển, bạn có thể khởi động ứng dụng bằng:
- rails s --binding=your_server_ip
Điều hướng đến localhost:3000 hoặc http:// your_server_ip :3000 . Bạn sẽ thấy trang đích sau:
Để tạo một con cá mập mới, hãy nhấp vào liên kết Cá mập mới ở cuối trang, liên kết này sẽ đưa bạn đến sharks/new đường sharks/new . Bạn sẽ được yêu cầu nhập tên user ( sammy ) và password ( cá mập ), nhờ cài đặt xác thực của dự án. Chế độ xem new trông như thế này:
Để xác minh ứng dụng đang hoạt động, ta có thể thêm một số thông tin demo vào nó. Nhập “Great White” vào trường Tên và “Đáng sợ” vào trường Sự kiện :
Nhấp vào nút Tạo cá mập để tạo cá mập:
Đến đây bạn đã cài đặt các phụ thuộc cần thiết cho dự án của bạn và kiểm tra chức năng của nó. Tiếp theo, bạn có thể thực hiện một vài thay đổi đối với ứng dụng Rails để user gặp phải trang đích chính trước khi chuyển đến chính ứng dụng thông tin cá mập.
Bước 2 - Thêm trang đích chính và bộ điều khiển
Ứng dụng hiện tại đặt chế độ xem root thành trang thông tin cá mập chính, chế độ xem index cho bộ điều khiển sharks . Mặc dù điều này hoạt động để đưa user đến ứng dụng chính, nhưng có thể ít mong muốn hơn nếu ta quyết định phát triển ứng dụng trong tương lai và thêm các khả năng và tính năng khác. Ta có thể tổ chức lại ứng dụng để đặt chế độ xem root thành bộ điều khiển home , chế độ này sẽ bao gồm chế độ xem index . Từ đó, ta có thể liên kết với các phần khác của ứng dụng.
Để tạo bộ điều khiển home , bạn có thể sử dụng lệnh rails generate với controller tạo controller . Trong trường hợp này, ta sẽ chỉ định rằng ta muốn xem index cho trang đích chính của bạn :
- rails generate controller home index
Với bộ điều khiển được tạo, bạn cần sửa đổi chế độ xem root trong file config/routes.rb của dự án - file chỉ định các khai báo tuyến của ứng dụng - vì chế độ xem root hiện được đặt thành chế độ xem index cá mập.
Mở tập tin:
- nano config/routes.rb
Tìm dòng sau:
. . . root 'sharks#index' . . . Thay đổi nó thành như sau:
. . . root 'home#index' . . . Thao tác này sẽ đặt chế độ xem index của bộ điều khiển home làm root của ứng dụng, giúp nó có thể phân nhánh sang các phần khác của ứng dụng từ đó.
Lưu file khi bạn hoàn tất chỉnh sửa.
Với những thay đổi này, bạn đã sẵn sàng để chuyển sang thêm Bootstrap vào ứng dụng.
Bước 3 - Cài đặt Bootstrap và thêm kiểu tùy chỉnh
Trong bước này, bạn sẽ thêm Bootstrap vào dự án của bạn , cùng với các thư viện công cụ mà nó yêu cầu để hoạt động bình thường. Điều này sẽ liên quan đến việc nhập các thư viện và plugin vào các file môi trường và điểm nhập webpack của ứng dụng. Nó cũng sẽ liên quan đến việc tạo một biểu định kiểu tùy chỉnh trong folder app/javascript của ứng dụng của bạn, folder chứa nội dung JavaScript của dự án.
Đầu tiên, sử dụng yarn để cài đặt Bootstrap và các phụ thuộc của nó:
- yarn add bootstrap jquery popper.js
Nhiều thành phần của Bootstrap yêu cầu JQuery và Popper.js , cùng với các plugin tùy chỉnh riêng của Bootstrap, vì vậy lệnh này sẽ đảm bảo bạn có các thư viện mình cần.
Tiếp theo, mở file cấu hình webpack chính của bạn, config/webpack/environment.js bằng nano hoặc editor bạn quen dùng :
- nano config/webpack/environment.js
Bên trong file , hãy thêm thư viện webpack, cùng với một ProvidePlugin cho Bootstrap biết cách diễn giải các biến JQuery và Popper.
Thêm mã sau vào file :
const { environment } = require('@rails/webpacker') const webpack = require("webpack") environment.plugins.append("Provide", new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', Popper: ['popper.js', 'default'] })) module.exports = environment ProvidePlugin giúp ta tránh import nhiều câu lệnh import hoặc require mà ta thường sử dụng khi làm việc với module JQuery hoặc Popper. Với plugin này, webpack sẽ tự động tải các module chính xác và trỏ các biến được đặt tên đến các file xuất đã tải của mỗi module .
Lưu file khi bạn hoàn tất chỉnh sửa.
Tiếp theo, mở file điểm nhập webpack chính của bạn, app/javascript/packs/application.js :
- nano app/javascript/packs/application.js
Bên trong file , thêm các câu lệnh import sau để nhập Bootstrap và file kiểu scss tùy chỉnh mà bạn sẽ tạo tiếp theo:
. . . import { Application } from "stimulus" import { definitionsFromContext } from "stimulus/webpack-helpers" import "bootstrap" import "../stylesheets/application" . . . Lưu file khi bạn hoàn tất chỉnh sửa.
Tiếp theo, tạo một folder stylesheets ứng dụng của bạn:
- mkdir app/javascript/stylesheets
Mở file kiểu tùy chỉnh:
- nano app/javascript/stylesheets/application.scss
Đây là một file scss , sử dụng Sass thay vì CSS . Sass, hay Trang tính kiểu tuyệt vời cú pháp, là một ngôn ngữ mở rộng CSS cho phép các nhà phát triển tích hợp logic lập trình và các quy ước như các biến được chia sẻ vào các luật tạo kiểu.
Trong file , hãy thêm các câu lệnh sau để nhập kiểu scss Bootstrap tùy chỉnh và phông chữ Google cho dự án:
@import "~bootstrap/scss/bootstrap"; @import url('https://fonts.googleapis.com/css?family=Merriweather:400,700'); Tiếp theo, thêm các định nghĩa và kiểu biến tùy chỉnh sau cho ứng dụng:
. . . $white: white; $black: black; .navbar { margin-bottom: 0; background: $black; } body { background: $black; color: $white; font-family: 'Merriweather', sans-serif; } h1, h2 { font-weight: bold; } p { font-size: 16px; color: $white; } a:visited { color: $black; } .jumbotron { background: #0048CD; color: $white; text-align: center; p { color: $white; font-size: 26px; } } .link { color: $white; } .btn-primary { color: $white; border-color: $white; margin-bottom: 5px; } .btn-sm { background-color: $white; display: inline-block; } img, video, audio { margin-top: 20px; max-width: 80%; } caption { float: left; clear: both; } Lưu file khi bạn hoàn tất chỉnh sửa.
Bạn đã thêm Bootstrap vào dự án của bạn , cùng với một số kiểu tùy chỉnh. Đến đây bạn có thể chuyển sang tích hợp các quy ước và thành phần bố cục Bootstrap vào các file ứng dụng của bạn .
Bước 4 - Sửa đổi bố cục ứng dụng
Bước đầu tiên của ta trong việc tích hợp các quy ước và thành phần Bootstrap vào dự án sẽ là thêm chúng vào file bố cục ứng dụng chính. Tệp này đặt các phần tử sẽ có trong mỗi mẫu dạng xem được kết xuất cho ứng dụng. Trong file này, ta sẽ đảm bảo điểm vào webpack của ta được xác định, đồng thời cũng bổ sung thêm tài liệu tham khảo để một tiêu đề chuyển hướng chia sẻ một phần và một số logic mà sẽ cho phép ta làm cho một bố trí cho các quan điểm liên quan đến việc ứng dụng cá mập.
Đầu tiên, mở app/views/layouts/application.html.erb , file bố cục chính của ứng dụng của bạn:
- nano app/views/layouts/application.html.erb
Hiện tại, file có dạng như sau:
<!DOCTYPE html> <html> <head> <title>Sharkapp</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <%= yield %> </body> </html> Mã hiển thị những thứ như các thông số bảo vệ chống giả mạo yêu cầu trên nhiều trang web và mã thông báo cho các biểu mẫu động, một csp-nonce cho các mã khác mỗi phiên cho phép các thẻ tập lệnh nội dòng cũng như các biểu định kiểu và nội dung javascript của ứng dụng. Lưu ý thay vì có javascript_link_tag , mã của ta bao gồm javascript_ pack _tag , nó yêu cầu Rails tải điểm nhập webpack chính của ta tại app/javascript/packs/application.js .
Trong <body> của trang, một câu lệnh yield yêu cầu Rails chèn nội dung từ một dạng xem. Trong trường hợp này, vì root ứng dụng của ta trước đây được ánh xạ tới chế độ xem cá mập index , điều này sẽ chèn nội dung từ chế độ xem đó. Tuy nhiên, bây giờ, vì ta đã thay đổi chế độ xem root , điều này sẽ chèn nội dung từ chế độ xem index của bộ điều khiển home .
Điều này đặt ra một số câu hỏi: Ta có muốn giao diện trang chủ của ứng dụng giống như những gì user thấy khi họ xem ứng dụng cá mập không? Và nếu ta muốn những quan điểm này có phần khác biệt, ta thực hiện điều đó như thế nào?
Bước đầu tiên sẽ là quyết định những gì nên được nhân rộng trên tất cả các chế độ xem ứng dụng. Ta có thể giữ nguyên mọi thứ có trong <header> , vì nó chủ yếu là các thẻ và metadata mà ta muốn hiện diện trên tất cả các trang ứng dụng. Tuy nhiên, trong phần này, ta cũng có thể thêm một số thứ sẽ tùy chỉnh tất cả các chế độ xem ứng dụng của ta .
Đầu tiên, hãy thêm thẻ meta viewport mà Bootstrap đề xuất cho các hành vi đáp ứng:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sharkapp</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> . . . Tiếp theo, thay thế mã title hiện có bằng mã sẽ hiển thị tiêu đề ứng dụng theo cách năng động hơn:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><%= content_for?(:title) ? yield(:title) : "About Sharks" %></title> <%= csrf_meta_tags %> <%= csp_meta_tag %> . . . Thêm <meta> để bao gồm mô tả của trang web:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><%= content_for?(:title) ? yield(:title) : "About Sharks" %></title> <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "About Sharks" %>"> <%= csrf_meta_tags %> <%= csp_meta_tag %> . . . Với mã này tại chỗ, bạn có thể thêm một phần chuyển vào bố cục. Tốt nhất, mỗi trang trong ứng dụng của ta nên bao gồm thành phần thanh chuyển ở đầu trang, để user có thể dễ dàng chuyển từ phần này sang phần khác của trang web.
Trong <body> , thêm <header> và câu lệnh hiển thị sau:
<body> <header> <%= render 'layouts/navigation' %> </header> <%= yield %> . . . Thẻ <header> cho phép bạn tổ chức nội dung trang của bạn , tách thanh chuyển khỏi nội dung trang chính.
Cuối cùng, bạn có thể thêm thẻ phần tử <main> và một số logic để kiểm soát chế độ xem nào và do đó ứng dụng sẽ hiển thị bố cục nào. Mã này sử dụng phương thức content_for để tham chiếu đến mã nhận dạng nội dung mà ta sẽ liên kết với bố cục cá mập của bạn trong bước tiếp theo.
Thay thế báo cáo yield hiện có bằng nội dung sau:
. . . <body> <header> <%= render 'layouts/navigation' %> </header> <main role="main"> <%= content_for?(:content) ? yield(:content) : yield %> </main> </body> </html> Bây giờ, nếu khối :content được đặt, ứng dụng sẽ mang lại bố cục liên quan. Nếu không, nhờ toán tử bậc ba, nó sẽ thực hiện một kết quả ngầm định của chế độ xem được liên kết với bộ điều khiển home .
Khi bạn đã thực hiện những thay đổi này, hãy lưu file .
Với bộ bố cục toàn ứng dụng, bạn có thể chuyển sang tạo một phần thanh chuyển được chia sẻ và bố cục cá mập cho chế độ xem cá mập của bạn .
Bước 5 - Tạo bố cục từng phần và cụ thể được chia sẻ
Ngoài những thay đổi bạn đã thực hiện đối với bố cục ứng dụng ở Bước trước, bạn cần tạo một phần thanh chuyển được chia sẻ, bố cục cá mập mà bạn đã tham chiếu trong app/views/layouts/application.html.erb và một chế độ xem cho trang đích của ứng dụng. Bạn cũng có thể thêm các kiểu Bootstrap vào các phần tử link_to hiện tại của ứng dụng để tận dụng các kiểu Bootstrap tích hợp sẵn.
Trước tiên, hãy mở file cho một phần thanh chuyển được chia sẻ:
- nano app/views/layouts/_navigation.html.erb
Thêm mã sau vào file để tạo thanh chuyển :
<nav class="navbar navbar-dark navbar-static-top navbar-expand-md"> <div class="container"> <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> </button> <%= link_to "Everything Sharks", root_path, class: 'navbar-brand' %> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav mr-auto"> <li class='nav-item'><%= link_to 'Home', home_index_path, class: 'nav-link' %></li> <li class='nav-item'><%= link_to 'Sharks', sharks_path, class: 'nav-link' %></li> </li> </ul> </div> </div> </nav> Thanh chuyển này tạo liên kết cho root ứng dụng bằng phương thức link_to , phương thức này ánh xạ tới đường dẫn root của ứng dụng. Các thanh chuyển cũng bao gồm hai liên kết bổ sung: một để các Home con đường, mà bản đồ để các home điều khiển của index quan điểm, và khác với các đường dẫn ứng dụng cá mập, mà bản đồ với shark index quan điểm.
Lưu file khi bạn hoàn tất chỉnh sửa.
Tiếp theo, mở một file trong folder layouts cho bố cục cá mập:
- nano app/views/layouts/sharks.html.erb
Trước khi thêm các tính năng bố cục, ta cần đảm bảo nội dung của bố cục được đặt là :content khối :content mà ta tham chiếu trong bố cục ứng dụng chính. Thêm các dòng sau vào file để tạo khối:
<% content_for :content do %> <% end %> Mã ta sắp viết trong khối này sẽ được hiển thị bên trong :content khối :content trong file app/views/layouts/application.html.erb khi nào bộ điều khiển yêu cầu chế độ xem cá mập.
Tiếp theo, bên trong chính khối, thêm mã sau để tạo một thành phần jumbotron và hai vùng chứa :
<% content_for :content do %> <div class="jumbotron text-center"> <h1>Shark Info</h1> </div> <div class="container"> <div class="row"> <div class="col-lg-6"> <p> <%= yield %> </p> </div> <div class="col-lg-6"> <p> <div class="caption">You can always count on some sharks to be friendly and welcoming!</div> <img src="https://assets.digitalocean.com/articles/docker_node_image/sammy.png" alt="Sammy the Shark"> </p> </div> </div> </div> <% end %> Vùng chứa đầu tiên bao gồm một tuyên bố yield sẽ chèn nội dung từ chế độ xem của bộ điều khiển shark , trong khi containers thứ hai bao gồm dấu nhắc rằng một số cá mập nhất định luôn thân thiện và chào đón.
Cuối cùng, ở cuối file , thêm câu lệnh render sau để hiển thị bố cục ứng dụng:
. . . </div> </div> </div> <% end %> <%= render template: "layouts/application" %> Bố cục cá mập này sẽ cung cấp nội dung cho khối :content có tên :content trong bố cục ứng dụng chính; sau đó nó sẽ tự hiển thị bố cục ứng dụng đảm bảo rằng các trang ứng dụng được hiển thị của ta có mọi thứ ta muốn ở cấp toàn ứng dụng.
Lưu file khi bạn hoàn tất chỉnh sửa.
Bây giờ ta có partials và bố trí của ta tại chỗ, nhưng ta chưa tạo quan điểm cho rằng user sẽ nhìn thấy khi họ chuyển đến trang chủ ứng dụng, các home điều khiển của index quan điểm.
Mở file đó ngay bây giờ:
- nano app/views/home/index.html.erb
Cấu trúc của chế độ xem này sẽ trùng với bố cục mà ta đã xác định cho các chế độ xem cá mập, với một thành phần jumbotron chính và hai containers . Thay thế mã bảng soạn sẵn trong file bằng mã sau:
<div class="jumbotron"> <div class="container"> <h1>Want to Learn About Sharks?</h1> <p>Are you ready to learn about sharks?</p> <br> <p> <%= button_to 'Get Shark Info', sharks_path, :method => :get, :class => "btn btn-primary btn-lg"%> </p> </div> </div> <div class="container"> <div class="row"> <div class="col-lg-6"> <h3>Not all sharks are alike</h3> <p>Though some are dangerous, sharks generally do not attack humans. Out of the 500 species known to researchers, only 30 have been known to attack humans. </p> </div> <div class="col-lg-6"> <h3>Sharks are ancient</h3> <p>There is evidence to suggest that sharks lived up to 400 million years ago. </p> </div> </div> </div> Như vậy, khi truy cập vào trang chủ của ứng dụng, user sẽ có một cách rõ ràng để chuyển đến phần cá mập của ứng dụng, bằng cách nhấp vào nút Get Shark Info . Nút này trỏ đến shark_path - công cụ trợ giúp ánh xạ đến các tuyến đường được liên kết với bộ điều khiển sharks .
Lưu file khi bạn hoàn tất chỉnh sửa.
Nhiệm vụ cuối cùng của ta sẽ là chuyển đổi một số phương thức link_to trong ứng dụng của ta thành các node mà ta có thể tạo kiểu bằng Bootstrap. Ta cũng sẽ thêm một cách để chuyển trở lại trang chủ từ chế độ xem index cá mập.
Mở chế độ xem index cá mập để bắt đầu:
- nano app/views/sharks/index.html.erb
Ở cuối file , tìm phương thức link_to dẫn đến chế độ xem cá mập new :
. . . <%= link_to 'New Shark', new_shark_path %> Sửa đổi mã để biến liên kết này thành một nút sử dụng lớp "btn btn-primary btn-sm" của Bootstrap:
. . . <%= link_to 'New Shark', new_shark_path, :class => "btn btn-primary btn-sm" %> Tiếp theo, thêm một liên kết đến trang chủ của ứng dụng:
. . . <%= link_to 'New Shark', new_shark_path, :class => "btn btn-primary btn-sm" %> <%= link_to 'Home', home_index_path, :class => "btn btn-primary btn-sm" %> Lưu file khi bạn hoàn tất chỉnh sửa.
Tiếp theo, mở chế độ xem new :
- nano app/views/sharks/new.html.erb
Thêm các kiểu nút vào phương thức link_to ở cuối file :
. . . <%= link_to 'Back', sharks_path, :class => "btn btn-primary btn-sm" %> Lưu và đóng file .
Mở chế độ xem edit :
- nano app/views/sharks/edit.html.erb
Hiện tại, các phương thức link_to được sắp xếp như sau:
. . . <%= link_to 'Show', @shark %> | <%= link_to 'Back', sharks_path %> Thay đổi cách sắp xếp của chúng trên trang và thêm các kiểu nút, để mã trông giống như sau:
. . . <%= link_to 'Show', @shark, :class => "btn btn-primary btn-sm" %> <%= link_to 'Back', sharks_path, :class => "btn btn-primary btn-sm" %> Lưu và đóng file .
Cuối cùng, mở chế độ xem show :
- nano app/views/sharks/show.html.erb
Tìm các phương thức link_to sau:
. . . <%= link_to 'Edit', edit_shark_path(@shark) %> | <%= link_to 'Back', sharks_path %> . . . Thay đổi chúng để trông như thế này:
. . . <%= link_to 'Edit', edit_shark_path(@shark), :class => "btn btn-primary btn-sm" %> <%= link_to 'Back', sharks_path, :class => "btn btn-primary btn-sm" %> . . . Lưu và đóng file .
Đến đây bạn đã sẵn sàng để kiểm tra ứng dụng.
Khởi động server của bạn bằng lệnh thích hợp:
-
rails snếu bạn đang làm việc tại local -
rails s --binding= your_server_ipnếu bạn đang làm việc với một server phát triển
Điều hướng đến localhost:3000 hoặc http:// your_server_ip :3000 , tùy thuộc vào việc bạn đang làm việc local hay trên server . Bạn sẽ thấy trang đích sau:
Nhấp vào Nhận thông tin cá mập . Bạn sẽ thấy trang sau:
Như vậy, bạn có thể chỉnh sửa cá mập của bạn hoặc thêm dữ kiện và bài đăng bằng các phương pháp được mô tả trong Cách thêm kích thích vào ứng dụng Ruby on Rails . Bạn cũng có thể thêm cá mập mới vào cuộc trò chuyện.
Khi bạn chuyển đến các chế độ xem cá mập khác, bạn sẽ thấy rằng bố cục cá mập luôn được bao gồm:
Đến đây bạn đã tích hợp Bootstrap vào ứng dụng Rails của bạn . Từ đây, bạn có thể tiếp tục bằng cách thêm các kiểu và thành phần mới vào ứng dụng của bạn để làm cho ứng dụng trở nên hấp dẫn hơn với user .
Kết luận
Đến đây bạn đã tích hợp Bootstrap vào ứng dụng Rails của bạn , điều này sẽ cho phép bạn tạo các phong cách đáp ứng và hấp dẫn trực quan để nâng cao trải nghiệm của user về dự án.
Để tìm hiểu thêm về các tính năng của Bootstrap và những gì chúng cung cấp, vui lòng xem tài liệu Bootstrap . Bạn cũng có thể xem tài liệu dành cho Sass , để hiểu cách bạn có thể sử dụng nó để nâng cao và mở rộng kiểu và logic CSS của bạn .
Nếu bạn muốn xem cách Bootstrap tích hợp với các khung công tác khác, vui lòng xem Cách tạo ứng dụng thời tiết với Angular, Bootstrap và API APIXU . Bạn cũng có thể tìm hiểu về cách nó tích hợp với Rails và React bằng cách đọc Cách cài đặt một dự án Ruby on Rails với React Frontend .
Các tin liên quan
