Як підключити Bootstrap в Sinatra?

Sinatra
1

Для підключення Bootstrap в Sinatra ви можете використовувати різні підходи, але основний принцип полягає в тому, щоб забезпечити доступ до файлів стилів та скриптів Bootstrap з вашого додатку Sinatra.

  1. Завантажте Bootstrap: Завантажте файли стилів та скриптів Bootstrap. Ви можете зробити це, наприклад, шляхом завантаження файлів або використання CDN.

  2. Розмістіть файли Bootstrap в проекті: Після завантаження файлів Bootstrap вам потрібно розмістити їх у вашому проекті. Найкраще місце для цього - це папка public у вашому проекті Sinatra.

  3. Підключіть файли у шаблоні: Використовуйте теги <link> для стилів і <script> для скриптів, щоб підключити файли Bootstrap у вашому шаблоні.

Ось приклад коду для шаблону, який підключає файли Bootstrap:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Sinatra App with Bootstrap</title>
    <!-- Підключення файлу CSS Bootstrap -->
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- Зміст вашої сторінки -->
    
    <!-- Підключення файлів JavaScript Bootstrap (якщо потрібно) -->
    <script src="/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
  1. Запустіть ваш сервер Sinatra: Переконайтеся, що ваш сервер Sinatra запущено, і ви можете переглянути свій додаток, відкривши його у веб-браузері.

Це базовий підхід до підключення Bootstrap у вашому додатку Sinatra. Зверніть увагу, що шляхи до файлів CSS та JavaScript Bootstrap (/bootstrap/css/bootstrap.min.css і /bootstrap/js/bootstrap.bundle.min.js) повинні відповідати тим, як ви їх розмістили у вашому проекті Sinatra.

2

Крім того, можна підключити за допомогою CDN додавши такий код:

CSS	https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
JS	https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js