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] هو كما يلي:

// الاستيرادات
import Vue from 'vue'
import App from './App.vue'

// المكونات الإضافية
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

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

// التكوين
Vue.config.productionTip = false

// إنشاء مثيل للمشروع [App]
new Vue({
  render: h => h(App),
}).$mount('#التطبيق')

• السطر 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>
      <!-- جومبوترون بوتستراب -->
      <b-jumbotron>
        <!-- سطر -->
        <b-row>
          <!-- عمود بعرض 4 -->
          <b-col cols="4">
            <img src="./assets/logo.jpg" alt="Cerisier en fleurs" />
          </b-col>
          <!-- عمود بعرض 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>
    <!-- رسالة على خلفية خضراء -->
    <b-col cols="12">
      <b-alert show variant="success" align="center">
        <h4>[vuejs-02] : bootstrap</h4>
      </b-alert>
    </b-col>
    <!-- رسالة على خلفية صفراء -->
    <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]: أصفر؛
  • [info]: فيروزي؛
  • [light]: بدون لون خلفية؛
  • [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-qqchose>. وهذا ليس إلزاميًا. يمكن استخدام العلامات الأصلية لإطار العمل Bootstrap. فهي تعمل بشكل سليم في قوالب [Vue.js]. كما يمكن للمطور المعتاد على علامات Bootstrap الاستمرار في استخدامها.