bootstrap01登錄小例子
阿新 • • 發佈：2017-06-29
hicon 引入 pan itl javascrip set 用戶名 phi cnblogs
引入需要的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>
效果圖
bootstrap01登錄小例子