"Busca de imóveis para bootstrap"
Bootstrap 3.3.0 Snippet by Jorgedev

Post to Facebook Tweet this

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 ---------->
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class="container">
<section class="row">
<h2>Busca de imóveis para bootstrap</h2>
</section>
</div>
<div class="container buscar">
<section class="row">
<div class="col-md-4 esquerda">
<h3>Localize seu <br><span class="up">Imóvel</span></h3>
</div>
<div class="col-md-8 direita">
<form action="" method="get" style="padding-top: 20px">
<div class="form-group col-md-4">
<label>Finalidade</label>
<a class="btn btn-primary btn-select btn-select-light">
<input type="hidden" class="btn-select-input" id="" name="" value="teste" />
<span class="btn-select-value">Select an Item</span>
<i class='btn-select-arrow fa fa-suitcase'></i>
<ul>
<li>Comprar</li>
<li class="selected">Alugar</li>
</ul>
</a>
</div>
<div class="form-group col-md-4">
<label>Tipo</label>
<a class="btn btn-primary btn-select btn-select-light">
<input type="hidden" class="btn-select-input" id="" name="" value="" />
<span class="btn-select-value">Select an Item</span>
<i class='btn-select-arrow fa fa-home'></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
.buscar{
background: #195B7D none repeat scroll 0 0;
min-height: 200px;
}
.buscar h3{
color: #fff;
font-weight: 400;
font-family: 'montserrat';
text-transform: uppercase;
text-align: center;
}
.buscar .up{
color: #fff;
font-weight: 900;
font-family: 'montserrat';
text-transform: uppercase;
white-space: pre;
font-size: 48px;
}
.buscar label{
color: #fff;
font-family: 'montserrat';
font-size: 10px;
float: right;
}
.esquerda{
background: #95c41f none repeat scroll 0 0;
min-height: 200px;
line-height:0;
}
.custom__select {
border: none;
border-radius: 2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.btn-select {
position: relative;
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
$(document).ready(function () {
$(".btn-select").each(function (e) {
var value = $(this).find("ul li.selected").html();
if (value != undefined) {
$(this).find(".btn-select-input").val(value);
$(this).find(".btn-select-value").html(value);
}
});
});
$(document).on('click', '.btn-select', function (e) {
e.preventDefault();
var ul = $(this).find("ul");
if ($(this).hasClass("active")) {
if (ul.find("li").is(e.target)) {
var target = $(e.target);
target.addClass("selected").siblings().removeClass("selected");
var value = target.html();
$(this).find(".btn-select-input").val(value);
$(this).find(".btn-select-value").html(value);
}
ul.hide();
$(this).removeClass("active");
}
else {
$('.btn-select').not(this).each(function () {
$(this).removeClass("active").find("ul").hide();
});
ul.slideDown(300);
$(this).addClass("active");
}
});
$(document).on('click', function (e) {
var target = $(e.target).closest(".btn-select");
if (!target.length) {
$(".btn-select").removeClass("active").find("ul").hide();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard React

Questions / Comments: