Bootstrap UI Template for Quick Web UI

0

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]

 

 

Nidhi Rai

Nidhi Rai

Technology Blogger at Vitalflux.com
Nidhi has been researching internet technologies for last five year or so. Her field of interest includes JavaEE, mobile technologies, UI programming such as HTML, CSS, Javascript (Angular/ReactJS etc), open-source and other related technologies.
Nidhi Rai

Leave A Reply

Time limit is exhausted. Please reload the CAPTCHA.