bootstrap仿地址管理
精要；
<!--列表-->
<div class="list-group-item">
<p class="list-group-item-text">
<!--信息-->
<div class="row">
<!--第一列-->
<div class="col-md-1">
<span> 订单信息</span>
</div>
<!--第二列-->
<div class="col-md-11 row">
<!-- 第一行-->
<div class="col-md-4">
<div class="col-md-12">
订单编号：<span id="dingdnanum"> 1524142421242***5523</span>
</div>
</div>
<div class="col-md-4">
<div class="col-md-12">
支付编号：<span id="dingdnanum"> 1524142421242***5523</span>
</div>
</div>
<div class="col-md-4">
<div class="col-md-12">
创建时间：<span id="dingdnanum"> 2019-7-24 19:41:22</span>
</div>
</div>
<!--第二行-->
<div class="col-md-4">
<div class="col-md-12">
付款时间：<span id="dingdnanum"> 2019-7-24 19:41:22</span>
</div>
</div>
<div class="col-md-8">
<div class="col-md-12">
成交时间：<span id="dingdnanum"> 2019-7-24 19:41:22</span>
</div>
</div>
</div>
</div>
</p>
</div>
完整代码
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>地址</title>
<script src="js/bootstrap-3.3.7/bootstrapglobal.js"></script>
<script src="js/sanlian/sanlianglobal.js"></script>
</head>
<style>
.hong {
color: red;
}
.h5 {
font-size: 12px;
}
#adddizhi {
float: right;
border: none;
background-color: red;
}
.nametext {
font-size: 22px;
}
.xuanfu {
display: none;
}
.paneltitle {
height: 30px;
}
.mianban {
width: 400px;
margin: 10px 15px;
}
.panelcont {
height: 200px;
width: 370px;
}
.panelboot {
float: right;
height: 20%;
margin-right: 20px;
}
.panelback{
height: 640px;
}
</style>
<body>
<div class="row"></div>
<div class="control-label col-md-1"></div>
<!--背景面板-->
<div class="panel panel-info panelback col-md-8">
<div class="panel-heading">
<h3 class="panel-title paneltitle"><span class="hong">|</span>
<span> 收获地址管理 </span>
<span class="h5">你已经存在<span id="dizhinum" class="hong">1</span>个地址</span>
<button id="adddizhi" type="button" onclick="tianjia()" class="btn btn-default btn-sm">+添加地址 </button>
</h3>
</div>
<div class="panel-body">
<!--地址详情-->
<div class="row">
<!--地址1-->
<div class="panel panel-default mianban control-label col-md-6">
<div class="panel-heading">
<span class="nametext"><img src="img/u269.png" /> </span>  
<span class="nametext" id="name">张三</span>
<span class="nametext" style="float: right;">
<button type="button" onclick="editmoren(this)" class="btn btn-link xuanfu moren" value="1">默认</button>
</span>
</div>
<div class="panel-body panelcont">
<div class="row" style="height: 60%;">
<div class="control-label col-lg-1"> <img style="margin: 0 auto;" src="img/u259.png" /> </div>
<div class="control-label col-lg-11">
<p id="dizhicont">
需要的主要css代码有两个，一个为text-align:center（内容居中），另外一个为margin:0 auto；其两个样式需要配合使用才能实现div盒子的居中显示排版。 首先我们对body设置te
</p>
</div>
</div>
<div class="row" style="height: 20%;">
<div class="control-label col-lg-1"> <img src="img/u257.png" /> </div>
<div class="control-label col-lg-11"><span id="shoujihao" class="nametext">158*******</span> </div>
</div>
<span class="nametext panelboot">
<button type="button" class="btn btn-link xuanfu">修改</button>
<button type="button" class="btn btn-link xuanfu">删除</button>
</span>
</div>
</div>
<!--地址2-->
<div class="panel panel-default mianban control-label col-md-6">
<div class="panel-heading">
<span class="nametext"><img src="img/u269.png" /> </span>  
<span class="nametext" id="name">张三</span>
<span class="nametext" style="float: right;">
<button type="button" onclick="editmoren(this)" class="btn btn-link xuanfu" value="2">默认</button>
</span>
</div>
<div class="panel-body panelcont">
<div class="row" style="height: 60%;">
<div class="control-label col-lg-1"> <img style="margin: 0 auto;" src="img/u259.png" /> </div>
<div class="control-label col-lg-11">
<p id="dizhicont">
需要的主要css代码有两个，一个为text-align:center（内容居中），另外一个为margin:0 auto；其两个样式需要配合使用才能实现div盒子的居中显示排版。 首先我们对body设置te
</p>
</div>
</div>
<div class="row" style="height: 20%;">
<div class="control-label col-lg-1"> <img src="img/u257.png" /> </div>
<div class="control-label col-lg-11"><span id="shoujihao" class="nametext">158*******</span> </div>
</div>
<span class="nametext panelboot">
<button type="button" class="btn btn-link xuanfu">修改</button>
<button type="button" class="btn btn-link xuanfu">删除</button>
</span>
</div>
</div>
</div>
<!--地址详情-->
<div class="row">
<!--地址1-->
<div class="panel panel-default mianban control-label col-md-6">
<div class="panel-heading">
<span class="nametext"><img src="img/u269.png" /> </span>  
<span class="nametext" id="name">张三</span>
<span class="nametext" style="float: right;">
<button type="button" onclick="editmoren(this)" class="btn btn-link xuanfu" value="2">默认</button>
</span>
</div>
<div class="panel-body panelcont">
<div class="row" style="height: 60%;">
<div class="control-label col-lg-1"> <img style="margin: 0 auto;" src="img/u259.png" /> </div>
<div class="control-label col-lg-11">
<p id="dizhicont">
需要的主要css代码有两个，一个为text-align:center（内容居中），另外一个为margin:0 auto；其两个样式需要配合使用才能实现div盒子的居中显示排版。 首先我们对body设置te
</p>
</div>
</div>
<div class="row" style="height: 20%;">
<div class="control-label col-lg-1"> <img src="img/u257.png" /> </div>
<div class="control-label col-lg-11"><span id="shoujihao" class="nametext">158*******</span> </div>
</div>
<span class="nametext panelboot">
<button type="button" class="btn btn-link xuanfu">修改</button>
<button type="button" class="btn btn-link xuanfu">删除</button>
</span>
</div>
</div>
<!--地址2-->
<div class="panel panel-default mianban control-label col-md-6">
<div class="panel-heading">
<span class="nametext"><img src="img/u269.png" /> </span>  
<span class="nametext" id="name">张三</span>
<span class="nametext" style="float: right;">
<button type="button" onclick="editmoren(this)" class="btn btn-link xuanfu" value="2">默认</button>
</span>
</div>
<div class="panel-body panelcont">
<div class="row" style="height: 60%;">
<div class="control-label col-lg-1"> <img style="margin: 0 auto;" src="img/u259.png" /> </div>
<div class="control-label col-lg-11">
<p id="dizhicont">
需要的主要css代码有两个，一个为text-align:center（内容居中），另外一个为margin:0 auto；其两个样式需要配合使用才能实现div盒子的居中显示排版。 首先我们对body设置te
</p>
</div>
</div>
<div class="row" style="height: 20%;">
<div class="control-label col-lg-1"> <img src="img/u257.png" /> </div>
<div class="control-label col-lg-11"><span id="shoujihao" class="nametext">158*******</span> </div>
</div>
<span class="nametext panelboot">
<button type="button" class="btn btn-link xuanfu">修改</button>
<button type="button" class="btn btn-link xuanfu">删除</button>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- 添加地址（Modal） -->
<div class="modal fade" id="tianjia" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">添加地址</h4>
</div>
<!--面板内容区-->
<!--行必须放置在 .container -->
<div class="modal-body container">
<!--内容区-->
<!--收货人-->
<div class="row form-group">
<label class="control-label col-lg-1" for="name">收货人:</label>
<div class="col-lg-5 col-md-6">
<input class="form-control" name="name" id="name" type="text"placeholder="默认输入">
</div>
</div>
<!--手机号-->
<div class="row form-group">
<label class="control-label col-lg-1" for="name">手机号:</label>
<div class="col-lg-5 col-md-6">
<input class="form-control" name="name" id="name" type="text"placeholder="默认输入">
</div>
</div>
<!---->
<!--<div class="col-lg-5 col-md-5">
<form class="form-inline">
<div id="distpicker container">
<div class="form-group col-lg-12 col-md-12 container">
<div style="position: relative;">
<span class="col-lg-7 col-md-7 container">
<input id="city-picker3 container" class="form-control" readonly type="text" value="江苏省/常州市/溧阳市" data-toggle="city-picker">
</span>
<span class="col-lg-5 col-md-5">
<button class="btn btn-warning" id="reset" type="button">重置</button>
<button class="btn btn-danger" id="destroy" type="button">确定</button>
</span>
</div>
</div>
</div>
</form>
</div>
-->
<!---->
<!--地址-->
<div class=" form-group">
<div class="control-label col-lg-1">
<label for="name">地址:</label>
</div>
<div class="col-lg-5 col-md-5">
<form class="form-inline">
<div id="distpicker container">
<div class="form-group col-lg-12 col-md-12 container">
<div style="position: relative;">
<span class="col-lg-7 col-md-7 container">
<input id="city-picker3" class="form-control" readonly type="text" value="江苏省/常州市/溧阳市" data-toggle="city-picker">
</span>
<span class="col-lg-5 col-md-5">
<button class="btn btn-warning" id="reset" type="button">重置</button>
<button class="btn btn-danger" id="destroy" type="button">确定</button>
</span>
</div>
</div>
</div>
</form>
</div>
</div>
<!--内容区 end-->
</div>
<!--面板内容区 end-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" οnclick="update()">提交更改</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
<!-- 模态框（Modal）end -->
<script>
//修改手机
function tianjia() {
//向模态框中传值
// $('#stuno').val(stuno);
$('#tianjia').modal('show');
}
//默认
function editmoren(e) {
if($(e).hasClass("moren"))
{
return;
}
// alert($(".moren").val());
$(".moren").addClass("xuanze");
$(".xuanze").removeClass("moren");
$(e).addClass("moren");
$(".xuanze").removeClass("xuanze");
$(".xuanfu").hide();
var $find=$(e).parent().parent().parent().find('.xuanfu');
$find.show();
}
$(function() {
$(".moren").show();
$(".mianban").hover(function() {
$(this).find(".xuanfu").show();
$(".moren").show();
}, function() {
$(this).find(".xuanfu").hide();
$(".moren").show();
});
});
</script>
</body>
</html>
