Flex布局和Bootstrap布局两者的比较
在Bootstrap中采用12栅格的布局，12份随意分配，但是不能解决5等分，7等分的问题。所以flex布局来协助。
bootstrap的布局方式
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row">为父容器，class声明自己在容器中占据几个。
Flex的布局方式
声明的方式如下
.Grid {
display: flex;
}
.Grid-cell {
flex:;
text-align: center;
margin:10px;
}
在html代码中，添加css的引用
<div class="Grid">
<div class="Grid-cell">
<svg id="fillgauge2" width="100%" height="200" onclick="gauge2.update(NewValue());"></svg>
<label>CPU占有率</label>
</div>
<div class="Grid-cell"> <svg id="fillgauge3" width="100%" height="200" onclick="gauge3.update(NewValue());"></svg>
<label>CPU占有率</label>
</div>
<div class="Grid-cell"><svg id="fillgauge4" width="100%" height="200" onclick="gauge4.update(NewValue());"></svg>
<label>CPU占有率</label></div>
<div class="Grid-cell"><svg id="fillgauge5" width="100%" height="200" onclick="gauge5.update(NewValue());"></svg>
<label>CPU占有率</label></div>
<div class="Grid-cell"><svg id="fillgauge6" width="100%" height="200" onclick="gauge6.update(NewValue());"></svg>
<label>CPU占有率</label></div> </div>
<div class="Grid"> 中有5个层，<div class="Grid-cell">，这5个层flex=1，然后每个层占得比例为 1/(1+1+1+1+1)
Flex比Bootstrap的布局适应性更强，因为flex是基于灵活布局，而Bootstrap是自定义宽度布局，当删除元素时这些显得尤为明显。
Flex布局和Bootstrap两者相同的设计理念
1、内部的孩子节点无margin，元素之间的空隙用padding和border进行间隔，以及box-sizding:bording-box进行宽高的界定。
2、两者都完美适配手机。
但是flex 存在严重问题，一行放4个，但是不够4个有时候不能够自适应，也要求剩余1部分。
bootstrap自适应能力不如flex布局。
经过了很长时间。我们发现了 flex布局有很强的优越性，而bootstrap不行了。
1、abc a固定，c固定，b要进行自适应。使用flex:1
2、flex不受margin-left 和margin-right的影响。而bootstrap对这块支持的特别惨。
结合京东顶部的设计。
仿照京东我们自己也做了一个。
我们提供如下的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-3.4.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link href="Reset.css" rel="stylesheet" />
<link href="Content/octicons.css" rel="stylesheet" /> <style>
#d1 {
height: 50px;
line-height: 50px;
background-color: aqua;
color: cadetblue;
display: flex;
} #d1 .left {
height: 50px;
line-height: 50px;
float: left;
padding-left: 10px;
} #d1 .center {
flex: 1;
margin-left: 20px;
margin-right: 20px;
height: 50px;
line-height: 50px;
} #d1 .right {
height: 50px;
line-height: 50px;
float: right;
padding-right: 10px;
}
</style>
</head>
<body>
<div id="d1">
<div class="left ">
扫码<i class="octicon octicon-alert"></i>
</div>
<div class="center">
<input id="Text1" type="text" class="form-control form-control-sm" style="display:inline;border-radius:20px;
padding-left: 20px;
" placeholder="请您输入......" />
</div> <div class="center" style="flex:2">
<input id="Text1" type="text" class="form-control form-control-sm" style="display:inline;border-radius:20px;
padding-left: 20px;
" placeholder="请您输入......" />
</div> <div class="right">
城市列表<i class="octicon octicon-bold"></i>
</div> </div> </body>
</html>
Flex布局和Bootstrap布局两者的比较的更多相关文章
- Bootstrap页面布局3 - BS布局以及流动布局
1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...
- 测开之路一百零六：bootstrap布局
可以在html的head里面加一些说明 <meta http-equiv="X-UA-Compatible" content="IE=edge">& ...
- 前端入门24-响应式布局（BootStrap）
声明 本篇内容摘抄自以下两个来源: BootStrap中文网 感谢大佬们的分享. 正文-响应式布局(BootStrap) 这次想来讲讲一个前端开发框架:BootStrap BootStrap 目前已经 ...
- 实现bootstrap布局的input输入框中的图标点击功能
使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标.如下图: 但是在将图标放入input输入框中,这些小图标是无法获得点击事件的 ...
- BootStrap布局案例
BootStrap布局 bootstrap 2.3版与3.0版的使用区别 http://www.weste.net/2013/8-20/93261.html 以一个博客系统的首页,来介绍如何布局 1, ...
- Bootstrap 布局
bootstrap提供的布局主要有两种,固定布局和流动布局. Bootstrap 固定布局 用法 <body> <div class="container"> ...
- Flex布局【弹性布局】学习
先让我们看看在原来的学习中遇到的问题 之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课 在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以 ...
- flex布局 响应式布局
移动端页面开发流程 移动端页面布局 一.移动端app分类 1.Native App原生app手机应用程序 使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是objec ...
- 响应式布局与bootstrap框架
原文 网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽 ...
随机推荐
- Fail2ban 配置
本例为wordpress管理员登陆限制安装rpm -Uvh http://download.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.n ...
- 自学Aruba5.3.2-Aruba安全认证-有PEFNG 许可证环境的认证配置MAC
点击返回:自学Aruba之路 自学Aruba5.3.2-Aruba安全认证-有PEFNG 许可证环境的认证配置MAC 1. MAC认证配置前言 建议把认证通过前的初始化role定义为denyall,否 ...
- 【转】typedef和#define的用法与区别
typedef和#define的用法与区别 一.typedef的用法 在C/C++语言中,typedef常用来定义一个标识符及关键字的别名,它是语言编译过程的一部分,但它并不实际分配内存空间,实例像: ...
- luogu3295 萌萌哒 (并查集+ST表)
如果给相同的位置连边,最后联通块数是n,最后答案就是$9*10^{n-1}$ 但直接连边是$O(n^2)$的 所以事先处理出一个ST表,每次O(1)地给那个ST表连边 最后再一点一点下放,就是把在这层 ...
- tesseract-ocr 识别中文扫描图片
原文链接:http://www.cnblogs.com/alex-blog/articles/2714984.html 项目主页地址:http://code.google.com/p/tesser ...
- A1032. Sharing
To store English words, one method is to use linked lists and store a word letter by letter. To save ...
- 关于chrome控制台出现代码叠加页面不能正常显示大小问题
见下图页面出现在chrome中的情况 描述状态:代码都变小了才出现控制台代码叠加问题 解决办法:使用鼠标滚轮放大代码就行啦,在设置里面让页面的大小显示为100%就可以了.
- 记录一次react相关总结
背景说明:元旦接到一个管理后台的项目,是一个关于自定义专题的项目.通过后台的配置自定义专题,前端根据专题模块进行渲染数据.由于管理后台是react做的前后分离,对于一个后端的我来说写写js也算是浅尝一 ...
- （next_permutation) 排列2 hdu 1716
排列2 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...
- Kubernetes Ingress管理
目录 Ingress介绍 1.Pod漂移问题 2.端口管理问题 3.域名分配及动态更新问题 Nginx Ingress配置 1.部署默认后端 2.部署Ingress Controller 3.部署In ...