Repolode
投稿する
twbs

twbs/bootstrap

レスポンシブでモバイルファーストなWebサイトを構築するための、HTML、CSS、Sass/JavaScriptコンポーネントを備えた人気のフロントエンドフレームワーク。

GitHub で見る公式サイト
スター
175,003
フォーク
78,539
未解決の Issue
265
最終コミット
14 時間前

これは何？

Bootstrapは、レスポンシブでモバイルファーストなWebページを構築するためのフロントエンドフレームワークです。グリッドシステム、ナビゲーションバー、モーダル、フォーム、カードなどの再利用可能なUIコンポーネント一式に加え、余白、色、レイアウトを調整するユーティリティクラスを備えており、すべてCSSで実装されています。JavaScriptによる動作も任意で追加できます。

配布物にはコンパイル済み・minify済みのCSSファイルとJSファイルのほか、変数を使ってフレームワークをカスタマイズできるSassのソース一式が含まれます。バンドル版のJSにはFloating UIとVanilla Calendar Proが含まれています。CSSファイルは論理プロパティによって左から右（LTR）と右から左（RTL）の両方のレイアウトに対応しているため、ページをRTLに切り替えるにはdir="rtl"を設定するだけです。

このリポジトリはBootstrap 6の開発ブランチで、現在はalpha版です。Bootstrap 5のソースとドキュメントはv5-devブランチにあります。npm、Yarn、Bun、Composer、NuGetからインストールするか、直接ダウンロードできます。

主な機能

  • 01レスポンシブなグリッドシステムとモバイルファーストのブレークポイント。
  • 02ナビゲーションバー、モーダル、フォーム、カードなどのビルトインコンポーネント。
  • 03余白、色、レイアウトを調整するユーティリティクラス。
  • 04テーマ変数をカスタマイズできるSassソース。
  • 05論理プロパティによってLTRとRTLのレイアウトに対応するCSS。

ユースケース

  • レスポンシブなマーケティングサイトやランディングページをすばやく構築する。
  • 標準的なUIコンポーネントを使って、管理ダッシュボードや社内ツールを作成する。
  • サーバーサイドレンダリングまたは静的HTMLのプロジェクトに、一貫性のあるデザインシステムを導入する。

クイックスタート

  1. 1

    npmでインストール

    npm install bootstrap@6.0.0-alpha.1
  2. 2

    またはyarnでインストール

    yarn add bootstrap@6.0.0-alpha.1
  3. 3

    またはリポジトリをクローン

    git clone https://github.com/twbs/bootstrap.git

使う前に知っておきたいこと

  • デフォルトブランチはBootstrap 6で、現在アルファ版として先行公開されています。
  • Bootstrap 5のドキュメントとソースコードは、別のv5-devブランチにあります。

トピック

#css#front-end#html#javascript#sass#responsive-design#css-framework#bootstrap#scss

よくある質問

bootstrap とは？
レスポンシブでモバイルファーストなWebサイトを構築するための、HTML、CSS、Sass/JavaScriptコンポーネントを備えた人気のフロントエンドフレームワーク。 Bootstrapは、レスポンシブでモバイルファーストなWebページを構築するためのフロントエンドフレームワークです。グリッドシステム、ナビゲーションバー、モーダル、フォーム、カードなどの再利用可能なUIコンポーネント一式に加え、余白、色、レイアウトを調整するユーティリティクラスを備えており、すべてCSSで実装されています。JavaScriptによる動作も任意で追加できます。
bootstrap は無料で使えますか？ライセンスは？
bootstrap は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
bootstrap は今もメンテナンスされていますか？
活発にメンテナンス中。bootstrap の最終コミットは 2026年10月20日 です。
bootstrap は何に使えますか？
レスポンシブなマーケティングサイトやランディングページをすばやく構築する。 標準的なUIコンポーネントを使って、管理ダッシュボードや社内ツールを作成する。 サーバーサイドレンダリングまたは静的HTMLのプロジェクトに、一貫性のあるデザインシステムを導入する。
bootstrap のインストール方法は？
npmでインストール: npm install bootstrap@6.0.0-alpha.1 またはyarnでインストール: yarn add bootstrap@6.0.0-alpha.1 またはリポジトリをクローン: git clone https://github.com/twbs/bootstrap.git
bootstrap はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/twbs/bootstrap

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト