酷代码 AI
菜单
全部AI  /  热门  /  AI问答
服务商

作为javascript开发,bootstrap 如何定义 bootstrap 缩略图?

Bootstrap的缩略图可以使用以下的HTML和CSS代码来定义: HTML: ```html <div class="row"> <div class="col-sm-6"> <a href="#" class="thumbnail"> <img src="your-image-source.jpg" alt="..."> </a> </div> <div class="col-sm-6"> <a href="#" class="thumbnail"> <img src="your-image-source2.jpg" alt="..."> </a> </div> </div> ``` CSS: ```css .thumbnail { padding: 4px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; -webkit-transition: border .2s ease-in-out; transition: border .2s ease-in-out; } .thumbnail:hover, .thumbnail:focus, .thumbnail.active { border-color: #428bca; } .thumbnail img { width: 100%; height: auto; margin-left: auto; margin-right: auto; } ``` 在这个例子中,我们首先创建了一个包含两个缩略图的row。每个缩略图都是一个a标签,其class为"thumbnail"。在每个缩略图中,我们放置了一个img标签,其src属性指向你的图像源。CSS样式用于定义缩略图的外观,包括颜色、边框、边框半径和过渡效果。 [2023-11-09 01:24:14 | AI问答 | 322点数解答]

相关提问