版权声明:博客知识产权来源命运的信徒,切勿侵权 https://blog.csdn.net/qq_37591637/article/details/88344932
2019.3.9修改博客
强烈建议最好不要用框架,我在后来的增删改查过程中,许多功能是实现不了,去掉框架之后就好了
第一步、下载bootstrap的框架的文件
第二步、把css js文件放在项目中
第三步、查看bootstrap教程,复制代码
第四步、代码如下
自己添加的样式my.css
.icon{
width:50%;
height: 50%;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>个人中心</title>
<!-- bootstap框架 -->
<link rel="stylesheet" href="../bcss/bootstrap.min.css" />
<script type="text/javascript" src="../script/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../script/bootstrap.min.js"></script>
<!-- bootstap框架-->
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<link rel="stylesheet" type="text/css" href="../css/my.css"/>
<style>
.empty{ text-align: center; padding: 120px 0; }
</style>
</head>
<body>
<!-- 插入 -->
<div class="container">
<span></span>
<form class="form-horizontal" role="form">
<div class="row h6" >
<div class="col-xs-1"></div>
<div class="col-xs-2">
<img src="../res/img/yhm.png" class="icon"/>
</div>
<div class="col-xs-7">
<input type="text" class="form-control" id="firstname" placeholder="手机号">
</div>
<div class="col-xs-2"></div>
</div>
<div class="row h6" >
<div class="col-xs-1"></div>
<div class="col-xs-2">
<img src="../res/img/mm.png" class="icon"/>
</div>
<div class="col-xs-7">
<input type="password" class="form-control" id="lastname" placeholder=""></div>
<div class="col-xs-2"></div>
</div>
<div class="row h6">
<div class="col-xs-3"></div>
<div class="col-xs-6"> <input type="submit" class="form-control" value="进入运筹app"></div>
<div class="col-xs-3"></div>
</div>
</form>
</body>
</html>
效果如下