検索

ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLでブートストラップを参照する方法

HTMLでブートストラップを参照する方法

藏色散人
藏色散人オリジナル
2020-11-18 10:28:097473ブラウズ

htmlブートストラップを参照する方法: 1. 「リンク rel」メソッドを使用してオンラインでブートストラップを参照します; 2. ブートストラップをローカルにダウンロードし、必要なファイルをプロジェクトの下に配置し、対応するファイルに導入します。

HTMLでブートストラップを参照する方法

# 推奨事項: 「

bootstrap ビデオ チュートリアル 」

Bootstrap の概要

Bootstrap は一般に 2 つの方法で使用されます。

オンラインの Bootstrap スタイルを参照してください。

Bootstrap をローカルにダウンロードして参照してください。

オンライン引用

基本的なテンプレートは次のとおりです: 

<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 サイトからダウンロードできます

最後に、対応するファイルに導入するだけです。

利点: ネットワーク状態が悪くてもページ スタイルが正常に表示されることを確認します。

欠点: 事前にインストールまたはダウンロードする必要があり、パスの問題を考慮する必要があります。参照しています。

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

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：ブートストラップ アイコンが表示されない場合はどうすればよいですか?次の記事：ブートストラップ アイコンが表示されない場合はどうすればよいですか?

関連記事

続きを見る