ブートストラップは、フロントエンドフレームワークのようなものです。すでに多くのCSSを配置しており、フロントエンド開発に必要な場合は直接呼び出すことができます。ウェブサイトの住所はhttp://www.bootcss.comです。ブートストラップを使用すると、フロントエンド開発中のCSSのレイアウト時間を短縮できます
Bootstrapを使用して、公式Webサイトのコンポーネントをダウンロードする必要があります（クリックしてリンクを開きます）。生産環境で使用されるブートストラップバージョン（クリックしてリンクを開きます）。 Bootstrap3は2と互換性がありません。開発文書に従ってBootstrap3を直接使用することをお勧めします。
ブートストラップを減圧した後、取得した3つのフォルダーCSS、フォント、およびJSをサイトディレクトリにコピーします。 EclipseのJSP Webプロジェクトの場合は、Webrootフォルダーの下に置きます。
その後、Bootstrapを呼び出して、このサイトディレクトリのフロントエンド任意のページをすばやくモデル化できます。
ただし、さまざまなブラウザにはBootstrapについてさまざまな説明があることは注目に値します。 IEはいくつかのスタイルを読むことができませんが、基本的な関数は影響を受けず、ページは少し醜いです。
同じページのIEとGoogle Chromeの比較は次のとおりです。
1。基本的な目的
Bootstrapを使用して、PC、タブレット、携帯電話の美しいランディングページを作成します。
PCに伸びると、さまざまな要素が画面に自動的に適応します。
携帯電話でそのようなページを開くと、ユーザーを自動調整する必要なく、電話画面に直接適応します。
2。基本的なアイデア
ページのレイアウトは、次のようにブートストラップの固有のスタイルに従って設計されています。
3。生産プロセス
ページ全体の特定のコードは次のとおりであり、以下はタグを1つずつ分析します。
<！doctype html public " - // w3c // dtd html 4.01 transitional // en"> <html> <head> <title> login page </title name> <meta name = "viewport" content = "width = device-width、hirting-scale = 1.0、user-scalable = <link href =" csss rel = "styleSheet" media = "screen"> </head> <body> <div> <div> <table frame = "void"> <tr> <td> <img src = "image/img0.jpg"/> </td> <td> welcome。最初にログインしてください。 </td> </tr> </table> </div> <div> <form role = "form" action = "1.html" method = "post"> <div> <label for = "username"> username：</label> <div> <入力タイプ= "テキスト" name = "username" placeholder = "username" id = "username"/</</<> <>パスワード：</label> <div> <入力タイプ= "パスワード" name = "password" placeholder = "placeholder =" id "id =" password "/> </div> </div> <div> <div> <button =" submit "> login </button> <small>アカウントを持っていませんか？ <a href = "http://2.com">クリックして登録</a> </small> </div> </div> </form> </div> </div> </div> </body> </html>
1. <head>タグ
まず、次の2行のコードを<head>タグに入れます。
<head> <title>ログインページ</title> <！ - ページにブラウザの画面に自動的に適応する必要があります - > <meta name = "viewport" content = "width、device-width =" width、infiirnal-scale = 1.0、no "> <no" </head>
2. <body>タグ
（1）最初に<div> </div>を書き、次にコードを入れます。基本的な説明は次のとおりです。
（2）<div>タグ
<div> <！ - このCSSレイヤーをレイアウトするためにテーブルを設定します。 IMGタグにAlign = "Left"を追加するのは簡単ではありません。画像はレイヤーにオーバーフローします - > <！ - <able> - > <table frame = "void"> <tr> <td> <img src = "images/img0.jpg"/> </td> <td>ようこそ。最初にログインしてください。 </td> </tr> </table> </div>
（3）<div>タグの下で、最初にフォーム要素フォームロール= "form" action = "1.html" method = "post">を置きます。通常のHTMLフォームと比較して、このフォームにはより多くのクラス属性と役割属性があります。クラス属性について多くのことを言う必要はありません。値がフォームの場合、フォームに十分な場所がある場合でも、外側ラベルと入力ボックスは同じ行にありません。値が現在のフォームホレゾントである場合、図の効果に示されているように。役割属性は効果を示しておらず、中国のブートストラップ文書に従ってのみ追加されます。
次に、各フォームの下の要素は次のとおりです。
<div> form role = "form" action = "1.html" method = "post"> <！ - 各プロパティの外側ラベルは、入力ボックスを使用してフォームグループのタプルを形成します - > <div> <！ - 次のクラス属性は、画面のサイズに応じて自動的に伸びるために - > <for = "username"> username：<もちろん、IE8で説明することはできません。 IDの機能が表示されません。ブートストラップ中国のドキュメントの要件に従って追加されます - > <入力タイプ= "テキスト" name = "username" placeholder = "username" id = "username"/> </div> </div> <div> </div> <div> <！ - ここのボタンはHTMLの通常の送信ボタンとは異なりますが、フォームの送信には影響しません - > <ボタンタイプ= "submit"> login </button> <！ - <small>タグは、このテキストが送信ボタンと同じ行であることを保証します - > <small> noアカウント？ <a href = "http://2.com">クリックして登録</a> </small> </div> </div> </form> </div> </div>
この時点で、このページの開発が完了しました。
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。