用bootstrap来放置天气和图标的位置 自适应
2024-09-11 09:35:04
今天写了个关于天气的页面,他的摆放位置有点难,花了一两个小时用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>
最新文章
- 输入m乘法表
- 深入浅出MyBatis
- [转].net 缩略图方法
- Android 使用Okhttp/Retrofit持久化cookie的简便方式
- SqlSever基础 print 在消息中输出hello world
- lightoj 1011 (状态压缩dp)
- grep与正则表达式,grep、egrep和fgrep
- mysql查询今天、昨天、7天、近30天、本月、上一月 数据
- java 之 代理模式(大话设计模式)
- 【转】egametang框架简介
- 计算pi的精度+进度条显示
- [Python] 02 - String
- Kubernetes相关概念
- 第二阶段——个人工作总结DAY01
- MongoDb进阶实践之九 Mongodb的备份与还原
- Intel 面试(就不该报外企,英语是硬伤)
- hdu 1875 畅通工程再续(prim方法求得最小生成树)
- [转]C语言指针详解(经典,非常详细)
- 【system.folder】使用说明
- NOI2014 魔法森林 day1t2 SPFA
热门文章
- 对标Eureka的AP一致性,Nacos如何实现Raft算法
- 16. 产生Javadoc
- LeetCode 第七题--整数反转
- python 判断文件的字符编码
- python 进程管道
- [3.0] 一个人开发一个App,小程序从0到1,删减添加
- vue-cli3 axios解决跨域问题
- ImportError: Failed to import pydot. You must install pydot and graphviz for `pydotprint` to work.
- 云原生 - Why is istio(二)
- Codeforces Round #618 (Div. 2)