{"id":35971,"date":"2025-12-06T08:41:00","date_gmt":"2025-12-06T05:41:00","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=35971"},"modified":"2025-12-06T08:41:00","modified_gmt":"2025-12-06T05:41:00","slug":"vue-js-uygulamalarinda-bootstrap-4u-bootstrapvue-ile-kullanma-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-js-uygulamalarinda-bootstrap-4u-bootstrapvue-ile-kullanma-rehberi\/","title":{"rendered":"Vue.js Uygulamalar\u0131nda Bootstrap 4’\u00fc BootstrapVue ile Kullanma Rehberi"},"content":{"rendered":"

<\/p>\n

Vue.js Uygulamalar\u0131nda Bootstrap 4’\u00fc BootstrapVue ile Kullanma Rehberi<\/h2>\n

Modern web geli\u015ftirme d\u00fcnyas\u0131nda, kullan\u0131c\u0131 aray\u00fczlerinin h\u0131zl\u0131 ve etkili bir \u015fekilde olu\u015fturulmas\u0131 b\u00fcy\u00fck \u00f6nem ta\u015f\u0131maktad\u0131r. Bu s\u00fcre\u00e7te pop\u00fclerli\u011fini kan\u0131tlam\u0131\u015f iki teknoloji, \u00f6n u\u00e7 JavaScript \u00e7er\u00e7evesi Vue.js ve responsive tasar\u0131m k\u00fct\u00fcphanesi Bootstrap, geli\u015ftiricilerin vazge\u00e7ilmez ara\u00e7lar\u0131 haline gelmi\u015ftir. Ancak bu iki g\u00fc\u00e7l\u00fc arac\u0131 bir araya getirmek, baz\u0131 entegrasyon zorluklar\u0131n\u0131 beraberinde getirebilir. \u0130\u015fte tam bu noktada BootstrapVue devreye girerek, Vue.js geli\u015ftiricilerine Bootstrap 4 bile\u015fenlerini yerel Vue bile\u015fenleri olarak sunarak bu s\u00fcreci inan\u0131lmaz derecede kolayla\u015ft\u0131r\u0131r.<\/p>\n

Bu kapsaml\u0131 rehberde, Vue.js projelerinizde Bootstrap 4’\u00fc BootstrapVue arac\u0131l\u0131\u011f\u0131yla nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. Neden BootstrapVue kullanman\u0131z gerekti\u011finden ba\u015flayarak, geli\u015ftirme ortam\u0131n\u0131n haz\u0131rlanmas\u0131na, kurulum ve entegrasyon s\u00fcre\u00e7lerine, temel bile\u015fenlerin kullan\u0131m\u0131na, tema \u00f6zelle\u015ftirmesine ve hatta yayg\u0131n sorunlara \u00e7\u00f6z\u00fcmler sunmaya kadar her detay\u0131 ele alaca\u011f\u0131z. Amac\u0131m\u0131z, bu rehberin sonunda kendi Vue.js uygulaman\u0131zda BootstrapVue’yu confidently bir \u015fekilde kullanabilmeniz i\u00e7in size sa\u011flam bir temel olu\u015fturmakt\u0131r.<\/p>\n

Neden BootstrapVue Kullanmal\u0131s\u0131n\u0131z?<\/h3>\n

Bootstrap, web sayfalar\u0131n\u0131 h\u0131zl\u0131ca stilize etmek ve duyarl\u0131 tasar\u0131mlar olu\u015fturmak i\u00e7in d\u00fcnya genelinde milyonlarca geli\u015ftirici taraf\u0131ndan kullan\u0131lan pop\u00fcler bir CSS \u00e7er\u00e7evesidir. Vue.js ise, interaktif kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\u0131lan ilerici bir JavaScript \u00e7er\u00e7evesidir. Her ikisi de kendi alanlar\u0131nda g\u00fc\u00e7l\u00fc olsa da, geleneksel Bootstrap’\u0131 do\u011frudan bir Vue.js projesine entegre etmek baz\u0131 zorluklar\u0131 beraberinde getirebilir:<\/p>\n

* jQuery Ba\u011f\u0131ml\u0131l\u0131\u011f\u0131:<\/strong> Bootstrap’\u0131n JavaScript bile\u015fenleri (modal, dropdown, carousel vb.) geleneksel olarak jQuery’ye ba\u011f\u0131ml\u0131d\u0131r. Vue.js projeleri ise genellikle jQuery kullanmaz ve bir Vue projesine s\u0131rf Bootstrap i\u00e7in jQuery eklemek, gereksiz y\u00fck ve potansiyel \u00e7ak\u0131\u015fmalar anlam\u0131na gelebilir.
\n* Vue Reaktivitesi ile Uyumsuzluk:<\/strong> Bootstrap’\u0131n JavaScript bile\u015fenleri DOM manip\u00fclasyonu \u00fczerine kuruludur. Vue.js ise sanal DOM kullanarak ve reaktif veri ba\u011flama ile \u00e7al\u0131\u015f\u0131r. Bu iki yakla\u015f\u0131m aras\u0131nda do\u011frudan bir uyum sa\u011flamak zor olabilir ve beklenmedik davran\u0131\u015flara yol a\u00e7abilir.
\n* Bile\u015fen Tabanl\u0131 Mimari:<\/strong> Vue.js, bile\u015fen tabanl\u0131 bir mimariye sahiptir. Geleneksel Bootstrap’\u0131 kullan\u0131rken, her bir Bootstrap bile\u015fenini (\u00f6rne\u011fin bir modal\u0131) Vue bile\u015fenleri i\u00e7inde manuel olarak sarmalaman\u0131z veya y\u00f6netmeniz gerekebilir, bu da tekrarlayan ve hataya a\u00e7\u0131k bir s\u00fcre\u00e7tir.<\/p>\n

\u0130\u015fte bu noktada BootstrapVue, yukar\u0131da belirtilen t\u00fcm sorunlara zarif ve etkili \u00e7\u00f6z\u00fcmler sunar:<\/p>\n

1. Yerel Vue Bile\u015fenleri:<\/strong> BootstrapVue, Bootstrap 4’\u00fcn t\u00fcm bile\u015fenlerini (d\u00fc\u011fmeler, kartlar, form elemanlar\u0131, navigasyon \u00e7ubuklar\u0131, modallar vb.) yerel Vue bile\u015fenleri olarak yeniden yazar. Bu, Bootstrap bile\u015fenlerini do\u011frudan Vue \u015fablonlar\u0131n\u0131zda <\/code>, <\/code>, <\/code> gibi etiketlerle kullanabilece\u011finiz anlam\u0131na gelir.
\n2. jQuery Ba\u011f\u0131ms\u0131zl\u0131\u011f\u0131:<\/strong> BootstrapVue, Bootstrap’\u0131n JavaScript bile\u015fenlerini saf Vue.js koduyla yeniden uygulad\u0131\u011f\u0131 i\u00e7in hi\u00e7bir jQuery ba\u011f\u0131ml\u0131l\u0131\u011f\u0131na sahip de\u011fildir. Bu, projenizin daha hafif, daha h\u0131zl\u0131 ve daha az karma\u015f\u0131k olmas\u0131n\u0131 sa\u011flar.
\n3. Vue Reaktivitesi ile Tam Entegrasyon:<\/strong> BootstrapVue bile\u015fenleri, Vue’nun reaktif veri ba\u011flama ve prop sistemini tamamen destekler. Bu sayede, bile\u015fenlerin durumunu (g\u00f6r\u00fcn\u00fcrl\u00fck, devre d\u0131\u015f\u0131 b\u0131rakma, de\u011ferler vb.) Vue verilerinizle kolayca y\u00f6netebilir ve bile\u015fenlerinizin uygulaman\u0131z\u0131n durumuyla senkronize olmas\u0131n\u0131 sa\u011flayabilirsiniz.
\n4. Eri\u015filebilirlik (Accessibility):<\/strong> BootstrapVue, WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) standartlar\u0131na uygun olarak tasarlanm\u0131\u015ft\u0131r. Bu, uygulamalar\u0131n\u0131z\u0131n ekran okuyucular ve di\u011fer yard\u0131mc\u0131 teknolojilerle daha uyumlu olmas\u0131n\u0131 sa\u011flayarak daha geni\u015f bir kullan\u0131c\u0131 kitlesine ula\u015fman\u0131za yard\u0131mc\u0131 olur.
\n5. Mod\u00fclerlik ve A\u011fa\u00e7 Budama (Tree-Shaking):<\/strong> BootstrapVue, mod\u00fcler bir yap\u0131ya sahiptir. Bu sayede, sadece kulland\u0131\u011f\u0131n\u0131z bile\u015fenleri ve ilgili CSS’i projenize dahil edebilirsiniz. Bu “a\u011fa\u00e7 budama” (tree-shaking) \u00f6zelli\u011fi, nihai uygulama boyutunuzu \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r ve performans\u0131n\u0131z\u0131 art\u0131r\u0131r.
\n6. Kapsaml\u0131 Dok\u00fcmantasyon:<\/strong> BootstrapVue, her bile\u015fen i\u00e7in detayl\u0131 \u00f6rnekler, prop’lar, slot’lar ve olaylar i\u00e7eren kapsaml\u0131 bir dok\u00fcmantasyona sahiptir. Bu, \u00f6\u011frenme s\u00fcrecini h\u0131zland\u0131r\u0131r ve geli\u015ftirme s\u0131ras\u0131nda kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z sorulara h\u0131zl\u0131ca yan\u0131t bulman\u0131z\u0131 sa\u011flar.<\/p>\n

\u00d6zetle, BootstrapVue, Vue.js ve Bootstrap 4’\u00fcn en iyi \u00f6zelliklerini bir araya getirerek, modern, duyarl\u0131, eri\u015filebilir ve performansl\u0131 web uygulamalar\u0131 geli\u015ftirmenizi sa\u011flayan g\u00fc\u00e7l\u00fc ve verimli bir \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\n

Geli\u015ftirme Ortam\u0131n\u0131 Haz\u0131rlama<\/h3>\n

BootstrapVue’yu kullanmaya ba\u015flamadan \u00f6nce, temel bir Vue.js geli\u015ftirme ortam\u0131na sahip olman\u0131z gerekir. Vue CLI (Command Line Interface), Vue.js projeleri olu\u015fturmak ve y\u00f6netmek i\u00e7in \u00f6nerilen ara\u00e7t\u0131r.<\/p>\n

Vue CLI Kurulumu<\/h4>\n

E\u011fer sisteminizde Vue CLI y\u00fckl\u00fc de\u011filse, a\u015fa\u011f\u0131daki komutla global olarak kurabilirsiniz:<\/p>\n

npm install -g @vue\/cli\n
veya<\/h2>\nyarn global add @vue\/cli<\/code><\/pre>\n
Bu komut, Vue CLI’nin en son s\u00fcr\u00fcm\u00fcn\u00fc sisteminize kuracakt\u0131r. Kurulumun ba\u015far\u0131l\u0131 olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek i\u00e7in vue --version<\/code> komutunu \u00e7al\u0131\u015ft\u0131rabilirsiniz.<\/p>\n
Yeni Bir Vue Projesi Olu\u015fturma<\/h4>\n
Vue CLI ba\u015far\u0131yla y\u00fcklendikten sonra, yeni bir Vue.js projesi olu\u015fturabiliriz. Projenizi olu\u015fturmak istedi\u011finiz dizine gidin ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
vue create my-bootstrap-vue-app<\/code><\/pre>\n
my-bootstrap-vue-app<\/code> yerine projenizin ad\u0131n\u0131 yazabilirsiniz. Bu komutu \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda, Vue CLI size projeniz i\u00e7in baz\u0131 yap\u0131land\u0131rma se\u00e7enekleri sunacakt\u0131r:<\/p>\n
1.  Preset Se\u00e7imi:<\/strong> Genellikle “Default (Vue 3)” veya “Manually select features” se\u00e7eneklerinden birini se\u00e7ebilirsiniz. Bu rehber Bootstrap 4 ile \u00e7al\u0131\u015ft\u0131\u011f\u0131 i\u00e7in, Vue 2 veya Vue 3 fark etmeksizin BootstrapVue’yu kullanabilirsiniz. E\u011fer manuel se\u00e7im yaparsan\u0131z, Babel ve Linter\/Formatter gibi temel \u00f6zellikleri se\u00e7ti\u011finizden emin olun.
\n2.  Vue S\u00fcr\u00fcm\u00fc:<\/strong> Vue 2 veya Vue 3 se\u00e7ene\u011fi sunulabilir. BootstrapVue \u015fu anda Vue 2’yi tam olarak desteklemektedir. Vue 3 deste\u011fi beta a\u015famas\u0131ndad\u0131r (BootstrapVueNext). Bu rehberde Vue 2 ile uyumlu BootstrapVue’yu ele alaca\u011f\u0131z. Bu y\u00fczden Vue 2 se\u00e7ene\u011fini tercih edebilirsiniz.<\/p>\n
Se\u00e7imlerinizi yapt\u0131ktan sonra, Vue CLI gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyecek ve projenizin iskeletini olu\u015fturacakt\u0131r. Bu i\u015flem biraz zaman alabilir. Proje olu\u015fturulduktan sonra, projenizin dizinine girin:<\/p>\n
cd my-bootstrap-vue-app<\/code><\/pre>\n
Art\u0131k projeniz haz\u0131r ve BootstrapVue’yu entegre etmeye ba\u015flayabiliriz.<\/p>\n
BootstrapVue Kurulumu ve Entegrasyonu<\/h3>\n
Geli\u015ftirme ortam\u0131m\u0131z haz\u0131r oldu\u011funa g\u00f6re, BootstrapVue’yu projemize dahil etme zaman\u0131 geldi. Bu s\u00fcre\u00e7, gerekli paketlerin y\u00fcklenmesini ve main.js<\/code> dosyas\u0131n\u0131n yap\u0131land\u0131r\u0131lmas\u0131n\u0131 i\u00e7erir.<\/p>\n
Gerekli Paketleri Y\u00fckleme<\/h4>\n
BootstrapVue’yu projenize eklemek i\u00e7in npm<\/code> veya yarn<\/code> kullanarak a\u015fa\u011f\u0131daki paketleri y\u00fcklemeniz gerekir:<\/p>\n
npm install bootstrap-vue bootstrap\n
veya<\/h2>\nyarn add bootstrap-vue bootstrap<\/code><\/pre>\n
Bu komutlar iki ana paketi y\u00fckleyecektir:<\/p>\n
*   bootstrap-vue<\/code>: Bootstrap 4 bile\u015fenlerinin Vue.js versiyonlar\u0131n\u0131 i\u00e7erir.
\n*   bootstrap<\/code>: Bootstrap 4’\u00fcn orijinal CSS ve JavaScript dosyalar\u0131n\u0131 i\u00e7erir. BootstrapVue, bu CSS dosyalar\u0131na ihtiya\u00e7 duyar.<\/p>\n
Ek olarak, Bootstrap 5 ile birlikte gelen ve BootstrapVue’nun da destekledi\u011fi SVG tabanl\u0131 ikonlar\u0131 kullanmak isterseniz, bootstrap-icons<\/code> paketini de y\u00fckleyebilirsiniz:<\/p>\n
npm install bootstrap-icons\n
veya<\/h2>\nyarn add bootstrap-icons<\/code><\/pre>\n
Bu rehberin geri kalan\u0131nda, temel BootstrapVue ve Bootstrap kurulumunu varsayaca\u011f\u0131z.<\/p>\n
main.js<\/code> Dosyas\u0131n\u0131 Yap\u0131land\u0131rma<\/h4>\n
Paketleri y\u00fckledikten sonra, BootstrapVue’yu Vue.js uygulaman\u0131z\u0131n ana giri\u015f noktas\u0131 olan src\/main.js<\/code> (veya src\/main.ts<\/code> TypeScript kullan\u0131yorsan\u0131z) dosyas\u0131na entegre etmeniz gerekir. Bu dosya, Vue uygulaman\u0131z\u0131 ba\u015flat\u0131r ve global eklentileri kaydeder.<\/p>\n
src\/main.js<\/code> dosyan\u0131z\u0131 a\u015fa\u011f\u0131daki gibi g\u00fcncelleyin:<\/p>\n
import Vue from 'vue'\nimport App from '.\/App.vue'\n\n\/\/ BootstrapVue CSS dosyalar\u0131n\u0131 i\u00e7e aktar\u0131n\nimport 'bootstrap\/dist\/css\/bootstrap.css'\nimport 'bootstrap-vue\/dist\/bootstrap-vue.css'\n\n\/\/ BootstrapVue eklentisini i\u00e7e aktar\u0131n\nimport BootstrapVue from 'bootstrap-vue'\n\nVue.config.productionTip = false\n\n\/\/ Vue'ya BootstrapVue'yu kullanmas\u0131n\u0131 s\u00f6yleyin\nVue.use(BootstrapVue)\n\nnew Vue({\n  render: h => h(App),\n}).$mount('#app')<\/code><\/pre>\n
A\u00e7\u0131klamalar:<\/strong><\/p>\n
1.  import 'bootstrap\/dist\/css\/bootstrap.css'<\/code><\/strong>: Bu sat\u0131r, Bootstrap’\u0131n temel CSS stil dosyalar\u0131n\u0131 projenize dahil eder. Bu stiller, BootstrapVue bile\u015fenlerinin do\u011fru g\u00f6r\u00fcnmesini sa\u011flar.
\n2.  import 'bootstrap-vue\/dist\/bootstrap-vue.css'<\/code><\/strong>: Bu sat\u0131r, BootstrapVue’nun kendi \u00f6zel stillerini ve Bootstrap 4 \u00fczerinde yapt\u0131\u011f\u0131 de\u011fi\u015fiklikleri i\u00e7erir.
\n3.  import BootstrapVue from 'bootstrap-vue'<\/code><\/strong>: Bu sat\u0131r, BootstrapVue eklentisini i\u00e7e aktar\u0131r.
\n4.  Vue.use(BootstrapVue)<\/code><\/strong>: Bu sat\u0131r, Vue’ya BootstrapVue’yu global bir eklenti olarak kullanmas\u0131n\u0131 s\u00f6yler. Bu i\u015flemden sonra, uygulaman\u0131zdaki t\u00fcm Vue bile\u015fenlerinde <\/code>, <\/code> gibi BootstrapVue bile\u015fenlerini do\u011frudan kullanabilirsiniz.<\/p>\n
E\u011fer bootstrap-icons<\/code> paketini y\u00fcklediyseniz ve ikonlar\u0131 kullanmak istiyorsan\u0131z, main.js<\/code> dosyan\u0131za IconsPlugin<\/code>‘i de eklemeniz gerekir:<\/p>\n
import Vue from 'vue'\nimport App from '.\/App.vue'\n\nimport 'bootstrap\/dist\/css\/bootstrap.css'\nimport 'bootstrap-vue\/dist\/bootstrap-vue.css'\n\nimport { BootstrapVue, IconsPlugin } from 'bootstrap-vue' \/\/ IconsPlugin'i ekledik\n\nVue.config.productionTip = false\n\nVue.use(BootstrapVue)\nVue.use(IconsPlugin) \/\/ IconsPlugin'i de kullan\u0131yoruz\n\nnew Vue({\n  render: h => h(App),\n}).$mount('#app')<\/code><\/pre>\n
Art\u0131k Vue.js uygulaman\u0131zda BootstrapVue’yu kullanmaya haz\u0131rs\u0131n\u0131z! Uygulaman\u0131z\u0131 npm run serve<\/code> veya yarn serve<\/code> komutuyla ba\u015flatabilir ve BootstrapVue bile\u015fenlerini test etmeye ba\u015flayabilirsiniz.<\/p>\n
Global CSS\/SCSS Ayarlar\u0131 (Opsiyonel ama \u00d6nemli)<\/h4>\n
Yukar\u0131daki kurulum, Bootstrap’\u0131n varsay\u0131lan CSS’ini do\u011frudan kullan\u0131r. Ancak, Bootstrap’\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc \u00f6zelle\u015ftirmek isterseniz (renkler, fontlar, bo\u015fluklar vb.), SCSS (Sass) de\u011fi\u015fkenlerini kullanmak en iyi yoldur. Bu, Bootstrap’\u0131n kaynak SCSS dosyalar\u0131n\u0131 projenize dahil etmenizi ve kendi de\u011fi\u015fkenlerinizle varsay\u0131lan de\u011ferleri ge\u00e7ersiz k\u0131lman\u0131z\u0131 gerektirir.<\/p>\n
1.  vue.config.js<\/code> Olu\u015fturma (Gerekliyse):<\/strong> E\u011fer projenizde zaten bir vue.config.js<\/code> dosyas\u0131 yoksa, projenizin k\u00f6k dizininde bu dosyay\u0131 olu\u015fturun. Bu dosya, Vue CLI’nin webpack yap\u0131land\u0131rmas\u0131n\u0131 \u00f6zelle\u015ftirmenizi sa\u011flar.<\/p>\n
\/\/ vue.config.js\n    module.exports = {\n      css: {\n        loaderOptions: {\n          sass: {\n            \/\/ Sass de\u011fi\u015fkenlerini global olarak tan\u0131mlay\u0131n\n            \/\/ Bu, her SCSS dosyas\u0131na manuel olarak import etme ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r\n            additionalData: @import \"~@\/assets\/custom.scss\";<\/code>\n          }\n        }\n      }\n    };<\/code><\/pre>\n
    Not:<\/strong> additionalData<\/code> veya prependData<\/code> kullan\u0131m\u0131, kulland\u0131\u011f\u0131n\u0131z sass-loader<\/code> s\u00fcr\u00fcm\u00fcne g\u00f6re de\u011fi\u015fiklik g\u00f6sterebilir. E\u011fer hata al\u0131rsan\u0131z, dok\u00fcmantasyonu kontrol edin. ~@\/assets\/custom.scss<\/code> ifadesi, @\/assets\/custom.scss<\/code> dosyas\u0131n\u0131 projenizin k\u00f6k dizinindeki assets<\/code> klas\u00f6r\u00fcnde arayaca\u011f\u0131 anlam\u0131na gelir.<\/p>\n
2.  \u00d6zel SCSS Dosyalar\u0131 Olu\u015fturma:<\/strong> src\/assets\/<\/code> dizininde _variables.scss<\/code> ve custom.scss<\/code> ad\u0131nda iki yeni dosya olu\u015fturun.<\/p>\n
    *   src\/assets\/_variables.scss<\/code><\/strong>: Bu dosyada, Bootstrap’\u0131n varsay\u0131lan de\u011fi\u015fkenlerini ge\u00e7ersiz k\u0131labilirsiniz. \u00d6rne\u011fin:<\/p>\n
\/\/ src\/assets\/_variables.scss\n        $primary: #6f42c1; \/\/ Mor birincil renk\n        $secondary: #fd7e14; \/\/ Turuncu ikincil renk\n        $font-family-sans-serif: \"Roboto\", sans-serif; \/\/ \u00d6zel font\n        \/\/ Di\u011fer Bootstrap de\u011fi\u015fkenlerini burada ge\u00e7ersiz k\u0131labilirsiniz<\/code><\/pre>\n
    *   src\/assets\/custom.scss<\/code><\/strong>: Bu dosya, kendi \u00f6zel stillerinizi veya Bootstrap’\u0131n t\u00fcm SCSS kaynaklar\u0131n\u0131 i\u00e7e aktaraca\u011f\u0131n\u0131z yerdir.<\/p>\n
\/\/ src\/assets\/custom.scss\n        @import '~bootstrap\/scss\/functions';\n        @import '~bootstrap\/scss\/variables'; \/\/ \u00d6nce de\u011fi\u015fkenleri import edin\n        @import '~bootstrap\/scss\/mixins';\n\n        \/\/ Kendi \u00f6zel de\u011fi\u015fkenlerimizi import ediyoruz\n        @import '.\/_variables.scss';\n\n        \/\/ Bootstrap'\u0131n geri kalan\u0131n\u0131 import edin\n        @import '~bootstrap\/scss\/root';\n        @import '~bootstrap\/scss\/reboot';\n        @import '~bootstrap\/scss\/type';\n        \/\/ ... di\u011fer Bootstrap bile\u015fen SCSS dosyalar\u0131\n        @import '~bootstrap\/scss\/buttons';\n        @import '~bootstrap\/scss\/card';\n        \/\/ ... vb.\n\n        \/\/ BootstrapVue'nun kendi \u00f6zel stillerini de import edin\n        @import '~bootstrap-vue\/src\/index.scss';\n\n        \/\/ Kendi \u00f6zel stilleriniz\n        body {\n          background-color: #f8f9fa;\n        }\n        .custom-class {\n          border: 1px solid $primary;\n        }<\/code><\/pre>\n
3.  main.js<\/code> G\u00fcncellemesi:<\/strong> main.js<\/code> dosyan\u0131zdaki Bootstrap CSS importlar\u0131n\u0131 kald\u0131r\u0131n ve sadece custom.scss<\/code> dosyas\u0131n\u0131 import edin:<\/p>\n
\/\/ src\/main.js\n    import Vue from 'vue'\n    import App from '.\/App.vue'\n\n    \/\/ Bootstrap ve BootstrapVue CSS'lerini kald\u0131rd\u0131k\n    \/\/ Kendi custom.scss dosyam\u0131z\u0131 i\u00e7e aktar\u0131yoruz\n    import '@\/assets\/custom.scss'\n\n    import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'\n\n    Vue.config.productionTip = false\n\n    Vue.use(BootstrapVue)\n    Vue.use(IconsPlugin)\n\n    new Vue({\n      render: h => h(App),\n    }).$mount('#app')<\/code><\/pre>\n
Bu yap\u0131land\u0131rma ile, Bootstrap’\u0131n ve dolay\u0131s\u0131yla BootstrapVue bile\u015fenlerinin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc tamamen kontrol edebilir, projenizin marka kimli\u011fine uygun hale getirebilirsiniz.<\/p>\n
BootstrapVue Bile\u015fenlerini Kullanmaya Ba\u015flama<\/h3>\n
BootstrapVue kurulumunu tamamlad\u0131\u011f\u0131m\u0131za g\u00f6re, art\u0131k bile\u015fenleri kullanmaya ba\u015flayabiliriz. BootstrapVue, Bootstrap 4’\u00fcn sundu\u011fu her \u015feyi Vue bile\u015fenleri olarak sunar. \u0130\u015fte en yayg\u0131n kullan\u0131lanlardan baz\u0131lar\u0131 ve nas\u0131l kullanaca\u011f\u0131n\u0131z:<\/p>\n
Temel Bile\u015fenler<\/h4>\n
BootstrapVue’nun g\u00fcc\u00fc, HTML etiketleri yerine Vue bile\u015fenleri kullanarak Bootstrap \u00f6zelliklerini kolayca entegre etmenizi sa\u011flamas\u0131d\u0131r.<\/p>\n
*   b-button<\/code> (D\u00fc\u011fme):<\/strong>
\n    b-button<\/code> bile\u015feni, Bootstrap’\u0131n d\u00fc\u011fme stillerini ve davran\u0131\u015flar\u0131n\u0131 sa\u011flar. variant<\/code>, size<\/code>, block<\/code>, pill<\/code>, squared<\/code> gibi prop’lar ile kolayca \u00f6zelle\u015ftirilebilir.<\/p>\n