Fork me on GitHub

Bootstrap3

Bootstrap 3 的设计目标是移动设备优先,然后才是桌面设备。这实际上是一个非常及时的转变,因为现在越来越多的用户使用移动设备。

CSS 概括

移动设备

为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta标签,如下所示:

1
<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.0user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。

范例:

1
2
3
4
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">

响应式图像

通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好

实例:

1
<img src="..." alt="响应式图像测试" class="img-responsive" />
1
2
3
4
5
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}

解释:

  • display 属性设置为 block,以块级元素显示。
  • 设置 height:auto:相关元素的高度取决于浏览器。
  • 设置 max-width100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。

Bootstrap 容器

流体容器

可使得元素在网页缩放时,像挡板一样,随着页面变化而变化

设置:

1
2
3
<div class="container-fluid">
<!--code here-->
</div>

width: auto

固定容器

含有阈值:

  • 大于等于1200(lg, 大屏pc), width : 1170 (1140 + 槽宽)
  • 大于等于992,小于1200(md, 中屏pc), width : 970(940 + 槽宽)
  • 大于等于768,小于992(sm, 平板), width : 750 (720 + @grid-gutter-width)
  • 小于768(xs, 移动设备), width : auto

栅格系统

1.流体容器与固定容器公共样式

1
2
3
4
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;

grid-gutter-width // 槽宽 – 文本之间的距离

2.固定容器 特定样式

1
2
3
4
5
6
7
8
9
@media (min-width: @screen-sm-min) {
width: @container-sm;
}
@media (min-width: @screen-md-min) {
width: @container-md;
}
@media (min-width: @screen-lg-min) {
width: @container-lg;
}

3.

1
2
margin-left: -15px;
margin-right: -15px;

4.

1
2
3
.make-grid-columns() -->

.make-grid(xs)--->
喜欢的可以对我小额打赏哦,鼓励小编推出更多优质内容~

本文标题:Bootstrap3

文章作者:Keithx的博客~

发布时间:2018年08月06日 - 22:08

最后更新:2018年10月05日 - 23:10

原始链接:http://edmath.cn/前端-Bootstrap3.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%
;