在本次实习项目中,我负责的是系统的网页前端开发。为了实现开发的快速和高效,我们选择了结合Bootstrap框架来进行前端开发。
在以前的其他项目中,我对Bootstrap有过初步的接触,但了解并不深入,使用也不熟练。因此,我先花费了一些时间对Bootstrap框架进行了比较全面的学习,参考的教程是http://www.runoob.com/bootstrap/bootstrap-tutorial.html 【 Bootstrap教程|菜鸟教程】。
接下来的内容是记录一些Bootstrap教程中我认为比较常用或者有记忆价值,以后可能还会需要查阅的内容。
1.适应不同的移动设备的屏幕尺寸
<meta name="viewport" content="width=device-width, initial-scale=1.0">name="viewport"是固定的书写
content中 width=device-width表明网页的宽度将被设置为该移动设备的屏幕宽度
initial-scale=1.0表示初始网页缩放比为1:1,也就是没有任何缩放。
通常情况下,为了使得用户不能随意缩放屏幕大小,只能通过滚动屏幕来浏览网页内容,我们通常会在content中加入下列两个属性设置:
maximum-scale=1.0
user-scalable=no
通过设定最大缩放比和设置用户禁用缩放功能,我们就可以让用户只能选择上下滑动来浏览网页,这种方式是当前大多数适配移动设备的网页会采用的,因为这样浏览起来会让用户觉得原生的网页就是这个样子的,也不会因为误操作改变网页的布局和画面。
在html文件中具体写法如下:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
2.网页中图片文件的自适应
在网页中我们通常会用到许多图片文件,当在实现相册等需要用到不止一张图片的功能时,我们通常需要使图片保持一致的尺寸或大小,或者在不同的设备上,网页中的图片显示不同的大小。
Bootstrap中提供了img-responsive类用于实现图片的自适应。
样例代码如下:
<img src="..." class="img-responsive" alt="自适应图像">这个类的具体属性如下:
.img-responsive { display: inline-block; height: auto; max-width: 100%; }可以看到,该类设置了图像的 max-width属性为 100%, height自动,实现了图像的按比例缩放并且不超过它的父元素的尺寸。
从属性设置中我们可以看出,为了实现图像的自适应,其父元素也必须是自适应的,否则在不同的设备上并不能实现图像的自适应缩放。
举例如下:
html中代码:
<div class="container"> <div class="logo"> <img src="img/img01.png" class="img-responsive" /> </div> </div>
因为Bootstrap中没有logo这个类,因此也没有设定它的宽度和高度。
若自己在css文件中定义logo类如下:
.logo { width: 500px; }那么图片是无法实现对不同设备的屏幕大小自适应的。
应该修改为类似为下面的代码实现
.logo { width: 50%; }
3.Bootstrap网格系统的使用
网格系统是Bootstrap最重要的特点之一。
使用注意点有以下几点:
1.行必须放在.container class里面,以获得适当的对齐方式和内边距
2.只有列可以是行的直接子元素,内容应该放在列中
3.预定义的网格类可以帮助快速创建网格,比如.col-xs-3
4.网格的列数是随着屏幕尺寸的增加自动增多的,最多有12列
4.媒体查询
Bootstrap默认是没有媒体查询的,因为该框架的设计就是响应式的。而媒体查询的作用也是针对不同的屏幕尺寸,使某些元素展现特定的式样和属性,也就是我们常说的手机适配问题。
媒体查询的代码通常在css文件中这样书写:
@media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }