最近、モバイルデバイスに優先順位を付け、さまざまなデバイスに迅速に適応できる、最も人気のあるResponsive CSSフレームワークであるBootstrapと呼ばれる良いものを発見しました。それを使用して、応答性の高いページをすばやく便利に記述し、ブラウザの違いをブロックします。 Bootstrapを使用すると、過去に元のCSSでWebページを書くという悲劇的な生活を想像することはできません。
学んだ後、私は数分でハイエンドページを開発する能力も持っていることがわかりました。この記事では、ブートストラップを紹介し、レスポンシブページを一緒に実装するように導きます。
図1。さまざまなデバイスに適応したモバイル優先度
1。インストール
最も簡単な方法は、Webページでコンテンツ配信ネットワーク（CDN）が提供するブートストラップを直接参照することです。ユーザーがWebページにアクセスすると、近くのサーバーからリソースを取得します。
リスト1。コンテンツ配信ネットワークからブートストラップを取得します
<！ - 最新のコンパイルされたマイニファイドCSS-> <link rel = "styleSheet" href = "bootstrap/3.3.4/css/bootstrap.min.css"> <！ - オプションテーマ - > <link rel = "href =" href = "bootstrap/3.4/css/boottrap- theme.cmin. JavaScript-> <Script src = "bootstrap/3.3.4/js/bootstrap.min.js"> </script>
また、Bootstrapをダウンロードしてローカルに展開することもできます。ユーザーは、ページに完全なブートストラップをダウンロードすることも、カスタムページのプロジェクトのニーズに応じてプロジェクトで使用されている関数を選択し、Bootstrapの簡素化されたバージョンをコンパイルしてダウンロードすることもできます。ダウンロードが完了すると、zipファイルが取得されます。減圧されたディレクトリ構造は次のとおりです。
リスト2。bootstrapディレクトリ構造
ブートストラップ/
├├。。CSS/
│├。。
│├│。。bootstrap.css.map
││。。
│││。。bootstrap-theme.css
│├│。。bootstrap-theme.css.map
│└。。
├├）/ js/
│├│。-bootstrap.js
│││。-bootstrap.min.js
ponts/
├├）-グリフィコン - ハルフリング - レギュラー.eot
├··ックス - Glyphicons-Halflings-Regulal.svg
├├）- Glyphicons-Halflings-Regulal.ttf
├├）-グリフィコン - ハルフリング - レギュラー.woff
└└）- Glyphics-Halflings-Regular.Woff2
ここでは、主に3つの単純化されたファイルに焦点を当てています。bootstrap.min.cssはBootstrapの主要なコンポーネントであり、使用する多数のCSSクラスが含まれています。 bootstrap-theme.min.cssには、オプションのブートストラップテーマが含まれています。 bootstrap.min.jsは、いくつかのJavaScriptメソッドを提供します。ブートストラップはjQueryに依存するため、bootstrap.min.jsを使用する前にjqueryを導入する必要があることに注意する必要があります。コンテンツ配信ネットワークを使用するように、相対パスを使用して、対応するCSSとJavaScriptをページに導入します。実際の開発では、ブートストラップが提供するテンプレートを出発点として使用することがよくあります。このテンプレートは、レスポンシブページで必要なメタデータとブートストラップを導入します。開発者は、これに基づいて独自のレスポンシブページを書くことができます。
リスト3。BootstrapBasic Template
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta name = "viewport" content = "width = device-width、head = 1他のヘッドコンテンツは *これらのタグの後に来る必要があります *これらのタグ - > <title> bootstrap 101テンプレート</title> <！ - bootstrap-> <link href = "css/bootstrap.min.css" rel = "styleSheet"> <！ - html5 shim and respons.js for ie8サポートhtml5要素とメディアのサポート- file：//-> <！ - [if lt ie 9]> <script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </scrip> <スクリプトをご覧ください。 src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script> <！[endif] - > </head> <body> <h1> hello、world！ src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script> <！-すべてのコンパイルされたプラグインを含めるか、必要に応じて個々のファイルを含めるか、必要に応じて個々
2。CSS
ブートストラップは最初にCSSフレームワークであり、多くのCSSクラスを事前に定義しました。開発者は、適切なCSSクラスをHTML要素に追加して、目的のスタイルを取得するだけで、ページレイアウト、レイアウト、その他の機能を完了することができます。 Bootstrapが提供するCSSは非常に強力です。この記事では、提供するグリッドシステムに焦点を当てます。他の機能については、適用するときにのみ言及されます。関数についてもっと知りたい場合は、公式のドキュメントを参照してください。
容器
ブートストラップレイアウトを使用する場合、コンテナ（.container）にHTML要素を含める必要があります。 Bootstrapは、.containerと.container-fluidの2つのコンテナを提供します。前者はコンテンツを固定幅で中心にしますが、後者は以下に示すように、コンテンツをブラウザウィンドウ全体に水平に埋めることができます。
リスト4。.containerおよび.container-fluid
<div> <p>「私が子供の頃、母は私が病気になるたびに私のために一杯のコーヒーを作っていました。彼女は穏やかに「外国人はこれを飲む」と言いました。今、私は子供の頃に飲んだ味を見つけることができません。その日はイサティスのカップを飲んでいました。」</p> </div> <div> <p> "私が子供の頃、病気のときはいつでも、母は私のためにコーヒーを飲みました。彼女は優しく言った：「外国人はこれを飲む」。 「若い頃、私はいつもコーヒーを恐れていて、酸っぱい苦味が絡み合っています。今、私が子供の頃に飲んだ味を見つけることができません。 </p> </div>
次の写真は、ブラウザのどのように見えるかを示しています。
図2。コンテナ
グリッドシステム
最初のレスポンシブページを書くことで設計したグリッドシステムと同様に、ブートストラップはページを行（.row）に分割し、1行あたり12列（.col-md-*）を使用します。行をコンテナに含める必要があります。画面のサイズに応じて、列は、それぞれ携帯電話（<768px）、錠剤（≥768px）、中画面コンピューター（≥992px）、および大規模なコンピューター（≥1200px）に対応する.col-xs-、.col-sm-、.col-md-、および.col-lg-に分割されます。その中に表示されるこれらのピクセルは、臨界点と呼ばれます。ブラウザのサイズまたは画面サイズが別の重要なポイントに達すると、対応するCSSクラスが機能し、ページレイアウトが変更されます。詳細については、次の図を参照してください。
図3。グリッドシステム
上記のテーブルをどのように理解していますか？コンピューターでページを閲覧するときにページを3列に掘り下げる必要がある場合は、行の幅の1/4、2/4、および1/4を占める場合は、次のようにコードを記述できます。
リスト5。1つの行は3つの列に分割されます
<div> <div> .col-md-3 </div> <div> .col-md-6 </div> <div> .col-md-3 </div> </div >>
ブラウザを開くと、それぞれが12列のうち3、6、および3を占めることがわかります。これにより、正確に12列になります。ブラウザウィンドウが970px未満になるまで絞り込むと、3つのラインになって表示されて表示されます。 .col-xs-を除き、他のCSSクラスは同じ動作をします。画面サイズが重要なポイントよりも小さい場合、積み上げられて表示されます。画面サイズが臨界点よりも大きい場合にのみ列に表示され、いずれにしても.col-xs-が列に表示されます。
さまざまな画面サイズに対応するCSSクラスは、混合方法で使用できます。たとえば、コンピューターにページを3つの列と電話に2つの列に表示したい場合は、次のようにコードを記述できます。電話では、3番目の列が次の行に表示され、ライン幅の半分を占有します。
リスト6。コンピューターと電話にさまざまな数の列を表示します
<div> <div> .col-md-3 </div> <div> .col-md-6 </div> <div> .col-md-3 </div> </div >>
すべてのデバイスに同じ列を表示する場合は、最小サイズ.col-xs-を定義する必要があり、レイアウトは自動的に大きなサイズに拡張されます。
リスト7。すべてのデバイスに同じ数の列が表示されます
<div> <div> .col-xs-6 </div> <div> .col-xs-6 </div> </div>
また、列に特定のオフセットを与えることもできます。たとえば、最初の列は行の幅の1/4を説明します。2番目の列を右に6列をオフセットし、行の端で3列を占有します。
リスト8。列オフセット
<div> <div> .col-md-3 </div> <div> .col-md-3 </div> </div>
列の順序は、.col-md-push-*および.col-md-pull-*で調整することもできます。それらの意味は、要素を後方に押し込むか、いくつかの列を前方に引っ張ることです。開発者は、この機能を使用して、電話に表示するときに重要なコンテンツを前面に引くことができます。
リスト9。プッシュアンドプル列
<div> <div> .col-md-9 .col-md-push-3 </div> <div> .col-md-3 .col-md-pull-9 </div> </div>
さらにエキサイティングなのは、このメッシュシステムもネストできることです。そのため、さまざまな複雑なレイアウトを実行できることです。
リスト10。ネスト
<div><div>Level 1: .col-sm-9<div><div>Level 2: .col-xs-8 .col-sm-6</div><div>Level 2: .col-xs-4 .col-sm-6</div></div><div>Level 1: .col-sm-3</div></div></div>
上記のコードは通常2つの列に分割され、最初の列には2つの列がネストされています。
Bootstrapのグリッド関数は、Webページレイアウトにさまざまな可能性を提供し、非常に簡単に使用できます。ブートストラップを使用してレスポンシブページを書くことがどれほど簡単かを確認しましょう。
3。実際の戦闘
次の画像に示すように、Webページを実装するとします。
図4。Webデザイン
まず、Webページ要素を対応する行と列に分割します。次の図は、著者の部門を示しています。
図5。Webデザインを行と列に分割します
したがって、HTML構造を定義し、適切なブートストラップCSSクラスを追加します。
リスト11。HTML構造の定義
<div> <div> <img src = "http://placehold.it/150x150"> </div> <div> <h1> jane doette </h1> <h3>フロントエンドニンジャ</h3> </div> <hr> <div> <div> <img src = "http://placehold.it/950x350"> </div> <div> <div> <h2> featured work </h2> </div> <div> <div> <div> <img src = "http://placehold.it/250x250"> <h2> href = "https://github.com/udacty/applify"> https://github.com/udacty/applify </a> </div> <div> <img src = "http://placehold.it/250x250"> <h2> sunflower </h2> <a href = "https://github.com/udacty/sunflower"> https://github.com/udacity/sunflower </a> </div> <div> <img src = "http://placehold.it/250x250"> <h2> bokeh </h2> <a href = "https://github.com/udacity/bokeh"> https://github.com/udacity/bokeh </a> </div> </div>
著者が上記のコードを書くのに10分もかかりませんでした。写真がなかったため、著者はオンラインで提供されるプレースホルダーの写真を使用しました。このページをブラウザで開くことはデザインに近いですが、フォント、大文字、大文字、および書体はまだデザインと矛盾しています。次に、Bootstrapドキュメントを微調整して閲覧して、関連するCSSクラスを発見する必要があります。最終効果を以下の図に示します。
図6。実現効果
さらに興味深いのは、ブラウザウィンドウを絞り込んだり、携帯電話からページにアクセスしたりすると、すでに単純なレスポンシブページであり、追加のコードが追加されていないことがわかります。その時を見ると、合計で20分未満かかりましたが、数分でレスポンシブページを書くという約束も満たしました。