Github代码地址

bootstrap01登录小例子

引入需要的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>

效果图

 

posted @ 2017-01-09 10:25  @小葱拌豆腐  阅读(1465)  评论(0)  编辑  收藏  举报

霸气