ホームページ > 記事 > ウェブフロントエンド > ブートストラップファイルをインポートする方法
ブートストラップファイルをインポートする方法
- 藏色散人オリジナル
- 2019-07-13 11:27:0113244ブラウズ
Bootstrap は、HTML、CSS、JavaScript フレームワークを含む、Web サイトおよび Web アプリケーション開発用のオープンソース フロントエンド フレームワークのセットで、タイポグラフィ、フォーム、ボタン、ナビゲーション、その他のさまざまなコンポーネントを提供します。動的な Web ページや Web アプリケーションの開発を容易にするために設計された Javascript 拡張機能。
ブートストラップ ファイルの導入方法
ブートストラップを導入するには、通常 2 つの方法があります。
オンライン ブートストラップ スタイルを参照してください。
参照用にブートストラップをローカルにダウンロードします。
オンライン引用
基本的なテンプレートは次のとおりです:
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap引入</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>利点: ブートストラップをローカルにインストールする必要がなく、パスを考慮する必要もありません。引用時の問題
欠点: オンライン スタイルがダウンすると、ページ スタイル全体のレンダリングに影響します。
ローカル参照
ブートストラップをダウンロードします。地元で。
上記のコード内の 3 つの URL に直接アクセスしてコードを取得します。
Bootstrap の公式 Web サイト http://v3.bootcss.com/ と JQuery
にアクセスします。公式ウェブサイト http://jquery.com/ 対応するファイルをダウンロードします。
必要なファイルを簡単に参照できるようにプロジェクトの下に配置します。
ブートストラップのディレクトリ構造は次のとおりです。
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最も一般的に使用されるのは css/bootstrap.min.css、js/bootstrap.min.js
jquery.min.js は JQuery 公式 Web サイトからダウンロードできます
最後に、対応するファイルに導入するだけです。
利点: ネットワーク状態が悪くてもページ スタイルが正常に表示されることを確認します。
欠点: 事前にインストールまたはダウンロードする必要があり、パスの問題を考慮する必要があります。参照しています。
関連する推奨事項:「ブートストラップ チュートリアル」
以上がブートストラップファイルをインポートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。