基于HTML5的移动Web应用——Bootstrap 样式案例
Posted xmxit
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于HTML5的移动Web应用——Bootstrap 样式案例相关的知识，希望对你有一定的参考价值。
需求说明
使用container、row等栅格系统的知识布局网页结构
使用表单元素制作登录页面
使用btn-success制作“搜索”按钮，用btn-danger制作“登录”按钮
运行效果
新梦想技术分享
参考代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title>全国公安机关互联网管理服务平台</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/myCSS.css"/>
</head>
<body>
<header>
<div class="container">
<div class="col-md-4">
<h1><img src="image/logo.png" /></h1>
</div>
<div class="col-md-6 col-md-offset-2 text-right">
<form action="#" class="form-inline head_form ">
<input type="search" class="form-control" placeholder="请输入要搜索的内容"/>
<input type="button" class="btn btn-success" value="搜索"/>
</form>
<ul class="list-inline">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">公共查询</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">政策法规</a></li>
<li><a href="#">通知公告</a></li>
<li><a href="#">备案须知</a></li>
<li><a href="#">备案展厅</a></li>
</ul>
</div>
</div>
</header>
<section>
<div class="container">
<div class="row">
<div class="col-md-8">
<img src="image/xcy.png" />
<br/>
<img src="image/liucheng.png" />
</div>
<div class="col-md-4 formMain">
<h2>普通用户</h2>
<form action="#">
<div class="form-group form-horizontal">
<span class="col-md-3 text-center">用户名：</span>
<div class="col-md-9">
<input type="text" class="form-control"/>
</div>
</div>
<br/>
<div class="form-group form-horizontal">
<span class="col-md-3 text-center">密码：</span>
<div class="col-md-9">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group" >
<div class="col-md-6 col-md-offset-3">
<input type="checkbox"/>
记住密码
</div>
</div>
<div class="form-group ">
<div class="col-md-8 col-md-offset-3">
<a href="#" class="btn btn-danger form-control">登录</a>
</div>
</div>
<div class="form-group ">
<div class="col-md-6 col-md-offset-3">
<p><a href="#">没有账号，注册</a></p>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer class="text-center">
<p>Copyright2015 公安部网络安全保卫局 All Rights Reserved</p>
<p>邮箱：support@beian.gov.cn</p>
<p> 京公网安备 11010102002019号 建议使用1024*768以上分辨率浏览</p>
</footer>
</body>
</html>
myCSS.css
body
font-family: "Helvetica Neue",Helvetica,Microsoft Yahei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif!important;
.head_form
margin: 20px;
.active a
color: #da001c;
section
background: url("../image/adbg.png") 0 0 no-repeat;
width: 100%;
height: 385px;
h2
font-size: 16px;
.formMain
margin-top: 50px;
background: #fff;
border-radius: 8px;
.form-group
padding-top: 20px;
footer
background: rgba(204, 204, 204, 0.6);
padding: 20px;
使用原生导航编写基于 Web 的移动应用程序是不是可行？
【中文标题】使用原生导航编写基于 Web 的移动应用程序是不是可行？【英文标题】：Is it viable to write a web-based mobile app with native navigation?使用原生导航编写基于 Web 的移动应用程序是否可行？ 【发布时间】：2015-06-17 06:42:00 【问题描述】：我正在为 Android 和 iOS 编写一个移动应用程序。我对 Javascript、HTML 和 CSS 非常有经验；因此我想用这些语言编写大部分应用程序。然而，应用程序不同“区域”之间的基本导航将通过本机导航完成——这将是 Android 上的 Java 和 iOS 上的 Swift。这是一种可行的方法吗？应用商店和市场通常接受这类应用吗？这种方法的优缺点是什么？
谢谢
【问题讨论】：
【参考方案1】：您可以使网站看起来像一个 android 应用程序，然后使用视图 WebView。 Webviews 显示应用程序中的站点。 有关 WebView 的信息，请访问 developer.android.com/reference/android/webkit/WebView.html
【讨论】：
以上是关于基于HTML5的移动Web应用——Bootstrap 样式案例的主要内容，如果未能解决你的问题，请参考以下文章