グリッドシステムは英語の「グリッドシステム」であり、一部の人々はそれを「グリッドシステム」として翻訳しています。固定グリッド設計レイアウトを使用します。そのスタイルはきちんと簡潔です。第二次世界大戦後に非常に人気があり、今日の出版デザインの主流のスタイルの1つになりました。
1692年、新たに昇格したフランスの王であるルイ14世は、フランスの印刷レベルが不十分であると感じたため、印刷を管理するために王室の特別委員会の設立を命じました。彼らの最初のタスクは、科学的で合理的で価値のある機能的な新しいフォントを設計することです。委員会は、数学者のニコラス・ヤージョンが率いていました。彼らはローマの身体に基づいており、デザインベースとして正方形を使用しました。各正方形のグリッドは64個の基本的な正方形ユニットに分割され、各四角ユニットは36個の小さなグリッドに分割されました。このようにして、印刷レイアウトは2,304個の小さなグリッドで構成されています。この厳密な幾何学的グリッドネットワークでは、フォントの形状、レイアウト配置、および通信機能の有効性が設計されました。これは、フォントとレイアウトに関する科学的実験を実施する世界で最も初期の活動であり、グリッドシステムの最も初期のプロトタイプでもあります。
Webページラスターシステムの定義は次のとおりです。通常のグリッド配列を使用して、Webページのレイアウトと情報の分布を導き、標準化します。 Webラスターシステムは、平面ラスターシステムから開発されています。 Webデザインの場合、グリッドシステムの使用は、Webページの情報をより美しく読みやすくするだけでなく、より使いやすくすることができます。さらに、フロントエンド開発の場合、Webページはより柔軟で標準化されます。
Bootstrapは、レスポンシブでモバイルファーストストリーミンググリッドシステムを提供します。画面またはビューポートのサイズが大きくなると、システムは自動的に最大12列に分割されます。これには、簡単に定義されたクラスを使いやすいクラスと、より多くのセマンティックレイアウトを生成するための強力なミックスインが含まれます。
言い換えれば、ブートストラップは要素の幅を12部に分割します。この列の要素を12部に分割します。
1。基本的な目的
次の2つの行を作成すると、これら2つの行の各セルの幅が異なるデバイスのために変更されます。
携帯電話の小さな画面では、2つのパートBの上向きAアカウントが10パートのアカウントであり、1パートBの1パートBのアカウントが1つのパートのアカウントであり、ABCはこれらの12パートを共有します。
タブレットの中程度の画面では、8パートBのアカウントを4部品のアカウントで、ABはこれらの12パートを共有し、10パートBのアカウントBのアカウントが1パートCアカウント1パートで、ABCはこれらの12パートを共有します。
PCの大画面では、8株の4 bアカウントの上向きAアカウントで、ABはこれらの12株を共有し、1 bのアカウントが1 Bのアカウント1の1 Bのアカウントで、ABCはこれらの12株を株しています。
2。生産プロセス
最初にWebフォルダーでBootstrapを構成し、公式Webサイトのコンポーネントをダウンロードします（クリックしてリンクを開きます）。生産環境で使用されるブートストラップバージョン（クリックしてリンクを開きます）。 Bootstrap3は2と互換性がありません。開発文書に従ってBootstrap3を直接使用することをお勧めします。ブートストラップを減圧した後、取得した3つのフォルダーCSS、フォント、およびJSをサイトディレクトリにコピーします。 EclipseのJSP Webプロジェクトの場合は、Webrootフォルダーの下に置きます。
コードは次のとおりです。詳細については、コメントをご覧ください。
< xmlns = "http://www.w3.org/1999/xhtml"> <head> <！ - webエンコード、外部ファイル、画面に自動的に適応する - > <meta http-equiv = "content-type" content = "text/html; rel = "styleSheet" media = "screen"> <meta name = "viewport" content = "width = device-width = device-width = 1.0、user-scalable = no"> <title>グリッドシステム</head> </head> <body> <body> <！ - ブートストラップを使用してください。 - > <div> <！ - ラインを定義します - > <div> <！ - xsは携帯電話の小さな画面を表し、MDはタブレットの画面を表し、LGはPCの大きな画面を表します - > <！ - 同じペアの要素の合計は12に等しくなければなりません。 - > <div> a </div> <div> b </div> </div> <div> <！ - 真実は上記と同じです。Col-XS-1+CのCol-XS-1+BのCol-XS-1+Bは12に等しい - > <div>