ブートストラップのインストール、設定、使用方法
Web ブラウザを開いて、Bootstrap の公式 Web サイトに移動します: https://getbootstrap.com/docs/3.3/getting-started/
Web サイトのページで、「ブートストラップのダウンロード」セクションまで下にスクロールします。
そのセクションには、「Download Bootstrap」という青いボタンが表示されます。このボタンをクリックしてください。
次に、プリコンパイル済みバージョンまたはソース コード ファイルをダウンロードするかどうかを尋ねるポップアップ ウィンドウが表示されます。必要に応じてプリコンパイル済みバージョンまたはソース コード ファイルをダウンロードすることを選択し、対応するボタンをクリックします。
ダウンロードが自動的に開始されます。ブラウザの設定によっては、ファイルの保存場所を尋ねるダイアログ ボックスが表示される場合があります。ファイルを保存する場所を選択し、「保存」をクリックします。
ダウンロードが完了するまで待ちます。
ダウンロードが完了すると、圧縮ファイル (通常は ZIP 形式) が得られます。ファイルを解凍すると、Bootstrap 3.3.7 のファイルとフォルダーが得られます。
ブートストラップ CDN
jsDelivr のスタッフは、ブートストラップの CSS と JavaScript に対する CDN サポートを惜しみなく提供しています。これらのブートストラップ CDN リンクを使用するだけです。
Bower を使用したインストール
Bower を使用して、Bootstrap の Less、CSS、JavaScript、フォントをインストールおよび管理することもできます。
$ bower install bootstrap
npm を使用してインストールする
npm を使用してブートストラップをインストールすることもできます。
$ npm install bootstrap@3
require(‘bootstrap’) は、Bootstrap のすべての jQuery プラグインを jQuery オブジェクトにロードします。モジュール自体は何もエクスポートしません。パッケージの最上位ディレクトリにファイルをロードすることで、Bootstrap の jQuery プラグインを個別に手動でロードできます。ブートストラップ/js/*.js
ブートストラップには、キー package.json の下にいくつかの追加のメタデータが含まれています。
less - メインの Bootstrap Less ソース ファイルへのパス
style - デフォルト設定 (カスタマイズなし) を使用してプリコンパイルされた Bootstrap 非縮小 CSS へのパス
エディタを使用してインストールする
Composer を使用して、Bootstrap の Less、CSS、JavaScript、フォントをインストールおよび管理することもできます。
$ combos require twbs/bootstrap
less/less/less require auto-prefixing
Bootstrap は Autoprefixer を使用して CSS ベンダー プレフィックスを処理します。 Less/Sass ソース コードから Bootstrap をコンパイルし、Gruntfile を使用しない場合は、Autoprefixer を自分でビルド プロセスに統合する必要があります。プリコンパイルされたブートストラップを使用している場合、または Gruntfile を使用している場合は、Autoprefixer がすでに Gruntfile に統合されているため、これについて心配する必要はありません。
内容
Bootstrap は 2 つの形式でダウンロードできます。次のディレクトリとファイルがあり、共通リソースを論理的にグループ化し、コンパイルおよび縮小されたバリアントを提供します。
jQuery が必要
スターター テンプレートに示されているように、すべての JavaScript プラグインに jQuery が含まれている必要があることに注意してください。 jQuery のどのバージョンがサポートされているかを確認するには、bower.json をチェックしてください。
プリコンパイルされたブートローダー
ダウンロード後、圧縮フォルダーを解凍して、（コンパイルされた）ブートローダーの構造を確認します。次のようなものが表示されます:
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 -レギュラー.eot
§── glyphicons-halflings-normal.svg
§── glyphicons-halflings- Regular.ttf
§── glyphicons-halflings- Regular.woff
└── glyphicons-halflings- Regular.woff2
これはブートストラップの最も基本的な形式です: プリコンパイルされたファイル、ほぼすべての Web プロジェクトですぐに使用できます。コンパイル済みの CSS と JS () だけでなく、コンパイルされ縮小された CSS と JS () も提供しています。 CSS SourceMap() は、一部のブラウザの開発者ツールで利用できます。 Glyphicon のフォントとオプションの Bootstrap テーマが含まれています。 bootstrap.*bootstrap.min.bootstrap..map
ブートストラップ ソース コード
ブートストラップ ソース コードのダウンロードには、プリコンパイルされた CSS、JavaScript、フォント アセットに加えて、ソース コード Less、JavaScript、ドキュメントが含まれています。より具体的には、以下のものが含まれます。
bootstrap/
∴──less/
§── js/
§── fonts/< /span> 、そしてそれぞれソースを参照してください。 CSS、JS、アイコンフォントのコード。このフォルダーには、上記のプリコンパイル済みダウンロードのセクションに記載されているすべてのものが含まれています。このフォルダーには、Bootstrap の使用に関するドキュメントとソース コードが含まれています。これに加えて、含まれるその他のファイルは、パッケージ、ライセンス情報、および開発のサポートを提供します。 less/js/fonts/dist/docs/examples/ └── Examples/ └── docs/ │ └── fonts/ │ §── js/ │ §── css/
§── dist/
CSS と JavaScript をコンパイルする
Bootstrap はビルド システムとして Grunt を使用し、フレームワークを使用する便利な方法を提供します。これがコードのコンパイル、テストの実行などの方法です。
Grunt のインストール
Grunt をインストールするには、まず、node.js (npm を含む) をダウンロードしてインストールする必要があります。 npm は Node Packaged Modules の略で、Node.js で開発の依存関係を管理する方法です。
次に、コマンド ラインから:
を使用してグローバルにインストールします。 grunt-clinpm install -g grunt-cli
ルート ディレクトリに移動し、 を実行します。 npm は package.json ファイルを調べ、そこにリストされている必要なローカル依存関係を自動的にインストールします。 /bootstrap/npm install
完了すると、コマンドラインから利用可能なさまざまな Grunt コマンドを実行できるようになります。
利用可能な grunt コマンド
grunt dist (CSS と JavaScript をコンパイルするだけ)
コンパイルされ縮小された CSS ファイルと JavaScript ファイルを含むディレクトリを再生成します。ブートストラップ ユーザーとしては、通常、これが必要なコマンドです。 /dist/
grunt watch
監視するソース ファイルの数を減らし、変更の保存時に自動的に CSS に再コンパイルします。
grunt test
JSHint を実行し、PhantomJS で QUnit テストをヘッドレスで実行します。
grunt ドキュメント (ドキュメント アセットのビルドとテスト)
ドキュメントをローカルで実行するときに使用される CSS、JavaScript、その他のアセットをビルドしてテストします。バンドル実行ジキルサーブ
grunt (すべてをビルドしてテストを実行します)
CSS と JavaScript のコンパイルと縮小、ドキュメント サイトの構築、ドキュメントに対する HTML5 バリデータの実行、カスタマイザー アセットの再生成などを行います。ジキルは必要だ。通常、Bootstrap 自体をハッキングする場合にのみ必要です。
トラブルシューティング
依存関係のインストールまたは Grunt コマンドの実行で問題が発生した場合は、まず npm で生成されたディレクトリを削除します。その後、 を再実行します。 /node_modules/npm インストール
基本テンプレート
この基本 HTML テンプレートから始めるか、これらの例を変更します。テンプレートと例をカスタマイズしてニーズに合わせて調整していただければ幸いです。
以下の HTML をコピーして、最小限のブートストラップ ドキュメントを開始してください。
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
こんにちは世界！
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>