この記事の主な目的では、Twitter Bootstrapを使用して20分以内にサイトを作成することを学ぶことができます。サイトの構築方法を以下に紹介します。
基本的なHTMLテンプレート
。必要なブートストラップファイルを含めることができるように、基本的なHTMLテンプレートを使用する必要があります。 Twitter Bootstrapプロジェクトの始まりを次に示し、これらのコードをファイルにコピーして、index.htmlに名前を付けます。
<！doctype html> <head> <title> twitter bootstrapチュートリアル - レスポンシブレイアウトチュートリアル</title> <style type = 'text/css'> body {background -color：#ccc; } </style> </head> <body> </body> </html>このコードでは、ページの背景を明るい灰色にするためにいくつかのCSSを追加しました。これにより、デザインに異なる列を簡単に見ることができ、理解しやすくなるからです。
Twitter Bootstrapファイルを紹介します
Twitter Bootstrapを使用するには、テンプレートにファイルを導入するだけです。ファイルを導入する方法はたくさんあります。これらの方法を知りたい場合は、関連するドキュメントを参照してください。
このチュートリアルの開始点に基づいて、ファイルをダウンロードせずにcdnを介してbootstrap-combined.min.cssファイルを紹介します。
コードコピーは次のとおりです。<link href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel = "styleSheet">
これにより、すべてのTwitter Bootstrap CSSがテンプレートで有効になります。
Twitter Bootstrapのコンテナ
ブートストラップのコンテナクラスは非常に便利です。ページ内に中央の領域を作成し、他の場所の内容を内部に配置できます。コンテナクラスは、静的な幅とマジン値の中心部のDivボックスをAutoのマギン値を作成するのと同等です。 Twitter Bootstrapのコンテナクラスの利点は、それが応答性が高いことであり、実用的な目的で現在の画面幅に基づいて最適な幅を計算することです。
ボディタグでは、コンテナクラスを使用してdivを作成します。ページ上の他のコードのメインアウターラッパーとして機能します。
このdivの高さを調整して背景色を白に設定すると、あなたが見る効果は次のようになります。
タイトルとナビゲーション
追加のHTMLコードを追加する場所ができたので、タイトルテキストを追加してから、サイトのメインナビゲーションバーを作成できます。
コンテナクラスのDivタグに選択したテキストまたはテキストを追加します。
<h1> Twitter Bootstrapチュートリアル</h1>
今はあまり新しいものではありません。それは単なるタイトルです。TwitterBootstrapナビゲーションのより興味深い側面に移動しましょう。
Bootstrapには、さまざまなナビゲーション要素を作成できるNAVクラスがあります。 H1タグの後に次のコードを追加できます。
<div class = 'navbar navbar-inverse'> <div class = 'nav-collapse' style = "height;"> <ul> <li> <a href = "＃"> home </a> </li> <li> <a href = "＃"
Navbar関連のクラスには、ナビゲーションバーのすべてのスタイルがあります。 Navbar-inverseクラスを追加すると、Twitter Bootstrapの一般的な組み合わせであるクールなブラックスタイルが適用されます。このスタイルを拡張して、ユニークなナビゲーションを作成することをお勧めします。ただし、このチュートリアルでは、基本的なブートストラップスタイルを使用します。
クラスNAVBARを備えたDIVでは、クラスNAV-COLLAPSESを備えた別のDIVを追加し、インラインスタイルの高さを追加します：Auto。これにより、このページが幅が970px未満のブラウザウィンドウにある場合、圧縮されたスイッチビューが提供されることをブートストラップに示します。
index.htmlファイルを保存してブラウザで開くと、図に示すように、ブラウザウィンドウの幅を調整すると、この変更を確認できます。
979pxを超える
979px未満
さらに、HTML UNORDEREDリスト要素にNAVクラスを追加して、Bootstrap CSSファイルからより多くのスタイルを適用したり、「ホーム」リスト項目にアクティブなクラスを追加したりできます。
メインコンテンツとサイドバー
サイトのメインナビゲーションを完了しました。これにより、メインコンテンツ領域とサイドバーを追加して、より多くのリンクまたはナビゲーションパスをサポートする必要があります。ナビゲーションバーに次のコードを追加してください。
<div id = 'content' class = 'row-fluid'> <div class = 'span9 main'> <h2>メインコンテンツセクション</h2> </div> <div class = 'span3 sidebar'> <h2> sidebar </h2> </div> </div>
これはまさに、Bootstrapのラスターシステムについて理解する必要があるものです。もちろん、公式のブートストラップドキュメントは詳細について説明しますが、基本から始めて、それをよりよく理解できるようにします。
ラスターシステムは、12列のレイアウトを使用します。つまり、ページを12個の同一の列に分割できることを意味します。公式のブートストラップドキュメントから取得した次の写真は、優れたディスプレイを提供します。
ナビゲーションバーに貼り付けたコードでは、Span9とSpan3という名前のクラスを見ることができます。ページを左側の9列の2つの部分と右側の3列の2つの部分に分割し、コンテンツ領域とサイドバーを形成します。ラスターシステムを使用する利点の1つは、ウィンドウの幅に基づいて列の幅を動的に計算することです。そのため、画面解像度でサイトを機能させるためにメディアクエリを作成する必要はありません。
スパンの数を変更し、ブラウザのサイズを調整することで、それらの効果を観察できます。コンテンツ領域が724px未満の場合、これらの列が垂直に積み重ねられていることに気付くでしょう。
次に、ページを少し長くするために、メインコンテンツ領域のH2タグの背後に次のテキストまたはその他のテキストを配置します。
<p> lorem ipsum dolor sit amet、conectetuer apiscing elit、sed diam non -ummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。 UT WISI ENIM AD MISTIM MINITAL VENIA、QUIS NOSTRUD EXERCTION STA ULLAMCORPER SUSCIPIT LOBORTIS NISL UT ALICIP EX EA COMMODO結果。 duis autem vel eum iriure dolor in hendrerit in vultate velit esse molestie resustat、vel ilum dolore eu feugiat nulla fafilisis at Vero eros et accumsan et accumsan et accumsan NAM LIBER OPE CUM SOLUTA NOBIS ELEIFENDオプションコングニヒルImperdiet Doming ID Quod Mazim Placerat Facer Assim。</p>
<p> Typi Non Habent clariitatem Insitam; IIS qui Facit eorum clariitatemのEST USUS合法。調査の実証clariitres legende me lius quod ii legunt saepius。 Claritas EST Etiam Process Dynamicus、Qui Sequencer Mutationem Consuetudium Legorum。ミルム・エステは、クアム・リッター・ゴシカ、クアム・ヌン・プタマス・パラム・クララム、アンチエポソリット・リターラム形式のヒューマット・ヒューマット・ヒューマット・ヒューマット・カルタ・Quarta Decima et Quinta Decima。 Eodem Modo Typi、Qui Nunc Nobis Videntur Parum Clari、FuturumのFiant Sollemnes </p>
これで、サイトは次のように表示されます。
サイドバーナビゲーション
Twitter Bootstrapがここで提供するすべてのナビゲーション要素を見ることができます。
垂直タブを使用して、追加のナビゲーションエリアを作成します。次のコードをコピーして、サイドバーのH2タグに貼り付けます。
<ul> <li> <a href = '＃'>別のリンク1 </a> </li> <li> <a href = '＃'>別のリンク2 </a> </li> <li> <a href = '＃'>別のリンク3 </a> </li> </ul>
これは簡単なディスプレイです！上記のコードは、文字通り、クラスNAV-TABSとNAVスタックを備えた順序付けられていないリストにすぎませんが、ナビゲーションパネルを作成します。
最終的な効果を見ると、Twitter Bootstrapに基づくページが終了します。
結論は
Twitter Bootstrapが提供する機能により、この非常に高速な基本的なブートストラップチュートリアルを提供しましたが、練習して公式文書を読むのに時間がかかり、すぐにブートストラップの専門家になります。
このチュートリアルを読んだ後、さまざまな種類のナビゲーションとレスポンシブデザインの基本原則であるラスターシステムの使用方法を理解する必要があります。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。