gpt4 book ai didi

css - Bootstrap 轮播格式

转载 作者:行者123 更新时间:2023-11-28 15:29:05 25 4
gpt4 key购买 nike

我是Bootstrap的初学者,并且正在学习有关轮播项目的教程。在我的窗口中,确实出现了一个小的轮播,但是它的条非常细,滚动项很小,不是本教程显示的内容。...这里是代码:

    <!DOCTYPE html> 
<html lanf="en">
<head>
<title>Bootstrap basic website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Bootstrap -->
<!--Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Your CSS -->
<link href="css/index.css" rel="sytlesheet">
</head>


<!-- Carousel Features -->
<div id="myCarousel" class="carousel slide">

<!-- Indicators -->
<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>

<!-- Carousel Items -->
<div class="carousel-inner">
<div class="item active">First Slide</div>
<div class="item">Second Slide</div>
<div class="item">Third Slide</div>
</div>

<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="icon-prev"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="icon-next"></span></a>
</div>

<!-- jQuery and javascript at end of page (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

CSS:

body {margin-bottom: 80px;}
/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

body {margin-bottom: 80px}

.item{
background-color: black;
text-align: center;
color: white;
line-height: 300px;
height: 300px;
font-size: 50px;}

最佳答案

如果我了解您,您想这样做吗? Demo Page

关于css - Bootstrap 轮播格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23277937/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com