適応配置と天気アイコンを使用してブートストラップ

今日は、少し難しい彼の配置、天気についてのページを書き、それは場所にブートストラップを使用するために12時間かかりましたが、それはバグの多くを感じています

だから、今日彼らの経験を書き留め、将来的にコードを置くこれは書く方法を知っているだろう

< DIV クラス= "COL-XS-3 COL-SM-3 COL-MD-3 COL-LG-3" > 
                    < DIV クラス= "行" > 
                        <！ - <DIV CLASS = "COL-MD-1 COL -lg-1 "> </ div> - > 
                        < DIV クラス=" COL-XS-5 COL-SM-5 COL-MD-5 COL-LG-3" ID = "zonghe_tianqi" > 
                            < DIV クラス=」メディア」> 
                                < divのクラス= "メディア・左" ID = "zonghe_left" > 
                                    < HREF = "＃" > <I クラス= "iconfontアイコン-清" > </ I >
                                        
                                    </ A > 
                                </ divの> 
                                < divのクラス= "メディア・ボディ" ID = "zonghe_body" > 
                                    < H5 クラス= "メディアの見出し" >晴</ H5 > 
                                    < スパン> 38℃ </ スパン> 
                                </ divの> 
                            </ DIV > 
                        </ DIV > 
                        < DIV クラス= "COL-MD-3 COL-LG-3" ID = "zonghe_ledong" > 
                            < スパン>Ledong </ スパン>
                        </ DIV > 
                    </ DIV > 
                </ DIV >

第2の3の水平および垂直方向の3つのレイアウトですが、また知ってもらう、それはそれで3つの組版レイアウトを使用することです

<DIV CLASS = "COL。3-XS-SM-COL。3-COL-MD-2。3-COL-LG"> 
					の<div> 
						<IMG SRC = "IMG / zonghe_1.png"クラス= "IMG応答性" /> 
					</ DIV> 
					<DIV ID = "zonghe_dedtail"> 
						<P>名前の水：水</ P> 
						<P>消費：XXXX </ P> 
						<P>薬の消費量：XXXX </ P> 
						<P >抽象化：XXXX </ P> 
						<P>水出力：XXXX </ P> 
					</ div> 
					<div>の
						<IMG SRC = "IMG / zonghe_2.png"クラス= "IMG応答性" /> 
					</ divの> 
					<div> 
						<P>装置：電磁メートル</ P> 
						<P>瞬時流量</ P> 
						<P>圧力：XXXX </ P>
						<P>水：XXXX </ P> 
						<P>インストール日：XXXX </ P> 
					</ div> 
				</ div>  
				<divのクラス=「COL-XS- 6 COL-SM-6 COL-MD-6 COL。。。 -lg-6「>
					<divのID = "allmap"> </ div>
					<DIV上記ID = "allmap_p"> 
						<P-> 2019インディアン1越1イーストハウロードメータ低バッテリ警報でRiを1市1 </ P-> 
						<P-> 2019インディアン1越1 Riを1市1イーストハウロードメータ瞬間を超高流量アラームリミット</ P-> 
						<P-> 2019インディアン1越1 Riを市1点東ハウロードメータ超低圧アラームリミット</ P-> 
						<P-> 2019インディアン1越1 Riを市1点イーストポート水道メーター道路アラーム</ P> 
						<P> ...... </ P> 
					</ div> 
				</ div> 
				<divのクラス=「COL。3-XS-SM-COL-COL。3. 3-MD- LG-2-COL "ID =" zonghe_right "> 
					の<div> 
						<比較ランキングの水をアカウント> P </ P> 
					</ div> 
					<div>の
						<IMG SRC =" IMG / zonghe_3.png "クラス=" IMG-応答「/> 
					</ div> 
					<div>の
						<p型>パーティション漏れチャート</ P>
					</ div> 
					<div>の 
						<p型>圧力のランキングチャート</ p型> 
					</ div> 
						<IMG SRC = "IMG / zonghe_4.png"クラス= "IMG応答性" />
					</ div> 
					<div>の
					<div> 
						<IMG SRC = "IMG / zonghe_5.png"クラス= "IMG応答性" /> 
					</ div> 
				</ div>