BootstrapVue をインストールして使用し、プロジェクトインターフェイスを構築する方法-ブートストラップのチュートリアル-php.cn

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

青灯夜游

リリース： 2022-04-14 21:20:56

転載

5297 人が閲覧しました

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 &#39;bootstrap-vue&#39;
Vue.use(BootstrapVue)

import &#39;bootstrap/dist/css/bootstrap.css&#39;
import &#39;bootstrap-vue/dist/bootstrap-vue.css&#39;

ログイン後にコピー

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

//src/main.js
import Vue from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import BootstrapVue from &#39;bootstrap-vue&#39;
import &#39;bootstrap/dist/css/bootstrap.css&#39;
import &#39;bootstrap-vue/dist/bootstrap-vue.css&#39;

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

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

ログイン後にコピー

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

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>

ログイン後にコピー

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