Input groups are the extended Form Controls in Bootstrap. It
can be used to quickly prep ended and append texts/buttons to text based
inputs. By adding the prep ended and appended content to an input field, common
elements can be added to the user’s input. For prep ending and appending
elements to a .form-control, <div >is wrapped with the class .input-group
and .input-group-add-on.
Example:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8"/>
<title>Bootstrap </title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<header class="jumbotron text-center">
<h2>Welcome to Nirajanghimirey'sworkshop</h2>
<p>Example of Input groups</p>
</header>
<div style="padding: 100px 100px 10px;">
<form class="input-group input-group-lg">
<span class="input-group-addon">Email</span>
<input type="text" class="form-control" placeholder="example@nirajanghimireyworkshop.blogspot.com">
</form>
<br/>
<form class="input-group input-group-lg">
<span class="input-group-addon">Password</span>
<input type="password" class="form-control" placeholder="password">
</form>
<br/>
<div class="input-group"> <span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span> </div>
<br/>
<form class="bs-example bs-example-form" role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group"> <span class="input-group-btn">
<button class="btn btn-default" type="button"> Search! </button>
</span>
<input type="text" class="form-control">
</div>
</div>
<br/>
<form class="bs-example bs-example-form" role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"> Menu <span class="caret"> </span> </button>
</form>
<ul class="dropdown-menu">
<li><a href="#">Submit</a></li>
<li><a href="#">Reset</a></li>
<li><a href="#">Exit</a></li>
</ul>
</div>
<input type="text" class="form-control">
</form>
</div>
<!-- /input-group -->
</div>
<!-- /input-group-btn -->
</div>
<!-- /col-lg-6 -->
</div>
<!-- /row -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html> 
No comments:
Post a Comment