您的位置:首页 - 教程 - Bootstrap - 正文
bootstrap01登录小例子
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>用户登录</title>
    <!--01.引入bootstrap的css级联样式表-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!--02.引入bootstrap需要的jquery文件-->
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <!--03.引入bootstrap需要的js文件-->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container">
       <h1 class="page-header">用户登录</h1>
       <form class="form-horizontal">
           <div class="form-group">
               <div class="col-md-5">
                   <input type="text" class="form-control" placeholder="请输入用户名/emali">
               </div>
           </div>
           <div class="form-group">
               <div class="col-md-5">
                   <input type="password" class="form-control" placeholder="请输入密码">
               </div>
           </div>
           <div class="form-group">
               <div class="col-md-5">
                   <input type="button"  class="btn btn-primary" value="登录">
               </div>
           </div>
       </form>
   </div>

</body>
</html>
登陆

效果图


评论: