响应式设计Bootstrap任务二应用框架做网页快速,并且十分的方便,节约时间。
首先看看最终的效果效果:
里面的布局全部都是由bootstrap提供,咱们直接应用,这样节省了许多时间,对自己不满意样式可以进行更改直接进行覆盖,修改部分样式。我们来看看引入bootstrap框架。
使用 BootCDN 提供的免费 CDN 加速服务(同时支持 http 和 https 协议)
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
要做这个项目:
1. 设置背景颜色
2. 使用布局容器带有.container类的<div>标签进行布局,在该<div>中添加一个<div class=“reservation”>,为该<div>标签设置宽度(width)和较大的padding值来实现表单白色透明背景(rgba(255,255,250,0.8))。
3. 白色背景div.reservation中添加Bootstrap水平表单(通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。),并且删掉表单中没有用到的<label>等标签。
4. 通过.btn类来修改Bootstrap按钮的默认样式。
5. 使用媒体查询,在屏幕小于768px时,让表单外层的<div>在小屏幕时拥有足够的宽度来显示完整的表单,并且设置body、button、 input、 select元素的字体为微软雅黑。
下面来看看具体的实现代码部分:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<style>
body {
background: url(one.jpeg);
background-size: 100%;
background-repeat: no-repeat;
}
.one1 {
display: flex;
justify-content: center;
}
.one {
margin-top: 20%;
width: 400px;
padding: 50px;
background-color: rgba(233, 233, 219, 0.7)
}
.two {
background-color: #ffffff;
opacity: 1;
}
</style>
</head>
<body>
<div class=>
<div class="container one1">
<div class="reservation one">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-10 ">
<input type="email" class="form-control two" id="inputEmail3" placeholder="请输入餐厅名称">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 ">
<input type="password" class="form-control two" id="inputPassword3" placeholder="请选择城市">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset- col-sm-10 col-xs-offset-3 col-xs-offset-5">
<button type="submit" class="btn btn-danger col-sm-5 col-xs-8"> <span
class="glyphicon glyphicon-search" aria-hidden="true"> </span> 搜索</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>