![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHstVUZ1G-TZD2ODYdgLUGXZKNe0V8tZv0cI7mcJfFrNe7pdQ07awMVzmOTVfUOqIlhBrtyIMXGXBenPalYoNaGhK9Pi6CZyMLFUKj1BgS3JyAh55xZdJvQZaqUvfnqsRbzHRvDy-_V3f1/s200/bootstrap_logo.png)
Lets build a login/registration form using bootstrap. Its so simple just give a look at it. Its a simlified user registration form with validation and most important it gives you success message.
Download Twitter Bootstrap Project from https://github.com/twitter/bootstrap.
Download the whole code.
Bootstrap CSS :
Just include two css file bootstrap.css and bootstrap-responsive.css. You can use the url http://twitter.github.com/bootstrap/assets/css/bootstrap.css
Page Title // Registration form code.
HTML Form Code:
<form class="form-horizontal" id="registerHere" method='post' action=''> <fieldset> <legend>Registration</legend> <div class="control-group"> <label class="control-label">Name</label> <div class="controls"> <input type="text" class="input-xlarge" id="user_name" name="user_name" rel="popover" data-content="Enter your first and last name." data-original-title="Full Name"> </div> </div> <div class="control-group"> <label class="control-label">Email</label> <div class="controls"> <input type="text" class="input-xlarge" id="user_email" name="user_email" rel="popover" data-content="What’s your email address?" data-original-title="Email"> </div> </div> ............. ............. <div class="control-group"> <label class="control-label"></label> <div class="controls"> <button type="submit" class="btn btn-success" >Create My Account</button> </div> </div> </fieldset> </form>
Success:
For Success status just add "success class" to the control-group div.
Popover Information:
This is the most unique and awesome feature used in twitter bootstrap toolkit. Here you can get the title of the textfield by just calling .popover method.
Javascript:
Success Message :
Well done! You successfully read this important alert message.
I found the information in blogs are very useful. I appreciate your efforts for providing information about bootstrap. For Digital marketing solution please visit at:
ReplyDeletehttp://mixorg.com/