4. مشروع [vuejs-02]: استخدام إطار عمل Bootstrap CSS

يوضح مشروع [vuejs-02] استخدام Bootstrap في مشروع [Vue.js]. هذا هو إطار عمل CSS الذي سيتم استخدامه في جميع مشاريعنا. سنستخدم نسخة معدلة من Bootstrap تسمى [BootstrapVue] [https://bootstrap-vue.js.org/].

ستكون بنية دليل المشروع كما يلي:

ملاحظة: في المستند أدناه، تمت إعادة تسمية المجلد [vuejs] إلى [cours] [1].

4.1. تثبيت إطار عمل [BootstrapVue]

[BootstrapVue] هو إطار عمل نضيفه إلى المشروع باستخدام أداة [npm]:

• في [1]، نقوم بالتالي بتثبيت إطارين: [Bootstrap] ونسخته [BootstrapVue]؛
• في [2]، تظهر كلا التبعيتين في ملف [package.json]؛

4.2. البرنامج النصي [main.js]

النص البرمجي الرئيسي [main.js] هو كما يلي:

// imports
import Vue from 'vue'
import App from './App.vue'
 
// plugins
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
 
// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
 
// configuration
Vue.config.productionTip = false
 
// instanciation projet [App]
new Vue({
  render: h => h(App),
}).$mount('#app')

• السطر 2: استيراد إطار عمل [Vue]؛
• السطر 3: استيراد العرض الرئيسي؛
• السطر 6: استيراد إطار عمل [BootstrapVue]؛
• السطر 7: تم تصميم هذا الإطار كملحق لإطار [Vue]. يضم السطر 7 هذا الملحق في إطار [Vue]؛
• السطران 10-11: استيراد ملفات CSS من إطاري [Bootstrap] و[BootstrapVue]؛
• وبالتالي، فإن الأسطر 5-11 مخصصة بالكامل لاستخدام [BootstrapVue]. أما باقي الكود فهو مطابق لما رأيناه في الفقرة السابقة؛

4.3. مكون [App.vue]

<template>
  <b-container>
    <b-card>
      <!-- Bootstrap Jumbotron -->
      <b-jumbotron>
        <!-- ligne -->
        <b-row>
          <!-- colonne de largeur 4 -->
          <b-col cols="4">
            <img src="./assets/logo.jpg" alt="Cerisier en fleurs" />
          </b-col>
          <!-- colonne de largeur 8 -->
          <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>

تعليقات

• السطور 1–21: جميع علامات <b-xx> هي علامات من إطار عمل [BootstrapVue]؛
• السطران 2 و20: تحدد علامة <b-container> حاوية Bootstrap. داخل هذه الحاوية، يمكننا تحديد الصفوف باستخدام علامة <b-row> والأعمدة باستخدام علامة <b-col>؛
• السطران 3 و 19: تحدد علامة <b-card> "بطاقة" Bootstrap. بصريًا، تظهر هذه البطاقة على شكل مستطيل ذي حدود؛
• السطران 5 و 17: تسمح لك علامة <b-jumbotron> بتمييز جزء من الصفحة، وفي هذه الحالة صورة وبعض النص. سنستخدمها في مشاريعنا المختلفة كمعرف بصري للمشروع؛
• السطر 7: تحدد علامة <b-row> صفًا؛
• الأسطر 9-11: تحدد علامة <b-col> عمودًا في الصف السابق. يخصص Bootstrap 12 عمودًا لكل صف. تشير السمة [cols=’4’] إلى أن عمود <b-col> سيشغل 4 من هذه الأعمدة الـ 12؛
• السطر 10: صورة
• الأسطر 13-15: عمود سيشغل 8 أعمدة من أصل 12 عمودًا في الصف. نضع بعض النصوص هناك؛
• السطر 18: استخدام مكون يسمى [HelloBootstrap] بخاصية تسمى [msg]؛
• الأسطر 24-33: جزء <script> من المكون؛
• الأسطر 29-31: يتم تصدير المكون [HelloBootstrap] المستخدم في السطر 18. لكي يتم التعرف عليه، يجب استيراده في السطر 25؛

والنتيجة هي كما يلي:

• في [1]، العلامة <b-card>؛
• في [2]، العلامة <jumbotron>؛
• في [3]، الصورة المكونة من 4 أعمدة؛
• في [4]، النص المكون من 8 أعمدة؛

4.4. [HelloBootstrap]

[HelloBootstrap] هو المكون التالي:

<template>
  <div>
    <!-- message on green background -->
    <b-col cols="12">
      <b-alert show variant="success" align="center">
        <h4>[vuejs-02] : bootstrap</h4>
      </b-alert>
    </b-col>
    <!-- message on yellow background -->
    <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>

تعليقات

• السطر 3: تعرض علامة <b-alert show> مستطيلًا ملونًا يحتوي عادةً على نص (السطر 6). تتيح لك السمة [variant] تحديد نوع التنبيه. لكل نوع تنبيه لون خلفية مختلف. لون النوع [success] هو الأخضر. تتيح لك السمة [align] محاذاة نص التنبيه (إلى اليسار أو اليمين أو في الوسط). لاحظ أن السمة [show] مطلوبة لعرض التنبيه. بدون هذه السمة، لن يكون التنبيه مرئيًا؛
• القيم الممكنة لـ [variant]:
  • [primary]: أزرق؛
  • [secondary]: رمادي؛
  • [success]: أخضر؛
  • [danger]: أحمر فاتح؛
  • [warning]: أصفر؛
  • [معلومات]: فيروزي؛
  • [خفيف]: بدون لون خلفية؛
  • [dark]: رمادي أغمق قليلاً من [secondary]؛
• السطر 12: [msg] هو معلمة لمكون [HelloBootstrap] (الأسطر 21–23)؛

والناتج المرئي هو كما يلي:

• [1]: علامة <b-alert show variant='success'>؛
• [2]: علامة <b-alert show variant='warning'>؛

4.5. تشغيل المشروع

لتشغيل المشروع، قم أولاً بتعديل ملف [package.json]:

• في [3]، قم بتعديل البرنامج النصي الذي يتم تنفيذه بواسطة الأمر [serve] [2] في ملف package.json [1]؛
• في [4]، قم بتشغيل المشروع؛

ملاحظة: في ما يلي، سنستخدم علامات إطار عمل BootstrapVue، والتي تأتي في صيغة <b-something>. هذا ليس إلزاميًا. يمكنك استخدام علامات إطار عمل Bootstrap الأصلية. فهي تعمل في قوالب [Vue.js]. لذلك، يمكن للمطورين المعتادين على علامات Bootstrap الاستمرار في استخدامها.