今天写了个关于天气的页面,他的摆放位置有点难,花了一两个小时用bootstrap来摆放,但是感觉bug很多
所以今天写下自己的心得,放上代码,以后这种就知道怎么写了
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> <div class="row"> <!--<div class="col-md-1 col-lg-1"></div>--> <div class="col-xs-5 col-sm-5 col-md-5 col-lg-3" id="zonghe_tianqi"> <div class="media"> <div class="media-left" id="zonghe_left"> <a href="#"> <i class="iconfont icon-qing"></i> </a> </div> <div class="media-body" id="zonghe_body"> <h5 class="media-heading">晴</h5> <span>38℃</span> </div> </div> </div> <div class="col-md-3 col-lg-3" id="zonghe_ledong"> <span>乐东</span> </div> </div> </div>
其次就是三横三竖的排版,也搞懂了,就是用三个排版布局就可以了
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
<div>
<img src="img/zonghe_1.png" class="img-responsive"/>
</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" class="img-responsive"/>
</div>
<div>
<p>设备名称:电磁水表</p>
<p>瞬时流量</p>
<p>压力:xxxx</p>
<p>水质:xxxx</p>
<p>安装日期:xxxx</p>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div id="allmap"></div>
<div id="allmap_p">
<p>2019年1月1日 1时1分 东口路水表电量低报警</p>
<p>2019年1月1日 1时1分 东口路水表瞬时流量超高限报警</p>
<p>2019年1月1日 1时1分 东口路水表压力超低限报警</p>
<p>2019年1月1日 1时1分 东口路水表水质超标报警</p>
<p>......</p>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-2" id="zonghe_right">
<div>
<p>大客户用水排名对比</p>
</div>
<div>
<img src="img/zonghe_3.png" class="img-responsive"/>
</div>
<div>
<p>分区漏损统计图</p>
</div>
<div>
<img src="img/zonghe_4.png" class="img-responsive"/>
</div>
<div>
<p>压力排名统计图</p>
</div>
<div>
<img src="img/zonghe_5.png" class="img-responsive"/>
</div>
</div>