ホームページ >ウェブフロントエンド >CSSチュートリアル >ブートストラップとはどういう意味ですか?ブートストラップの使い方は?
ブートストラップとはどういう意味ですか?ブートストラップの使い方は?
- 青灯夜游オリジナル
- 2018-10-18 17:42:246860ブラウズ
ブートストラップとはどういう意味ですか?ブートストラップの使い方は? フロントエンド開発に初めて携わる初心者は、Bootstrap に少し慣れないと思います。そこで今回はBootstrapの意味や使い方についてご紹介します。困っている友人は参考にしていただければ幸いです。
まず、Bootstrap とは何かを理解しましょう。
Bootstrap は、Web アプリケーションや Web サイトを迅速に開発するための HTML、CSS、および JavaScript をベースとしたオープンソースの Web フロントエンド フレームワークで、有名なソーシャル ネットワーキング サイトである Twitter によって 2011 年 8 月に開始されました。 Weibo の展開のパイオニアです。 HTML、CSS、JavaScript を統合し、最新のブラウザー テクノロジを使用して、レイアウト、グリッド、テーブル、ボタン、フォーム、ナビゲーション、プロンプト、その他のコンポーネントを含む、迅速な Web フロントエンド開発のためのフロントエンド ツールキットを提供します。ブートストラップを使用すると、リソースをほとんど消費しない非常にエレガントなフロントエンド インターフェイスを構築できます。
Bootstrap の概要については以上です。Bootstrap について詳しく知りたい場合は、bootstrap チュートリアル を参照してください。
Bootstrap とは何かを読んだ後、Bootstrap の使用方法を見てみましょう。
Bootstrap フレームワークを使用する手順:
1. Bootstrap をダウンロードします
まず、公式の Bootstrap にアクセスする必要があります。 Web サイト (http://www.bootcss.com/) からダウンロードしてください:
赤い線の境界線をクリックして、ダウンロード ページでは、3 つの方法から選択できます。ただし、現在は使用の初期段階にあるため、Bootstrap を運用環境で直接使用する必要があります。最初のものをダウンロードするだけです。圧縮パッケージ: bootstrap-3.3.7-dist.zip を解凍したら、中のファイルを見てみましょう:
これらのファイルについて、次のことを理解しましょう。内部のファイルの一部:
bootstrap.css: 完全なブートストラップ スタイル シート (非圧縮) は、開発中のデバッグに使用できます。
: ブートストラップ環境には少なくとも 3 つのファイルが必要です。つまり、bootstrap.min.css、jQuery.min.js、 bootstrap.min .js
①上記でダウンロードしたファイルをインポートする
##② BootCDN が提供する無料の CDN アクセラレーション サービスを直接使用します (http プロトコルと https プロトコルの両方をサポート) アクセス速度が速く、アクセラレーション効果がより明白で、速度と帯域幅の制限はありません。永久に無料です。 BootCDN は、多数のフロントエンド オープン ソース ツール ライブラリに対して CDN アクセラレーション サービスも提供します。利用可能なツール ライブラリをさらに表示するには、BootCDN ホームページにアクセスしてください。
bootstrap.min.css、jquery.min.js、bootstrap.min通常、2 つのファイル jquery.min.js と bootstrap.min.js は、Web ページのドキュメントの最後に配置されます。これは、3 つの .js ファイルの導入順序を混同しないでください。これら 2 つのファイルを先にロードすると、不要な問題が発生する可能性があります。 例を通してブートストラップの使用法を見てみましょう -- ブートストラップのフォント アイコンを使用します<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--最新bootstrap 核心 css 文件-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!--可选的bootstrap主题文件(一般不引入)-->
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<style>
ul{
width: 200px;
height: 500px;
margin: 50px auto;
}
li{
list-style: none;
font-size: 50px;
float: left;
padding: 10px;
}
</style>
</head>
<body>
<ul>
<li><i class="glyphicon glyphicon-user"></i></li>
<li><i class="glyphicon glyphicon-home"></i></li>
<li><i class="glyphicon glyphicon-lock"></i></li>
<li><i class="glyphicon glyphicon-qrcode"></i></li>
</ul>
</body>
<!--jquery文件 务必在bootstrap.min.css前引用-->
<script type="text/javascript" src="js/jquery.min.js" ></script>
<!--最新bootstrap 核心 javascript 文件-->
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
</html>レンダリング:
ブートストラップでサポートされているすべてのフォント アイコンは、ブートストラップの公式 Web サイト (https://v3.bootcss.com/components/) のコンポーネント ページで確認できます。
以上がブートストラップとはどういう意味ですか?ブートストラップの使い方は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。