第 1 章: Bootstrap_javascript スキルの最初の紹介-jsチュートリアル-php.cn

第 1 章: Bootstrap_javascript スキルの最初の紹介

WBOY

リリース： 2016-05-16 15:03:55

オリジナル

1461 人が閲覧しました

学習ポイント:

1.ブートストラップの概要

2.ブートストラップ機能

3.ブートストラップ構造

4. 最初のページを作成します

5. 学習のためのさまざまな準備

このレッスンでは、主に Boostrap の歴史、特徴、用途、そして Web プロジェクトの開発に Boostrap を選択する理由を理解します。

1.ブートストラップの概要

Bootstrap は、Twitter (世界最大の Weibo) の 2 人の技術エンジニアによって開発された、HTML、CSS、JavaScript をベースとしたオープンソースフレームワークです。フレームワークコードは簡潔で視覚的に美しく、PC やモバイルデバイスに基づいた Web ページ要件を迅速かつ簡単に構築するために使用できます。

2010 年 6 月、Twitter 社内のエンジニアは、フロントエンド開発タスクにおけるコラボレーションと統一の問題の解決に取り組みました。さまざまな選択肢を経て、Bootstrap は最終的に完成し、2011 年 8 月にリリースされました。長期間にわたる反復的なアップグレードを経て、初期の CSS 主導プロジェクトから、多くの組み込み JavaScript プラグインとアイコンを備えた多機能 Web フロントエンドオープンソースフレームワークに発展しました。

Bootstrap の最も重要な部分は、PC、PAD、携帯電話でのページアクセスと互換性のある応答性の高いレイアウトです。

ブートストラップのダウンロードとデモ:

国内文書翻訳公式サイト：http://www.bootcss.com

莱城ウェブクラブ公式ウェブサイト: http://www.ycku.com

2.ブートストラップ機能

Bootstrap は、その非常に便利な機能と機能により非常に人気があります。主なコア機能は次のとおりです:

(1)。クロスデバイス、クロスブラウザ

。

批判の多い IE7 および 8 を含む、すべての最新ブラウザと互換性があります。もちろん、このコースでは IE9 より前のブラウザは考慮されません。

(2)。レスポンシブレイアウト

。

PC側で様々な解像度の表示に対応できるだけでなく、モバイルPADや携帯電話などの画面でのレスポンシブな切り替え表示にも対応しています。

(3) 提供される包括的なコンポーネント

Bootstrap は、ナビゲーション、ラベル、ツールバー、ボタン、開発者が呼び出すのに便利な一連のコンポーネントなど、非常に実用的なコンポーネントを提供します。

(4) 組み込みの jQuery プラグイン

Bootstrap は、開発者が Web 上でさまざまな一般的な特殊効果を実装することを容易にする実用的な jquery プラグインを多数提供します。

(5) HTML5、CSS3

をサポートします。

HTML5 セマンティックタグと CSS3 属性は十分にサポートされています。

(6)。LESS ダイナミックスタイルをサポートします

。

LESS は、変数、ネスト、演算を使用した混合コーディングを使用して、より高速かつ柔軟な CSS を記述します。 Bootstrapでうまく開発できます。

3.ブートストラップ構造

まず、Boostrap のドキュメント構造を理解したい場合は、公式 Web サイトからローカルにダウンロードする必要があります。ブートストラップのダウンロードアドレスは次のとおりです:

ブートストラップのダウンロードアドレス: http://v3.bootcss.com/ (運用環境 v3.3.4 を選択)

解凍後のディレクトリは次の構造になります:

ブートストラップ/
§── css/
│§── bootstrap.css
│§── bootstrap.css.map
│§── bootstrap.min.css
│§── bootstrap-theme.css
│§── bootstrap-theme.css.map
│━━ bootstrap-theme.min.css
§── js/
│§── bootstrap.js
│━━ bootstrap.min.js
└── フォント/
§── glyphicons-halflings-normal.eot
§── glyphicons-halflings-normal.svg
§── glyphicons-halflings-normal.ttf
§── glyphicons-halflings-normal.woff
└── glyphicons-halflings-normal.woff2

は主に、css (スタイル)、js (スクリプト)、および fonts (フォント) の 3 つのコアディレクトリに分かれています。

1.css ディレクトリには css という接尾辞が付いたファイルが 4 つあります。min という単語が含まれるファイルは圧縮されていないファイルであり、css について学ぶことができます。コード; マップ接尾辞が付いたファイルは次のとおりです。このファイルは、特定のブラウザツールで使用される CSS ソースコードマッピングテーブルです。

2.js ディレクトリには、非圧縮の js ファイルと圧縮された js ファイルの 2 つのファイルが含まれています。

3.fonts ディレクトリには、さまざまなサフィックスを持つフォントファイルが含まれています。

4.最初のページを作成します

HTML5ページを作成し、Bootstrapのコアファイルをインポートして、正常に表示されるかテストします。

//第一个 Bootstrap
<!DOCTYPE html>
<html lang="zh-cn">
<head>
　　<meta charset="UTF-8">
　　<title>Bootstrap 介绍</title>
　　<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
　　<button class="btn btn-info">Bootstrap</button>
　　<script src="js/jquery.min.js"></script>
　　<script src="js/bootstrap.min.js"></script>
</body>
</html>

ログイン後にコピー

5.勉強に向けたさまざまな準備

1. 開発ツール。Bootstrap の開発ツールとして Sublime Text3 を使用し、Emmet コード生成プラグインをインストールしました。

2. テストツール。従来の最新ブラウザに加えて、2 つ目は、Opera モバイルエミュレーターと Chrome のモバイルウェブテストツールを使用します。

3. 必要な基礎は、少なくとも HTML5 シーズン 1 コースの基礎です。Bootstrap には、jQuery や JS 自体よりもはるかに簡単に使用できるプラグインが組み込まれています。 jQuery と JS コースを使用すると、学習と理解がさらに深まります

4. コース解像度: 基本コースの場合は 1024 x 768 で録画しますが、レスポンシブコースやプロジェクトコースなどの一部の特殊な部分は高解像度の録画が必要で、1440 x 900 で録画されます。

上記は編集者が紹介した Bootstrap フレームワークの関連知識です。お役に立てば幸いです。