admin管理员组文章数量:1531754
一、响应式布局定义
定义:
响应式布局:简单来说就是根据浏览设备不同,自动改变布局,图片,文字效果等。。不会影响用户浏览体验。
响应式网页必须要注意的事情:
- 不能固定元素的宽度,必须是流式布局 (默认文档流 + 浮动);
- 文字和图片随着容器的大小改变;
- 媒体查询技术;
- 过于复杂的页面不适合响应式;
媒体查询:css3
media 媒体 浏览网页的设备 screen (pc / pad / phone )
media Query 媒体查询 :可以根据当前的浏览设备的不同(包括尺寸、方向)有选择性的执行一部分css样式,忽略其他样式。
浏览设备的定义:
- pc >= 992 大屏 一行显示4个div(200*200);
- 768 <= pad <= 991 中屏 一行显示2个div(h:200);
- phone <= 767 小屏 一行显示一个div(h-200);
css样式中的注意要点:
- cursor: pointer; 点击按钮 手型
- float: left; 向左浮动
- 待续
二、bootstrap框架
bootstrap封装好很多常用的样式,只需要调用类名,但是项目中,对于很多样式,需要自己手写和媒体查询。
注意:导入四个包的时候顺序不能乱
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
(1)bootstrap支持四种分辨率:
- 大屏幕lg (>=1200px);
- 中等屏幕md (>=992px);
- 小屏幕sm (>=768px);
- 超小屏幕xs (<768px);
bootstrap默认字体大小 0.25rem (1 rem = 16px );
button样式:与 btn 混用;
- btn-primary 主要的 蓝色;
- btn-success 绿色;
- btn-warning 黄色;
- btn-outline-success 透明绿色;
<div class="container">
<h1>按钮相关的样式</h1>
<button class="btn btn-primary">按钮</button>
<input type="button" value="成功" class="btn btn-success">
<a href="" class="btn btn-info">信息</a>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-dark">按钮</button>
<button class="btn btn-light">按钮</button>
<button class="btn btn-outline-danger">按钮</button>
<button class="btn btn-outline-secondary">按钮</button>
<button class="btn btn-outline-success">按钮</button>
<button class="btn btn-outline-warning">按钮</button>
<hr />
<button class="btn btn-outline-success btn-lg">按钮</button>
<button class="btn btn-outline-success btn-block">按钮</button>
<button class="btn btn-outline-success btn-sm">按钮</button>
</div>
(2)图片样式:
- rounded 0.25rem圆角;
- rounded-circle 圆角50% -圆形图片;
- img-thumbnail 缩略图 有一圈边框;
- img-fluid 响应式图片 图片会缩放 不会超过原始大小;
<h1>图片相关的样式</h1>
<img src="img/1.png" class="rounded">
<img src="img/2.png" class="rounded-circle">
<img src="img/3.png" class="img-thumbnail">
<img src="img/3.png" class="img-fluid">
(3)文字样式:
- text-danger/warning/success/info 文本颜色;
- text-uppercase/lowercase 大小写;
- text-capitalize 首字母大写;
- font-weight-normal/light/weight 正常/加细/加粗;
- .h1 - .h6 不同字体;
- text-left/right/center/justify 文字水平对齐方式 左 右 中 两端 对齐;
<div class="text-danger text-capitalize font-weight-normal text-left">lorem ipsum dolor sit amet,consectetur adipisicing elit.
blanditiis cum esse et facere iste reiciendis reprehenderit?
Assumenda, eum fugit id incidunt maiores nostrum numquam, odit officiis omnis quae quisquam suscipit?</div>
(4)列表相关:
- list-unstyled 去掉小圆点 左内边距清零;
- list-group 列表组(放在ol ul) list-group-item 列表项(放在li) list-group-item-warning/dangger/success 列表项颜色;
- acive 激活项 disabled 禁用项
<h1>列表相关</h1>
<ul class="list-unstyled list-group">
<li class="list-group-item-danger list-group-item disabled">111</li>
<li class="list-group-item-danger list-group-item">222</li>
<li class="list-group-item-danger list-group-item">333</li>
<li class="list-group-item-danger list-group-item">444</li>
<li class="list-group-item-danger list-group-item active">555</li>
</ul>
(5)表格样式:
- table 对table本身和后代的布局
- table-bordered 为自己和后代添加边框线
- table-primary/success/info… 表格颜色
- table-striped 隔行变色
- table-hover 鼠标悬停变色
- table-responsive 响应式表格 写在table的父元素上
<div class="container table-responsive">
<h1>表格相关</h1>
<table class="table table-bordered table-hover">
<tr class="table-primary">
<td>序号</td>
<td>名称</td>
<td>类型 </td>
</tr>
<tr>
<td>1001</td>
<td>java</td>
<td>java</td>
</tr>
<tr>
<td>1002</td>
<td>web前端</td>
<td>web前端</td>
</tr>
<tr>
<td>1003</td>
<td>软件体系结构</td>
<td>软件工程</td>
</tr>
</table>
</div>
(6)边框类型:
- border 基本类 border-0 清楚边框
- border-info/success 边框颜色
- border-left/top/right/button 单边设置
- border-left-0 单边消除
<h1>边框相关</h1>
<div class="border border-info border-left-0">1111111111111111111</div>
<div class="border ">2222222222222222222</div>
(7)浮动类型:
- float-xl/md/sm/lg-left/right/none 响应式浮动
- clearfix 清除浮动 写在父元素上
<h1>浮动相关样式</h1>
<div class="border float-lg-left float-md-right">1111111111111111111</div>
<div class="border float-lg-left float-md-right">2222222222222222222</div>
(8)显示与隐藏:
- visible 显示
- invisible 隐藏
- bg-primary/warning…背景色
- rounded 圆角 0.25rem
- rounded-0 去掉圆角
- rounded-top 上左+上右
- rounded-left/bottom/right 上左+下左/下左+下右+上右+下右
- m-auto 水平居中
<h1>显示与隐藏</h1>
<div class="visible bg-danger rounded">3333333333</div>
<div class="
版权声明:本文标题:前后端分离---响应式布局---bootstrap网页开发 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1725736472a1039781.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论