"tab search switch"
Bootstrap 3.3.0 Snippet by luismacayo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="col-md-12" id="loquesea">
<div class="col-md-5" id="buscador-home">
<div class="col-md-2" id="tab-home">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="text-center active"><a href="#hotel" aria-controls="hotel" role="tab" data-toggle="tab"><i class="fa fa-bed" aria-hidden="true"></i> Hoteles</a></li>
<li role="presentation" class="text-center"><a href="#tour" aria-controls="tour" role="tab" data-toggle="tab"><i class="fa fa-binoculars" aria-hidden="true"></i> Tours</a></li>
<li role="presentation" class="text-center"><a href="#transfer" aria-controls="transfer" role="tab" data-toggle="tab"><i class="fa fa-taxi" aria-hidden="true"></i> Traslados</a></li>
</ul>
</div>
<div class="col-md-10" id="content-home">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="hotel">
<form method="post" id="hotel-form">
<div class="form-group has-feedback col-md-12">
<label for="query_hoteles">Hotel o Destino</label>
<input type="hidden" id="by_hotel" name="by" value="">
<input type="hidden" id="id_hotel" name="id" value="">
<input type="text" class="form-control" id="query_hoteles" placeholder="Hotel, Destino, Ciudad, localidad..." aria-describedby="helpQuery" value="">
<i class="fa fa-building-o form-control-feedback"></i>
<span id="helpQuery" class="help-block hidden">Debes seleccionar algun Hotel o Destino</span>
</div>
<div id="event_period">
<div class="form-group has-feedback col-md-6">
<label for="">Desde</label>
<input type="text" class="form-control actual_range" name="in" id="checkin_tour" placeholder="yyyy-mm-dd">
<i class="fa fa-calendar form-control-feedback"></i>
</div>
<div class="form-group has-feedback col-md-6">
<label for="">Hasta</label>
<input type="text" class="form-control actual_range" name="out" id="checkout_tour" placeholder="yyyy-mm-dd">
<i class="fa fa-calendar form-control-feedback"></i>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.container {
background-color: blue;
}
#loquesea {
position:relative;
}
#buscador-home {
position: absolute;
top: 40px;
left: 5px;
z-index: 1000;
}
/*Estidlo buscador Home*/
.form-control-feedback {
text-align: inherit;
}
#buscador-home .col-md-* {
padding-left: 0px
}
#buscador-home .nav > li > a {
position: relative;
display: block;
width: 100%;
background-color: rgba(255,255,255,0.9);
/*padding: 5px 10px;*/
}
#content-home {
padding-left: 0px;
background-color: rgba(255,255,255,0.9);
-webkit-border-radius: 25px;
-webkit-border-top-left-radius: 0;
-moz-border-radius: 25px;
-moz-border-radius-topleft: 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: