"thêm kh"
Bootstrap 4.1.1 Snippet by mkhiem

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css"> <!-- Website CSS style --> <link rel="stylesheet" type="text/css" href="assets/css/main.css"> <!-- Website Font style --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> <!-- Google Fonts --> <link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'> </head> <body> <div class="container"> <div class="row main"> <div class="panel-heading"> <div class="panel-title text-center"> <h3 class="title">Thêm khách hàng</h3> <hr/><hr/> </div> </div> <div class="main-login main-center"> <form class="form-horizontal" method="post" action="#"> <div class="form-group"> <label for="name" class="cols-sm-2 control-label">Tên khách hàng</label> <div class="cols-sm-10"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span> <input type="text" class="form-control" name="name" id="name" placeholder="Nhập tên khách hàng"/> </div> </div> </div> <div class="form-group"> <label for="email" class="cols-sm-2 control-label">Email</label> <div class="cols-sm-10"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span> <input type="text" class="form-control" name="email" id="email" placeholder="Nhập Email"/> </div> </div> </div> <div class="form-group"> <label for="phone" class="cols-sm-2 control-label">Số điện thoại</label> <div class="cols-sm-10"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i></span> <input type="text" class="form-control" name="phone" id="email" placeholder="Nhập số điện thoại"/> </div> </div> </div> <label for="sex" class="cols-sm-2 control-label">Giới tính</label> <div class="cols-sm-10"> <label class="checkbox-inline"><input type="checkbox" value="">Nam</label> <label class="checkbox-inline"><input type="checkbox" value="">Nữ</label> </div> <div class="form-group"> <label for="phone" class="cols-sm-2 control-label">Địa chỉ</label> <div class="cols-sm-10"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-home" aria-hidden="true"></i></span> <input type="text" class="form-control" name="home" id="home" placeholder="Nhập địa chỉ"/> </div> </div> </div> <div class="form-group"> <label for="phone" class="cols-sm-2 control-label">Ghi chú</label> <div class="cols-sm-10"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-book" aria-hidden="true"></i></span> <input type="text" class="form-control" name="note" id="note" placeholder="Nhập ghi chú"/> </div> </div> </div> <div class="form-group "> <button type="button" class="btn btn-primary btn-lg btn-block them-button">Thêm</button> </div> <div class="dong-register"> <a href="index.php">Đóng</a> </div> </form> </div> </div> </div> <script type="text/javascript" src="assets/js/bootstrap.js"></script> </body> </html>
body, html{ height: 100%; background-repeat: no-repeat; font-family: 'Oxygen', sans-serif; } .main{ margin-top: 70px; } h1.title { font-size: 50px; font-family: 'Passion One', cursive; font-weight: 400; } hr{ width: 10%; color: #fff; } .form-group{ margin-bottom: 15px; } label{ margin-bottom: 15px; } input, input::-webkit-input-placeholder { font-size: 11px; padding-top: 3px; } .main-login{ background-color: #fff; /* shadows and rounded borders */ -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); } .main-center{ margin-top: 30px; margin: 0 auto; max-width: 330px; padding: 40px 40px; } .them-button{ margin-top: 5px; } .dong-register{ font-size: 16px; text-align: center; }

Related: See More

Vue Material Kit

Questions / Comments: