iphone网页即移动端浏览器全覆盖开发专栏 - 步骤2 -- 使用标准脚本和CSS样式再加换个按钮的效果

您的位置：首页 >> iphone网页即移动端浏览器全覆盖开发专栏 >> >> 主题: 步骤2 -- 使用标准脚本和CSS样式再加换个按钮的效果

标题

步骤2 -- 使用标准脚本和CSS样式再加换个按钮的效果

clq

浏览(366) - 2016-06-04 12:27:09 发表编辑

关键字:

[2016-06-04 12:42:40 最后更新]
步骤2 -- 使用标准脚本和CSS样式再加换个按钮的效果

在这一部分的教程中说得还有些复杂,总结下来要使用标准 Bootstrap 后可以得到手机与pc统一的视学样式,方法可以统一为:
1.使用标准 html5 标题头 <!DOCTYPE html>
可以看到这个头比 html4 和所谓推荐的 html div 样式要简洁多了.

2.调动设备优先的方式

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

参考 http://www.runoob.com/bootstrap/bootstrap-css-overview.html

3.引入 Bootstrap 的标准样式及脚本代码,特别的是,对于简单的应用不需要把这些文件放我们自己的网站上,可以直接引用一些公开的免费链接,简单又节省了流量费用.
例如:
    
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

    
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>

    
    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

    
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

教程说样式表一般不用,不过我用着也挺好的,以后再换吧.

4.经过一番整理后可以直接使用这样的标准文件头:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

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

<title>标题</title>

    
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

    
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>

    
    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

    
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>

<body>

--------------------------------------------------
以下是一些要点的解释:
如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型（Doctype），您可能会面临一些浏览器显示不一致的问题，甚至可能面临一些特定情境下的不一致，以致于您的代码不能通过 W3C 标准的验证。

clq

2016-06-04 12:40:14 发表编辑

[图片]

这部分的一些理论还是比较复杂的,大家可以不用理那么多,直接用我整理后的标准文件头即可.
修改前后效果变化还是非常巨大的,如图(而且还兼容了手机):

clq

2016-06-04 12:42:40 发表编辑

什么,你的页面没变化! 好吧,我忘了你控件还要加上 class 类别,对 input 直接加 class="form-control" 就行了.
对于按钮我加的是 class="btn btn-primary"
这些都是 Bootstrap 的标准名称. 按钮还可以有多种选择,详细在
http://www.runoob.com/bootstrap/bootstrap-buttons.html
可参考一下.当然了这和自定义的样式不会冲突,例如我另外加了 CSS 设置其高度,也是可以用的.

NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.