Bootstrap手机端下拉菜单（铺满）


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><title>4-list页面</title><link rel="stylesheet" href="../frameworks/bootstrap-3.3.0-dist/css/bootstrap.css"><script src="../frameworks/jquery-2.1.4/jquery.js"></script><script src="../frameworks/bootstrap-3.3.0-dist/js/bootstrap.js"></script><!--自定义--><link rel="stylesheet" href="css/index.css"><link rel="stylesheet" href="css/common.css"><script src="js/index.js"></script><style>/*下拉列表*/
.condition>.choice>.dropdown-menu{width: 100%;border-radius: 0;border-top:none;padding-top: 0;margin-top: 0;
}
.list-box>.col-dropdown>.condition>.choice{/*让col-xs-3默认 static 定位可以让下拉列表铺满*/position: static;}
.list-box>.col-dropdown>.condition>.choice a{padding: 2px 10px;
}
.list-box>.col-dropdown>.condition>.choice a.current{color:#39ac6a;
}.choice>ul>li>a>.checkLabel{width: 100%;font-weight: normal;cursor: pointer;
}
.choice>ul>li>a>.checkLabel>input{float: right;
}
.choice>ul.dropdown-menu li{border-bottom: 1px solid #e4e4e4;line-height: 32px;
}
.choice>ul.dropdown-menu>li.item-btn{padding: 5px 10px;border: none;
}
.choice>ul.dropdown-menu>li.item-btn>button{background-color:#39ac6a;border-radius: 0;
}</head>
<body><div class="container-fluid list-box"><div class="row list-one"><div class="col-xs-8 list-left"><div class="pull-left"><a href="#"><img src="data:images/4-list_logo_01.png" alt=""></a></div><div class="header-btn dropdown pull-left"><a class=" dropdown-toggle" data-toggle="dropdown">上海  <span class="glyphicon glyphicon-chevron-down"></span></a><ul class="dropdown-menu"><li><a href="#">北京</a></li><li><a href="#">广州</a></li><li><a href="#">广州</a></li></ul></div></div><div class="col-xs-4 list-right"><ul class="list-unstyled pull-right text-center"><li><a href="#"><span class="glyphicon glyphicon-download"></span></a></li><li><a href="#">app</a></li></ul><ul class="list-unstyled pull-right text-center"><li><a href="#"><span class="glyphicon glyphicon-user"></span></a></li><li><a href="#">我的</a></li></ul></div></div><!--搜索框--><section><div class="row search-box"><div class="input-group search-group"><input type="text" class="form-control" placeholder="请输入小区或者板块名"><label  class="input-group-addon"><span class="glyphicon glyphicon-search"></span></label></div></div></section><!--条件--><section class="col-dropdown"><div class="row text-center condition dropdown"><div class="col-xs-3 choice"><a href="#" data-toggle="dropdown">区域 <span class="caret"></span></a><!--下拉菜单1--><ul class="dropdown-menu"><li><a href="#"><label class="checkLabel">不限<input type="checkbox"></label></a></li><li><a href="#"><label class="checkLabel">黄浦区<input type="checkbox"></label></a></li><li><a href="#"><label class="checkLabel">虹口区<input type="checkbox"></label></a></li><li><a href="#"><label class="checkLabel">青浦区<input type="checkbox"></label></a></li><li><a href="#"><label class="checkLabel">徐汇区<input type="checkbox"></label></a></li><li class="item-btn"><button class="btn btn-success btn-block">确定</button></li></ul></div><div class="col-xs-3 choice"  ><a href="#" data-toggle="dropdown">总价 <span class="caret"></span></a><!--下拉菜单2--><ul class="dropdown-menu"><li><a href="#"><label class="checkLabel">不限<input type="checkbox"></label></a></li><li><a href="#"><label class="checkLabel">500万以下<input type="checkbox"></label></a></li><li><a href="#"><label class="checkLabel">500万~1000万<input type="checkbox"></label></a></li><li><a href="#"><label class="checkLabel">1000万以上<input type="checkbox"></label></a></li><li class="item-btn"><button class="btn btn-success btn-block">确定</button></li></ul></div><div class="col-xs-3 choice"  ><a href="#"  data-toggle="dropdown">户型 <span class="caret"></span></a><!--下拉菜单3--><ul class="dropdown-menu"><li><a href="#"><label class="checkLabel">不限<input type="checkbox"></label></a></li><li><a href="#"><label class="checkLabel">一室<input type="checkbox"></label></a></li><li><a href="#"><label class="checkLabel">二室<input type="checkbox"></label></a></li><li><a href="#"><label class="checkLabel">三室<input type="checkbox"></label></a></li><li class="item-btn"><button class="btn btn-success btn-block">确定</button></li></ul></div><div class="col-xs-3 choice last"><a href="#" data-toggle="dropdown">更多 <span class="caret"></span></a><!--下拉菜单4--><ul class="dropdown-menu"><li><a href="#" data-toggle="collapse" data-target="#col-menu"><label class="checkLabel">不限<input type="checkbox"></label></a></li><li><a href="#"><label class="checkLabel">发布时间<input type="checkbox"></label></a></li><li><a href="#"><label class="checkLabel">面积大小<input type="checkbox"></label></a></li><li><a href="#"><label class="checkLabel">楼层<input type="checkbox"></label></a></li><li class="item-btn"><button class="btn btn-success btn-block">确定</button></li></ul></div></div></section><section><!--第四部分开始--><div class="row hot-house"><!--头部--><div class="list-header">热门房源</div><div class="list-content"><div class="media"><div class="media-left"><a href="#"><img src="data:images/list_01.png" alt="房源图片"></a></div><div class="media-body"><div class="media-heading"><a href="#">成熟社区，闹中取静</a></div><div class="daxiao"><p href="#">2室1厅 75m² 南</p><p href="#">东里新村</p><span>143万</span></div><div class="three-label"><nav class="label label-primary">满五</nav><nav class="label label-warning">地铁房</nav><nav class="label label-primary">有钥匙</nav></div></div></div><div class="media"><div class="media-left"><a href="#"><img src="data:images/list_01.png" alt="房源图片"></a></div><div class="media-body"><div class="media-heading"><a href="#">成熟社区，闹中取静</a></div><div class="daxiao"><p href="#">2室1厅 75m² 南</p><p href="#">东里新村</p><span>143万</span></div><div class="three-label"><nav class="label label-primary">满五</nav><nav class="label label-warning">地铁房</nav><nav class="label label-primary">有钥匙</nav></div></div></div><div class="media"><div class="media-left"><a href="#"><img src="data:images/list_01.png" alt="房源图片"></a></div><div class="media-body"><div class="media-heading"><a href="#">成熟社区，闹中取静</a></div><div class="daxiao"><p href="#">2室1厅 75m² 南</p><p href="#">东里新村</p><span>143万</span></div><div class="three-label"><nav class="label label-primary">满五</nav><nav class="label label-warning">地铁房</nav><nav class="label label-primary">有钥匙</nav></div></div></div></div></div><!--第四部分结束--></section><!--第四部分结束--><br><br><br><br><br><!--尾部开始--><div class="row foot-bg"><div class="foot-left col-xs-1"><a href="#">&times</a></div><div class="foot-center col-xs-10"><div class="media"><div class="media-left"><a href="#"><img style="height: 40px; width: 40px" src="data:images/list_01.png" alt="房源图片"></a></div><div class="media-body"><div class="media-inner"><a href="#">成熟社区，闹中取静</a></div><div class="media-inner"><a href="#">成熟社区，闹中取静</a></div></div></div></div><div class="cols-xs-1 foot-right"><button class="btn btn-success foot-btn">立即下载</button></div></div></div>
</body>
</html>

Bootstrap手机端下拉菜单（铺满）相关推荐

html手机端下拉菜单代码,jQuery手机移动端下拉列表选择代码
js代码 $(function(){ $('.retrie dt a').click(function(){ var $t=$(this); if($t.hasClass('up')){ $(&quo ...
Bootstrap风格jQuery下拉菜单插件
下载地址一款漂亮的Bootstrap风格jQuery下拉菜单插件,可以被附加到任何你想要的元素,可以添加一些表单控件,也可以使用CSS添加图标插入,还可以有固定的HTML. dd:
Bootstrap组件_下拉菜单
下拉菜单<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...
Bootstrap系列 -- 26. 下拉菜单标题
Bootstrap下拉菜单中使用 dropdown-header 来显示菜单标题,和上一篇说道的分割线一样 <div class="dropdown"><butt ...
bootstrap下拉框分页_【Bootstrap】 bootstrap-select2下拉菜单插件
这次开发了个小TRS系统,虽然是很小,但是作为初心者,第一次用到了很多看起来洋气使用起来有相对简单的各种前端(主要是和bootstrap配合使用)组件.包括bootstrap-select2,boot ...
Bootstrap创建按钮下拉菜单
按钮下拉菜单下拉菜单组件是一个独立的组件,可以将页面上的任何元素(如,按钮.导航等)和下拉菜单进行组合,让相应的元素具有下拉功能. 如果把按钮和下拉菜单进行组合,并让按钮充当下拉菜单的开关,就可以实 ...
bootstrap分割式下拉菜单显示不全
[背景] 最近在研究bootstrap,在实现分割的按钮下拉菜单时,遇到这样一个问题,按钮和下拉菜单不对齐.大小不一样,见下图: [解决方式] 需要加一句<!DOCTYPE html>,h ...
bootstrap网格系统，下拉菜单
网格系统实现原理把网页大小分为12份,仅仅通过定义容器大小,平分12份,再调整内外边距,最后结合媒体查询,就可以制作出响应式栅格系统栅格系统用于一系列的含(row)和列(column)的组合来创建 ...
bootstrap:按钮，下拉菜单
'btn':加按钮样式 btn-small btn-large:调整按钮大小 btn-primary....:调整按钮风格 btn-group:声明这是一个按钮组 <span class='ca ...

Bootstrap手机端下拉菜单（铺满）

Bootstrap手机端下拉菜单（铺满）相关推荐

最新文章

热门文章