The article presents copy and paste bootstrap code that one could take and get started with quick UI.
Personally, as a Java developer, I use it very often to create quick UI without focusing much on the UI details. From there on, I keep on adding further UI elements as and when required. You could get code samples from Bootstrap UI website.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hello World</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<header class="navbar navbar-static-top" id="top" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
<a href="/" class="navbar-brand">WebSiteName</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li><a href="#">Simple Link</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown">DropDown Link<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Link1</a></li>
</ul></li>
</ul>
</nav>
</div>
</header>
<form class="form-horizontal" role="form" method="post" action="#">
<div class="form-group">
<label class="col-md-2 control-label">First Name</label>
<div class="col-md-2">
<input type="text" class="form-control" name="first_name">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Country</label>
<div class="col-md-2">
<select class="form-control" name="Country">
<option value="1">India</option>
<option value="2">UK</option>
<option value="3">USA</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-4" style="padding:10px 0px 0px 250px">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</body>
</html>
[adsenseyu1]
Latest posts by Nidhi Rai (see all)
- Book: First principles thinking for building winning products - April 19, 2022
- Free AI / Machine Learning Courses at Alison.com - November 16, 2021
- 12 Weeks Free course on AI: Knowledge Representation & Reasoning (IIT Madras) - November 14, 2021
I found it very helpful. However the differences are not too understandable for me