版权声明:转载请附上文章地址 https://blog.csdn.net/weixin_38134491/article/details/86410195
Bootstrap 3 的设计目标是移动设备优先,然后才是桌面设备。
Bootstrap 确保移动端适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上
- initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放
- 在移动设备浏览器上,通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放(zooming)功能
- 通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。
响应式图像
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
<img src="..." class="img-responsive" alt="响应式图像">
类表明图像呈现为 inline-block。当把元素的 display 属性设置为 inline-block,元素相对于它周围的内容以内联形式呈现,但与内联不同的是,这种情况下我们可以设置宽度和高度。
基本的全局显示
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
排版
使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。
扫描二维码关注公众号,回复:
4896835 查看本文章
链接样式
通过属性 @link-color 设置全局链接的颜色
避免跨浏览器的不一致
Bootstrap 使用 Normalize 来建立跨浏览器的一致性
Normalize.css 是一个很小的 CSS 文件,在 HTML 元素的默认样式中提供了更好的跨浏览器一致性(引入文件)
容器 container
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
<div class="container">
...
</div>