运维人员简单了解些web页面的编写是有必要的，后面几篇从记录一些算是学习或摘录的简单web页面的实现方法。本篇就结合bootstrap + php实现一个简单的用户注册的页面代码。具体实现效果如下图：
一、代码结构
具体代码结构如下：
[root@361way registration]# tree . ├── css │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── fonts │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ └── glyphicons-halflings-regular.woff ├── js │ ├── bootstrap.js │ └── bootstrap.min.js └── registration.php
二、HTML结构类
这里实现页面代码的主要是registration.php文件，而里面基本全是html 代码，其中html 代码分以下模块类：
class="navbar navbar-inverse navbar-fixed-top" class="container" class="navbar-header" class="navbar-toggle" class="navbar-collapse collapse" class="navbar-form navbar-right" class="form-group" class="form-control" class="rows" class="col-xs-6" class="form-horizontal" class="form-control input-lg" class="form-inline" class="form-control input-sm" class="radio"
三、php代码
php代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<link href="" rel="shortcut icon">
<title>Registration form</title><!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="well">
<form action="register.php" class="form-horizontal well" method="post">
<fieldset>
<legend>Register Now</legend>
<h4>It’s free and always will be.</h4>
<div class="row">
<div class="col-xs-8">
<div class="form-group">
<div class="rows">
<div class="col-md-8">
<div class="col-lg-6">
<input class="form-control input-lg" id="fName" name="fName" placeholder="First Name" type="text">
</div>
<div class="col-lg-6">
<input class="form-control input-lg" id="lName" name="lName" placeholder="Last Name" type="text">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="rows">
<div class="col-md-8">
<div class="col-lg-12">
<input class="form-control input-lg" id="email" name="email" placeholder="Your Email" type="email">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="rows">
<div class="col-md-8">
<div class="col-lg-12">
<input class="form-control input-lg" id="reemail" name="reemail" placeholder="Re-enter Email" type="text">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="rows">
<div class="col-md-8">
<div class="col-lg-12">
<input class="form-control input-lg" id="password" name="password" placeholder="New Password" type=
"password">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="rows">
<div class="col-md-8">
<h4>
<div class="col-md-3">
<label class="col-lg-4 control-label">Birthday</label>
</div>
<div class="col-lg-3">
<select class="form-control input-sm" name="month">
<option>Month</option>
<?php
$m = array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
foreach ($m as $month) {
echo '<option value='.$month.'>'.$month.'</option>';
}
?>
</select>
</div>
<div class="col-lg-3">
<select class="form-control input-sm" name="day">
<option>Day</option>
<?php
$d = range(31, 1);
foreach ($d as $day) {
echo '<option value='.$day.'>'.$day.'</option>';
}
?>
</select>
</div>
<div class="col-lg-3">
<select class="form-control input-sm" name="year">
<option>Year</option>
<?php
$years = range(2020, 1900);
foreach ($years as $yr) {
echo '<option value='.$yr.'>'.$yr.'</option>';
}
?>
</select>
</div>
</h4>
</div>
</div>
</div>
<div class="form-group">
<div class="rows">
<div class="col-md-4">
<div class="col-lg-6">
<div class="radio">
<label><input checked id="optionsRadios1" name="optionsRadios" type="radio" value="Female">Female</label>
</div>
</div>
<div class="col-lg-6">
<div class="radio">
<label><input id="optionsRadios2" name="optionsRadios" type="radio" value="Male"> Male</label>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="rows">
<div class="col-md-8">
<div class="col-lg-12">
<button class="btn btn-success btn-lg" type="submit">Register</button>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div><!-- /container -->
</body>
</html>bootstrap可以到bootstrap官网下载。
全部代码可以到我的github页面查看 。
《bootstrap+php实现注册页面》有1条评论