今天写了个关于天气的页面,他的摆放位置有点难,花了一两个小时用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>

  

最新文章

  1. 输入m乘法表
  2. 深入浅出MyBatis
  3. [转].net 缩略图方法
  4. Android 使用Okhttp/Retrofit持久化cookie的简便方式
  5. SqlSever基础 print 在消息中输出hello world
  6. lightoj 1011 (状态压缩dp)
  7. grep与正则表达式,grep、egrep和fgrep
  8. mysql查询今天、昨天、7天、近30天、本月、上一月 数据
  9. java 之 代理模式(大话设计模式)
  10. 【转】egametang框架简介
  11. 计算pi的精度+进度条显示
  12. [Python] 02 - String
  13. Kubernetes相关概念
  14. 第二阶段——个人工作总结DAY01
  15. MongoDb进阶实践之九 Mongodb的备份与还原
  16. Intel 面试(就不该报外企,英语是硬伤)
  17. hdu 1875 畅通工程再续(prim方法求得最小生成树)
  18. [转]C语言指针详解(经典,非常详细)
  19. 【system.folder】使用说明
  20. NOI2014 魔法森林 day1t2 SPFA

热门文章

  1. 对标Eureka的AP一致性,Nacos如何实现Raft算法
  2. 16. 产生Javadoc
  3. LeetCode 第七题--整数反转
  4. python 判断文件的字符编码
  5. python 进程管道
  6. [3.0] 一个人开发一个App,小程序从0到1,删减添加
  7. vue-cli3 axios解决跨域问题
  8. ImportError: Failed to import pydot. You must install pydot and graphviz for `pydotprint` to work.
  9. 云原生 - Why is istio(二)
  10. Codeforces Round #618 (Div. 2)