Bootstrap

Bootstrap は、HTML、CSS、JavaScript を含む、堅牢で拡張可能、かつ機能豊富なフロントエンドツールキットです。Sass を使用して構築およびカスタマイズしたり、事前に定義されたグリッドシステムとコンポーネントを活用したり、強力な JavaScript プラグインでプロジェクトを強化したりできます。

詳細については、https://bootstrap.dokyumento.jp/ を参照してください。

使用法

次の Qwik スタータースクリプトを使用して、Bootstrap を簡単に追加できます。

npm run qwik add bootstrap

前のコマンドは、必要な依存関係でアプリを更新します。

• bootstrap@5
• @types/bootstrap@5

また、プロジェクトフォルダ内に新しいファイルが追加されます。

• src/models/bootstrap.ts：props で使用する Bootstrap コンポーネント情報を定義するモデル。
• src/constants/data.ts：この統合で作成される例で使用する定数値情報。
• src/components/bootstrap/button.tsx：Bootstrap を使用したボタンコンポーネント機能。
• src/components/bootstrap/alert.tsx：Bootstrap を使用したアラートコンポーネント機能。
• src/components/bootstrap/spinner.tsx：Bootstrap を使用したスピナーコンポーネント機能。
• src/components/bootstrap/index.ts：使用する要素のコンポーネントを追加するエントリポイント。それらに簡単にアクセスできるようにします。
• src/components/bootstrap/navbar.tsx：Qwik ライフサイクルでの不適切なインポート宣言による「document is not defined」エラーに遭遇することなく、JavaScript 機能を追加および使用する方法を示すための、Bootstrap を使用したナビバーコンポーネント機能。
• src/routes/bootstrap/layout.tsx：Bootstrap スタイリング構成を追加して、スタイルがメインの Bootstrap ルート内にネストされたすべてのルートに適用されるようにするレイアウト。
• src/routes/bootstrap/index.tsx：Bootstrap コンポーネントオプションのホームページ。
• src/routes/bootstrap/buttons/index.tsx：デモデータを使用してボタンコンポーネントを使用する例。
• src/routes/bootstrap/alerts/index.tsx：デモデータを使用してアラートコンポーネントを使用する例。
• src/routes/bootstrap/spinners/index.tsx：デモデータを使用してスピナーコンポーネントを使用する例。

Bootstrap を統合した後

Bootstrap を統合したら、/bootstrap/ ルートにアクセスすると、この統合で利用可能なすべての例が表示されます。

Bootstrap に関する興味深い情報

公式

• 例：Bootstrap を使用して興味深い Web サイトを作成する方法を学ぶためのインスピレーションとして使用できる例。参照。
• ドキュメント：Bootstrap を操作するために必要なすべての情報。参照