bootstrap注意事项

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: " ";
}

4.栅格