引入需要的bootstrap文件
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>登录界面</title> <!--01.引入需要的css样式文件--> <link rel="stylesheet" href="css/bootstrap.css"> <!--02.引入我们的jQuery库--> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <!--03.引入bootstrap的js库--> <script type="text/javascript" src="js/bootstrap.js"></script> </head> <body> <!--container:我们的代码写在这个容器中 就会具有一些样式--> <div class="container"> <!--设置字体图标 class="glyphicon glyphicon-user"--> <h1 class="page-header"><span class="glyphicon glyphicon-user"></span> 用户登录</h1> <form class="form-horizontal"> <div class="form-group"> <div class="col-md-5"> <input type="text" class="form-control" placeholder="请输入用户名/email"> </div> </div> <div class="form-group"> <div class="col-md-5"> <input type="text" class="form-control" placeholder="请输入密码"> </div> </div> <div class="form-group"> <div class="col-md-5"> <input type="button" class="btn btn-primary btn-block" value="登录"> </div> </div> </form> </div> </body> </html>
效果图
