Layout header with search bar
Description
The following code shows how to layout header with search bar.
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<style type='text/css'>
span.view-title {<!-- w w w. jav a 2 s. c o m-->
font-size: 24px;
color: #999999;
font-weight: normal !important;
line-height: 30px;
}
.view-header {
background-color: #f5f5f5;
width: 100%;
margin-bottom: 20px;
padding: 10px 20px 10px 20px;
border-bottom: solid 1px #bbbbbb;
}
</style>
</head>
<body style='margin:30px'>
<div class="view-header">
<span class="view-title">Header</span>
<div class="pull-right">
<a
style="line-height: 30px; margin-right: 20px; vertical-align: bottom; float: left;">
<span class="pointer">more options</span>
</a>
<form class="form-inline pull-left"
placeholder="client"
css-class="input-xxlarge">
<input class="input-xxlarge ng-dirty" type="text"
placeholder="place holder"
ng-model="model">
<button disabled="disabled" class="btn btn-info" type="submit">
<i class="icon-search"></i> Search
</button>
</form>
</div>
<div class="clearfix"></div>
<div class="pull-right"></div>
<div class="clearfix"></div>
</div>
</body>
</html>