一部の厳しい要件を除いて IE6 は考慮できなくなりましたが、WIN7 に付属するブラウザ IE8 は引き続きサポートする必要があります。
この記事のこの方法の主な利点は、準備が少なくて済むことです。準備する必要があるのは、ブートストラップ、jquery、Photoshop だけです。 bootstrap と jquery については、「[Bootstrap ] 現在の Web ページ上にポップアップするダイアログ ボックス。ジャンプせずに閉じることができる、非ポップアップ ウィンドウ (クリックするとリンクが開きます)
Web サイトをどのようにレイアウトするかでよく悩みます
実際、できれば難しいことではありません Bootstrap の使用に習熟していて、特定の方法を持っていれば、
その後もすばやく簡単に提出できます一般的なニーズに対処するための宿題。
インターネット上で検索できるページ テンプレートはたくさんありますが、重要なのは、これらのページ テンプレートの作成プロセスを理解できることです。
これらのダウンロードしたテンプレートがブラウザと互換性がなく、変更できなくなると、大きな問題が発生します。
1. 基本的な目標
BootstrapV3 を使用して次のページを作成します:
ヘッダーに最初にぶら下がっているのは、この Web サイトのナビゲーションです。 、中央、右のボタンとドロップダウン メニュー。ここでの本質はボタン グループであり、Bootstrap が提供するナビゲーション バー コンポーネントは IE8 と互換性がないため、使用できません。詳細については、記事「[Bootstrap] IE8 のナビゲーション バー ナビゲーション バーの不具合と解決策」を参照してください。クリックしてリンクを開きます)
その後、巨大な画面の下に 3 つの列と 2 つの対応するボタンがあります
ウェブサイトの最も重要な部分はここに配置できます
最後の部分はいつものように著作権情報です。
内部ページは次のようになります:
トップナビゲーションバーでもあります、
そして、この内部ページのタイトルとコンテンツがあります。内部ページのタイトルは実際には巨大な画面ですが、トップ ページのサイズよりも小さいです。
次のステップは著作権情報です。
2. 制作手順
1. まず、Photoshop を開き、幅は希望どおりの幅で新しい画像を作成します。前景色は R:0 G:140 B です。 :0、背景色は薄緑色 R:100 G:200 B:100 グラデーション ツールを使用して、左または右、または中央または両側に引き出すことができます。個人的な好み:
準備する必要がある画像はこれだけです。Photoshop を閉じて脇に置き、この画像を Web サイトのプロジェクト フォルダーに保存できます
この画像はわずか約 6K です。ロードにはまったく影響しません。
2. ホームページ
具体的なコードは次のとおりです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</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 type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <style type="text/css"> h1,h2,h3,h4,h5 { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", sans-serif; } </style> </head> <body> <div style="position: absoulted; top: 0; left: 0; width: 100%;"> <div class="btn-group btn-group-justified"> <div class="btn-group"> <button type="button" class="btn btn-success"> Left </button> </div> <div class="btn-group"> <button type="button" class="btn btn-success"> Middle </button> </div> <div class="btn-group"> <button type="button" class="btn btn-success"> Right </button> </div> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">Dropdown link</a> </li> <li> <a href="#">Dropdown link</a> </li> </ul> </div> </div> </div> <div class="jumbotron masthead" style="background-image: url(images/bg.jpg); background-repeat: repeat; text-align: center"> <br /> <br /> <br /> <br /> <br /> <h1> <font color="#ffffff">Banner : the Main headline</font> </h1> <h2> <font color="#ffffff">Sub-heading</font> </h2> <br /> <br /> <br /> <br /> <br /> </div> <div class="container"> <div class="row"> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 "> <div class="panel panel-default"> <div class="panel-body"> <h3> Column1 </h3> <p> ... </p> <p> <a href="#" class="btn btn-success" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <div class="panel panel-default"> <div class="panel-body"> <h3> Column2 </h3> <p> ... </p> <p> <a href="#" class="btn btn-success" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <div class="panel panel-default"> <div class="panel-body"> <h3> Column2 </h3> <p> ... </p> <p> <a href="#" class="btn btn-success" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-body" style="text-align: center"> Copyright information </div> </div> </div> </body></html>ログイン後にコピー
(1)
<head> <!--网站编码，标题，自适应屏幕等--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <!--需要使用的js与css样式--> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <!--这是唯一需要我们自己定义的css样式，用来解决win7系统下，微软雅黑字体无法正常显示，而显示宋体的bug--> <style type="text/css"> h1,h2,h3,h4,h5 { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", sans-serif; } </style> </head>ログイン後にコピー
(2 ) ナビゲーション バー
ブートストラップのおかげで提供されたナビゲーション バーは適用できないため、ブートストラップが提供するボタン グループを使用してナビゲーション バーを自分で記述する必要があります
<!--首先导航栏必必须挂在网页头--> <div style="position: absoulted; top: 0; left: 0; width: 100%;"> <!--定义一个按钮组--> <div class="btn-group btn-group-justified"> <div class="btn-group"> <!--导航栏中单个按钮，也就是没有下拉菜单的按钮的超级链接写作方式需要注意，是使用a标签，然后加上class样式的，而不是官网提供的button标签--> <a href="#" class="btn btn-success"> Left </a> </div> <div class="btn-group"> <a href="#" class="btn btn-success"> Middle </a> </div> <div class="btn-group"> <a href="#" class="btn btn-success"> Right </a> </div> <!--下拉菜单的写法如下：--> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">Dropdown link</a> </li> <li> <a href="#">Dropdown link</a> </li> </ul> </div> </div> </div>
ログイン後にコピー
は btn-success の class 属性を btn-primary に変更します、btn-dangerなどでこのボタンの色を変更できます！
(3) 巨大画面部分
巨大画面は、先ほどPhotoshopで描いた背景を導入するのがポイントです
ここで改行をたくさん入れる必要がある理由。これは巨大な画面のサイズを拡大したいからです
<div class="jumbotron masthead" style="background-image: url(images/bg.jpg); background-repeat: repeat; text-align: center"> <br /> <br /> <br /> <br /> <br /> <h1> <font color="#ffffff">Banner : the Main headline</font> </h1> <h2> <font color="#ffffff">Sub-heading</font> </h2> <br /> <br /> <br /> <br /> <br /> </div>
ログイン後にコピー
(4) カラム部分
ここではブートストラップのグリッド構成を使用して3つのカラムをレイアウトしています
詳細については、私の「[ Bootstrap】PC、タブレット、携帯電話に自動適応する「Bootstrap Grid System」（クリックするとリンクが開きます）の記事
Web ページ全体の 12 個のグリッドを 3 つの部分に分割し、各部分に 4 つのグリッドで問題ありません
そして、各列はパネルヘッダーのないパネルであり、大きなタイトルの中に h3 があり、次に p の段落テキスト、および 2 つのボタンがあります
これらのものはコンテナ内に配置する必要があることに注意してください。それ以外の場合は、これら 3 つがコンテナ内に配置される必要があります。
<div class="container"> <div class="row"> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 "> <div class="panel panel-default"> <div class="panel-body"> <h3> Column1 </h3> <p> ... </p> <p> <a href="#" class="btn btn-success" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <div class="panel panel-default"> <div class="panel-body"> <h3> Column2 </h3> <p> ... </p> <p> <a href="#" class="btn btn-success" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <div class="panel panel-default"> <div class="panel-body"> <h3> Column2 </h3> <p> ... </p> <p> <a href="#" class="btn btn-success" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div> </div> </div> </div>
ログイン後にコピー
<div class="panel panel-default"> <div class="panel-body" style="text-align: center"> Copyright information </div> </div>
ログイン後にコピー
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</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 type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <style type="text/css"> h1,h2,h3,h4,h5 { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", sans-serif; } </style> </head> <body> <div style="position: absoulted; top: 0; left: 0; width: 100%;"> <div class="btn-group btn-group-justified"> <div class="btn-group"> <a href="#" class="btn btn-success"> Left </a> </div> <div class="btn-group"> <a href="#" class="btn btn-success"> Middle </a> </div> <div class="btn-group"> <a href="#" class="btn btn-success"> Right </a> </div> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">Dropdown link</a> </li> <li> <a href="#">Dropdown link</a> </li> </ul> </div> </div> </div> <div class="jumbotron masthead" style="background-image: url(images/bg.jpg); background-repeat: repeat;"> <h1> <font color="#ffffff">Title</font> </h1> </div> <div class="container-fluid"> <div class="panel panel-default"> <div class="panel-body"> Content </div> </div> <div class="panel panel-default"> <div class="panel-body" style="text-align: center"> Copyright information </div> </div> </div> </body></html>ログイン後にコピー
(5) 著作権情報
の部分については何も言うことはありません、それは単なるパネルです
rrreee
3。内部ページの考え方はまったく同じなので、繰り返しません。同様に、コードは次のとおりです。
rrreee 🎜 🎜 🎜🎜 🎜
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
