「Bootstrapが主流のブラウザと互換性のあるオーディエンスの巨大なスクリーンスタイルページを書く」（リンクを開くためにクリックする）最後に書いたとき、古い世代のニーズの一部は、このポストモダンスタイルに満たされない場合があります。それは問題ではありません、私たちはレイアウトをポータルスタイルに完全に変更することができ、彼らはすぐにそれを受け入れました：
まず、ポータルレイアウトについて明確にする必要があります。これは、私たちが迅速にレイアウトするのに役立ちます。始まりは、小さな巨大な画面で、次にナビゲーションバーが続き、ボタングループがここで使用され、その後さまざまな列が続きます。 Bootstrapグリッドシステムとパネルの使用、最後に著作権情報の使用に関するものです。ここにはまだパネルがあります。
とにかく、私は個人的にこのポータルレイアウトスタイルは混乱だと思いますが、なぜそれが非常に人気があるように見えるのかわかりません。
Photoshopの高さ1のグラデーションバーだけで、何かを準備する必要があります。まず、Photoshopを開き、1024x1の新しい画像を作成します。幅は無料です。できるだけ広くするようにしてください。画像は1です。前景の色は濃い緑色r：0 g：140 b：0、背景色は薄緑色r：100 g：200 b：100です。グラデーションツールを使用して、次の画像を引き出します。どのように引っ張っても、個人的な好みに応じて、左右に、そして中央と両側に引っ張ることができます。
これは、準備する必要がある唯一の画像です。 Photoshopを閉じて脇に捨てて、この画像をWebサイトプロジェクトフォルダーに保存できます。この画像はわずか6kであり、負荷にまったく影響しません。
その後、特定のWebページコードは次のとおりです。原則は、「ブートストラップを主流のブラウザと互換性のあるオーディエンスの巨大なスクリーンスタイルページを書く」（リンクをクリックする）のパーツとまったく同じですが、コードの場所が異なることを除いて、ここでは説明しません。
< xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <titter> testa </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> <div style = "background-image：url（maghte/bg.jpg）; background-jpg）; background-repeat：repeat; repeat; center"> <h1> <font color = "＃ffffff">バナー：メインヘッドライン</font> </fffffff "> ffffffff"> ffffffff </h2> </div> <div> <div> <div> <a href = "＃"> button1 </a> </div> <div> <a href = "＃"> button2 </a> </div> <div> <button = "button" button "data-toggle =" dropdown "> dropdown1 </span> <ul button> <ul button> <ul button> <a href = "＃"> button1 </a> </li> <li> <a href = "＃"> button2 </a> </li> </ul> </div> <div> <button = "button" data-toggle = "dropdown"> dropdown2 <span> </span> </button> <ul <a href = "＃"> button2 </a> </li> <li> <a href = "＃"> button3 </a> </li> <li> </li> <li> <a href = "＃"> button4 </a> ... </p> <p> <a href = "＃"> button4 </a> </li> </ul> </div> </div> </div> <div> <div> <div> <div> <h3> column1 </h3> <p> ... </p> <p> <a href = " role = "button"> button </a> </p> </div> </div> </div> </div> <div> <div> <div> <h3> column2 </h3> <p> ... </p> <p> <a href = "＃" role = "button"> button </a> <a href = " </div> </div> </div> <div> <div> <div> <h3> Column3 </h3> <p> ... </p> <p> <a href="#" role="button">Button</a> </p> </div> </div> </div> </div> </div> <div> <div> <div> <div> <h3> Column3 </h3> <p> ... </p> <p> <a href = "＃" role = "button"> button </a> <a href = "＃" role = "button"> button </a> </p> </div> </div> </div> </div> </div> <div> <div style = "text-align：センター"それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。