                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /Bootstrap
                        
                        /基于bootstrap的網(wǎng)頁(yè)開(kāi)發(fā)

為什么和老師的不一樣？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

body{

? ? ?padding-top:50px;

}

.carousel{

? ? ?height:500px;

background-color:#000;

}

.carousel.item{

? ? ?height:500px;

background-color:#000;

}

.carousel.img{

? ? ?width:100%; ?

}

.carousel.caption p{

? ? ?margin-bottom:20px;

font-size:20px;

line-height:1.8;

}

</style>

</head>

<body>

? ?<div class="container">

? ? <div class="navbar-header">

? ? ?<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

? ? ?<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span>

? ? ?<span class="icon-bar"></span><span class="icon-bar"></span></button>

? ? ?<a class="navbar-brand" href="#">騰訊NBA</a> ? ?

? ? </div>

? ? <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

? ? ?<ul class="nav navbar-nav" style="font-size:25px;">

? ? ? <li ?id="one" class="active"><a href="#">馬刺</a></li>

? ? ? <li id="two"><a href="#">勇士</a></li>

? ? ? <li class="dropdown">

? ? ? ?<a href="#" class="dropdown-toggle" data-toggle="dropdown">騎士<span class="caret"></span></a>

? ? ? ?<ul class="dropdown-menu" role="menu">

? ? ? ? <li><a href="#" >勒布朗*詹姆斯</a></li>

? ? ? ? <li><a href="#">樂(lè)福</a></li>

? ? ? ? <li class="divider"></li>

? ? ? ? <li><a href="#">歐文</a></li>

? ? ? ?</ul>

? ? ? </li>

? ? ?</ul>

? ? ?

? ? </div>

? ?</div>

? </nav>

??

?

? <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

? ? <ol class="carousel-indicators">

? ? ? ? ? ? <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

? ? ? ? ? ? <li data-target="#carousel-example-generic" data-slide-to="1"></li>

? ? ? ? ? ? <li data-target="#carousel-example-generic" data-slide-to="2"></li>

? ? ? ? ? ? <li data-target="#carousel-example-generic" data-slide-to="3"></li>

? ? ? ? ? ? <li data-target="#carousel-example-generic" data-slide-to="4"></li>

? ? </ol>

? ? ? ? ??

? ?<div class="carousel-inner" role="listbox">

? ? ?<div class="item active">

? ? ? ? ? ? ? <img src="images/firefox-big.jpg" alt="1 slide" />

? ? ? ? ? ? ? <div class="carousel-caption">

? ? ? ? ? ? ? <h1>Firefox</h1>

? ? ? ? ? ? ? <p>Firefox,又稱(chēng)火狐瀏覽器。最新版 Firefox 在性能上有非常顯著的提升，大幅降低的內(nèi)存占用和更快的渲染速度，給用戶(hù)更為流暢和高速的上網(wǎng)瀏覽體驗(yàn)，同時(shí)也讓開(kāi)發(fā)者能夠開(kāi)發(fā)出更為快速的網(wǎng)絡(luò)應(yīng)用和網(wǎng)站。 </p>

? ? ? ? ? ? ? <p><a class="btn btn-lg btn-primary" role="button" target="_blank">點(diǎn)我下載</a></p>

? ? ? ? ? ? ? </div>

? ? ?</div>

? ??

? ? <div class="item">

? ? ? ? ? ? ? <img src="images/ie-big.jpg" alt="2 slide" />

? ? ? <div class="carousel-caption">

? ? ? ? <h1>IE</h1>

? ? ? ? ? ? ? <p>IE,又稱(chēng)IE瀏覽器。如果運(yùn)行的是 Windows 7，可以安裝的最新 Internet Explorer 版本是 Internet Explorer 11。</p>

? ? ? ? <p><a class="btn btn-lg btn-primary" role="button" target="_blank">點(diǎn)我下載</a></p>

? ? ? ? ? ? ? </div>

? ? ? ? ? ? </div>

? ? </div>

? ??

? ? <div class="item">

? ? ? ? ? ? ? <img src="images/chrome-big.jpg" alt="3 slide"/>

? ? ? ? ? ? ? <div class="carousel-caption">

? ? ? ? ? ? ? <h1>chrome</h1>

? ? ? ? ? ? ? <p>chrome,又稱(chēng)谷歌瀏覽器。Chrome 可將您在計(jì)算機(jī)上打開(kāi)的標(biāo)簽頁(yè)、保存的書(shū)簽和最近搜索過(guò)的內(nèi)容同步到手機(jī)或平板電腦上，反之亦然。這意味著您可將自己在 Chrome 中的內(nèi)容和設(shè)置同步到所有的設(shè)備上。只需登錄您的其他設(shè)備即可開(kāi)始同步。</p>

? ? ? ? ? ? ? <p><a class="btn btn-lg btn-primary" role="button" target="_blank">點(diǎn)我下載</a></p>

? ? ? ? ? ? ? </div>

? ? </div>

? ??

? ? <div class="item">

? ? ? <img src="images/opera-big.jpg" alt="4 slide" />

? ? ? <div class="carousel-caption">

? ? ? ? <h1>歐朋瀏覽器</h1>

? ? ? ? <p>歐朋瀏覽器秉承了 Opera 速度快、省流量、功能強(qiáng)大的優(yōu)點(diǎn)并為中國(guó)用戶(hù)精心設(shè)計(jì)及推出了本地化的優(yōu)質(zhì)服務(wù)，為用戶(hù)提供最佳的移動(dòng)互聯(lián)網(wǎng)體驗(yàn)。</p>

? ? ? ? ? ? ? <p><a class="btn btn-lg btn-primary" role="button" target="_blank">點(diǎn)我下載</a></p>

? ? ? ? ? ? ? </div>

? ? ? ? </div>

? ??

? ? <div class="item ">

? ? ? ? ? ? ? <img src="images/safari-big.jpg" alt="5 slide"/>

? ? ? ? ? ? ? <div class="carousel-caption">

? ? ? ? ? ? ? <h1>safari</h1>

? ? ? ? ? ? ? <p>Get a sneak peek at upcoming web technologies in macOS and iOS and experiment with these technologies in your websites and extensions.</p>

? ? ? ? ? ? ? <p><a class="btn btn-lg btn-primary" role="button" target="_blank">點(diǎn)我下載</a></p>

? ? ? ? ? ? ? </div>

? ? </div>

? ??

? ? ? ? ? <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

? ? ? ? ? ? <span class="glyphicon glyphicon-chevron-left"></span>

? ? ? ? ? ? <span class="sr-only">上一頁(yè)</span>

? ? ? ? ? </a>

? ? ? ? ? <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

? ? ? ? ? ? <span class="glyphicon glyphicon-chevron-right"></span>

? ? ? ? ? ? <span class="sr-only">下一頁(yè)</span>

? ? ? ? ? </a>