ホームページ >ウェブフロントエンド >ブートストラップのチュートリアル >ブートストラップのインストール方法

ブートストラップのインストール方法

藏色散人オリジナル: 2021-01-19 09:09:3517942ブラウズ

bootstrap インストール方法: 1. Bootstrap 公式 Web サイトから Bootstrap ファイルをダウンロードし、と <script> を使用して参照します; 2. Bower 経由でインストールします; 3 . npm 経由でインストール; 4. Composer 経由でインストールします。 </script>

ブートストラップのインストール方法

このチュートリアルの動作環境: Windows7 システム、bootstrap3.3.7 バージョン、Dell G3 コンピューター。

関連チュートリアルの推奨事項: 「bootstrap チュートリアル」

Bootstrap は、シンプルで柔軟なフロントエンド開発で人気のフレームワークです。これは HTML、CSS、および JavaScript に基づいており、HTML はページ要素を定義し、CSS はページレイアウトを定義し、JavaScript はページ要素の応答を担当します。 Bootstrap は HTML、CSS、JavaScript を機能コンポーネントにカプセル化しますが、これはシンプルで使いにくいものです。

ブートストラップをインストールするにはどうすればよいですか?

1. Bootstrap 公式 Web サイトから Bootstrap ファイルをダウンロードし、と <script> を使用して参照します。 </script>

Bootstrap 公式 Web サイトにログインします

ブートストラップのインストール方法

ブートストラップのダウンロード

ブートストラップのインストール方法

ブートストラップのダウンロード: プリコンパイルおよび圧縮されたバージョンのブートストラップをダウンロードします (ドキュメントとソースコードは含まれません)。

ダウンロードコード: 公式 Web サイトで紹介されているブートストラップソースコードには、Less ファイルのコンパイルといくつかのインストールが必要です。

Bootstrap を初めて使用する場合は、最初のものをダウンロードして直接使用することをお勧めします。

ファイル構造

ダウンロードしたファイルは圧縮されたパッケージなので、解凍するとファイルの構造が確認できます。

ブートストラップのインストール方法

htmlBootstrap の使用

htmlBootstrap を使用するには、jquery.js、bootstrap.min.js、および bootstrap.min.css ファイルを参照する必要があります。これらのファイルを参照してください。 Bootstrap を使用して、通常の HTML ファイルをテンプレートに変換します。

方法 1: html フォルダーと Bootstrap フォルダーを一緒に置く

編集済みの Bootstrap をダウンロードし、解凍して Bootstrap フォルダーを取得しました。html フォルダーと Bootstrap フォルダーを一緒に置くだけです。次に、相対パスを使用して、jquery.js、bootstrap.min.js、および bootstrap.min.css ファイルを参照します。

方法 2: CDN 内の HTML 参照 jquery.js、bootstrap.min.js、および bootstrap.min.css

多くの CDN サービスがこれらのファイルをアップロードしています。これらのファイルを直接呼び出すだけで問題ありません。

例:

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <title>在线尝试 Bootstrap 实例</title> 
 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 
 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 
 <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
  
  <h1>Hello, world!</h1> 
  
</body> 
</html>

さらに、次の CDN サービスも使用できます:

国内での推奨使用: https://www.staticfile.org/

国際的な推奨使用法: https://cdnjs.com/

2. Bower 経由でインストール

Bootstrap の Less、CSS、JavaScript、フォントファイルを Bower 経由でインストールして管理することもできます。

$ bower install bootstrap

3. npm 経由でインストールする

npm ツールを使用してブートストラップをインストールすることもできます:

$ npm install bootstrap@3

require('bootstrap') コードの機能は、ロードすることです。すべてのブートストラップ jQuery プラグイン。このうち、ブートストラップモジュール自体は何もエクスポートしません。インストールパッケージの最上位ディレクトリにある /js/*.js ファイルをロードすることで、単一のブートストラッププラグインを手動でロードできます。

Bootstrap の package.json ファイルには追加のメタデータが含まれています:

less - Bootstrap ソースコードのエントリ Less ファイルへのパス

style - Bootstrap の非圧縮 CSS ファイルパス

4. Composer を介したインストール

Composer (中国の公式 Web サイト: Composer Chinese Web サイト) を介してブートストラップインストールパッケージをインストールすることもできます。これには、Less、CSS、JavaScript、およびフォントファイルが含まれています:

$ composer require twbs/bootstrap

Less/Sass ソースコードをコンパイルする際の注意事項

Bootstrap は Autoprefixer を使用して、ベンダー固有のプレフィックスを特定の CSS プロパティに自動的に追加します。 Less/Sass ソースから Bootstrap をコンパイルしており、Bootstrap に付属の Gruntfile を使用していない場合は、Autoprefixer をコンパイルツールとプロセスに統合する必要があります。弊社が提供するコンパイル済みの Bootstrap ファイルまたは Gruntfile ファイルを使用している場合は、心配する必要はありません。これは既に行われています。

以上がブートストラップのインストール方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript composer json jquery css bootstrap less html npm sass 封装 require JS https

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ブートストラップのフォントを変更する方法次の記事：ブートストラップのフォントを変更する方法

続きを見る