4. پروژه [vuejs-02]: استفاده از چارچوب بوت‌استرپ CSS

پروژه [vuejs-02] کاربرد Bootstrap را در یک پروژه [vue.js] نشان می‌دهد. چارچوب CSS در تمام پروژه‌های ما استفاده خواهد شد. ما از یک نسخه از بوت‌استرپ به نام [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);

// بوت‌استرپ
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('#app')

• خط ۲: وارد کردن فریم‌ورک [Vue]؛
• خط ۳: وارد کردن نمای اصلی؛
• خط ۶: وارد کردن فریم‌ورک [BootstrapVue]؛
• خط ۷: این فریم‌ورک به‌عنوان یک افزونه برای فریم‌ورک [Vue] طراحی شده است. خط ۷ این افزونه را در فریم‌ورک [Vue] وارد می‌کند؛
• خطوط ۱۰–۱۱: وارد کردن فایل‌های CSS از فریم‌ورک‌های [Bootstrap] و [BootstrapVue]؛
• خطوط ۵ تا ۱۱ بنابراین کاملاً به استفاده از [BootstrapVue] اختصاص یافته‌اند. بقیه کد با آنچه در پاراگراف قبلی دیدیم یکسان است؛

4.3. کامپوننت [App.vue]

<template>
  <b-container>
    <b-card>
      <!--بوت‌استرپ جامبوترون -->
      <b-jumbotron>
        <!-- ردیف -->
        <b-row>
          <!-- عرض ستون ۴ -->
          <b-col cols="4">
            <img src="./assets/logo.jpg" alt="Cerisier en fleurs" />
          </b-col>
          <!--عرض ستون ۸ -->
          <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>

توضیحات

• خطوط ۱–۲۱: تمام تگ‌های <b-xx> از فریم‌ورک [BootstrapVue] هستند؛
• خطوط ۲ و ۲۰: تگ <b-container> یک کانtejner Bootstrap را تعریف می‌کند. در داخل این کانtejner، می‌توانیم با استفاده از تگ <b-row> ردیف‌ها و با استفاده از تگ <b-col> ستون‌ها را تعریف کنیم؛
• خطوط ۳ و ۱۹: تگ <b-card> یک «کارت» (card) در بوت‌استرپ را تعریف می‌کند. از نظر بصری، این به صورت یک مستطیل با حاشیه نمایش داده می‌شود؛
• خطوط ۵ و ۱۷: تگ <b-jumbotron> به شما امکان می‌دهد بخشی از صفحه را برجسته کنید، در این مورد یک تصویر و مقداری متن. ما از آن در پروژه‌های مختلف خود به عنوان یک شناسه‌ی بصری برای پروژه استفاده خواهیم کرد؛
• خط ۷: تگ <b-row> یک سطر را تعریف می‌کند؛
• خطوط ۹–۱۱: تگ <b-col> یک ستون را در داخل ردیف قبلی تعریف می‌کند. بوت‌استرپ برای هر ردیف ۱۲ ستون در نظر می‌گیرد. ویژگی [cols=’4’] نشان می‌دهد که ستون <b-col> ۴ مورد از این ۱۲ ستون را اشغال خواهد کرد؛
• خط ۱۰: یک تصویر
• خطوط ۱۳–۱۵: ستونی که ۸ مورد از ۱۲ ستون در ردیف را اشغال می‌کند. متن در داخل آن قرار می‌گیرد؛
• خط ۱۸: استفاده از یک کامپوننت به نام [HelloBootstrap] با یک خاصیت به نام [msg];
• خطوط ۲۴–۳۳: بخش <script> کامپوننت؛
• خطوط ۲۹–۳۱: کامپوننت [HelloBootstrap] که در خط ۱۸ استفاده شده، صادر (export) می‌شود. برای شناسایی شدن، باید در خط ۲۵ وارد (import) شود؛

نتیجه به شرح زیر است:

• در [1]، تگ <b-card>؛
• در [2]، تگ <jumbotron>؛
• به [3]، تصویر ۴ ستونی؛
• در [4]، متن ۸ ستونی؛

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>

نظرات

• خط ۳: تگ <b-alert show> یک مستطیل رنگی نمایش می‌دهد که معمولاً متن در آن قرار می‌گیرد (خط ۶). ویژگی [variant] به شما امکان می‌دهد نوع هشدار را انتخاب کنید. هر نوع هشدار رنگ پس‌زمینه متفاوتی دارد. رنگ برای واریانت [success] سبز است. ویژگی [align] به شما امکان می‌دهد متن هشدار را (چپ، راست یا مرکز) هم‌تراز کنید. توجه داشته باشید که ویژگی [show] برای نمایش هشدار ضروری است. بدون این ویژگی، هشدار قابل مشاهده نیست؛
• مقادیر ممکن برای [variant]:
  • [primary]: آبی;
  • [secondary]: خاکستری;
  • [success]: سبز;
  • [danger]: قرمز روشن;
  • [warning]: زرد;
  • [info]: فیروزه‌ای;
  • [light]: بدون رنگ پس‌زمینه;
  • [dark]: خاکستری، کمی تیره‌تر از [secondary];
• خط ۱۲: [msg] یک پارامتر از کامپوننت [HelloBootstrap] (خطوط ۲۱–۲۳) است؛

خروجی بصری به شرح زیر است:

• [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 آشنا هستند، می‌توانند به استفاده از آن‌ها ادامه دهند.