bootstrap缩略图

朴灿烈づ我的快乐病毒、 2022-10-02 06:51 344阅读 0赞
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap</title>
  6. <style type="text/css">
  7. div.col-xs-3{
  8. text-align: center;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <script src="jquery.min.js"></script>
  14. <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap/3.3.6/bootstrap.min.css">
  15. <script src="bootstrap/js/bootstrap/3.3.6/bootstrap.min.js"></script>
  16. <div class="container">
  17. <div class="row">
  18. <div class="col-xs-3">
  19. <a href="#" class="thumbnail">
  20. <img src="gareen.png">
  21. </a>
  22. <div class="caption">
  23. <div class="text-muted">德玛西亚之力</div><br>
  24. <p><a href="#" class="btn btn-primary" role="button">选中</a></p>
  25. </div>
  26. </div>
  27. <div class="col-xs-3">
  28. <a href="#" class="thumbnail">
  29. <img src="temo.png">
  30. </a>
  31. <div class="caption">
  32. <div class="text-muted">提莫</div><br>
  33. <p><a href="#" class="btn btn-primary" role="button">选中</a></p>
  34. </div>
  35. </div>
  36. <div class="col-xs-3">
  37. <a href="#" class="thumbnail">
  38. <img src="nv.png">
  39. </a>
  40. <div class="caption">
  41. <div class="text-muted">卡特</div><br>
  42. <p><a href="#" class="btn btn-primary" role="button">选中</a></p>
  43. </div>
  44. </div>
  45. <div class="col-xs-3">
  46. <a href="#" class="thumbnail">
  47. <img src="annie.png">
  48. </a>
  49. <div class="caption">
  50. <div class="text-muted">火女</div><br>
  51. <p><a href="#" class="btn btn-primary" role="button">选中</a></p>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. </body>
  57. </html>

在这里插入图片描述

发表评论

表情:
评论列表 (有 0 条评论,344人围观)

还没有评论,来说两句吧...

相关阅读

    相关 BootStrap略图

    通过缩略图组件扩展 Bootstrap 的 [栅格系统][Link 1],可以很容易地展示栅格样式的图像、视频、文本等内容。 默认样式的实例 Boostrap 缩略图的