Ruby on Rails: Bootstrap 4 в проекте — пошаговое руководство

В этом руководстве мы добавим стили Bootstrap 4 к сайту Ruby on Rails. Сначала подготовим главную страницу для отображения всех постов из базы данных, затем интегрируем Bootstrap.

Подготовка главной страницы

Добавим отображение всех существующих постов. Для этого внесём изменения в контроллер Post и представление index.html.erb.

Изменение Post контроллера

В app/controllers/posts_controller.rb создадим переменную @posts, содержащую все посты:

class PostsController < ApplicationController
  def index
    @posts = Post.all
  end
end

Метод Post.all запрашивает все записи из модели Post.

Изменение index.html.erb

В app/views/posts/index.html.erb добавим код для вывода постов:

<h1>Все посты</h1>
<% @posts.each do |post| %>
  <h3><%= post.title %></h3>
  <p><%= post.body %></p>
<% end %>

Имена переменных в контроллере (@posts) и в представлении (@posts) должны совпадать. После сохранения изменений перезагрузите главную страницу. Посты должны отобразиться.

Добавление стилей Bootstrap 4

Добавим стили Bootstrap 4 для улучшения внешнего вида сайта.

Подключение Bootstrap через CDN

Скопируйте ссылку на CSS-файл Bootstrap 4 с сайта Bootstrap CDN (ссылка предоставляется отдельно). В файле app/views/layouts/application.html.erb добавьте строку с подключением CSS:

<!DOCTYPE html>
<html>
<head>
  <!-- ... остальной код ... -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- Ссылка на Bootstrap CSS -->
  <!-- ... остальной код ... -->
</head>
<body>
  <!-- ... остальной код ... -->
</body>
</html>

Обновите страницу. Стиль заголовков и текста изменится.

Добавление шапки (Header)

Скопируйте код шапки с сайта Bootstrap (ссылка предоставляется отдельно), раздел «Examples», и вставьте его в файл app/views/layouts/application.html.erb внутри тега <body>, перед существующим содержимым.

Настройка шапки

Заменим заголовок «Company name» на «ITProger», сделаем его жирным, удалим лишние ссылки, оставив одну. Вместо тега <a> используем <span> с соответствующими классами:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <span class="font-weight-bold">ITProger</span>
  </a>
  <!-- ...  остальной код ... -->
  <%= link_to "Главная страница", root_path %>
  <!-- ...  остальной код ... -->
  <%= link_to "Добавить статью", new_post_path %>
  <!-- ...  остальной код ... -->
  <%= link_to "О нас", about_path %>
</nav>

Используем root_path, new_post_path и about_path для генерации ссылок. Для корректной работы root_path, определите маршрут root в config/routes.rb как root ‘posts#index’. Создайте пути для /about и /posts/new, а также метод about в контроллере Posts.

Добавим класс container к основному блоку контента:

<div class="container">
  <!-- ... основное содержимое ... -->
</div>

Добавим стили к форме добавления статей:

<%= form_with(model: @post, local: true) do |form| %>
  <div class="form-group">
    <%= form.label :title %>
    <%= form.text_field :title, class: "form-control" %>
  </div>
  <div class="form-group">
    <%= form.label :body %>
    <%= form.text_area :body, class: "form-control" %>
  </div>
  <div class="form-group">
    <%= form.submit class: "btn btn-success" %>
  </div>
<% end %>

Мы добавили статьи на главную страницу и интегрировали стили Bootstrap 4 в приложение Ruby on Rails, улучшив внешний вид и удобство использования. Сайт стал более привлекательным и профессиональным.

Что будем искать? Например,программа