Bootstrap 缩略图的使用
bootstrapweb developmentcss framework更新于 2026/2/12 6:04:17
使用 Bootstrap 中的 thumbnail 类，您可以轻松创建缩略图。
请按照以下步骤操作 &minus −
- 在图片周围添加一个带有 .thumbnail 类的 <a> 标签。
- 这将添加四个像素的内边距和一个灰色边框。
- 鼠标悬停时，图像的轮廓会呈现动画光晕。
您可以尝试运行以下代码来创建缩略图 −
示例
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class = "row"> <div class = "col-sm-6 col-md-3"> <a href = "#" class = "thumbnail"> <img src = "https://www.cainiaomax.com/angular4/images/angular-4-mini-logo.jpg" alt = "Angular"> </a> </div> </div> </body> </html>
