ブートストラップエントリ＆グリッドシステム

I.概要

1.コンセプト：Twitterからフロントエンドの開発フレームワーク、ブートストラップは、現在、非常に人気のフロントエンドのフレームワークです。ブートストラップは、Web開発者となるよう、より迅速に、HTML、CSS、JavaScriptをベースとし、それは、シンプルで柔軟性があります。
    *フレーム：半完成ソフトウェアは、開発者がコーディングを簡素化し、開発中に、基礎フレームすることができます。
    *利点：
        1. JSとCSSスタイルプラグインの多くを定義します。私たちの開発者は、これらのスタイルを使用することができますし、エフェクトプラグインが豊富なページを取得します。
        2.応答レイアウト。
            *異なる解像度の互換デバイスとのページ。

第二に、はじめに






- 3つのメタタグは*必須*前面に、他のコンテンツは*必須*後に従ってください！- > < タイトル


    
    
    
    
    > HelloWorldのブートストラップ</ タイトル> 

    <！ - ブートストラップ- > 
    < リンクのhref = "CSS / bootstrap.min.css" のrel = "このスタイルシート" > 

    <！ - 、jQueryの（JavaScriptのすべてのプラグインが依存するブートストラップjQueryのですがそう）前に配置する必要があります- > 
    < スクリプトSRC = "JS / jQueryの-3.2.1.min.js" > </ スクリプト> 
    <！ - すべてのブートストラップのJavaScriptプラグインロード。また、必要に応じて、単一のプラグインをロードすることができます。- > 
    < スクリプトSRC = "JS / bootstrap.min.js" > </ スクリプト> 
</ ヘッド>

< H1 >こんにちは、世界！</ のH1 > 

</ ボディ> 
</ HTML >

第三に、グリッドシステム

*異なる解像度の互換デバイスとのページ。
*達成：システムは、グリッドに依存：グリッド線が均等に指定することができるいくつかのグリッド要素を表す、12に分割されている
*手順を：
    1.コンテナを定義します。上記の表に対応する、
        *容器の分類：
            1.コンテナ：ブランクの両側に
            2コンテナ液：各デバイスは、幅の100％である
    2が定義された行です。同等のtrスタイル前：行
    3.定義された要素。異なるデバイスで指定された要素、占有格子の数。スタイル：col-機器コード-格子の数
        *コード装置：
            1. XS：超小型の携帯電話の画面（< 768px ）：COL-XS-12は、
            小さなスクリーン版（≥768px）：2. SM 
            3. MD：中画面デスクトップモニタ（≥992px）
            4. LG：大画面大型デスクトップモニタ（≥1200px）

    *注：
        1.グリッド線の数が12を超える場合、過剰ラップ。
        2.ラスター上位互換クラス属性。スクリーングリッドよりも大きいか、カットオフポイント装置の大きさに等しい幅のクラスが使用されます。
        3.実際の幅は、デバイスクラスの最小値は、要素が行全体でカバーされる、ラスタデバイスコード属性よりも小さい場合。

<！DOCTYPE HTML > 
< HTML LANG = "ZH-CN" > 
< 頭> 
    < メタのcharset = "UTF-8" > 
    < メタHTTP-当量= "X - UA互換" コンテンツ= "のIE =エッジ" > 
    < メタ名=「ビューポート」コンテンツ=「幅=幅デバイス、初期スケール= 1。」> 
    <！ - 3つのメタタグは、* *他のコンテンツの上に配置する必要があります* *後に従わなければなりません！- > 
    < タイトル>グリッドシステム</ タイトル> 

    <！
    href = "CSS / bootstrap.min.css" relが= "スタイルシート" > 

    <！ - jQueryの（JavaScriptのプラグインのブートストラップすべてのjQueryに依存している、それが前面に配置されなければならない）- > 
    < スクリプトSRC =「JS / jQueryの3.2.1.min.js " > </ スクリプト> 
    <！ - すべてのブートストラップJavaScriptのロードされたプラグイン。また、必要に応じて、単一のプラグインをロードすることができます。- > 
    < スクリプトSRCは= "JS / bootstrap.min.js" > </ スクリプト> 

    < スタイル> 
        .inner { 
            ボーダー：1ピクセルソリッドレッド; 
        } 
    </ スタイル>
> 
< ボディ> 
    <！ - 1.コンテナに定義- > 
    < divのクラス= "コンテナ流体" > 
        <！ - 2.定義行- > 
        < divのクラス= "行" > 
            <！ - 。3。要素定義
            大型ディスプレイグリッドラインの12 
            グリッドパッド上のライン6 
            - > 
            < DIV クラス= "COL-LG-COL 1インナー-SM-2" >グリッド</ DIV > 
            < DIV クラス=「COL- COL。1-SM-LG-2インナー" >グリッド</ DIV > 
            <div クラス= "COL-LG-1 COL-SM-2インナー" >栅格</ DIV > 
            < DIV クラス= "COL-LG-1 COL-SM-2インナー" >栅格</ DIV > 
            < DIV クラス=」 COL-LG-1 COL-SM-2インナー" >栅格</ DIV > 
            < DIV クラス= "COL-LG-1 COL-SM-2インナー" >栅格</ DIV > 
            < DIV クラス=" col- LG-1 COL-SM-2インナー」>栅格</ DIV > 
            <div クラス= "COL-LG-1 COL-SM-2インナー">栅格</ DIV > 
            < DIV クラス= "COL-LG-1 COL-SM-2インナー" >栅格</ DIV > 
            < DIV クラス= "COL-LG-1 COL-SM-2インナー" >栅格</ DIV > 
            < DIV クラス= "COL-LG-1 COL-SM-2インナー" >栅格</ DIV > 
            < DIV クラス= "COL-LG-1 COL-SM-2インナー" >栅格< / DIV > 
        </ DIV > 
    </ DIV >

</ ボディ>
</ HTML >

ブートストラップエントリ＆グリッドシステム

おすすめ