bootstrap怎么制作好看的表格
bootstrap 怎么制作表格
bootstrap 制作表格带有图⽂形式。主要知识点有以下⼏点
1. 第⼀点肯定是写出⼀个普通的表格，这⼀点可以去复制它的案例。添加tr和td就可以了
2. 在表格放⼊图⽚加上class="img-circle" 变成圆形，⾃⼰写个css设置图⽚统⼀⼤⼩。图⽚⾼度50px，这时要设置⾏⾼也为50px。要不然⽂字不能垂直对齐，由于优先级
问题，我们选择器不能直接选着tr标签，要不然没有作⽤，可以在⽗标签创建⼀个id，⽤后代选择器去选择。
3. 操作下⾯的修改和删除按钮可以参照，要记得把bootstarp的font⽂件夹引⽤到⾃⼰的项⽬中。笔和垃圾桶不是图标是字体，要明⽩这⼀点，只需要在空的span加上
class名称就可以了，他们都是，每个图标下都有相对应的class类名，我们直接复制类名就，可以了。
4. 修改按钮弹出框在bootstarp有个叫的可以把案例复制过来，修改⼀下h4的标题，和在modal-body的div添加我们的内容就可以了。
5. 弹出框的表单可以复制菜鸟的案例，案例的输⼊框col-sm-10占⽤10列，我们可以修改成col-sm-9占⽤9列，这样输⼊框就不会很宽了。
6. 我给图⽚加了个点击事件，当点击某张图⽚时，弹出框显⽰放⼤的图⽚。这⾥弹出框仍然可以⽤，值不够特别注意的是当页⾯存在两个以上模态框时，要在每个模态
框加个div标签，div也不需要写什么属性。然后就是修改模态框的id就是了这⾥id改成id="myModal2"。⾃⼰写的jQuery也是⽐较简单的，获取当前图⽚的src，然后赋值给模态框的图⽚的src。
复制代码时⾃⼰项⽬要有⾃⼰的bootstarp.css和font⽂件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
#a td{
line-height: 50px;
font-size: 20px;
}
img{
height: 50px;
}
#a tr:hover{
background:#D4E3E5;
}
</style>
</head>
<body>
<div class="container">
<table class="table table-hover table-bordered">
<caption>边框表格布局</caption>
<thead>
<tr>
<th>编号</th>
<th>头像</th>
<th>昵称</th>
<th>年龄</th>
<th>性别</th>
<th>地址</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody id="a">
<tr>
<td>01</td>
<td>
<img src="images/tou01.jpg" class="img-circle" data-toggle="modal" data-target="#myModal2">
</td>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
<td>Bangalore</td>
<td>560001</td>
bootstrap项目<td>
<button type="button" class="btn btn-default btn-xm" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-pencil"></span>修改
</button>
<button type="button" class="btn btn-default btn-xm">
<span class="glyphicon glyphicon-trash"></span>删除
</button>
</td>
</tr>
<tr>
<td>02</td>
<td>
<img src="images/tou02.jpg" class="img-circle" data-toggle="modal" data-target="#myModal2"/>
</td>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
<td>Bangalore</td>
<td>560001</td>
<td>
<button type="button" class="btn btn-default btn-xm" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-pencil"></span>修改
</button>
<button type="button" class="btn btn-default btn-xm">
<span class="glyphicon glyphicon-trash"></span>删除
</button>
</td>
</tr>
<tr>
<td>03</td>
<td>
<img src="images/tou03.jpg" class="img-circle" data-toggle="modal" data-target="#myModal2"/>
</td>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
<td>Bangalore</td>
<td>Bangalore</td>
<td>
<button type="button" class="btn btn-default btn-xm" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-pencil"></span>修改
</button>
<button type="button" class="btn btn-default btn-xm">
<span class="glyphicon glyphicon-trash"></span>删除
</button>
</td>
</tr>
</tbody>
</table>
<!--修改弹出框-->
<div id="">
<div class="modal fade" id="myModal" 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>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">昵称</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="firstname"
placeholder="请输⼊名字">
</div>
</div>
<div class="form-group">
<label for="old" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-9">
<input type="number" class="form-control" id="old"
placeholder="请输⼊年龄">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">性别</label>
<div class="col-sm-9">
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked>男
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2">⼥
</label>
</div>
</div>
<div class="form-group">
<label for="city" class="col-sm-2 control-label">所在城市</label>
<div class="col-sm-9">
<select class="form-control">
<option>信州区</option>
<option>⾼新区</option>
<option>⼴丰区</option>
<option>婺源县</option>
<option>铅⼭县</option>
</select>
</div>
</div>
<div class="form-group">
<label for="timer" class="col-sm-2 control-label">时间</label>
<div class="col-sm-9">
<input type="date" class="form-control" id="timer"
placeholder="请输⼊时间">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary">
确认更改
</button>
</div>
</div>
</div>
</div>
<!--图⽚-->
<div id="">
<div class="modal fade" id="myModal2" 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>
<h5 class="modal-title" id="myModalLabel">头像图⽚</h5>
</div>
<div class="modal-body" >
<img src="images/tou01.jpg" id="touimg"/>
</div>
<!--<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">提交更改</button>
</div>-->
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("img").click(function(){
var at=$(this).attr("src")
$("#touimg").attr("src",at)
})
</script>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论