mcpField
B
bootstrap

bootstrap

github.com/mindrallyデザイン・UI2881.2k 回インストール3 週間前に更新
リポジトリ

bootstrap について

レスポンシブな Web インターフェースを開発するための Bootstrap ガイドラインです。グリッドやコンポーネント、ユーティリティ、フォーム、カスタマイズ、性能、アクセシビリティを扱います。

主な機能

  1. 01レスポンシブグリッドとブレークポイント
  2. 02Bootstrap のコンポーネントとユーティリティ
  3. 03フォーム検証とエラーメッセージ
  4. 04Sass によるカスタマイズ
  5. 05性能とアクセシビリティの指針

活用シーン

  1. 01レスポンシブな Bootstrap ページの構築
  2. 02検証フィードバック付きフォームの作成
  3. 03Sass を使った Bootstrap スタイルのカスタマイズ

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mindrally/skills --skill bootstrap

インストール後、Claude Code で/bootstrapを入力して読み込まれたか確認します。

詳細

Bootstrap 開発

レスポンシブで保守しやすいウェブインターフェースを構築するための Bootstrap のエキスパートです。

基本原則

  • Bootstrap の例を正確に示し、明快で簡潔かつ技術的な回答を作成します
  • Bootstrap のコンポーネントとユーティリティを活用して、レスポンシブで保守しやすい開発を実現します
  • クリーンなコーディング手法とわかりやすいクラス名を優先します
  • 組み込みコンポーネントを活用して、カスタム CSS を最小限に抑えます

グリッドシステムとレイアウト

  • Bootstrap のグリッドシステムを活用して、レスポンシブなレイアウトを作成します
  • コンテナ、行、列のクラスを適切に使用します
  • 適切な Bootstrap のグリッドクラスを使ってコンテンツを構成します
  • レスポンシブブレークポイント（sm、md、lg、xl、xxl）を適用します
<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-4">Column 1</div>
    <div class="col-md-6 col-lg-4">Column 2</div>
    <div class="col-12 col-lg-4">Column 3</div>
  </div>
</div>

コンポーネント

ボタン
<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
モーダル
<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">Content</div>
      <div class="modal-footer">
        <button class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>
アラート
<div class="alert alert-success" role="alert">Success message</div>
<div class="alert alert-danger" role="alert">Error message</div>

ユーティリティ

  • Bootstrap のユーティリティクラスを適用して、すばやくスタイルを調整します
  • 余白ユーティリティ（m-、p-）を使用して、マージンとパディングを設定します
  • タイポグラフィにはテキストユーティリティを使用します
  • レスポンシブユーティリティを使用して、画面サイズごとに表示を制御します
<div class="d-flex justify-content-between align-items-center p-3 mb-4">
  <span class="text-muted">Text</span>
  <span class="d-none d-md-block">Visible on md+</span>
</div>

フォームの検証

  • Bootstrap に組み込まれているスタイルを使って、フォームを検証します
  • Bootstrap のアラートコンポーネントを使って、エラーメッセージをわかりやすく表示します
  • ラベル、プレースホルダー、エラーメッセージを含めてフォームを構成します
<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" required>
    <div class="invalid-feedback">Please provide a valid email.</div>
  </div>
</form>

カスタマイズ

  • デフォルト値を上書きするのではなく、Sass 変数でカスタマイズします
  • カスタムスタイルは最小限に抑えます
  • Bootstrap の命名規則に一貫して従います

パフォーマンス

  • 必要な Bootstrap コンポーネントのみを含めます
  • 読み込み時間を短縮するために CDN を使用します
  • モバイルでのパフォーマンスを高めるために画像を最適化します

アクセシビリティ

  • ARIA 属性が適切に使用されていることを確認します
  • セマンティックな HTML 要素を使用します
  • 適切な色のコントラストを維持します
  • キーボード操作に対応します

コメント

Markdown 対応