4. [vuejs-02] projesi: CSS Bootstrap çerçevesinin kullanımı

[vuejs-02] projesi, bir [vue.js] projesinde Bootstrap’ın kullanımını göstermektedir. Tüm projelerimizde CSS çerçeve yapısı kullanılacaktır. Bootstrap’ın [BootstrapVue] [https://bootstrap-vue.js.org/] adlı bir varyasyonunu kullanacağız.

Projenin dizin yapısı şu şekilde olacaktır:

Not: Yukarıdaki [vuejs] klasörü, belgenin devamında [cours] [1] olarak yeniden adlandırılmıştır.

4.1. [BootstrapVue] çerçeve yapısının kurulumu

[BootstrapVue], [npm] aracıyla projeye eklenen bir çerçeve sistemidir:

[1]'te ise iki çerçeve kurulur: [Bootstrap] ve onun varyantı [BootstrapVue];
[2]'te ise her iki bağımlılık da [package.json] dosyasında görünür;

4.2. [main.js] komut dosyası

Ana komut dosyası [main.js] şu şekildedir:


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

// eklentiler
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

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

// yapılandırma
Vue.config.productionTip = false

// [App] projesinin örneklenmesi
new Vue({
  render: h => h(App),
}).$mount('#uygulama')

2. satır: [Vue] çerçevesinin içe aktarılması;
3. satır: ana görünümün içe aktarılması;
6. satır: [BootstrapVue] çerçevesinin içe aktarılması;
7. satır: Bu çerçeve, [Vue] çerçevesinin bir eklentisi olarak tasarlanmıştır. 7. satır, bu eklentiyi [Vue] çerçevesine dahil eder;
satır 10-11: CSS dosyalarının [Bootstrap] ve [BootstrapVue] çerçevelerinden içe aktarılması;
dolayısıyla 5-11. satırlar tamamen [BootstrapVue]'in kullanımına ayrılmıştır. Kodun geri kalanı, önceki paragrafta gördüğümüzle aynıdır;

4.3. [App.vue] bileşeni


<template>
  <b-container>
    <b-card>
      <!-- Bootstrap Jumbotron -->
      <b-jumbotron>
        <!-- satır -->
        <b-row>
          <!-- genişliği 4 olan sütun -->
          <b-col cols="4">
            <img src="./assets/logo.jpg" alt="Cerisier en fleurs" />
          </b-col>
          <!-- genişliği 8 olan sütun -->
          <b-col cols="8">
            <h1>Calculez votre impôt</h1>
          </b-col>
        </b-row>
      </b-jumbotron>
      <HelloBootstrap msg="Hello Bootstrap !" />
    </b-card>
  </b-container>
</template>


<script>
  import HelloBootstrap from "./components/HelloBootstrap.vue";

  export default {
    name: "app",
    components: {
      HelloBootstrap
    }
  };
</script>

Açıklamalar

1-21. satırlar: tüm <b-xx> etiketleri, [BootstrapVue] çerçevesine ait etiketlerdir;
2. ve 20. satırlar: <b-container> etiketi bir Bootstrap konteyneri tanımlar. Bu konteynerin içinde, <b-row> etiketiyle satırlar ve <b-col> etiketiyle sütunlar tanımlayabileceğiz;
3. ve 19. satırlar: <b-card> etiketi bir Bootstrap “kartı” tanımlar. Bu, görsel olarak kenarlıklı bir dikdörtgen şeklinde görünür;
5. ve 17. satırlar: <b-jumbotron> etiketi, sayfanın bir bölümünü, burada bir resim ve metni öne çıkarmamızı sağlar. Bunu çeşitli projelerimizde projenin görsel kimliği olarak kullanacağız;
7. satır: <b-row> etiketi bir satırı tanımlar;
9-11. satırlar: <b-col> etiketi, önceki satırın bir sütununu tanımlar. Bootstrap, her satıra 12 sütun atar. [cols=’4’] özniteliği, <b-col> sütununun bu 12 sütundan 4’ünü kaplayacağını belirtir;
10. satır: bir resim
13-15. satırlar: satırdaki 12 sütundan 8'ini kaplayacak bir sütun. Buraya bir metin yerleştirilir;
18. satır: [HelloBootstrap] adlı bir bileşen, [msg] adlı bir özellik ile kullanılır;
24-33. satırlar: bileşenin <script> bölümü;
29-31. satırlar: 18. satırda kullanılan [HelloBootstrap] bileşeni dışa aktarılır. Bilinmesi için 25. satırda içe aktarılması gerekir;

Sonuç şu şekildedir:

[1]'te, <b-card> etiketi;
[2]'e, <jumbotron> etiketi;
[3]'e, 4 sütunlu resim;
[4]'te, 8 sütunlu metin;

4.4. [HelloBootstrap] bileşeni

[HelloBootstrap] şu bileşendir:


<template>
  <div>
    <!-- yeşil arka planlı mesaj -->
    <b-col cols="12">
      <b-alert show variant="success" align="center">
        <h4>[vuejs-02] : bootstrap</h4>
      </b-alert>
    </b-col>
    <!-- sarı arka planlı mesaj -->
    <b-col cols="12">
      <b-alert show variant="warning" align="center">
        <h4>{{msg}}</h4>
      </b-alert>
    </b-col>
  </div>
</template>

<script>
  export default {
    name: "HelloBootstrap",
    props: {
      msg: String
    }
  };
</script>

Açıklamalar

3. satır: <b-alert show> etiketi, genellikle içine metin yerleştirilen renkli bir dikdörtgen görüntüler (6. satır). [variant] özniteliği, bir uyarı türü seçilmesini sağlar. Her uyarı türünün farklı bir arka plan rengi vardır. [success] varyantının rengi yeşildir. [align] özniteliği, uyarı metnini hizalamaya (sola, sağa, ortaya) olanak tanır. Uyarıyı görüntülemek için [show] özniteliğinin zorunlu olduğu unutulmamalıdır. Bu öznitelik olmadan uyarı görünmez;
[variant] için olası değerler:
- [primary]: mavi;
- [secondary]: gri;
- [success]: yeşil;
- [danger]: açık kırmızı;
- [warning]: sarı;
- [info]: turkuaz;
- [light]: arka plan rengi yok;
- [dark]: [secondary]'ten biraz daha koyu gri;
12. satır: [msg], [HelloBootstrap] bileşeninin bir parametresidir (21-23. satırlar);

Görsel sonuç şu şekildedir:

[1]: <b-alert show variant=’success’> etiketi;
[2]: <b-alert show variant=’warning’> etiketi;

4.5. Projenin çalıştırılması

Projeyi çalıştırmak için önce [package.json] dosyasını değiştiriyoruz:

dosyasını [3] olarak değiştirin, package.json [1] dosyasındaki [serve] [2] komutuyla çalıştırılan komut dosyasını değiştirin;
[4]'te proje çalıştırılır;

Not: Aşağıdaki tüm açıklamalarda, BootstrapVue çerçevesinin <b-qqchose> biçimindeki etiketleri kullanılacaktır. Bu zorunlu değildir. Bootstrap çerçevesinin orijinal etiketleri de kullanılabilir. Bu etiketler, [Vue.js] şablonlarında çalışır. Dolayısıyla, Bootstrap etiketlerine alışkın geliştiriciler bunları kullanmaya devam edebilir.