twitter-bootstrap 如何在 Twitter Bootstrap Carousel 中添加图片链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18339638/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-21 18:02:23 来源:igfitidea点击:
How do I add a links to pictures in Twitter Bootstrap Carousel?
提问by jofishing
I want to make the pictures that scroll through the carousel. Also, when we click on them, they open the Hyperlink.
我想制作在轮播中滚动的图片。此外，当我们点击它们时，它们会打开超链接。
回答by chelder
Simply, envelope images with hreftag. So, if we modify the example of the official documentation:
简单地说，用href标签封装图像。所以，如果我们修改官方文档的例子：
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<a href="http://estiloasertivo.blogspot.com.es/">
<img src="http://lh5.ggpht.com/-tNlXRzR4qMw/ThaowBgad2I/AAAAAAAAD6I/OEd6kbouBvk/s1600-h/chapi%25255B4%25255D.png" alt="">
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Donec id elit non mi porta gravida at eget metus. Nullam id dolor
id nibh ultricies vehicula ut id elit.</p>
</div>
</a>
</div>
<div class="item">
<a href="http://www.youtube.com/watch?v=Ehv0iriLTKE">
<img src="http://www.chistosos.com.mx/wp-content/uploads/2012/07/perro-gracioso-en-coche-aire-chistosa.jpg" alt="">
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Donec id elit non mi porta gravida at eget metus. Nullam id dolor
id nibh ultricies vehicula ut id elit.</p>
</div>
</a>
</div>
<div class="item">
<a href="http://www.google.cn/">
<img src="http://www.theandrewblog.net/wp-content/uploads/2012/04/ant.jpg" alt="">
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Donec id elit non mi porta gravida at eget metus. Nullam id dolor
id nibh ultricies vehicula ut id elit.</p>
</div>
</a>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
