ホームページ > 記事 > ウェブフロントエンド > ブートストラップをすぐに始める方法
ブートストラップをすぐに始める方法
- (*-*)浩オリジナル
- 2019-07-11 10:17:452953ブラウズ
Bootstrap の学習には 2 つの重要なポイントがあります。1 つは概念を理解し、Bootstrap がどのように div を使用して過去のテーブル レイアウトを置き換えるかを理解することです。もう 1 つは、必要なコンポーネントを使用できるように一般的な構造に慣れることです。必要な情報をワンクリックで満たすことができます。
学習後の最大の感想は、ブートストラップによってフロントエンドのレイアウトとレンダリングの作業がフィルインから変わるということです。空白の質問から選択肢の質問へ。 (推奨学習: Bootstrap ビデオ チュートリアル )
優れた美的能力がなくても、Web ページをシンプルかつエレガントに、そして見た目を美しくすることはできます。素晴らしいです。
BootStrap は、2010 年 8 月に 2 人の Twitter 社員、Mark Otto と Jacob Thornton によって作成されました。7 年前ですが、今でも最も人気のあるフロントエンド CSS フレームワークです。 Less フロントエンド開発ライブラリに基づいており、一般的な CSS コードと Javascript コードが提供されているため、すぐに開始できます。
これには次の機能があります: 完全な基本 CSS プラグイン、豊富な定義済みスタイル シート、jQuery に基づいた js プラグイン セット、非常に柔軟な応答性の高いグリッド システム、モバイルファーストの考え方を提唱しています。ブートストラップの人気に伴い、Font Awesome フォントをはじめとする優れたプラグインが数多く登場しています。 Bootstrap の公式 Web サイト、デモ、ドキュメントが非常に充実しています。
ここで言及する価値があるのは、フォントが .png をフォント ファイルに置き換えることです。@font-face 構文を使用して、安全な Web フォントをリアルタイムでクライアントにダウンロードするため、任意のスケーリングが容易になります。色。
HTML 標準テンプレートは次のとおりです
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>bootstrap基础模板</title> <link href="../public/css/bootstrap.css" rel="stylesheet"> <link href="../public/css/bootstrap-theme.css" rel="stylesheet"> </head> <body> <header></header> <article></article> <footer></footer> <script type="text/javascript" src="../public/js/jquery-2.1.4.js"></script> <script type="text/javascript" src="../public/js/bootstrap.js"></script> </body> </html>
Bootstrap 関連の技術記事の詳細については、Bootstrap チュートリアル 列をご覧ください。 。 勉強！
以上がブートストラップをすぐに始める方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。