bootstrap_响应式_CSS

最新推荐文章于 2025-02-04 22:22:48 发布

Mr_Chao1791

最新推荐文章于 2025-02-04 22:22:48 发布

阅读量1k

点赞数

分类专栏： notes

本文链接：https://blog.csdn.net/Andrexc/article/details/90379853

版权

notes 专栏收录该内容

24 篇文章

订阅专栏

一.响应式布局

1.什么是响应式布局

Responsive web page 响应式/自适应网页可以根据浏览设备不同（pc，pad，phone）
而自动改变布局，图片文字效果，不会影响用户浏览体验

2.响应式网页必须做下面几件事

①布局，不能固定元素宽度，必须是流式布局（默认文档流+浮动）

②文字和图片大小随容器的大小改变

③媒体查询技术

响应式网页存在的问题：代码复杂程度几何性的增加

复杂玩网页，不适合使用响应式

3.如何测试响应式网页

①使用真实设备（好处：真实可靠，缺点：成本高，测试任务巨大）

②使用第三方模拟软件测试（好处：不需要太多真实设备测试方便，缺点：测试效果有限，有待进一步验证）

③使用chrome等浏览器自带的模拟软件（好处：简单方便，缺点：测试效果十分有限，需要进一步验证）

4.编写响应式布局（重点****）

1.手机适配，设置视口,在meta中声明viewport元标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

在 content中编写参数：

width=device-width，设置视口宽度为设备宽度

initial-scale=1.0，设置视口宽度能否缩放，1.0 不能缩放

maximum-scale=1.0，允许缩放的最大倍率

user-scalable=0，是否允许用户手动缩放，0 不能

最简洁的写法：

2.所有的内容/文字/图片/都使用相对尺寸，不能使用绝对值

3.流式布局+弹性布局+媒体查询完成响应式布局

4.媒体查询，css3中 Media Query，做响应式必备技术

Media：媒体，不同的用于浏览网页的设备

screen(pc/pad/phone) TV/print

Media Query：可以自动根据当前浏览器设备的不同（尺寸，方向，解析度.....），有选择性的执行一部分css样式，而忽略其他样式

pc：>=992 大屏， @media screen and (min-width:992px){ }

phone：768<=width<992 中屏, @media screen and(min-width:768px) and( max-width:991px){}

<768 小屏 @media screen and (max-width:767px){ }

语法总结：

@media screen and (min-width:768px) and (max-width:991px){
.content { background:#000;color:#fff; }

}

二:BootStrap

boot给我们封装好很多的样式，以类名的形式让我们调用

但是在项目中，对于很多样式我们还是需要手写样式和媒体查询

BootStrap内容分为5部分

1.如何使用boot

2.全局css

3.组建

4.js插件

5. sass 定制

6.boot项目

1.如何使用boot

2.全局CSS

  container：定宽容器，每种不同分辨率下，给了写死的max-width值，
           boot支持4种分辨率： xl-lg-md-sm （超大屏，大屏，中屏，小屏）
                 boot 的默认字号大小是1rem， 1rem=16px

container-fluid：变宽容器，根据不同的设备分辨率，宽度为他的100%

①.按钮相关的class

.btn 基本类，所有的按钮，都需要添加class.btn

按钮颜色		不同边框的按钮
btn-success	绿色	btn-outline-success	绿色边框
btn-danger	红色	btn-outline-danger	红色边框
btn-warning	黄色	btn-outline-warning	黄色边框
btn-primary	主要的蓝色	btn-outline-primary	主要的蓝色边框
btn-secondary	次要灰色	btn-outline-secondary	次要灰色边框
btn-info	信息青色	btn-outline-info	信息青色biank
btn-dark	深色	btn-outline-dark	深色边框
btn-light	浅色	btn-outline-light	浅色biank
btn-link	链接

按钮的大小
btn-sm	小按钮
btn-lg	大按钮
btn-block	块级按钮

②.图片相关

rounded	圆角 0.25rem
rounded-circle	圆形--50%圆角
img-thumbnail	缩略图，有一圈白色边(padding)
img-fluid	响应式图片，图片会缩放，但不会超过原始大小

③.文字相关

.h1~.h6	字号大小，同h1~h6标签
text-danger/warning/success/info....	字体颜色
text-uppercase/lowercase/capitalize	所有字母大写，小写，首字母大写
font-weight-bold/light/normal	字体加粗，细，正常
text-left/right/center/justify	文字水平对齐方式
text-*-left/center.right	响应式 *:sm/md/lg/xl(小/中/大/超大)

④.列表相关

list-unstyled	去掉点，左内边距清0
ul.list-group>li.list-group-item	创建列表组和列表项
.list-group-item.active	激活项
.list-group-item disabled	禁用项
list-group-item-danger/warning/info......	列表项颜色

⑤.table相关的样式

.table (基本类)	对table本身和table的后代布局
.table-bordered	一个有边框的表格.为自己和后代添加边框
table-danger/warning/success/info...	表格颜色
table-striped	隔行变色
table-hover	带鼠标悬停效果的表格
table-responsive-xl/lg/md/sm	响应式表格写在table的父元素上

⑥.辅助类（所有的辅助类）

1.边框

border/border-0 （基本类）	定义边边框，取消边框
border-left/top/right/bottom	单边设置
border-left-0	单边框清0，去掉单边框
border-danger/warning...	边框颜色

2.浮动

float-xl/lg/md/sm-left/right/none	响应式浮动
clearfix	清除浮动（解决高度坍塌），写在父元素

3.显示

visible/invisible 显示/隐藏

4.背景颜色

bg-danger/warning/success/primary.....

5.圆角

rounded/rounded-0 圆角0.25rem/去掉圆角

rounded-top/right/bottom/left 一个方向的圆角设置

rounded-circle 50%

6.内外边距

paddin

p-n
p	pt	pr	pb	pl	px	py
padding	p-上	右	下	左	左右	上下
n	0	1	2	3	4	5
	0.25rem	0.5rem	1rem	1.5rem	3rem	3rem

margin

m-n
m	mt	mr	mb	ml	mx	my
	上	右	下	左	左右	上下
n	0	1	2	3	4
	0.25rem	0.5rem	1rem	1.5rem	2rem	3rem

*:xl/lg/md/sm 响应式 *：p/m mt-lg-3 mt-sm-1

m-auto 水平居中

m/mt/mr/mb/ml/mx/my-*-0/1/2/3/4/5 外边距

0 0.25 0.5 1 1.5 3

p/pt/pr/pb/pl/px/py-*-0/1/2/3/4/5 内边距

*:xl/lg/md/sm

mt-lg-3 mt-sm-1

7.尺寸

宽度： w-n (n:25/50/75/100) mw-100 (max-width)

高度： h-n (n:25/50/75/100) mh-100 (max-height)

如果需要其它尺寸，需要手写css

⑦.栅格布局

1．页面中的布局方式（一般三种）

table布局	div+css	Boot中的栅格布局
简单，易控制	语义正确，渲染效率高	简单，易控制，语义正确，渲染效率高，支持响应式
语义错误，渲染效率低	控制起来很麻烦	不适用于复杂的页面