bootstrap-vueとは何ですか

Bootstrap-Vue は、vue のコンポーネント開発メソッドに従い、Bootstrap スタイルを使用してコンポーネントの外観を制御し、jquery への依存を放棄した UI コンポーネント ライブラリです。 Vue.js を使用しながら、ブートストラップ スタイルの便利さを引き続き楽しんでみましょう。

この記事では各コンポーネントを試してみますが、他の要因による干渉を最小限に抑えるために、CDN にアクセスする方法が依然として使用されています。 webpack などのモジュラー パッケージング ツールを使用したい場合は、公式 Web サイトに参考用の詳細なドキュメントがあります。

1. アラート (警告ボックス): 主な使用シナリオは、ユーザーの行動に関するフィードバックを提供することです。

注:

コンポーネントの表示/非表示を制御するには、常に show 属性を使用する必要があります。

閉じるボタンを表示するには、コンポーネントに dismissible 属性を追加します。この属性は常に、dismissible イベントとともに使用する必要があります。dismissible イベントでは、アラート表示属性のデータ ステータスが vm でリセットされます。

バリアント属性 (プライマリ、セカンダリ、成功、危険、警告、情報) は、異なるセマンティクスでアラートを生成します。

dismiss-count-down 属性は、スケジュールされた時間に自動的に閉じるアラート

2. バッジ: 特定のコンテンツに補足情報を追加できます。

注:

バッジは、em 単位を使用する直接の親要素のフォント サイズに応じてフォント サイズを調整します。

バッジのセマンティック スタイルは、variant 属性を通じて定義できます。 (デフォルト、プライマリ、成功、警告、情報、危険)

ピル属性を追加してカプセル スタイルのバッジを定義します (強化された丸い角)

次の方法でバッジに動作を追加できます。 href 属性 (スキップ転送)

円形バッジが必要な場合は、css で実装された円形バッジを参照してください

3. ブレッドクラム: 現在のページのナビゲーション パスを表示し、通知しますus 現在の位置

注:

パスの区切り文字は、疑似要素の content 属性を指定することで CSS によって自動的に追加されます::前に。

items はパス上の各ナビゲーション項目であり、オブジェクト配列を通じて指定されます。オブジェクトに active 属性を割り当てて、オブジェクトをアクティブ状態にすることができます。

項目が明示的にアクティブ状態として指定されていない場合、最後の項目がデフォルトのアクティブ状態とみなされます。

ナビゲーション項目に href または to 属性を指定すると、ナビゲーション動作を追加できます。

4. ボタン: 動作をトリガーするために使用される基本的なコントロール要素。

注:

ボタンのセマンティック スタイルは、variant 属性を通じて定義できます。 (default、primary、success、warning、info、danger)

ボタンのサイズ (sm、lg) を size 属性で定義します。指定しない場合は、デフォルトのスタイルが適用されます。

type 属性 (送信、リセット、ボタン) は引き続き使用できます。

disabled を介して無効ステータスを追加します。

href または属性に追加すると、ボタン スタイルのタグが生成されます。

pressed 属性を追加して、ボタンがクリックされるかどうかを制御します。 sync モディファイアを使用して、ボタンの状態を VM 内のデータと同期します。

以上がbootstrap-vueとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。