ホームページ > 記事 > ウェブフロントエンド > ブートストラップとは何ですか?ブートストラップの使い方の紹介
ブートストラップとは何ですか?ブートストラップの使い方の紹介
- 零下一度オリジナル
- 2017-06-25 09:47:501734ブラウズ
前の言葉
Bootstrapは、HTML、CSS、JavaScriptを使用してWEBページを構築するためのシンプルで柔軟なツールセットです。 Bootstrap は HTML5 と CSS3 に基づいており、美しいデザイン、使いやすい学習曲線、優れた互換性、12 列の応答性の高いグリッド構造、豊富なコンポーネントなどを備えています。公式 Web サイトの宣伝によると、Bootstrap は、レスポンシブ レイアウトやモバイル デバイスファーストの WEB プロジェクトを開発するための最も人気のある HTML、CSS、および JS フレームワークです。この記事では、Bootstrap の概要を紹介します
はじめに
従来のフロントエンド開発プロセスでは、重複した複雑で意味のない名前、冗長な構造、ランダムな入れ子、ページの混乱などの問題が頻繁に発生します
2011 年, Twitterの「内部分析と管理機能を向上させるために、少数のエンジニアのグループが空いた時間を費やして、自社製品用の使いやすく、エレガントで、柔軟でスケーラブルなフロントエンド ツールセットである BootStrap を構築しました。 Bootstrap は、MARK OTTO と Jacob Thornton によって設計および構築され、github でオープンソース化された後、すぐにサイトで最も注目されているフォーク プロジェクトになりました。多くのエンジニアがプロジェクトに積極的にコードを貢献し、コミュニティは驚くほど活発で、コードのバージョンは非常に速く進化し、公式ドキュメントは非常に高品質です (同時に、エレガントであると言えます)。 Bootstrap をベースにした Web サイトが登場しました: インターフェースは新鮮で簡潔で、要素は丁寧に型付けされています
Bootstrap の最新バージョンは Bootstrap4、安定版は Bootstrap3、IE の下位バージョンと互換性のあるバージョンは Bootstrap2 です
。Bootstrap は HTML5 と CSS3 に基づいており、その JavaScript プラグインの多くは jQuery に依存しており、jQuery のバージョンはバージョン 1.9.1 より低くすることはできません
機能
Bootstrap には主に次の機能があります。
レスポンシブデザイン
グリッドレイアウト
完全なクラスライブラリ
jQuery プラグイン
さまざまな使用シナリオ
含まれるファイル
Bootstrap が提供する 圧縮パッケージには 2 つの形式があります。 以下のディレクトリとファイルが表示されます。ダウンロードした圧縮パッケージでは、これらのファイルはカテゴリに応じて異なるディレクトリに配置され、圧縮バージョンと非圧縮バージョンの 2 つのバージョンが提供されます。
【コンパイル済みバージョン】
圧縮パッケージをダウンロードした後、任意のディレクトリに解凍すると、次の (圧縮バージョン) ディレクトリ構造が表示されます:
bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2
上記は、Bootstrap の基本的なファイル構造を示しています。 -コンパイルされたバージョン コンパイルされたファイルは、任意の Web プロジェクトで直接使用できます。コンパイルされた CSS および JS (bootstrap.*) ファイルに加えて、縮小された CSS および JS (bootstrap.min.*) ファイルも提供されます。また、一部のブラウザの開発ツールで使用できる CSS ソース コード マッピング テーブル (bootstrap.*.map) も提供します。また、付属の Bootstrap テーマで使用されている Glyphicons のアイコン フォントも含まれています bootstrap.*) 文件，还有经过压缩的 CSS 和 JS (bootstrap.min.*) 文件。同时还提供了 CSS 源码映射表 (bootstrap.*.map) ，可以在某些浏览器的开发工具中使用。同时还包含了来自 Glyphicons 的图标字体，在附带的 Bootstrap 主题中使用到了这些图标
【Bootstrap 源码】
Bootstrap 源码包含了预先编译的 CSS、JavaScript 和图标字体文件，并且还有 LESS、JavaScript 和文档的源码。具体来说，主要文件组织结构如下：
bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/
less/、js/ 和 fonts/ 目录分别包含了 CSS、JS 和字体图标的源码。dist/ 目录包含了上面所说的预编译 Bootstrap 包内的所有文件。docs/ 包含了所有文档的源码文件，examples/
<!DOCTYPE html><html lang="zh-CN"> <head><!-- utf-8编码--><meta charset="utf-8"><!-- 在IE运行最新的渲染模式--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--视口viewport设置--><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><!-- 引入Bootstrap --><link href="css/bootstrap.min.css?1.1.11" rel="stylesheet"><!-- 在IE8-浏览器中，支持HTML5新标签和媒体查询@media--><!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js?1.1.11"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js?1.1.11"></script> <![endif]--> </head> <body><h1>你好，世界！</h1><!-- 先引入jQurey，再引入bootstrap插件 --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><script src="js/bootstrap.min.js?1.1.11"></script> </body></html>
less/、js/、fonts/ ディレクトリには CSS、Source が含まれます。 JS とフォント アイコンのコード。 dist/ ディレクトリには、上記のプリコンパイル済みブートストラップ パッケージ内のすべてのファイルが含まれています。 docs/ にはすべてのドキュメントのソース コード ファイルが含まれており、examples/ ディレクトリは Bootstrap によって公式に提供されるサンプル プロジェクトです。これらに加えて、他のファイルには、ブートストラップ インストール パッケージの定義ファイル、ライセンス ファイル、コンパイル スクリプトも含まれます。 🎜🎜基本テンプレート🎜🎜rrreee🎜🎜🎜以上がブートストラップとは何ですか?ブートストラップの使い方の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。