{"id":34769,"date":"2025-11-21T21:41:43","date_gmt":"2025-11-21T18:41:43","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=34769"},"modified":"2025-11-21T21:41:43","modified_gmt":"2025-11-21T18:41:43","slug":"ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/","title":{"rendered":"Ruby on Rails Uygulamas\u0131na Bootstrap Nas\u0131l Eklenir?"},"content":{"rendered":"<p><body><\/p>\n<h2>Ruby on Rails Uygulamas\u0131na Bootstrap Nas\u0131l Eklenir?<\/h2>\n<p>Ruby on Rails, web uygulamalar\u0131 geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc bir \u00e7at\u0131 sunarken, Bootstrap gibi modern bir frontend \u00e7at\u0131s\u0131 ise uygulamalar\u0131n\u0131za h\u0131zl\u0131 ve duyarl\u0131 bir kullan\u0131c\u0131 aray\u00fcz\u00fc kazand\u0131rman\u0131n en kolay yollar\u0131ndan biridir. Bu rehberde, Rails uygulaman\u0131za Bootstrap&#8217;\u0131 nas\u0131l entegre edece\u011finizi ad\u0131m ad\u0131m, farkl\u0131 y\u00f6ntemlerle ve pratik ipu\u00e7lar\u0131yla \u00f6\u011freneceksiniz.<\/p>\n<p>Bootstrap, web siteleri ve uygulamalar i\u00e7in haz\u0131r HTML, CSS ve JavaScript bile\u015fenleri sunan pop\u00fcler bir a\u00e7\u0131k kaynak projesidir. Duyarl\u0131 (responsive) tasar\u0131mlar yapmay\u0131 kolayla\u015ft\u0131r\u0131r, b\u00f6ylece uygulaman\u0131z farkl\u0131 cihaz boyutlar\u0131nda (masa\u00fcst\u00fc, tablet, mobil) harika g\u00f6r\u00fcn\u00fcr. Rails ile birle\u015fti\u011finde, hem backend hem de frontend geli\u015ftirme s\u00fcre\u00e7lerinizi h\u0131zland\u0131rabilir ve tutarl\u0131 bir kullan\u0131c\u0131 deneyimi sunabilirsiniz.<\/p>\n<p>Bu rehber, \u00f6zellikle Rails 7 ve \u00fczeri s\u00fcr\u00fcmleri hedef alacak olup, Rails&#8217;in modern frontend ara\u00e7lar\u0131 (cssbundling-rails, jsbundling-rails) ile uyumlu y\u00f6ntemleri \u00f6nceliklendirecektir.<\/p>\n<h3>Y\u00f6ntem 1: Gem Kullanarak Bootstrap Entegrasyonu (\u00d6nerilen Y\u00f6ntem)<\/h3>\n<p>Bu y\u00f6ntem, Bootstrap&#8217;\u0131 Rails&#8217;in varl\u0131k i\u015flem hatt\u0131 (Asset Pipeline) veya modern JavaScript\/CSS paketleyicileri (esbuild, dart-sass, webpack) ile entegre etmenin en yayg\u0131n ve genellikle en pratik yoludur. <code>bootstrap<\/code> gem&#8217;i, Bootstrap&#8217;\u0131n t\u00fcm Sass kaynak dosyalar\u0131n\u0131 ve JavaScript dosyalar\u0131n\u0131 uygulaman\u0131za kolayca eri\u015filebilir hale getirir.<\/p>\n<h4>Ad\u0131m 1: Gerekli Gem&#8217;leri Ekleme<\/h4>\n<p>\u0130lk olarak, <code>Gemfile<\/code> dosyan\u0131za <code>bootstrap<\/code> gem&#8217;ini eklemeniz gerekiyor. Rails 7 ile birlikte gelen <code>cssbundling-rails<\/code> ve <code>jsbundling-rails<\/code> gem&#8217;leri, s\u0131ras\u0131yla CSS ve JavaScript dosyalar\u0131n\u0131 derlemek i\u00e7in farkl\u0131 ara\u00e7lar kullanman\u0131za olanak tan\u0131r. Bootstrap&#8217;\u0131n Sass dosyalar\u0131n\u0131 derlemek i\u00e7in <code>dart-sass<\/code> veya <code>sassc-rails<\/code> gibi bir Sass derleyiciye ihtiyac\u0131n\u0131z olacakt\u0131r. Rails 7 varsay\u0131lan olarak <code>dart-sass<\/code>\u0131 npm \u00fczerinden kullanmay\u0131 te\u015fvik eder.<\/p>\n<p>A\u015fa\u011f\u0131daki sat\u0131r\u0131 <code>Gemfile<\/code> dosyan\u0131za ekleyin:<\/p>\n<pre><code class=\"language-ruby\"># Gemfile\ngem 'bootstrap', '~> 5.3' # \u0130stedi\u011finiz Bootstrap s\u00fcr\u00fcm\u00fcn\u00fc belirtin<\/code><\/pre>\n<p>De\u011fi\u015fiklikleri kaydettikten sonra terminalinizde <code>bundle install<\/code> komutunu \u00e7al\u0131\u015ft\u0131r\u0131n. Bu komut, <code>bootstrap<\/code> gem&#8217;ini ve ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 projenize kuracakt\u0131r.<\/p>\n<p>E\u011fer projenizde <code>cssbundling-rails<\/code> ve <code>jsbundling-rails<\/code> zaten kurulu de\u011filse (ki yeni Rails 7 projelerinde varsay\u0131lan olarak gelirler), a\u015fa\u011f\u0131daki komutlarla kurabilirsiniz:<\/p>\n<pre><code class=\"language-bash\">rails css:install:sass # Sass derleyici olarak dart-sass'\u0131 kurar\nrails js:install:esbuild # JavaScript paketleyici olarak esbuild'\u0131 kurar (veya 'rails js:install:webpack' vb.)<\/code><\/pre>\n<p>Bu komutlar, gerekli npm paketlerini ve yap\u0131land\u0131rmay\u0131 projenize ekleyecektir.<\/p>\n<h4>Ad\u0131m 2: CSS Entegrasyonu<\/h4>\n<p>Bootstrap&#8217;\u0131n stil dosyalar\u0131n\u0131 uygulaman\u0131za dahil etmek i\u00e7in <code>app\/assets\/stylesheets\/application.scss<\/code> (Rails 6 ve \u00f6ncesi) veya <code>app\/assets\/stylesheets\/application.bootstrap.scss<\/code> (Rails 7+ ve <code>cssbundling-rails<\/code> ile olu\u015fturulmu\u015fsa) dosyas\u0131n\u0131 d\u00fczenlemeniz gerekecektir.<\/p>\n<p>E\u011fer <code>application.css<\/code> ad\u0131nda bir dosyan\u0131z varsa, ad\u0131n\u0131 <code>application.scss<\/code> olarak de\u011fi\u015ftirmeniz veya yeni bir <code>.scss<\/code> dosyas\u0131 olu\u015fturup onu ana manifest dosyan\u0131za dahil etmeniz gerekebilir.<\/p>\n<p><code>application.scss<\/code> veya benzeri dosyan\u0131n i\u00e7eri\u011fi a\u015fa\u011f\u0131daki gibi olmal\u0131d\u0131r:<\/p>\n<pre><code class=\"language-scss\">\/<em> app\/assets\/stylesheets\/application.scss veya application.bootstrap.scss <\/em>\/\n\n\/\/ Kendi \u00f6zel de\u011fi\u015fkenlerinizi burada tan\u0131mlayabilirsiniz (iste\u011fe ba\u011fl\u0131)\n\/\/ $primary: #663399;\n\/\/ $body-bg: #f8f9fa;\n\n\/\/ Bootstrap'\u0131 dahil edin\n@import \"bootstrap\";\n\n\/\/ Kendi \u00f6zel CSS kodlar\u0131n\u0131z\u0131 buraya ekleyin\nbody {\n  padding-top: 20px;\n}<\/code><\/pre>\n<p><strong>\u00d6nemli Not:<\/strong> <code>@import<\/code> kullanabilmek i\u00e7in dosya uzant\u0131s\u0131n\u0131n <code>.scss<\/code> veya <code>.sass<\/code> olmas\u0131 gerekir. E\u011fer dosyan\u0131z <code>.css<\/code> ise, <code>@import<\/code> direktifleri \u00e7al\u0131\u015fmayacakt\u0131r. Ayr\u0131ca, kendi \u00f6zel CSS&#8217;inizi Bootstrap&#8217;tan sonra eklemek, Bootstrap&#8217;\u0131n varsay\u0131lan stillerini kolayca ge\u00e7ersiz k\u0131lman\u0131za olanak tan\u0131r.<\/p>\n<h4>Ad\u0131m 3: JavaScript Entegrasyonu<\/h4>\n<p>Bootstrap&#8217;\u0131n a\u00e7\u0131l\u0131r men\u00fcler (dropdowns), modal pencereler ve karusel (carousel) gibi interaktif bile\u015fenlerini kullanabilmek i\u00e7in JavaScript dosyalar\u0131n\u0131 da dahil etmeniz gerekir. Rails 7 ve <code>jsbundling-rails<\/code> ile bu genellikle <code>app\/javascript\/application.js<\/code> dosyas\u0131 \u00fczerinden yap\u0131l\u0131r.<\/p>\n<p><code>app\/javascript\/application.js<\/code> dosyan\u0131z\u0131 a\u015fa\u011f\u0131daki gibi g\u00fcncelleyin:<\/p>\n<pre><code class=\"language-javascript\">\/\/ app\/javascript\/application.js\n\n\/\/ Varsay\u0131lan Rails Turbo mod\u00fcl\u00fcn\u00fc dahil edin\nimport \"@hotwired\/turbo-rails\"\n\n\/\/ Rails'in varsay\u0131lan denetleyicilerini ve bile\u015fenlerini dahil edin\nimport \"controllers\"\n\n\/\/ Bootstrap JavaScript mod\u00fcllerini dahil edin\n\/\/ Popper.js, Bootstrap'\u0131n baz\u0131 bile\u015fenleri (\u00f6rne\u011fin a\u00e7\u0131l\u0131r men\u00fcler, ipu\u00e7lar\u0131) i\u00e7in gereklidir.\n\/\/ 'bootstrap' gem'i genellikle Popper.js'i de sa\u011flar, ancak bazen manuel olarak da kurmak gerekebilir.\n\/\/ E\u011fer sorun ya\u015farsan\u0131z, 'npm install @popperjs\/core' komutunu \u00e7al\u0131\u015ft\u0131rabilirsiniz.\nimport * as bootstrap from \"bootstrap\"\n\n\/\/ Bootstrap'\u0131 global olarak eri\u015filebilir hale getirmek isterseniz:\n\/\/ window.bootstrap = bootstrap;<\/code><\/pre>\n<p>Bu de\u011fi\u015fiklikleri yapt\u0131ktan sonra, Rails uygulaman\u0131z\u0131 <code>rails s<\/code> komutuyla ba\u015flat\u0131n veya yeniden ba\u015flat\u0131n.<\/p>\n<h4>Ad\u0131m 4: Kullan\u0131m\u0131 Test Etme<\/h4>\n<p>Bootstrap&#8217;\u0131n ba\u015far\u0131yla entegre edildi\u011fini do\u011frulamak i\u00e7in uygulaman\u0131z\u0131n bir g\u00f6r\u00fcn\u00fcm\u00fcne (view) basit bir Bootstrap bile\u015feni ekleyebilirsiniz. \u00d6rne\u011fin, <code>app\/views\/layouts\/application.html.erb<\/code> dosyan\u0131za veya herhangi bir g\u00f6r\u00fcn\u00fcm\u00fcn\u00fcze bir Bootstrap d\u00fc\u011fmesi ekleyin:<\/p>\n<pre><code class=\"language-html\">+erb\n<!-- app\/views\/layouts\/application.html.erb veya ba\u015fka bir .html.erb dosyas\u0131 -->\n<div class=\"container\">\n  \n  <button type=\"button\" class=\"btn btn-primary\">Bootstrap D\u00fc\u011fmesi<\/button>\n  <div class=\"alert alert-success mt-3\" role=\"alert\">\n    Bu bir Bootstrap uyar\u0131 mesaj\u0131d\u0131r!\n  <\/div>\n<\/div><\/code><\/pre>\n<p>Taray\u0131c\u0131n\u0131zda uygulaman\u0131z\u0131 ziyaret etti\u011finizde, d\u00fc\u011fmenin ve uyar\u0131 mesaj\u0131n\u0131n Bootstrap stilleriyle g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc fark etmelisiniz. E\u011fer d\u00fc\u011fme mavi ve yuvarlak k\u00f6\u015feli (veya Bootstrap&#8217;\u0131n varsay\u0131lan stiline uygun) g\u00f6r\u00fcn\u00fcyorsa, entegrasyon ba\u015far\u0131l\u0131 olmu\u015ftur.<\/p>\n<h3>Y\u00f6ntem 2: CDN veya Do\u011frudan Dosya Ekleme (Alternatif Yakla\u015f\u0131m)<\/h3>\n<p>Bu y\u00f6ntem, genellikle daha az kontrol isteyen veya Rails&#8217;in varl\u0131k i\u015flem hatt\u0131n\u0131 kullanmak istemeyen daha basit projeler i\u00e7in uygundur. Ancak, performans\u0131 veya \u00f6zelle\u015ftirmeyi d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcn\u00fczde genellikle ilk y\u00f6ntem tercih edilir.<\/p>\n<h4>Ad\u0131m 1: CDN ile Ekleme<\/h4>\n<p>Bootstrap&#8217;\u0131n resmi CDN (Content Delivery Network) ba\u011flant\u0131lar\u0131n\u0131 kullanarak stil ve JavaScript dosyalar\u0131n\u0131 do\u011frudan uygulaman\u0131z\u0131n <code>layout<\/code> dosyas\u0131na ekleyebilirsiniz. Bu, en h\u0131zl\u0131 ba\u015flang\u0131\u00e7 y\u00f6ntemidir ancak internet ba\u011flant\u0131s\u0131 gerektirir ve \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015fmaz.<\/p>\n<p><code>app\/views\/layouts\/application.html.erb<\/code> dosyan\u0131z\u0131n <code><head><\/code> ve <code><body><\/code> etiketlerine a\u015fa\u011f\u0131daki sat\u0131rlar\u0131 ekleyin:<\/p>\n<pre><code class=\"language-html\">+erb\n<!-- app\/views\/layouts\/application.html.erb -->\n<!DOCTYPE html>\n<html>\n<head>\n  <title>Uygulama Ad\u0131<\/title>\n  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n  <%= csrf_meta_tags %>\n  <%= csp_meta_tag %>\n  <%= stylesheet_link_tag \"application\", \"data-turbo-track\": \"reload\" %>\n  <%= javascript_importmap_tags %>\n\n  <!-- Bootstrap CSS CDN -->\n  <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV\/Dwwykc2MPK8M2HN\" crossorigin=\"anonymous\">\n<\/head>\n<body>\n  <%= yield %>\n\n  <!-- Bootstrap JavaScript CDN (Popper.js ile birlikte) -->\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN\/o0jlpcV8Qyq46cDfL\" crossorigin=\"anonymous\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<p><strong>Not:<\/strong> Bu y\u00f6ntemi kullan\u0131rken, <code>application.scss<\/code> dosyan\u0131zda Bootstrap ile ilgili <code>@import<\/code> sat\u0131rlar\u0131n\u0131 kald\u0131rman\u0131z gerekir, aksi takdirde stiller \u00e7ak\u0131\u015fabilir.<\/p>\n<h4>Ad\u0131m 2: Dosyalar\u0131 Manuel Ekleme<\/h4>\n<p>Bootstrap&#8217;\u0131n derlenmi\u015f CSS ve JS dosyalar\u0131n\u0131 indirip projenizin <code>app\/assets<\/code> klas\u00f6r\u00fcne manuel olarak yerle\u015ftirebilirsiniz. Bu, CDN kullanmadan \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015fma imkan\u0131 sunar ancak g\u00fcncellemeleri takip etmek ve dosya y\u00f6netimi manuel olarak yap\u0131lmal\u0131d\u0131r.<\/p>\n<p>1.  Bootstrap&#8217;\u0131n resmi web sitesinden (getbootstrap.com) derlenmi\u015f CSS ve JS dosyalar\u0131n\u0131 indirin.<br \/>\n2.  \u0130ndirdi\u011finiz <code>bootstrap.min.css<\/code> dosyas\u0131n\u0131 <code>app\/assets\/stylesheets\/<\/code> klas\u00f6r\u00fcne kopyalay\u0131n.<br \/>\n3.  <code>bootstrap.bundle.min.js<\/code> dosyas\u0131n\u0131 <code>app\/assets\/javascripts\/<\/code> veya <code>app\/javascript\/<\/code> klas\u00f6r\u00fcne kopyalay\u0131n.<br \/>\n4.  <code>app\/views\/layouts\/application.html.erb<\/code> dosyan\u0131zda a\u015fa\u011f\u0131daki gibi linkleyin:<\/p>\n<pre><code class=\"language-html\">+erb\n    <!-- app\/views\/layouts\/application.html.erb -->\n    <head>\n      <!-- ... di\u011fer head etiketleri ... -->\n      <%= stylesheet_link_tag \"bootstrap.min\", media: \"all\", \"data-turbo-track\": \"reload\" %>\n    <\/head>\n    <body>\n      <%= yield %>\n      <%= javascript_include_tag \"bootstrap.bundle.min\", \"data-turbo-track\": \"reload\", defer: true %>\n    <\/body><\/code><\/pre>\n<p>Bu y\u00f6ntem de genellikle ilk y\u00f6nteme g\u00f6re daha az tercih edilir, \u00e7\u00fcnk\u00fc Rails&#8217;in varl\u0131k y\u00f6netimi avantajlar\u0131ndan tam olarak yararlanamazs\u0131n\u0131z.<\/p>\n<h3>Pratik \u0130pu\u00e7lar\u0131 ve En \u0130yi Uygulamalar<\/h3>\n<p>Rails uygulaman\u0131zda Bootstrap&#8217;\u0131 kullan\u0131rken kar\u015f\u0131la\u015fabilece\u011finiz baz\u0131 durumlar ve en iyi uygulamalar:<\/p>\n<h4>\u00d6zelle\u015ftirme (Sass De\u011fi\u015fkenleri)<\/h4>\n<p>Bootstrap&#8217;\u0131n g\u00fcc\u00fc, Sass de\u011fi\u015fkenleri arac\u0131l\u0131\u011f\u0131yla kolayca \u00f6zelle\u015ftirilebilmesidir. <code>application.scss<\/code> dosyan\u0131zda Bootstrap&#8217;\u0131 <code>@import<\/code> etmeden \u00f6nce kendi de\u011fi\u015fkenlerinizi tan\u0131mlayarak, Bootstrap&#8217;\u0131n varsay\u0131lan renklerini, yaz\u0131 tiplerini, aral\u0131klar\u0131n\u0131 ve daha fazlas\u0131n\u0131 de\u011fi\u015ftirebilirsiniz.<\/p>\n<pre><code class=\"language-scss\">\/\/ app\/assets\/stylesheets\/application.scss\n\n\/\/ Varsay\u0131lan Bootstrap de\u011fi\u015fkenlerini ge\u00e7ersiz k\u0131l\u0131n\n$primary: #007bff; \/\/ Varsay\u0131lan maviyi de\u011fi\u015ftirelim\n$enable-shadows: true; \/\/ G\u00f6lgeleri etkinle\u015ftirelim\n\n\/\/ Bootstrap'\u0131 dahil edin\n@import \"bootstrap\";\n\n\/\/ Kendi \u00f6zel stilleriniz\n.my-custom-class {\n  background-color: lighten($primary, 20%);\n  color: white;\n}<\/code><\/pre>\n<p>Bu yakla\u015f\u0131m, kendi markan\u0131za veya tasar\u0131m sisteminize uygun, tutarl\u0131 bir g\u00f6r\u00fcn\u00fcm olu\u015fturman\u0131z\u0131 sa\u011flar.<\/p>\n<h4>Turbolinks \/ Turbo ile Uyumluluk<\/h4>\n<p>Rails 6 ve \u00f6ncesinde Turbolinks, Rails 7&#8217;de ise Turbo (Hotwire&#8217;\u0131n bir par\u00e7as\u0131) kullan\u0131larak sayfalar aras\u0131 gezinme h\u0131zland\u0131r\u0131l\u0131r. Bu durum, JavaScript kodlar\u0131n\u0131n sayfa y\u00fcklendi\u011finde yaln\u0131zca bir kez \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131 gerekti\u011fi anlam\u0131na gelebilir. Bootstrap&#8217;\u0131n JavaScript&#8217;i genellikle sayfa y\u00fcklendi\u011finde otomatik olarak ba\u015flat\u0131l\u0131r. Ancak, AJAX ile y\u00fcklenen i\u00e7eriklerde veya Turbo navigasyonundan sonra baz\u0131 Bootstrap bile\u015fenlerinin (\u00f6rne\u011fin modal&#8217;lar, tooltips) d\u00fczg\u00fcn \u00e7al\u0131\u015fmad\u0131\u011f\u0131n\u0131 fark edebilirsiniz.<\/p>\n<p>Bu t\u00fcr durumlarda, Turbo&#8217;nun <code>turbo:load<\/code> olay\u0131n\u0131 dinleyerek JavaScript kodunuzu yeniden ba\u015flatman\u0131z gerekebilir:<\/p>\n<pre><code class=\"language-javascript\">\/\/ app\/javascript\/application.js veya yeni bir dosya\ndocument.addEventListener(\"turbo:load\", () => {\n  \/\/ Bootstrap bile\u015fenlerini manuel olarak ba\u015flat\u0131n\n  \/\/ \u00d6rne\u011fin, t\u00fcm ara\u00e7 ipu\u00e7lar\u0131n\u0131 ba\u015flatmak i\u00e7in:\n  \/\/ var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle=\"tooltip\"]'))\n  \/\/ var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {\n  \/\/   return new bootstrap.Tooltip(tooltipTriggerEl)\n  \/\/ })\n\n  \/\/ E\u011fer t\u00fcm Bootstrap k\u00fct\u00fcphanesini yeniden ba\u015flatmak isterseniz:\n  \/\/ import * as bootstrap from \"bootstrap\"; \/\/ Zaten yukar\u0131da dahil edilmi\u015fse gerek yok\n  \/\/ window.bootstrap = bootstrap; \/\/ Global eri\u015fim i\u00e7in\n});<\/code><\/pre>\n<p>Genellikle <code>bootstrap<\/code> gem&#8217;i ve modern JS paketleyicileri, bu durumlar\u0131 otomatik olarak y\u00f6netir. Ancak karma\u015f\u0131k uygulamalarda bu detay\u0131 bilmek sorun giderme a\u00e7\u0131s\u0131ndan faydal\u0131d\u0131r.<\/p>\n<h4>Form Yard\u0131mc\u0131lar\u0131 (Simple Form, Formtastic)<\/h4>\n<p>Rails&#8217;in varsay\u0131lan form yard\u0131mc\u0131lar\u0131 Bootstrap ile iyi \u00e7al\u0131\u015fsa da, <code>simple_form<\/code> veya <code>formtastic<\/code> gibi gem&#8217;ler, Bootstrap tabanl\u0131 formlar\u0131 olu\u015fturmay\u0131 \u00e7ok daha kolay hale getirir. Bu gem&#8217;ler, form alanlar\u0131n\u0131 otomatik olarak Bootstrap&#8217;\u0131n grid sistemi ve form kontrolleriyle uyumlu hale getiren \u015fablonlar sunar.<\/p>\n<p>\u00d6rne\u011fin, <code>simple_form<\/code> gem&#8217;ini kurduktan sonra <code>rails generate simple_form:install --bootstrap<\/code> komutuyla Bootstrap uyumlu bir yap\u0131land\u0131rma olu\u015fturabilirsiniz.<\/p>\n<h3>Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<p>Rails uygulaman\u0131za Bootstrap entegrasyonu, uygulaman\u0131z\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve hissini \u00f6nemli \u00f6l\u00e7\u00fcde geli\u015ftirebilecek nispeten basit bir i\u015flemdir. Gem tabanl\u0131 yakla\u015f\u0131m (Y\u00f6ntem 1), Rails&#8217;in varl\u0131k i\u015flem hatt\u0131 veya modern frontend paketleyicileriyle en iyi entegrasyonu ve en esnek \u00f6zelle\u015ftirme se\u00e7eneklerini sunar. CDN veya manuel dosya ekleme y\u00f6ntemleri daha h\u0131zl\u0131 bir ba\u015flang\u0131\u00e7 sa\u011flasa da, uzun vadede y\u00f6netimi ve performans\u0131 a\u00e7\u0131s\u0131ndan daha az tercih edilir.<\/p>\n<p>Art\u0131k Rails uygulaman\u0131zda Bootstrap&#8217;\u0131 kullanmaya haz\u0131rs\u0131n\u0131z. Bile\u015fenleri ke\u015ffedin, responsive tasar\u0131mlar olu\u015fturun ve uygulaman\u0131z\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc modernle\u015ftirin!<\/p>\n<h4>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h4>\n<dl>\n<dt>Hangi Bootstrap entegrasyon y\u00f6ntemi en iyisidir?<\/dt>\n<dd>Genellikle <code>bootstrap<\/code> gem&#8217;ini kullanarak ve Rails&#8217;in varl\u0131k i\u015flem hatt\u0131 (veya <code>cssbundling-rails<\/code>\/<code>jsbundling-rails<\/code> ile) entegrasyonu en iyi y\u00f6ntemdir. Bu, \u00f6zelle\u015ftirme, performans ve s\u00fcrd\u00fcr\u00fclebilirlik a\u00e7\u0131s\u0131ndan en esnek ve g\u00fc\u00e7l\u00fc \u00e7\u00f6z\u00fcm\u00fc sunar.<\/dd>\n<dt>Bootstrap&#8217;\u0131 nas\u0131l g\u00fcncellerim?<\/dt>\n<dd><code>Gemfile<\/code> dosyan\u0131zdaki <code>gem 'bootstrap', '~> 5.x'<\/code> sat\u0131r\u0131ndaki s\u00fcr\u00fcm numaras\u0131n\u0131 istedi\u011finiz yeni s\u00fcr\u00fcme g\u00fcncelleyin ve ard\u0131ndan <code>bundle update bootstrap<\/code> komutunu \u00e7al\u0131\u015ft\u0131r\u0131n. E\u011fer <code>npm<\/code> \u00fczerinden ek paketleriniz varsa (<code>@popperjs\/core<\/code> gibi), <code>npm update<\/code> komutunu da \u00e7al\u0131\u015ft\u0131rman\u0131z gerekebilir.<\/dd>\n<dt>Kendi \u00f6zel Bootstrap temam\u0131 nas\u0131l olu\u015ftururum?<\/dt>\n<dd><code>application.scss<\/code> dosyan\u0131zda Bootstrap&#8217;\u0131 <code>@import<\/code> etmeden \u00f6nce kendi Sass de\u011fi\u015fkenlerinizi ge\u00e7ersiz k\u0131larak veya yeni Sass dosyalar\u0131 olu\u015fturup onlar\u0131 <code>@import<\/code> ederek \u00f6zel temalar olu\u015fturabilirsiniz. Bu, Bootstrap&#8217;\u0131n varsay\u0131lan stillerini tamamen kendi markan\u0131za g\u00f6re uyarlaman\u0131za olanak tan\u0131r.<\/dd>\n<dt>Bootstrap, Rails&#8217;in Turbo (Hotwire) ile uyumlu mu?<\/dt>\n<dd>Evet, Bootstrap Turbo ile uyumludur. Ancak, AJAX ile y\u00fcklenen i\u00e7eriklerde veya Turbo navigasyonundan sonra baz\u0131 interaktif Bootstrap bile\u015fenlerinin (modal&#8217;lar, tooltips vb.) d\u00fczg\u00fcn \u00e7al\u0131\u015fmad\u0131\u011f\u0131n\u0131 fark ederseniz, <code>document.addEventListener(\"turbo:load\", ...)<\/code> olay dinleyicisini kullanarak bu bile\u015fenleri manuel olarak yeniden ba\u015flatman\u0131z gerekebilir.<\/dd>\n<dt>Neden <code>application.css<\/code> yerine <code>application.scss<\/code> kullanmal\u0131y\u0131m?<\/dt>\n<dd><code>.scss<\/code> uzant\u0131s\u0131, Sass (Syntactically Awesome Style Sheets) kullanman\u0131za olanak tan\u0131r. Sass, de\u011fi\u015fkenler, i\u00e7 i\u00e7e kurallar, mixin&#8217;ler ve <code>@import<\/code> gibi \u00f6zellikler sunarak CSS yazmay\u0131 daha g\u00fc\u00e7l\u00fc ve mod\u00fcler hale getirir. Bootstrap, Sass ile yaz\u0131ld\u0131\u011f\u0131 i\u00e7in, onun de\u011fi\u015fkenlerini ve mixin&#8217;lerini kullanmak i\u00e7in <code>.scss<\/code> uzant\u0131s\u0131 gereklidir.<\/dd>\n<\/dl>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Ruby on Rails Uygulamas\u0131na Bootstrap Nas\u0131l Eklenir?\nRuby on Rails, web uygulamalar\u0131 geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc bir \u00e7at\u0131 sunarken, Bootstrap g","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1342],"tags":[],"class_list":{"0":"post-34769","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-ai","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Ruby on Rails Uygulamas\u0131na Bootstrap Nas\u0131l Eklenir? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ruby on Rails Uygulamas\u0131na Bootstrap Nas\u0131l Eklenir?\" \/>\n<meta property=\"og:description\" content=\"Ruby on Rails Uygulamas\u0131na Bootstrap Nas\u0131l Eklenir? Ruby on Rails, web uygulamalar\u0131 geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc bir \u00e7at\u0131 sunarken, Bootstrap g\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-21T18:41:43+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Ruby on Rails Uygulamas\u0131na Bootstrap Nas\u0131l Eklenir?\",\"datePublished\":\"2025-11-21T18:41:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/\"},\"wordCount\":1593,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"AI\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/\",\"name\":\"Ruby on Rails Uygulamas\u0131na Bootstrap Nas\u0131l Eklenir? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-21T18:41:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ruby on Rails Uygulamas\u0131na Bootstrap Nas\u0131l Eklenir?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ruby on Rails Uygulamas\u0131na Bootstrap Nas\u0131l Eklenir? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/","og_locale":"tr_TR","og_type":"article","og_title":"Ruby on Rails Uygulamas\u0131na Bootstrap Nas\u0131l Eklenir?","og_description":"Ruby on Rails Uygulamas\u0131na Bootstrap Nas\u0131l Eklenir? Ruby on Rails, web uygulamalar\u0131 geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc bir \u00e7at\u0131 sunarken, Bootstrap g","og_url":"https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-21T18:41:43+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"10 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Ruby on Rails Uygulamas\u0131na Bootstrap Nas\u0131l Eklenir?","datePublished":"2025-11-21T18:41:43+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/"},"wordCount":1593,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["AI"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/","url":"https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/","name":"Ruby on Rails Uygulamas\u0131na Bootstrap Nas\u0131l Eklenir? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-21T18:41:43+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/ruby-on-rails-uygulamasina-bootstrap-nasil-eklenir\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Ruby on Rails Uygulamas\u0131na Bootstrap Nas\u0131l Eklenir?"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=34769"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34769\/revisions"}],"predecessor-version":[{"id":34770,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34769\/revisions\/34770"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=34769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=34769"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=34769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}