モバイルユーザーの数が増えているため、従来のWebシステムアーキテクチャは、多くのモバイル端子の通常の使用と互換性がありません。職場では、多くの顧客が携帯電話やタブレットなどのモバイルターミナルで管理システムを使用する必要があることもわかります。対応する応答Webページが各端末に対して個別に開発されている場合、これにより、プロジェクトのコストと開発者への圧力が必然的に増加します。現時点では、マルチ末端の問題を解決するために生まれたレスポンシブレイアウトを理解する必要があります。今回は、軽量、オープンソース、無料のブートストラップを紹介します。
開発環境を構築します
まず、公式WebサイトのBoostrapソースコードパッケージ（http：//www.bootcss.com/をダウンロードします。簡単なプロジェクトを開発するには、ソースコードにすべてのCSS、JS、フォントなどを追加する必要はありません。プロジェクトのニーズに応じて、必要な環境を調整できます。
必要なファイルは次のとおりです。Jquery.min.js、bootstrap.min.js、bootstrap.css。いくつかのフォントスタイルを使用する必要がある場合は、下の図に示すように、フォント関連のファイルを追加する必要もあります。
[注] JSをロードするときは、最初にjquery.min.jsをロードする必要があります。bootstrap.min.jsでは、jquery関連の方法、つまりboostrap.min.jsを使用するため、jquery.min.jsに依存します。
テストブートラップ環境
テストファイルindex.htmlを記述します。テストファイルの内容は次のとおりです。
<！doctype html> <html> <head> <title>ブースストラップ環境をテスト</title> <link rel = "styleSheet" type = "text/css" href = "./ css/bootstrap.css"> <スクリプトタイプ= "テキスト/javascript" src = " type = "text/javascript" src = "./ js/bootstrap.min.js"> </script> </head> <body> </body> </html>
上記はブートラップ開発環境です。とても簡単です！
Boostrapを使用するときに知っておく必要があるのは、Boostrapのラスターシステムです。まさに、このグリッドシステムが異なる解像度を持つターミナルデバイスとの互換性を向上させるためです。
特定のグリッドシステムの公式Webサイトには、http：//v3.bootcss.com/css/：明確な紹介があります。公式ウェブサイトの次の写真があります。
Boostrapを使用する場合、主に定義されているいくつかのスタイルを使用します。これは、芸術の能力を持たず、かなり良いページをすばやく構築するプログラムに役立ちます。
実際にBootstrapを使用する場合、公式Webサイトhttp://v3.bootcss.com/css/#tablesでいくつかのヘルプドキュメントを確認します。
個人的には、公式ウェブサイトの例で関連するコードを独自のWebページに直接コピーし、これに基づいて関連する変更を行うことをお勧めします。これにより、開発速度が高速になり、精度が高くなります。
いくつかのブースストラップスタイル---テーブルスタイルを示します。
<！Doctype html> <html> <head> <title>テストブースストラップ環境</title> <link rel = "styleSheet" type = "text/css" href = "./ css/bootstrap.css"> <スクリプトタイプ= "テキスト/javascript" src = type = "text/javascript" src = "./ js/bootstrap.min.js"> </script> <body> <body> <table> <tr> <td>テストフォーム</td> <td>テストフォーム</td> <td>テストフォーム</td> <td>テストフォーム</td> <td> <td> </td> </td> </td> </td> </td>フォーム</td> <td>テスト</td> <td>テスト</td> </tr> <td> <td> <td> <td> <td> <td>テスト</td> <td>テスト</td> <td>テスト</td> <td>テスト</td>テスト</td> <td>テスト<tr> <td>テスト</td> <td>テスト</td> <td>テスト</td> <td>テスト</td> <td>テスト</td> <td>テスト</td> </tr> <td> <td>テスト</td> <td>テスト</td> <td> <td> </td> <td> <td> <td> <td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td>テスト</td> <td> td> test </td> </tr> </</body> html> </html> </html>
Webページの表示結果は次のとおりです。
クラスの属性が紹介されます。
1）テーブルとこれにはすでにブートラップテーブルスタイルがあります
2）テーブルホーバーは、テーブルマウスの列の背景が明るいままであることを示します
3）テーブルボーダーテーブルが境界に表示されます
4）テーブルストライプのテーブルストライプ
[注]複数の属性が一緒に追加されると、各属性の間にスペースがあります。
2。ボタン
<！ - button-> <a href = "＃" role = "button"> link </a> <button type = "submit"> button </button </button> <入力タイプ= "button" "入力"> <入力タイプ= "submit" value = "submit"> <！ - > <ボタンタイプ= "ボタン">（デフォルトスタイル） type = "button">（設定）プライマリ</button> <！ - 成功またはポジティブなアクションを示します - > <ボタン= "button">（success）success </button> <！ - 情報アラートメッセージのコンテキストボタン - > <ボタンタイプ= "ボタン">（一般情報）情報</ボタン> <！ - > <ボタンタイプ= "ボタン">（危険）危険</button> <！ - ボタンの動作を維持しながらリンクのように見えるようにすることでボタンを強調します - > <ボタンタイプ= "ボタン">（リンク）リンク</button>
Webページの結果は次のとおりです。
他の多くのスタイルやコンポーネントについては、公式のヘルプ文書を参照することをお勧めします。
要約します
この記事はガイドであり、Boostrapのためのものとそれの使用方法を簡単に紹介します。すべてのコンポーネントとスタイルの詳細なリストはありませんが、...読みます！
これは非常に魔法のような記事です。クリックして見てみる必要があります。ブートストラップ学習チュートリアルを共有して収集する価値がある
まだ詳細に学びたい場合は、ここをクリックして2つのエキサイティングなトピックを学び、添付できます。BootstrapLearning Tutorial Bootstrap Practical Tutorial
ブートストラップに興味がある人は、各スタイルの効果と各コンポーネントを自分で使用する方法を手動でテストし、ブートストラップによってもたらされた楽しみを本当に感じることができることを願っています。