|
|
|
示例 2 : 自定义内容
相册风格
<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
img{
width:150px;
}
</style>
<div class="container">
<div class="row">
<div class="col-xs-3 ">
<a href="#" class="thumbnail">
<img src="https://how2j.cn/study/gareen.jpg">
</a>
</div>
<div class="col-xs-3 ">
<a href="#" class="thumbnail">
<img src="https://how2j.cn/study/annie.jpg">
</a>
</div>
<div class="col-xs-3 ">
<a href="#" class="thumbnail">
<img src="https://how2j.cn/study/teemo.jpg">
</a>
</div>
<div class="col-xs-3 ">
<a href="#" class="thumbnail">
<img src="https://how2j.cn/study/katarina.jpg">
</a>
</div>
</div>
</div>
自定义内容
<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
img{
width:150px;
}
div.col-xs-3{
text-align:center;
}
</style>
<div class="container">
<div class="row">
<div class="col-xs-3 " >
<a href="#" class="thumbnail">
<img src="https://how2j.cn/study/gareen.jpg">
</a>
<div class="caption">
<div class="text-muted">德玛西亚之力</div>
<br>
<p><a href="#" class="btn btn-primary" role="button">选中</a></p>
</div>
</div>
<div class="col-xs-3 ">
<a href="#" class="thumbnail">
<img src="https://how2j.cn/study/annie.jpg">
</a>
<div class="caption">
<div class="text-muted">黑暗之力</div>
<br>
<a href="#" class="btn btn-primary" role="button">选中</a></p>
</div>
</div>
<div class="col-xs-3 ">
<a href="#" class="thumbnail">
<img src="https://how2j.cn/study/teemo.jpg">
</a>
<div class="caption">
<div class="text-muted">迅捷斥候</div>
<br>
<a href="#" class="btn btn-primary" role="button">选中</a></p>
</div>
</div>
<div class="col-xs-3 ">
<a href="#" class="thumbnail">
<img src="https://how2j.cn/study/katarina.jpg">
</a>
<div class="caption">
<div class="text-muted">不详之刃</div>
<br>
<a href="#" class="btn btn-primary" role="button">选中</a></p>
</div>
</div>
</div>
</div>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2019-06-08
英雄名出错啦
2019-05-26
站长 :你这代码没有 整理格式,感觉看起来 很别扭啊!
1 个答案
hhhzt 跳转到问题位置 答案时间：2021-01-22 格式：
<style>
img{ width:150px; }
div.col-xs-3{ text-align:center; }
</style>
<div class="container">
<div class="row">
<div class="col-xs-3 " >
<a href="#" class="thumbnail"> <img src="gareen.jpg"> </a>
<div class="caption">
<div class="text-muted">德玛西亚之力</div> <br>
<p><a href="#" class="btn btn-primary" role="button">选中</a></p>
</div>
</div>
<div class="col-xs-3 ">
<a href="#" class="thumbnail"> <img src="annie.jpg"> </a>
<div class="caption">
<div class="text-muted">黑暗之力</div> <br>
<a href="#" class="btn btn-primary" role="button">选中</a></p>
</div>
</div>
<div class="col-xs-3 ">
<a href="#" class="thumbnail"> <img src="teemo.jpg"> </a>
<div class="caption">
<div class="text-muted">迅捷斥候</div> <br>
<a href="#" class="btn btn-primary" role="button">选中</a></p>
</div>
</div>
<div class="col-xs-3 ">
<a href="#" class="thumbnail"> <img src="katarina.jpg"> </a>
<div class="caption">
<div class="text-muted">不详之刃</div> <br>
<a href="#" class="btn btn-primary" role="button">选中</a></p>
</div>
</div>
</div>
</div>
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2018-08-26
出现这个情况怎么弄
2017-08-16
自定义内容 从第二张图来事缺少<p>标签
2017-06-28
.caption 的div去掉也一样，为什么
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 1 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
