欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

bootstrap注意事项

程序员文章站 2022-03-02 08:23:53
bootstrap注意事项1.适配//width 属性控制设备的宽度。网站被带有不同屏幕分辨率的设备浏览,将它设置为 device-width 可以确保它能正确呈现在不同设备上。initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。//在移动设备浏览器上,添加 user-scalable=no 可以禁用其缩放...

bootstrap注意事项

1.适配

//width 属性控制设备的宽度。网站被带有不同屏幕分辨率的设备浏览,将它设置为 device-width 可以确保它能正确呈现在不同设备上。initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0">

//在移动设备浏览器上,添加 user-scalable=no 可以禁用其缩放(zooming)功能。maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让网站看上去更像原生应用的感觉。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2.响应式图片

//可以让图片按等比例进行缩放,并不超过父元素的尺寸
.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

3.Container

//这会产生伪元素。设置 display 为 table,会创建一个匿名的 table-cell 和一个新的块格式化上下文。:before 伪元素防止上边距崩塌,:after 伪元素清除浮动。
.container:before,
.container:after {
  display: table;
  content: " ";
}

本文地址:https://blog.csdn.net/qq_44929535/article/details/110851209

相关标签: css bootstrap