Bootstrap 使用小记
2024-10-20 16:49:05
1,使用Bootstrap做页面布局,使用card容器
<div class="card">
<div class="card-header">
发货数据
</div>
<div class="card-body">
<form enctype="multipart/form-data" method="post" asp-page-handler="import">
<input type="file" name="excelFile" />
<input type="submit" value="导入" />
</form>
</div>
</div>
默认效果如下图:
导入按钮默认位置偏左侧,不太美观,特别是选择文件后,文件名无法显示完整。最好按钮偏右一些。
<div class="card">
<div class="card-header">
发货数据
</div>
<div class="card-body">
<form enctype="multipart/form-data" method="post" asp-page-handler="import">
<input type="file" name="excelFile" />
<input type="submit" value="导入" style="float:right;margin-right:30%"/>
</form>
</div>
</div>
给按钮添加样式,使用
style="float:right;margin-right:30%"
靠右侧,边距30%,完美解决问题。
2,想测试一下大屏的布局,常规网格系统没办法划分不同大小的布局,幸好Bootstrap的Flex组件可以解决这个问题,使用Flex组件可以实现下图效果:
代码:
<div class="d-flex flex-row" style=" height: 400px;border:2px solid #ae00e6">
<div region="west" class="west" style="width: 140px;">
西
</div>
<div region="center" class="center flex-fill">
中
</div>
<div region="east" class="east" style="width: 140px;">
东
</div>
</div>
详见疯狂秀才的博客 基于bootstrap 4.x 中的flex 布局
3,大数据展示大屏需要和显示器的尺寸匹配才能展示出最佳效果,主流显示器都是1920*1080的分辨率,布局好大屏页面后,下面会留有一块空白,F12调试模型可以发现 Html页面的高度尺寸为1130,已经大于我的需求。
解决办法:在样式文件中,给html添加高度属性,如下图:
重启应用,问题解决:
最新文章
- css兼容性大坑
- 前端代码标准最佳实践:CSS
- Java中length,length(),size()区别
- MVC ASP.net流程 源代码分析
- ASP.NET MVC5--Contains
- ExtJs4学习MVC中的Store
- Qt窗口部件及子部件
- ZeroMQ/jzmq安装使用
- 谈谈分布式事务之三: System.Transactions事务详解[下篇]
- HDOJ 3516 Tree Construction
- django框架中的中间件
- angular4.0使用sass
- html块级元素与行内元素
- java POI导出Excel文件数据库的数据
- 【Beta阶段】第九次Scrum Meeting!(论坛已成功上线)
- suse 12 sp1 系统添加zabbix agent监控
- go语言使用go-sciter创建桌面应用(七) view对象常用方法,文件选择,窗口弹出,请求
- 一个日志模板,从traceback打印异常受启发做的模板,可被pycharm esclip 等ide识别和跳转
- selenium-java,暂停功能
- Firefox开发