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添加高度属性,如下图:

重启应用,问题解决:

Bootstrap 使用小记的更多相关文章

  1. bootstrap插件小记

    1.模态框 除了通过data-toggle和data-target来控制模态弹出窗之外,Bootstrap框架针对模态弹出框还提供了其他自定义data-属性,来控制模态弹出窗.比如说:是否有灰色背景m ...

  2. 使用bootstrap table小记(表格组件)

    前言 新的一年悄然到来,生活依旧.最近一周大热的赵雷风,一首<成都>,一首<理想>再次把民谣展示在国人面前.歌词着实写的不错. 理想,你今年几岁 你总是诱惑着年轻的朋友 你总是 ...

  3. bootstrap table使用小记

    bootstrap table是一个非常不错的,基于bootstrap的插件,它扩展和丰富了bootstrap表格的操作,如格式化表格,表格选择器,表格工具栏,分页等等. 最近基于bootstrap开 ...

  4. bootstrap基础学习小记(三)网格简介

    网格系统:网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统.Bootst ...

  5. bootstrap基础学习小记(二)排版、列表、代码风格、表格

    排版——标题.副标题.段落(正文文本).强调内容.粗体.斜体.强调相关的类.文本对齐 <!DOCTYPE HTML> <html> <head> <meta ...

  6. bootstrap基础学习小记(一)简介模板、全局样式

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  7. bootstrap框架中data-toggle="tab"属性会取消a标签默认行为

    这几天做公司项目用了bootstrap框架,在用导航组件的过程中,我发现在a标签里面添加data-toggle="tab"属性之后,这个a标签会失去默认行为,点击a标签的时候不会跳 ...

  8. Cnblog页面美化小记

    Cnblog页面美化小记 这两天我在网上翻找了许许多多的资料,打开了不计其数的博客,对着\(js\).\(html\).\(css\)等文件删删改改,在浏览器和\(vscode\)间辗转腾挪...总算 ...

  9. Sass 主要知识点小记

    Sass 主要知识点小记 以前写样式的时候,每个元素的颜色,背景色都需要重新写一遍,然后就想CSS难道没有变量么?最后就查到Sass.但当时没有静下心来好好的看一下,今天正好有时间,就在这里边看边整理 ...

随机推荐

  1. java.lang.Excetion,java.lang.RuntimeException,java.lang.Error有什么区别?

    Error类对象由Java虚拟机生成并抛出,Exception类对象由应用程序处理或抛出 Error表示恢复不是不可能但很困难的情况下的一种严重问题.比如说内存溢出.不可能指望程序能处理这样的情况. ...

  2. java.util.Date 与 java.sql.Date

    java.sql.Date 继承 java.util.Date 区别: 1.java.sql.Date 一般用于数据库 2.java.sql.Date 没有时分秒,涉及时分秒的函数都会报异常(且这些方 ...

  3. fail-fast 与 fail-safe

    fail-fast: fail-fast(快速失败),是Java集合的一种错误检测机制.当在遍历集合的过程中该集合在结构(改变集合大小)上发生变化时候,有可能发生fail-fast(快速失败行为不能得 ...

  4. mybatis框架的第二天

    一.mybatis的基础crud的操作 先在接口中,写对应的方法名称,返回类型,访问符. 之后在映射配置文件中,写具体的实现 二.mybati中crud的细节 1.模糊查询 这是接口中 这是xml中 ...

  5. 高质量代码优化!谈谈重构项目中if-else代码的几点建议

    switch if - else只适合在3层之内使用 当条件判断较多时,可以首先考虑使用switch interface 当判断条件还可能动态增加时,可以考虑将switch进一步优化,引入接口inte ...

  6. python使用笔记28--unittest单元测试框架

    单元测试:开发程序的人自己测试自己的代码 unittest自动化测试框架 1.单元测试 unittest框架,执行的顺序是按照方法名的字母来排序的 setUpClass方法是最开始执行的 tearDo ...

  7. C++11 左值引用和右值引用与引用折叠和完美转发

    1.左值与右值 最感性的认识. 当然,左值也是可以在右边的. 左值是可以被修改的,右值不能. 当然取地址也是. 生存周期一般左值会比右值的长,一般右值都计算时产生的无名临时对象,存在时间比较短. 下面 ...

  8. [考试总结]noip模拟13

    因为最近考试频繁,所以咕掉了好长时间... 淦,刚说完又来一场... 先咕了,等以后有时间再写.... 回来了... 首先看到这个题目们,感觉就不存好意... 然后开始开 \(T1\). 只能蒻蒻地按 ...

  9. 第七篇 -- 常用界面组件的使用(QSlider和QProgressBar)

    首先画个图 ui_proBar.py # -*- coding: utf-8 -*- # Form implementation generated from reading ui file 'ui_ ...

  10. Tree Widget -- 基本方法

    Tree Widget这个空间类似于一种表格的形式,是一种树状结构 效果图: 第一步:打开designer.exe,拖动一个Tree Widget空间到主窗口上 第二步:双击Tree Widget,添 ...