Ruby on Rails Uygulamasına Bootstrap Nasıl Eklenir?

Ruby on Rails Uygulamasına Bootstrap Nasıl Eklenir?

Ruby on Rails, web uygulamaları geliştirmek için güçlü bir çatı sunarken, Bootstrap gibi modern bir frontend çatısı ise uygulamalarınıza hızlı ve duyarlı bir kullanıcı arayüzü kazandırmanın en kolay yollarından biridir. Bu rehberde, Rails uygulamanıza Bootstrap’ı nasıl entegre edeceğinizi adım adım, farklı yöntemlerle ve pratik ipuçlarıyla öğreneceksiniz.

Bootstrap, web siteleri ve uygulamalar için hazır HTML, CSS ve JavaScript bileşenleri sunan popüler bir açık kaynak projesidir. Duyarlı (responsive) tasarımlar yapmayı kolaylaştırır, böylece uygulamanız farklı cihaz boyutlarında (masaüstü, tablet, mobil) harika görünür. Rails ile birleştiğinde, hem backend hem de frontend geliştirme süreçlerinizi hızlandırabilir ve tutarlı bir kullanıcı deneyimi sunabilirsiniz.

Bu rehber, özellikle Rails 7 ve üzeri sürümleri hedef alacak olup, Rails’in modern frontend araçları (cssbundling-rails, jsbundling-rails) ile uyumlu yöntemleri önceliklendirecektir.

Yöntem 1: Gem Kullanarak Bootstrap Entegrasyonu (Önerilen Yöntem)

Bu yöntem, Bootstrap’ı Rails’in varlık işlem hattı (Asset Pipeline) veya modern JavaScript/CSS paketleyicileri (esbuild, dart-sass, webpack) ile entegre etmenin en yaygın ve genellikle en pratik yoludur. bootstrap gem’i, Bootstrap’ın tüm Sass kaynak dosyalarını ve JavaScript dosyalarını uygulamanıza kolayca erişilebilir hale getirir.

Adım 1: Gerekli Gem’leri Ekleme

İlk olarak, Gemfile dosyanıza bootstrap gem’ini eklemeniz gerekiyor. Rails 7 ile birlikte gelen cssbundling-rails ve jsbundling-rails gem’leri, sırasıyla CSS ve JavaScript dosyalarını derlemek için farklı araçlar kullanmanıza olanak tanır. Bootstrap’ın Sass dosyalarını derlemek için dart-sass veya sassc-rails gibi bir Sass derleyiciye ihtiyacınız olacaktır. Rails 7 varsayılan olarak dart-sassı npm üzerinden kullanmayı teşvik eder.

Aşağıdaki satırı Gemfile dosyanıza ekleyin:

# Gemfile
gem 'bootstrap', '~> 5.3' # İstediğiniz Bootstrap sürümünü belirtin

Değişiklikleri kaydettikten sonra terminalinizde bundle install komutunu çalıştırın. Bu komut, bootstrap gem’ini ve bağımlılıklarını projenize kuracaktır.

Eğer projenizde cssbundling-rails ve jsbundling-rails zaten kurulu değilse (ki yeni Rails 7 projelerinde varsayılan olarak gelirler), aşağıdaki komutlarla kurabilirsiniz:

rails css:install:sass # Sass derleyici olarak dart-sass'ı kurar
rails js:install:esbuild # JavaScript paketleyici olarak esbuild'ı kurar (veya 'rails js:install:webpack' vb.)

Bu komutlar, gerekli npm paketlerini ve yapılandırmayı projenize ekleyecektir.

Adım 2: CSS Entegrasyonu

Bootstrap’ın stil dosyalarını uygulamanıza dahil etmek için app/assets/stylesheets/application.scss (Rails 6 ve öncesi) veya app/assets/stylesheets/application.bootstrap.scss (Rails 7+ ve cssbundling-rails ile oluşturulmuşsa) dosyasını düzenlemeniz gerekecektir.

Eğer application.css adında bir dosyanız varsa, adını application.scss olarak değiştirmeniz veya yeni bir .scss dosyası oluşturup onu ana manifest dosyanıza dahil etmeniz gerekebilir.

application.scss veya benzeri dosyanın içeriği aşağıdaki gibi olmalıdır:

/ app/assets/stylesheets/application.scss veya application.bootstrap.scss /

// Kendi özel değişkenlerinizi burada tanımlayabilirsiniz (isteğe bağlı)
// $primary: #663399;
// $body-bg: #f8f9fa;

// Bootstrap'ı dahil edin
@import "bootstrap";

// Kendi özel CSS kodlarınızı buraya ekleyin
body {
  padding-top: 20px;
}

Önemli Not: @import kullanabilmek için dosya uzantısının .scss veya .sass olması gerekir. Eğer dosyanız .css ise, @import direktifleri çalışmayacaktır. Ayrıca, kendi özel CSS’inizi Bootstrap’tan sonra eklemek, Bootstrap’ın varsayılan stillerini kolayca geçersiz kılmanıza olanak tanır.

Adım 3: JavaScript Entegrasyonu

Bootstrap’ın açılır menüler (dropdowns), modal pencereler ve karusel (carousel) gibi interaktif bileşenlerini kullanabilmek için JavaScript dosyalarını da dahil etmeniz gerekir. Rails 7 ve jsbundling-rails ile bu genellikle app/javascript/application.js dosyası üzerinden yapılır.

app/javascript/application.js dosyanızı aşağıdaki gibi güncelleyin:

// app/javascript/application.js

// Varsayılan Rails Turbo modülünü dahil edin
import "@hotwired/turbo-rails"

// Rails'in varsayılan denetleyicilerini ve bileşenlerini dahil edin
import "controllers"

// Bootstrap JavaScript modüllerini dahil edin
// Popper.js, Bootstrap'ın bazı bileşenleri (örneğin açılır menüler, ipuçları) için gereklidir.
// 'bootstrap' gem'i genellikle Popper.js'i de sağlar, ancak bazen manuel olarak da kurmak gerekebilir.
// Eğer sorun yaşarsanız, 'npm install @popperjs/core' komutunu çalıştırabilirsiniz.
import * as bootstrap from "bootstrap"

// Bootstrap'ı global olarak erişilebilir hale getirmek isterseniz:
// window.bootstrap = bootstrap;

Bu değişiklikleri yaptıktan sonra, Rails uygulamanızı rails s komutuyla başlatın veya yeniden başlatın.

Adım 4: Kullanımı Test Etme

Bootstrap’ın başarıyla entegre edildiğini doğrulamak için uygulamanızın bir görünümüne (view) basit bir Bootstrap bileşeni ekleyebilirsiniz. Örneğin, app/views/layouts/application.html.erb dosyanıza veya herhangi bir görünümünüze bir Bootstrap düğmesi ekleyin:

+erb


  
  Bootstrap Düğmesi
  

    Bu bir Bootstrap uyarı mesajıdır!
  

Tarayıcınızda uygulamanızı ziyaret ettiğinizde, düğmenin ve uyarı mesajının Bootstrap stilleriyle göründüğünü fark etmelisiniz. Eğer düğme mavi ve yuvarlak köşeli (veya Bootstrap’ın varsayılan stiline uygun) görünüyorsa, entegrasyon başarılı olmuştur.

Yöntem 2: CDN veya Doğrudan Dosya Ekleme (Alternatif Yaklaşım)

Bu yöntem, genellikle daha az kontrol isteyen veya Rails’in varlık işlem hattını kullanmak istemeyen daha basit projeler için uygundur. Ancak, performansı veya özelleştirmeyi düşündüğünüzde genellikle ilk yöntem tercih edilir.

Adım 1: CDN ile Ekleme

Bootstrap’ın resmi CDN (Content Delivery Network) bağlantılarını kullanarak stil ve JavaScript dosyalarını doğrudan uygulamanızın layout dosyasına ekleyebilirsiniz. Bu, en hızlı başlangıç yöntemidir ancak internet bağlantısı gerektirir ve çevrimdışı çalışmaz.

app/views/layouts/application.html.erb dosyanızın ve etiketlerine aşağıdaki satırları ekleyin:

+erb




  
  
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  <%= javascript_importmap_tags %>

  
  


  <%= yield %>

  
  

Not: Bu yöntemi kullanırken, application.scss dosyanızda Bootstrap ile ilgili @import satırlarını kaldırmanız gerekir, aksi takdirde stiller çakışabilir.

Adım 2: Dosyaları Manuel Ekleme

Bootstrap’ın derlenmiş CSS ve JS dosyalarını indirip projenizin app/assets klasörüne manuel olarak yerleştirebilirsiniz. Bu, CDN kullanmadan çevrimdışı çalışma imkanı sunar ancak güncellemeleri takip etmek ve dosya yönetimi manuel olarak yapılmalıdır.

1. Bootstrap’ın resmi web sitesinden (getbootstrap.com) derlenmiş CSS ve JS dosyalarını indirin.
2. İndirdiğiniz bootstrap.min.css dosyasını app/assets/stylesheets/ klasörüne kopyalayın.
3. bootstrap.bundle.min.js dosyasını app/assets/javascripts/ veya app/javascript/ klasörüne kopyalayın.
4. app/views/layouts/application.html.erb dosyanızda aşağıdaki gibi linkleyin:

+erb
    
    
      
      <%= stylesheet_link_tag "bootstrap.min", media: "all", "data-turbo-track": "reload" %>
    
    
      <%= yield %>
      <%= javascript_include_tag "bootstrap.bundle.min", "data-turbo-track": "reload", defer: true %>
    

Bu yöntem de genellikle ilk yönteme göre daha az tercih edilir, çünkü Rails’in varlık yönetimi avantajlarından tam olarak yararlanamazsınız.

Pratik İpuçları ve En İyi Uygulamalar

Rails uygulamanızda Bootstrap’ı kullanırken karşılaşabileceğiniz bazı durumlar ve en iyi uygulamalar:

Özelleştirme (Sass Değişkenleri)

Bootstrap’ın gücü, Sass değişkenleri aracılığıyla kolayca özelleştirilebilmesidir. application.scss dosyanızda Bootstrap’ı @import etmeden önce kendi değişkenlerinizi tanımlayarak, Bootstrap’ın varsayılan renklerini, yazı tiplerini, aralıklarını ve daha fazlasını değiştirebilirsiniz.

// app/assets/stylesheets/application.scss

// Varsayılan Bootstrap değişkenlerini geçersiz kılın
$primary: #007bff; // Varsayılan maviyi değiştirelim
$enable-shadows: true; // Gölgeleri etkinleştirelim

// Bootstrap'ı dahil edin
@import "bootstrap";

// Kendi özel stilleriniz
.my-custom-class {
  background-color: lighten($primary, 20%);
  color: white;
}

Bu yaklaşım, kendi markanıza veya tasarım sisteminize uygun, tutarlı bir görünüm oluşturmanızı sağlar.

Turbolinks / Turbo ile Uyumluluk

Rails 6 ve öncesinde Turbolinks, Rails 7’de ise Turbo (Hotwire’ın bir parçası) kullanılarak sayfalar arası gezinme hızlandırılır. Bu durum, JavaScript kodlarının sayfa yüklendiğinde yalnızca bir kez çalıştırılması gerektiği anlamına gelebilir. Bootstrap’ın JavaScript’i genellikle sayfa yüklendiğinde otomatik olarak başlatılır. Ancak, AJAX ile yüklenen içeriklerde veya Turbo navigasyonundan sonra bazı Bootstrap bileşenlerinin (örneğin modal’lar, tooltips) düzgün çalışmadığını fark edebilirsiniz.

Bu tür durumlarda, Turbo’nun turbo:load olayını dinleyerek JavaScript kodunuzu yeniden başlatmanız gerekebilir:

// app/javascript/application.js veya yeni bir dosya
document.addEventListener("turbo:load", () => {
  // Bootstrap bileşenlerini manuel olarak başlatın
  // Örneğin, tüm araç ipuçlarını başlatmak için:
  // var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  // var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  //   return new bootstrap.Tooltip(tooltipTriggerEl)
  // })

  // Eğer tüm Bootstrap kütüphanesini yeniden başlatmak isterseniz:
  // import * as bootstrap from "bootstrap"; // Zaten yukarıda dahil edilmişse gerek yok
  // window.bootstrap = bootstrap; // Global erişim için
});

Genellikle bootstrap gem’i ve modern JS paketleyicileri, bu durumları otomatik olarak yönetir. Ancak karmaşık uygulamalarda bu detayı bilmek sorun giderme açısından faydalıdır.

Form Yardımcıları (Simple Form, Formtastic)

Rails’in varsayılan form yardımcıları Bootstrap ile iyi çalışsa da, simple_form veya formtastic gibi gem’ler, Bootstrap tabanlı formları oluşturmayı çok daha kolay hale getirir. Bu gem’ler, form alanlarını otomatik olarak Bootstrap’ın grid sistemi ve form kontrolleriyle uyumlu hale getiren şablonlar sunar.

Örneğin, simple_form gem’ini kurduktan sonra rails generate simple_form:install --bootstrap komutuyla Bootstrap uyumlu bir yapılandırma oluşturabilirsiniz.

Sonuç ve Sıkça Sorulan Sorular (SSS)

Rails uygulamanıza Bootstrap entegrasyonu, uygulamanızın görünümünü ve hissini önemli ölçüde geliştirebilecek nispeten basit bir işlemdir. Gem tabanlı yaklaşım (Yöntem 1), Rails’in varlık işlem hattı veya modern frontend paketleyicileriyle en iyi entegrasyonu ve en esnek özelleştirme seçeneklerini sunar. CDN veya manuel dosya ekleme yöntemleri daha hızlı bir başlangıç sağlasa da, uzun vadede yönetimi ve performansı açısından daha az tercih edilir.

Artık Rails uygulamanızda Bootstrap’ı kullanmaya hazırsınız. Bileşenleri keşfedin, responsive tasarımlar oluşturun ve uygulamanızın kullanıcı arayüzünü modernleştirin!

Sıkça Sorulan Sorular (SSS)

Hangi Bootstrap entegrasyon yöntemi en iyisidir?

Genellikle bootstrap gem’ini kullanarak ve Rails’in varlık işlem hattı (veya cssbundling-rails/jsbundling-rails ile) entegrasyonu en iyi yöntemdir. Bu, özelleştirme, performans ve sürdürülebilirlik açısından en esnek ve güçlü çözümü sunar.

Bootstrap’ı nasıl güncellerim?

Gemfile dosyanızdaki gem 'bootstrap', '~> 5.x' satırındaki sürüm numarasını istediğiniz yeni sürüme güncelleyin ve ardından bundle update bootstrap komutunu çalıştırın. Eğer npm üzerinden ek paketleriniz varsa (@popperjs/core gibi), npm update komutunu da çalıştırmanız gerekebilir.

Kendi özel Bootstrap temamı nasıl oluştururum?

application.scss dosyanızda Bootstrap’ı @import etmeden önce kendi Sass değişkenlerinizi geçersiz kılarak veya yeni Sass dosyaları oluşturup onları @import ederek özel temalar oluşturabilirsiniz. Bu, Bootstrap’ın varsayılan stillerini tamamen kendi markanıza göre uyarlamanıza olanak tanır.

Bootstrap, Rails’in Turbo (Hotwire) ile uyumlu mu?

Evet, Bootstrap Turbo ile uyumludur. Ancak, AJAX ile yüklenen içeriklerde veya Turbo navigasyonundan sonra bazı interaktif Bootstrap bileşenlerinin (modal’lar, tooltips vb.) düzgün çalışmadığını fark ederseniz, document.addEventListener("turbo:load", ...) olay dinleyicisini kullanarak bu bileşenleri manuel olarak yeniden başlatmanız gerekebilir.

Neden application.css yerine application.scss kullanmalıyım?

.scss uzantısı, Sass (Syntactically Awesome Style Sheets) kullanmanıza olanak tanır. Sass, değişkenler, iç içe kurallar, mixin’ler ve @import gibi özellikler sunarak CSS yazmayı daha güçlü ve modüler hale getirir. Bootstrap, Sass ile yazıldığı için, onun değişkenlerini ve mixin’lerini kullanmak için .scss uzantısı gereklidir.