IE6は、いくつかの要求の要件を除いて無視されていますが、Win7に付属のブラウザIE8であるIE8は、まだサポートする必要があります。
この方法の主な利点は、個人的には準備が少なく、オンラインで材料を作るために多数の写真を検索する必要がないと個人的に考えていることです。ブートストラップ、jQuery、Photoshopを準備するだけです。 BootstrapとjQueryの構成方法「Bootstrapを参照して、閉じることができる現在のWebページで閉じることができるダイアログボックスを書く」（クリックしてリンクを開く）を参照できます。
ウェブサイトを書くように頼まれたとき、あなたはそれをレイアウトする方法にしばしば悩まされます。実際、それは難しくありません。 bootstrapを熟練して特定の方法を使用できる場合は、宿題をすばやく簡単に処理して、通常のニーズに対処することができます。
ページテンプレートはインターネット上で長い間検索されますが、重要なのは、これらのページテンプレートの作成プロセスを理解できるようにすることです。
これらのテンプレートをダウンロードすることは、ブラウザと互換性がなく、変更されない場合、大きな問題になります。
1。基本的な目的
bootstrapv3を使用して、次のページを作成します。
ホームページは上に表示されます。まず、ヘッダーにぶら下がっているのは、このWebサイトのナビゲーションで、中央、右、ドロップダウンメニューが残っています。ここでのエッセンスはボタングループであり、ブートストラップが提供するナビゲーションバーコンポーネントは使用できません。このナビゲーションバーコンポーネントはIE8と互換性がないためです。詳細については、「IE8のブートストラップナビゲーションバーNavbarの欠陥を解く方法」という記事を参照してください（クリックしてリンクを開きます）
その後、巨大な画面の下には、3つの列と2つの対応するボタンがあります。ここでは、ウェブサイトの最も重要な部分を配置できます。最後に、いつものように著作権情報を配置できます。
内側のページは次のようになります：
また、トップナビゲーションバーであり、この内側のページのタイトルとコンテンツが続きます。内側のページのタイトルは本質的に巨大な画面ですが、ホームページのサイズよりも小さいです。
次は著作権情報です。
2。生産プロセス
1.最初にPhotoshopを開き、新しい1024x1画像を作成します。幅はできるだけ広いです。できるだけ広くするようにしてください。画像は1です。前景の色は濃い緑色r：0 g：140 b：0、背景色は薄緑色r：100 g：200 b：100です。グラデーションツールを使用して、次の画像を引き出します。どのように引っ張っても、個人的な好みに応じて、左右に、そして中央と両側に引っ張ることができます。
これは、準備する必要がある唯一の画像です。 Photoshopを閉じて脇に捨てて、この画像をWebサイトプロジェクトフォルダーに保存できます。この画像はわずか6kであり、負荷にまったく影響しません。
2。ホームページ
特定のコードは次のとおりです。その後、コードは1つずつ説明されます。
< xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> untted document </title> <meta name = "Viewport" content = "width = device-width、initial-scale = 1.0、user-scalable = no"> <link href = "css/bootstrap.css" rel = "styleSheet" media = "screen"> <script = "text/javascript" src = "src =" js/jquery-1.11.1.1.js src = "js/bootstrap.js"> </script> <style type = "text/css"> h1、h2、h3、h4、h5 {font yahei ui "、" microsoft yahei "、" helvetica neu "、" hiragino sans sans sans gb " 「wenquanyi micro hei」、sans-serif; } </style> </head> <body> <div style = "position：abstracted; top：0; left：0; width：100％;"> <div> div> <button = "button =" button ">左</button> </div> <div> <button =" button "> middle </button </button> </div> <button ="> righ Data-Toggle = "Dropdown"> Dropdown <span> </span> </button> <ul role = "Menu"> <li> <a href = "＃">ドロップダウンリンク</a> </li> <li> <a href = "＃">ドロップダウンリンク</a> </li> </ul> </divag url（画像 /bg.jpg）; <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR />> <BR />> <BR />> /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR />> <BR />> <BR />> /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <> <> <>> <br /> <h3> column2 </h3> <p> ... </p> <p> <a href = "＃" role = "button"> button </a> <a href = "＃" button "> button </p> </div> </div> </div> </div> <div> <h3> column2 </h3> <p> <p> <p> <p> href = "＃" role = "button"> button </a> <a href = "＃" button = "button"> button </a> </p> </div> </div> </div> </div> <div> <div> <div> <h3> column2 </h3> <p> ... role = "button"> button </a> </p> </div> </div> </div> <div> <div style = "text-align：center"> copyright情報</div> </div> </div> </body> </html> </html>（1）<head>部分
<head> <！ - ウェブサイトエンコード、タイトル、アダプティブスクリーンなど - > <メタhttp-equiv = "content-type" content = "text/html; charset = utf-8"/> <タイトル> unt titled </title> <meta name = "viewport" content = "width =" width =！それを使用する必要があります - > <link href = "css/bootstrap.css" rel = "styleSheet" media = "screen"> <script type = "text/javascript" src = "js/jquery-1.11.1.1.js"> </script> <script = "text/javascript" Microsoftのブラックフォントを正常に表示できないWin7システムのバグを解くために自分自身を定義する必要があるCSSスタイル - > <スタイルタイプ= "Text/CSS"> h1、H2、H3、H4、H5 {font-family： "neuei ui" arial、「hiragino sans gb」、「hiragino sans gb w3」、「wenquanyi micro hei」、sans-serif; } </style> </head>（2）ナビゲーションバー
Bootstrapが提供するナビゲーションバーは適用できないため、Bootstrapが提供するボタングループを使用して、ナビゲーションバーを自分で書く必要がありました。
<！ - まず、ナビゲーションバーをWebページの頭に掛ける必要があります - > <div style = "position：abstract：0; left：0; width：100％;"> <！ - ボタングループを定義する - > <div> <div> <！ - ナビゲーションバーの1つのボタンのハイパーリンクの書き込み、つまりドロップダウンメニューのないボタンはありません。公式Webサイトで提供されたボタンタグ - > <a href = "＃"> left </a> </div> <div> <a href = "＃"> middle </a> </div> <a href = "＃"> right </a> </div> </div> <> <> <> <> <> <> < data-toggle = "Dropdown"> Dropdown <span> </span> </button> <ul role = "Menu"> <li> <li> <a href = "＃">ドロップダウンリンク</a> </li> <li> <a href = "＃">ドロップダウンリンク
Class属性のBTN-SUCSESSをBTN-Primary、BTN-Dangerなどに変更すると、このボタンの色が変更されます。
（3）巨大な画面部分
巨大な画面は次のように書かれています。重要なのは、Photoshopで描いたばかりの背景を紹介することです。
私がここにそんなに多くを追加しなければならない理由<br>入力は、私がこの巨大な画面のサイズを増やしたいからです
<div style = "background-image：url（images /bg.jpg）; background-repeat：Repeat; repeat; text-align：center"> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR />> <BR />> <BR />> /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> < /div>
（4）列セクション
ここでは、Bootstrapのグリッド組織を使用して3つの列を入力します
詳細については、PC、タブレット、携帯電話のブートストラップグリッドシステムに自動的に適応する記事「Bootstrap」を参照できます。 Webページ全体の12グリッドを3つのピースに分割すると、4つのグリッドがそれぞれ適切です。各列は、パネルヘッドのないパネルで、内部に大きなH3タイトルがあり、次にPの段落テキストと2つのボタンがあります。
これらのものを容器に入れなければならないことは注目に値します。そうしないと、これらの3つのことがページ全体を埋めます。
<div> <div> <div> <div> <div> <h3> Column1 </h3> <p> ... </p> <p> <a href="#" role="button">Button</a> <a href="#" role="button">Button</a> </p> </div> </div> </div> </div> <div> <div> <h3> Column2 </h3> <p> ... </p> <p> <a href = "＃" role = "button"> button </a> <a href = "＃" role = "button">ボタン</a> </p> </div> </div> </div> <div> <div> <div> div> <h3> column2 </h3> <p> <a href = "＃" role = "button"> button </a> </p> </div> </div> </div> </div> </div> </div>
（5）著作権情報の部分
言うことは何もありません。ただパネルです
<div> <div style = "text-align：center">著作権</div> </div>
3。内側のページ
ホームページの作成方法を知っている場合、内側のページのアイデアはまったく同じです。二度と繰り返しません。同様に、コードは次のとおりです。
< xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> untted document </title> <meta name = "Viewport" content = "width = device-width、initial-scale = 1.0、user-scalable = no"> <link href = "css/bootstrap.css" rel = "styleSheet" media = "screen"> <script = "text/javascript" src = "src =" js/jquery-1.11.1.1.js src = "js/bootstrap.js"> </script> <style type = "text/css"> h1、h2、h3、h4、h5 {font yahei ui "、" microsoft yahei "、" helvetica neu "、" hiragino sans sans sans gb " 「wenquanyi micro hei」、sans-serif; } </style> </head> <body> <div style = "position：aspolute; top：0; left：0; width：100％;"> <div> <a href = "＃">左</a> </div> <div> < Data-Toggle = "Dropdown"> Dropdown <span> </span> </button> <ul role = "Menu"> <li> <a href = "＃">ドロップダウンリンク</a> </li> <li> <a href = "＃">ドロップダウンリンク</a> </li> </ul> </divag URL（Images/bg.jpg）;繰り返し;上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。