twitter-bootstrap 带图片幻灯片的引导程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20726066/
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 19:32:57 来源:igfitidea点击:
Bootstrap with Picture Slideshow
提问by Sev
My Code so far:
到目前为止我的代码：
<!DOCTYPE html>
<html>
<head>
<!-- Naming title and allowing for small-device-viewing -->
<title>Tech Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Calling StyleSheets -->
<link href = "/ssheets/bootstrap/bootstrap.min.css" rel = "stylesheet">
<link href = "/ssheets/main.css" rel = "stylesheet">
<!-- Calling JavaScript -->
<!-- Might be worth moving down to the bottom of 'body' so the page is displayed faster -->
<script src = "/jscript/jquery-1.10.2.min.js"></script>
<script src = "/jscript/bootstrap/bootstrap.js"></script>
<script src="/jscript/main.js"></script>
</head>
<body>
<!-- Need to display:
- Navigation Bar
- Fading Picture
- 3 Column Testimony Preview
- Footer
-->
<!-- Navbar -->
<!-- Nav bar set at static to reduce overlapping at top -->
<div class = "navbar navbar-default navbar-static-top">
<div class = "container">
<a href = "#" class = "navbar-brand">Tech Site</a>
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">Blog</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Social Media <b class = "caret"></b></a>
<ul class = "dropdown-menu">
<li><a href = "#">Twitter</a></li>
<li><a href = "#">Facebook</a></li>
<li><a href = "#">Google+</a></li>
<li><a href = "#">Instagram</a></li>
</ul>
</li>
<li><a href = "#">About</a></li>
<li><a href = "#">Contact</a></li>
</ul>
</div>
</div>
</div>
<!-- Main Content -->
<!-- Fading Image -->
<div class = "container">
<div class="img-responsive">
<img style="max-height:450px; width:100%;" src="/images/photo_1.jpg" />
</div>
</div>
<div class = "container">
<div class = "row">
<div class = "col-md-3">
<h3><a href = "#">0 Gaming PC Build</a></h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
<a href = "#" class = "btn btn-default">Read More</a>
</div>
<div class = "col-md-3">
<h3><a href = "#">0 Gaming PC Build</a></h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
<a href = "#" class = "btn btn-default">Read More</a>
</div>
<div class = "col-md-3">
<h3><a href = "#">0 Gaming PC Build</a></h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
<a href = "#" class = "btn btn-default">Read More</a>
</div>
<div class = "col-md-3">
<h3><a href = "#">0 Gaming PC Build</a></h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
<a href = "#" class = "btn btn-default">Read More</a>
</div>
</div>
</div>
<div class = "navbar navbar-default navbar-fixed-bottom">
<div class = "container">
<p class = "navbar-text pull-left">A Site</p>
<a href = "#" class = "navbar-btn btn-primary btn pull-right">Find us on Facebook</a>
</div>
</div>
<!-- End of Footer -->
</body>
</html>
CSS is bootstrap 3; as noted in the html code.
CSS 是引导程序 3；如 html 代码中所述。
At the point of the img responsive tags, I want to have a fading slideshow (slow transition) between three images. However, I have no idea how to do that without messing up the layout. Any ideas?
在 img 响应标签的点上，我希望在三个图像之间有一个淡入淡出的幻灯片（缓慢过渡）。但是，我不知道如何在不弄乱布局的情况下做到这一点。有任何想法吗？
回答by Steve H.
Read about the built-in Bootstrap carousel control here: http://getbootstrap.com/javascript/#carousel.
在此处阅读有关内置 Bootstrap 轮播控件的信息：http: //getbootstrap.com/javascript/#carousel。
You should easily be able to fit it into your layout.
您应该能够轻松地将其融入您的布局中。
