使用Bootstrap框架制作简易登录界面
从学校出来到在软件公司工作已经快三个月了,终于要转正了,在公司实习期间也学习了很多东西,比如正好总结一下。下面介绍的是如何使用Bootstrap制作一个简易登录界面。
一 使用Bootstrap网页模板
我提供的模板是Bootstrap 4,这个模板是我在学习途中,总结出来的,可以套用,在创建模板的过程中,需要注意两点:第一,要下载Bootstrap的相关样式,第二,导入相关jQuery的插件。
//
<!doctype html>
<html lang="zh-cmn-Hans">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
注意:当我们引入Bootsrap.js和jQuery.js文件要注意引入该文件的先后顺序,要先引入jQuery.js再引入Bootstrap.js,否则就会报错。因为Bootstarp.js文件的开发是基于jQuery开发的,所以要先引入jQuery.js才可以使用Bootstrap。
二 使用BootStrap模板制作登录界面
制作好模板之后,就可以在中插入内容。
下面插入我已经写好的一个demo。直接插入body中。
// An highlighted block
<div class="container">