В этом руководстве мы добавим стили 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, улучшив внешний вид и удобство использования. Сайт стал более привлекательным и профессиональным.