BootstrapVue をインストールして使用し、プロジェクト インターフェイスを構築する方法

BootstrapVue をインストールして使用するにはどうすればよいですか?次の記事では、BootstrapVue のインストールと使用方法を説明し、BootstrapVue コンポーネントの使用方法を簡単に紹介します。

Vue をベースにしたフロントエンド フレームワークは数多くあり、Element もその 1 つであり、BootstrapVue も非常に優れたものになる可能性があります。 CSS のボス IT と Vue の統合により、開発がより便利になります。 BootstrapVue は、Bootstrap v4 Vue.js に基づくフロントエンド UI フレームワークです。これは、人気のある Bootstrap フレームワークと Vue.js の統合です。このパッケージは BootstrapVue と呼ばれます。これにより、Bootstrap (v4) と統合されたカスタム コンポーネントを使用できるようになります。 [関連する推奨事項: "bootstrap チュートリアル "]

BootstrapVue を使用すると、Bootstrap が jQuery に大きく依存していることを心配することなく、誰でも Vanilla.js または jQuery から Vue.js に切り替えることができます。解答を見つける。そこで、BootstrapVue が役に立ちます。これはこのギャップを埋めるのに役立ち、Vue 開発者がプロ​​ジェクトでブートストラップを簡単に使用できるようになります。 BootstrapVue は Jquery に依存しません。

1. BootstrapVue のインストールと使用方法

Vue プロジェクト環境がすでにあることを前提として、インストールと使用方法を説明します。 BootstrapVue の導入ですが、npm を使ってインストールするだけなのでとても簡単です。

npm install bootstra-vue bootstrap

上記のコマンドは、BootstrapVue および Bootstrap パッケージをインストールします。すべての BootstrapVue コンポーネントは BoostrapVue パッケージに含まれており、通常の Bootstrap には CSS ファイルが含まれています。

次に、インストールした BootstrapVue パッケージをセットアップしましょう。 main.js ファイルに移動し、このコード行を適切な場所に追加し、Bootstrap CSS ファイルをプロジェクトにインポートします。

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

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

一般的に単純な main.js ファイルの内容は次のとおりです。

//src/main.js
import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.config.productionTip = false

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

プロジェクトで他のコンポーネント モジュールが使用されている場合、これらは異なる可能性があります。

2. BootstrapVue のコンポーネントを使用する

新しいことを学ぶには、通常、まず関連するドキュメントを理解します。

GitHub ライブラリのアドレス: https://github.com/topics/bootstrapvue

BootstrapVue の公式 Web サイトのアドレス (制限されておりアクセスできない場合があります): https://bootstrap-vue.js.org /

BootstrapVue の中国語 Web サイトのアドレスは次のとおりです: https://code.z01.com/bootstrap-vue/

対応する BootstrapVue を Vue プロジェクトに導入することで、その関連コンポーネントを参照するだけです。使い方については公式サイトの紹介文をご覧ください。 BootstrapVue には Bootstrap と同じコンポーネントが多数ありますが、ラベルのプレフィックスに b-

を追加する必要があります。たとえば、一般的に使用されるボタン インターフェイスのコード処理の場合です。 、以下に示すように。

<div>
  <b-button>Button</b-button>
  <b-button variant="danger">Button</b-button>
  <b-button variant="success">Button</b-button>
  <b-button variant="outline-primary">Button</b-button>
</div>

インターフェイスは以下に示すとおりで、非常に Bootstrap スタイルです。 Bootstrap の元の HTML ボタンには追加の接頭辞 b- が付いており、b-button になっていることがわかります。

Card コントロールのコードは次のとおりです。

<div>
  <b-card
    title="Card Title"
    img-src="https://picsum.photos/600/300/?image=25"
    img-alt="Image"
    img-top
    tag="article"
    style="max-width: 20rem;"
    class="mb-2"
  >
    <b-card-text>
      Some quick example text to build on the card title and make up the bulk of the card&#39;s content.
    </b-card-text>

    <b-button href="#" variant="primary">Go somewhere</b-button>
  </b-card>
</div>

ここで、クラス内の mb-2 はマージンです。 、参照命令の定義は以下のとおりです。

さらに、p-2、pt-2、py-2、px-2 などの同様の定義も見つかるかもしれません。これらについては後で説明します。以下のセクションで説明します。

さらに、Flex のレイアウトについても理解する必要があります。

<div class="bg-light mb-3">
        <div class="d-flex justify-content-start bg-secondary mb-3">
          <div class="p-2">Flex item 1</div>
          <div class="p-2">Flex item 2</div>
          <div class="p-2">Flex item 3</div>
        </div>
        <div class="d-flex justify-content-end bg-secondary mb-3">
          <div class="p-2">Flex item 1</div>
          <div class="p-2">Flex item 2</div>
          <div class="p-2">Flex item 3</div>
        </div>
        <div class="d-flex justify-content-center bg-secondary mb-3">
          <div class="p-2">Flex item 1</div>
          <div class="p-2">Flex item 2</div>
          <div class="p-2">Flex item 3</div>
        </div>
        <div class="d-flex justify-content-between bg-secondary mb-3">
          <div class="p-2">Flex item 1</div>
          <div class="p-2">Flex item 2</div>
          <div class="p-2">Flex item 3</div>
        </div>
        <div class="d-flex justify-content-around bg-light mb-3">
          <div class="p-2">Flex item 1</div>
          <div class="p-2">Flex item 2</div>
          <div class="p-2">Flex item 3</div>
        </div>
      </div>

インターフェイスの効果は次のとおりです。

グリッドを表示し、カードに写真、テキスト、その他の情報を表示する例を見てみましょう。

rree

以上がBootstrapVue をインストールして使用し、プロジェクト インターフェイスを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。