ホームページ > 記事 > ウェブフロントエンド > 第 1 章: Bootstrap_javascript スキルの最初の紹介
第 1 章: Bootstrap_javascript スキルの最初の紹介
- WBOYオリジナル
- 2016-05-16 15:03:551462ブラウズ
学習ポイント:
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 で録画されます。