Vue.js Uygulamalarında Bootstrap 4’ü BootstrapVue ile Kullanma Rehberi

Vue.js Uygulamalarında Bootstrap 4’ü BootstrapVue ile Kullanma Rehberi

Modern web geliştirme dünyasında, kullanıcı arayüzlerinin hızlı ve etkili bir şekilde oluşturulması büyük önem taşımaktadır. Bu süreçte popülerliğini kanıtlamış iki teknoloji, ön uç JavaScript çerçevesi Vue.js ve responsive tasarım kütüphanesi Bootstrap, geliştiricilerin vazgeçilmez araçları haline gelmiştir. Ancak bu iki güçlü aracı bir araya getirmek, bazı entegrasyon zorluklarını beraberinde getirebilir. İşte tam bu noktada BootstrapVue devreye girerek, Vue.js geliştiricilerine Bootstrap 4 bileşenlerini yerel Vue bileşenleri olarak sunarak bu süreci inanılmaz derecede kolaylaştırır.

Bu kapsamlı rehberde, Vue.js projelerinizde Bootstrap 4’ü BootstrapVue aracılığıyla nasıl kullanacağınızı adım adım inceleyeceğiz. Neden BootstrapVue kullanmanız gerektiğinden başlayarak, geliştirme ortamının hazırlanmasına, kurulum ve entegrasyon süreçlerine, temel bileşenlerin kullanımına, tema özelleştirmesine ve hatta yaygın sorunlara çözümler sunmaya kadar her detayı ele alacağız. Amacımız, bu rehberin sonunda kendi Vue.js uygulamanızda BootstrapVue’yu confidently bir şekilde kullanabilmeniz için size sağlam bir temel oluşturmaktır.

Neden BootstrapVue Kullanmalısınız?

Bootstrap, web sayfalarını hızlıca stilize etmek ve duyarlı tasarımlar oluşturmak için dünya genelinde milyonlarca geliştirici tarafından kullanılan popüler bir CSS çerçevesidir. Vue.js ise, interaktif kullanıcı arayüzleri oluşturmak için kullanılan ilerici bir JavaScript çerçevesidir. Her ikisi de kendi alanlarında güçlü olsa da, geleneksel Bootstrap’ı doğrudan bir Vue.js projesine entegre etmek bazı zorlukları beraberinde getirebilir:

* jQuery Bağımlılığı: Bootstrap’ın JavaScript bileşenleri (modal, dropdown, carousel vb.) geleneksel olarak jQuery’ye bağımlıdır. Vue.js projeleri ise genellikle jQuery kullanmaz ve bir Vue projesine sırf Bootstrap için jQuery eklemek, gereksiz yük ve potansiyel çakışmalar anlamına gelebilir.
* Vue Reaktivitesi ile Uyumsuzluk: Bootstrap’ın JavaScript bileşenleri DOM manipülasyonu üzerine kuruludur. Vue.js ise sanal DOM kullanarak ve reaktif veri bağlama ile çalışır. Bu iki yaklaşım arasında doğrudan bir uyum sağlamak zor olabilir ve beklenmedik davranışlara yol açabilir.
* Bileşen Tabanlı Mimari: Vue.js, bileşen tabanlı bir mimariye sahiptir. Geleneksel Bootstrap’ı kullanırken, her bir Bootstrap bileşenini (örneğin bir modalı) Vue bileşenleri içinde manuel olarak sarmalamanız veya yönetmeniz gerekebilir, bu da tekrarlayan ve hataya açık bir süreçtir.

İşte bu noktada BootstrapVue, yukarıda belirtilen tüm sorunlara zarif ve etkili çözümler sunar:

1. Yerel Vue Bileşenleri: BootstrapVue, Bootstrap 4’ün tüm bileşenlerini (düğmeler, kartlar, form elemanları, navigasyon çubukları, modallar vb.) yerel Vue bileşenleri olarak yeniden yazar. Bu, Bootstrap bileşenlerini doğrudan Vue şablonlarınızda , , gibi etiketlerle kullanabileceğiniz anlamına gelir.
2. jQuery Bağımsızlığı: BootstrapVue, Bootstrap’ın JavaScript bileşenlerini saf Vue.js koduyla yeniden uyguladığı için hiçbir jQuery bağımlılığına sahip değildir. Bu, projenizin daha hafif, daha hızlı ve daha az karmaşık olmasını sağlar.
3. Vue Reaktivitesi ile Tam Entegrasyon: BootstrapVue bileşenleri, Vue’nun reaktif veri bağlama ve prop sistemini tamamen destekler. Bu sayede, bileşenlerin durumunu (görünürlük, devre dışı bırakma, değerler vb.) Vue verilerinizle kolayca yönetebilir ve bileşenlerinizin uygulamanızın durumuyla senkronize olmasını sağlayabilirsiniz.
4. Erişilebilirlik (Accessibility): BootstrapVue, WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) standartlarına uygun olarak tasarlanmıştır. Bu, uygulamalarınızın ekran okuyucular ve diğer yardımcı teknolojilerle daha uyumlu olmasını sağlayarak daha geniş bir kullanıcı kitlesine ulaşmanıza yardımcı olur.
5. Modülerlik ve Ağaç Budama (Tree-Shaking): BootstrapVue, modüler bir yapıya sahiptir. Bu sayede, sadece kullandığınız bileşenleri ve ilgili CSS’i projenize dahil edebilirsiniz. Bu “ağaç budama” (tree-shaking) özelliği, nihai uygulama boyutunuzu önemli ölçüde azaltır ve performansınızı artırır.
6. Kapsamlı Dokümantasyon: BootstrapVue, her bileşen için detaylı örnekler, prop’lar, slot’lar ve olaylar içeren kapsamlı bir dokümantasyona sahiptir. Bu, öğrenme sürecini hızlandırır ve geliştirme sırasında karşılaştığınız sorulara hızlıca yanıt bulmanızı sağlar.

Özetle, BootstrapVue, Vue.js ve Bootstrap 4’ün en iyi özelliklerini bir araya getirerek, modern, duyarlı, erişilebilir ve performanslı web uygulamaları geliştirmenizi sağlayan güçlü ve verimli bir çözümdür.

Geliştirme Ortamını Hazırlama

BootstrapVue’yu kullanmaya başlamadan önce, temel bir Vue.js geliştirme ortamına sahip olmanız gerekir. Vue CLI (Command Line Interface), Vue.js projeleri oluşturmak ve yönetmek için önerilen araçtır.

Vue CLI Kurulumu

Eğer sisteminizde Vue CLI yüklü değilse, aşağıdaki komutla global olarak kurabilirsiniz:

npm install -g @vue/cli
veya
yarn global add @vue/cli

Bu komut, Vue CLI’nin en son sürümünü sisteminize kuracaktır. Kurulumun başarılı olup olmadığını kontrol etmek için vue --version komutunu çalıştırabilirsiniz.

Yeni Bir Vue Projesi Oluşturma

Vue CLI başarıyla yüklendikten sonra, yeni bir Vue.js projesi oluşturabiliriz. Projenizi oluşturmak istediğiniz dizine gidin ve aşağıdaki komutu çalıştırın:

vue create my-bootstrap-vue-app

my-bootstrap-vue-app yerine projenizin adını yazabilirsiniz. Bu komutu çalıştırdığınızda, Vue CLI size projeniz için bazı yapılandırma seçenekleri sunacaktır:

1. Preset Seçimi: Genellikle “Default (Vue 3)” veya “Manually select features” seçeneklerinden birini seçebilirsiniz. Bu rehber Bootstrap 4 ile çalıştığı için, Vue 2 veya Vue 3 fark etmeksizin BootstrapVue’yu kullanabilirsiniz. Eğer manuel seçim yaparsanız, Babel ve Linter/Formatter gibi temel özellikleri seçtiğinizden emin olun.
2. Vue Sürümü: Vue 2 veya Vue 3 seçeneği sunulabilir. BootstrapVue şu anda Vue 2’yi tam olarak desteklemektedir. Vue 3 desteği beta aşamasındadır (BootstrapVueNext). Bu rehberde Vue 2 ile uyumlu BootstrapVue’yu ele alacağız. Bu yüzden Vue 2 seçeneğini tercih edebilirsiniz.

Seçimlerinizi yaptıktan sonra, Vue CLI gerekli bağımlılıkları yükleyecek ve projenizin iskeletini oluşturacaktır. Bu işlem biraz zaman alabilir. Proje oluşturulduktan sonra, projenizin dizinine girin:

cd my-bootstrap-vue-app

Artık projeniz hazır ve BootstrapVue’yu entegre etmeye başlayabiliriz.

BootstrapVue Kurulumu ve Entegrasyonu

Geliştirme ortamımız hazır olduğuna göre, BootstrapVue’yu projemize dahil etme zamanı geldi. Bu süreç, gerekli paketlerin yüklenmesini ve main.js dosyasının yapılandırılmasını içerir.

Gerekli Paketleri Yükleme

BootstrapVue’yu projenize eklemek için npm veya yarn kullanarak aşağıdaki paketleri yüklemeniz gerekir:

npm install bootstrap-vue bootstrap
veya
yarn add bootstrap-vue bootstrap

Bu komutlar iki ana paketi yükleyecektir:

* bootstrap-vue: Bootstrap 4 bileşenlerinin Vue.js versiyonlarını içerir.
* bootstrap: Bootstrap 4’ün orijinal CSS ve JavaScript dosyalarını içerir. BootstrapVue, bu CSS dosyalarına ihtiyaç duyar.

Ek olarak, Bootstrap 5 ile birlikte gelen ve BootstrapVue’nun da desteklediği SVG tabanlı ikonları kullanmak isterseniz, bootstrap-icons paketini de yükleyebilirsiniz:

npm install bootstrap-icons
veya
yarn add bootstrap-icons

Bu rehberin geri kalanında, temel BootstrapVue ve Bootstrap kurulumunu varsayacağız.

main.js Dosyasını Yapılandırma

Paketleri yükledikten sonra, BootstrapVue’yu Vue.js uygulamanızın ana giriş noktası olan src/main.js (veya src/main.ts TypeScript kullanıyorsanız) dosyasına entegre etmeniz gerekir. Bu dosya, Vue uygulamanızı başlatır ve global eklentileri kaydeder.

src/main.js dosyanızı aşağıdaki gibi güncelleyin:

import Vue from 'vue'
import App from './App.vue'

// BootstrapVue CSS dosyalarını içe aktarın
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// BootstrapVue eklentisini içe aktarın
import BootstrapVue from 'bootstrap-vue'

Vue.config.productionTip = false

// Vue'ya BootstrapVue'yu kullanmasını söyleyin
Vue.use(BootstrapVue)

new Vue({
  render: h => h(App),
}).$mount('#app')

Açıklamalar:

1. import 'bootstrap/dist/css/bootstrap.css': Bu satır, Bootstrap’ın temel CSS stil dosyalarını projenize dahil eder. Bu stiller, BootstrapVue bileşenlerinin doğru görünmesini sağlar.
2. import 'bootstrap-vue/dist/bootstrap-vue.css': Bu satır, BootstrapVue’nun kendi özel stillerini ve Bootstrap 4 üzerinde yaptığı değişiklikleri içerir.
3. import BootstrapVue from 'bootstrap-vue': Bu satır, BootstrapVue eklentisini içe aktarır.
4. Vue.use(BootstrapVue): Bu satır, Vue’ya BootstrapVue’yu global bir eklenti olarak kullanmasını söyler. Bu işlemden sonra, uygulamanızdaki tüm Vue bileşenlerinde , gibi BootstrapVue bileşenlerini doğrudan kullanabilirsiniz.

Eğer bootstrap-icons paketini yüklediyseniz ve ikonları kullanmak istiyorsanız, main.js dosyanıza IconsPlugin‘i de eklemeniz gerekir:

import Vue from 'vue'
import App from './App.vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' // IconsPlugin'i ekledik

Vue.config.productionTip = false

Vue.use(BootstrapVue)
Vue.use(IconsPlugin) // IconsPlugin'i de kullanıyoruz

new Vue({
  render: h => h(App),
}).$mount('#app')

Artık Vue.js uygulamanızda BootstrapVue’yu kullanmaya hazırsınız! Uygulamanızı npm run serve veya yarn serve komutuyla başlatabilir ve BootstrapVue bileşenlerini test etmeye başlayabilirsiniz.

Global CSS/SCSS Ayarları (Opsiyonel ama Önemli)

Yukarıdaki kurulum, Bootstrap’ın varsayılan CSS’ini doğrudan kullanır. Ancak, Bootstrap’ın görünümünü özelleştirmek isterseniz (renkler, fontlar, boşluklar vb.), SCSS (Sass) değişkenlerini kullanmak en iyi yoldur. Bu, Bootstrap’ın kaynak SCSS dosyalarını projenize dahil etmenizi ve kendi değişkenlerinizle varsayılan değerleri geçersiz kılmanızı gerektirir.

1. vue.config.js Oluşturma (Gerekliyse): Eğer projenizde zaten bir vue.config.js dosyası yoksa, projenizin kök dizininde bu dosyayı oluşturun. Bu dosya, Vue CLI’nin webpack yapılandırmasını özelleştirmenizi sağlar.

// vue.config.js
    module.exports = {
      css: {
        loaderOptions: {
          sass: {
            // Sass değişkenlerini global olarak tanımlayın
            // Bu, her SCSS dosyasına manuel olarak import etme ihtiyacını ortadan kaldırır
            additionalData: @import "~@/assets/custom.scss";
          }
        }
      }
    };

Not: additionalData veya prependData kullanımı, kullandığınız sass-loader sürümüne göre değişiklik gösterebilir. Eğer hata alırsanız, dokümantasyonu kontrol edin. ~@/assets/custom.scss ifadesi, @/assets/custom.scss dosyasını projenizin kök dizinindeki assets klasöründe arayacağı anlamına gelir.

2. Özel SCSS Dosyaları Oluşturma: src/assets/ dizininde _variables.scss ve custom.scss adında iki yeni dosya oluşturun.

* src/assets/_variables.scss: Bu dosyada, Bootstrap’ın varsayılan değişkenlerini geçersiz kılabilirsiniz. Örneğin:

// src/assets/_variables.scss
        $primary: #6f42c1; // Mor birincil renk
        $secondary: #fd7e14; // Turuncu ikincil renk
        $font-family-sans-serif: "Roboto", sans-serif; // Özel font
        // Diğer Bootstrap değişkenlerini burada geçersiz kılabilirsiniz

* src/assets/custom.scss: Bu dosya, kendi özel stillerinizi veya Bootstrap’ın tüm SCSS kaynaklarını içe aktaracağınız yerdir.

// src/assets/custom.scss
        @import '~bootstrap/scss/functions';
        @import '~bootstrap/scss/variables'; // Önce değişkenleri import edin
        @import '~bootstrap/scss/mixins';

        // Kendi özel değişkenlerimizi import ediyoruz
        @import './_variables.scss';

        // Bootstrap'ın geri kalanını import edin
        @import '~bootstrap/scss/root';
        @import '~bootstrap/scss/reboot';
        @import '~bootstrap/scss/type';
        // ... diğer Bootstrap bileşen SCSS dosyaları
        @import '~bootstrap/scss/buttons';
        @import '~bootstrap/scss/card';
        // ... vb.

        // BootstrapVue'nun kendi özel stillerini de import edin
        @import '~bootstrap-vue/src/index.scss';

        // Kendi özel stilleriniz
        body {
          background-color: #f8f9fa;
        }
        .custom-class {
          border: 1px solid $primary;
        }

3. main.js Güncellemesi: main.js dosyanızdaki Bootstrap CSS importlarını kaldırın ve sadece custom.scss dosyasını import edin:

// src/main.js
    import Vue from 'vue'
    import App from './App.vue'

    // Bootstrap ve BootstrapVue CSS'lerini kaldırdık
    // Kendi custom.scss dosyamızı içe aktarıyoruz
    import '@/assets/custom.scss'

    import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

    Vue.config.productionTip = false

    Vue.use(BootstrapVue)
    Vue.use(IconsPlugin)

    new Vue({
      render: h => h(App),
    }).$mount('#app')

Bu yapılandırma ile, Bootstrap’ın ve dolayısıyla BootstrapVue bileşenlerinin görünümünü tamamen kontrol edebilir, projenizin marka kimliğine uygun hale getirebilirsiniz.

BootstrapVue Bileşenlerini Kullanmaya Başlama

BootstrapVue kurulumunu tamamladığımıza göre, artık bileşenleri kullanmaya başlayabiliriz. BootstrapVue, Bootstrap 4’ün sunduğu her şeyi Vue bileşenleri olarak sunar. İşte en yaygın kullanılanlardan bazıları ve nasıl kullanacağınız:

Temel Bileşenler

BootstrapVue’nun gücü, HTML etiketleri yerine Vue bileşenleri kullanarak Bootstrap özelliklerini kolayca entegre etmenizi sağlamasıdır.

* b-button (Düğme):
b-button bileşeni, Bootstrap’ın düğme stillerini ve davranışlarını sağlar. variant, size, block, pill, squared gibi prop’lar ile kolayca özelleştirilebilir.

* b-card (Kart):
b-card bileşeni, içerikleri düzenli bir şekilde göstermek için kullanılır. title, sub-title, img-src, img-alt, header, footer gibi prop’ları vardır. Slot’lar aracılığıyla da karmaşık içerikler eklenebilir.

* b-navbar (Navigasyon Çubuğu):
b-navbar ve ilgili bileşenler (b-nav-item, b-navbar-brand, b-navbar-toggle, b-collapse) ile duyarlı navigasyon çubukları oluşturulabilir.

* Form Bileşenleri (b-form-input, b-form-select, b-form-checkbox, vb.):
BootstrapVue, Bootstrap’ın tüm form kontrollerini Vue bileşenleri olarak sağlar. v-model ile veri bağlama, state prop’u ile doğrulama durumları ve b-form-group ile etiketleme ve yardımcı metin ekleme kolayca yapılabilir.

Layout ve Grid Sistemi

Bootstrap’ın en güçlü özelliklerinden biri, duyarlı grid sistemidir. BootstrapVue, bu sistemi b-container, b-row ve b-col bileşenleri aracılığıyla sağlar.

* b-container: İçeriği sabit genişlikte veya akışkan (fluid) bir kapsayıcıya yerleştirir.
* b-row: Sütunlar için bir satır oluşturur.
* b-col: Satırlar içindeki sütunları temsil eder ve ekran boyutlarına göre genişliklerini ayarlamak için prop’lar alır (cols, sm, md, lg, xl).

Bu örnekler, BootstrapVue bileşenlerinin ne kadar sezgisel ve kolay kullanılabileceğini göstermektedir. Her bileşen, Bootstrap’ın ilgili HTML yapısını ve JavaScript davranışını Vue’nun reaktif doğasıyla birleştirir.

Tema Özelleştirmesi ve Gelişmiş Kullanım

BootstrapVue, Bootstrap 4’ün tüm özelleştirme yeteneklerini Vue.js ekosistemine taşır. Uygulamanızın benzersiz bir görünüme sahip olmasını sağlamak için tema özelleştirmesi ve bazı gelişmiş kullanım tekniklerini keşfedelim.

SCSS Değişkenleri ile Tema Oluşturma

Daha önce “Global CSS/SCSS Ayarları” bölümünde bahsettiğimiz gibi, Bootstrap’ın görünümünü özelleştirmenin en güçlü yolu SCSS değişkenlerini kullanmaktır. Bu yöntem, Bootstrap’ın varsayılan renklerini, fontlarını, boşluklarını ve diğer stil özelliklerini global olarak değiştirmenize olanak tanır.

Adımlar:

1. src/assets/_variables.scss dosyasını oluşturun veya güncelleyin. Bu dosyada, geçersiz kılmak istediğiniz Bootstrap SCSS değişkenlerini tanımlayın. Bootstrap dokümantasyonunda tüm değişkenlerin bir listesini bulabilirsiniz.

// src/assets/_variables.scss
    $theme-colors: (
      "primary": #722f37, // Özel birincil renk
      "secondary": #f2af29, // Özel ikincil renk
      "success": #4CAF50
    );

    $font-family-base: 'Open Sans', sans-serif;
    $body-bg: #f5f5f5;
    $body-color: #333;
    $border-radius: .5rem;
    $enable-shadows: true;

Burada $theme-colors haritasını kullanarak varsayılan renkleri geçersiz kıldık ve bazı genel stil ayarlarını değiştirdik.
2. src/assets/custom.scss dosyasını oluşturun veya güncelleyin. Bu dosya, Bootstrap’ın ve BootstrapVue’nun SCSS kaynaklarını doğru sırada içe aktarır ve sizin özel değişkenlerinizi uygular.

// src/assets/custom.scss
    // 1. Bootstrap functions, variables ve mixins'i import edin
    @import '~bootstrap/scss/functions';
    @import '~bootstrap/scss/variables';
    @import '~bootstrap/scss/mixins';

    // 2. Kendi özel değişkenlerimizi import edin (varsayılanları geçersiz kılacak)
    @import './_variables.scss';

    // 3. Bootstrap'ın geri kalanını import edin (artık yeni değişkenlerle derlenecek)
    @import '~bootstrap/scss/root';
    @import '~bootstrap/scss/reboot';
    @import '~bootstrap/scss/type';
    @import '~bootstrap/scss/images';
    @import '~bootstrap/scss/code';
    @import '~bootstrap/scss/grid';
    @import '~bootstrap/scss/tables';
    @import '~bootstrap/scss/forms';
    @import '~bootstrap/scss/buttons';
    @import '~bootstrap/scss/transitions';
    @import '~bootstrap/scss/dropdown';
    @import '~bootstrap/scss/button-group';
    @import '~bootstrap/scss/input-group';
    @import '~bootstrap/scss/custom-forms';
    @import '~bootstrap/scss/nav';
    @import '~bootstrap/scss/navbar';
    @import '~bootstrap/scss/card';
    @import '~bootstrap/scss/breadcrumb';
    @import '~bootstrap/scss/pagination';
    @import '~bootstrap/scss/badge';
    @import '~bootstrap/scss/jumbotron';
    @import '~bootstrap/scss/alert';
    @import '~bootstrap/scss/progress';
    @import '~bootstrap/scss/media';
    @import '~bootstrap/scss/list-group';
    @import '~bootstrap/scss/close';
    @import '~bootstrap/scss/toasts';
    @import '~bootstrap/scss/modal';
    @import '~bootstrap/scss/tooltip';
    @import '~bootstrap/scss/popover';
    @import '~bootstrap/scss/carousel';
    @import '~bootstrap/scss/spinners';
    @import '~bootstrap/scss/utilities';
    @import '~bootstrap/scss/print';

    // 4. BootstrapVue'nun kendi özel stillerini import edin
    @import '~bootstrap-vue/src/index.scss';

    // 5. Kendi ek özel stilleriniz
    h1 {
      color: map-get($theme-colors, "primary");
    }

Bu yapılandırma, uygulamanızın tamamen markanıza uygun bir görünüme sahip olmasını sağlar ve gelecekteki stil değişikliklerini merkezi bir yerden yönetmenize olanak tanır.

Dinamik Bileşenler ve Slotlar

BootstrapVue bileşenleri, Vue’nun slot mekanizmasını geniş ölçüde kullanır. Bu, bileşenlerin varsayılan yapısını korurken içine özel içerik eklemenizi sağlar.

* b-modal ile Dinamik İçerik: b-modal bileşeni, genellikle slot’lar aracılığıyla başlık, gövde ve altbilgi içeriğini alır.

Yukarıdaki örnekte, #modal-footer adlı adlandırılmış slot kullanılarak modalın altbilgi düğmeleri tamamen özelleştirilmiştir.

* b-table ile Özel Hücreler: b-table bileşeni, veri tabloları oluşturmak için çok güçlüdür ve slot’lar aracılığıyla her bir sütunun veya hücrenin görünümünü özelleştirebilirsiniz.

Bu örnekte, actions sütunu için özel düğmeler oluşturulmuş ve row-details slot’u ile her satır için ek detaylar gösterilmiştir.

Duyarlı Tasarım İpuçları

BootstrapVue, Bootstrap’ın duyarlı tasarım sınıflarını ve grid sistemini tam olarak destekler.

* Grid Sınıflarını Etkin Kullanma: b-col bileşeninin sm, md, lg, xl gibi prop’larını kullanarak farklı ekran boyutlarında bileşenlerin genişliğini ve yerleşimini ayarlayabilirsiniz.

      
        Büyük ekranlarda 4 sütun, orta ekranlarda 6 sütun
        Büyük ekranlarda 8 sütun, orta ekranlarda 6 sütun
      
    

* Yardımcı Sınıflar: d-none, d-block, text-center, m-auto, p-3 gibi Bootstrap’ın yardımcı sınıflarını doğrudan Vue bileşenlerinize class prop’u aracılığıyla uygulayabilirsiniz.

Sadece orta ve üzeri ekranlarda görünür
    

Erişilebilirlik (Accessibility)

BootstrapVue’nun önemli bir avantajı, bileşenlerinin WAI-ARIA standartlarına uygun olarak tasarlanmış olmasıdır. Bu, uygulamanızın ekran okuyucular ve klavye navigasyonu gibi yardımcı teknolojilerle daha iyi çalışmasını sağlar.

* Otomatik ARIA Nitelikleri: Çoğu BootstrapVue bileşeni, gerekli ARIA niteliklerini (örneğin, aria-label, aria-expanded) otomatik olarak ekler.
* Kendi Bileşenlerinizde Erişilebilirlik: Kendi özel Vue bileşenlerinizi oluştururken, BootstrapVue’nun sağladığı erişilebilirlik ipuçlarını ve Bootstrap’ın genel erişilebilirlik yönergelerini takip etmeniz önemlidir. Örneğin, form kontrolleriniz için label etiketlerini label-for ile doğru bir şekilde eşleştirdiğinizden emin olun.

Yaygın Hatalar ve Çözümleri

BootstrapVue ile çalışırken karşılaşılabilecek bazı yaygın sorunlar ve bunların çözümleri aşağıda listelenmiştir.

jQuery Bağımlılığı Sorunu

Sorun: Geleneksel Bootstrap’ın JavaScript bileşenleri jQuery’ye bağımlıdır. Vue.js projelerinde jQuery kullanmak istenmez ve hatta çakışmalara neden olabilir.

Çözüm: BootstrapVue, Bootstrap’ın JavaScript bileşenlerini saf Vue.js koduyla yeniden uyguladığı için jQuery’ye hiçbir şekilde bağımlı değildir. Bu, BootstrapVue’nun en büyük avantajlarından biridir. Eğer bir BootstrapVue bileşeni düzgün çalışmıyorsa, sorun genellikle jQuery bağımlılığıyla ilgili değildir; bunun yerine BootstrapVue’nun doğru kurulup kurulmadığına veya bileşenin doğru kullanılıp kullanılmadığına bakılmalıdır. Ekstra jQuery paketleri yüklemekten kaçının.

CSS Çakışmaları

Sorun: Bazen, uygulamanızdaki diğer CSS kütüphaneleri veya özel stiller, BootstrapVue’nun stilleriyle çakışabilir ve beklenmedik görsel sorunlara yol açabilir.

Çözüm:

* İçe Aktarma Sırası: CSS dosyalarının içe aktarma sırası önemlidir. Genellikle, Bootstrap’ın temel stilleri önce, ardından BootstrapVue’nun stilleri ve en son olarak da kendi özel stilleriniz gelmelidir. Bu, kendi stillerinizin Bootstrap’ın varsayılanlarını geçersiz kılmasına olanak tanır.

// main.js
    import 'bootstrap/dist/css/bootstrap.css'
    import 'bootstrap-vue/dist/bootstrap-vue.css'
    import '@/assets/custom.css' // Kendi özel stilleriniz

Eğer SCSS ile özelleştirme yapıyorsanız, custom.scss dosyanızın içindeki @import sırasının doğru olduğundan emin olun (Bootstrap değişkenleri -> Kendi değişkenleriniz -> Bootstrap bileşenleri -> BootstrapVue stilleri -> Kendi özel stilleriniz).
* Kapsamlı Stiller (