bootstrap+php实现注册页面

运维人员简单了解些web页面的编写是有必要的，后面几篇从记录一些算是学习或摘录的简单web页面的实现方法。本篇就结合bootstrap + php实现一个简单的用户注册的页面代码。具体实现效果如下图：



<img src="https://www.361way.com/wp-content/uploads/2015/05/registration.png" alt="registration" width="270" height="250" class="alignnone size-full wp-image-4467" />



<br />

一、代码结构

具体代码结构如下：

[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 代码分以下模块类：



<br />

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代码如下：



<br />

    
    
    
    
    
    
    
    




    

    

      
Register Now
      
It’s free and always will be.
         

            

            

            

                

                    

                        
                    
                    

                        
                    
                
            
        
        

            

                

                    

                        
                    
                
            
        
        

            

                

                    

                        
                    
                
            
        
        

            

                

                    

                        
                    
                
            
        
        

            

                

                    

                    

                        Birthday
                    
                    

                        
                            Month
                            '.$month.'';
                                }
                            ?>
                        
                    
                    

                        
                            Day
                        '.$day.'';
                            }
                        ?>
                        
                    
                    

                        
                            Year
                        '.$yr.'';
                            }
                        ?>
                        
                    
                    
                
            
        
        

            

                

                    

                        

                            Female
                        
                    
                    

                        

                             Male
                        
                    
                
            
        
        

            

                

                    

                        Register
                    
                
            
        
        
        
        
    

bootstrap可以到<a href="http://getbootstrap.com/" target="_blank" rel="noopener">bootstrap官网</a>下载。



全部代码可以到我的<a href="https://github.com/361way/php/tree/master/registration" target="_blank" rel="noopener">github页面</a>查看 。