console
$('.dropdown-toggle').dropdown（）
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">首页</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">财经</a></li>
<li><a href="#about">娱乐</a></li>
<li><a href="#contact">体育</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">汽车</a></li>
<li><a href="#">军事</a></li>
<li><a href="#">时尚</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner" role="listbox" >
<div class="item active">
<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1493708571&di=6c7c494ae1e3453a06bfa6fb97badec1&src=http://pic2.ooopic.com/12/24/23/96bOOOPIC27_1024.jpg" alt="First slide" ></a>
<div class="container">
<div class="carousel-caption">
<p>800米水道“水穿街巷”旧景重现 前门三里河成新景点</p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="http://himg2.huanqiu.com/attachment2010/2017/0502/20170502075011243.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<p>美国南部4州遭龙卷风袭击 造成10人死数十伤</p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="http://photocdn.sohu.com/20160511/Img448879935.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<p>俄总统普京现身冰球场再展高超球技</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container marketing">
<div class="row">
<div class="col-lg-4">
<img class="img-circle" src="http://a4.att.hudong.com/30/45/16300534049378135830451547357_140.jpg" alt="Generic placeholder image" width="140" height="140">
<h2>马云</h2>
<p>马云，男，1964年9月10日生于浙江省杭州市，祖籍浙江省嵊州市（原嵊县）谷来镇， 阿里巴巴集团主要创始人，现担任阿里巴巴集团董事局主席、日本软银董事、大自然保护协会中国理事会主席兼全球董事会成员、华谊兄弟董事、生命科学突破奖基金会董事。</p>
<p><a class="btn btn-default" href="http://baike.baidu.com/link?url=OSkvkZjuT44b8hz5fV1-b04JOcGxgQd4ZHxDVa7dJHli1uqmgavzSVDzaQNbzW6ZxAFONU9WPEjN4I3vxIhGrfxRXis_YmKOhhjJX8Yw8jG" role="button">View details »</a></p>
</div>
<div class="col-lg-4">
<img class="img-circle" src="http://a3.att.hudong.com/61/39/16300000759054128183399675010_140.jpg" alt="Generic placeholder image" width="160" height="140">
<h2>曹国伟</h2>
<p>曹国伟先生1965年11月[1] 生于上海，毕业于上海复旦大学新闻系，此后又获得了美国俄克拉荷马大学新闻学硕士及德州奥斯丁大学商业管理学院财务专业硕士。曹国伟先生1999年9月加入新浪，先后任主管财务的副总裁、首席财务官、首席运营官，总裁和CEO等职，2012年8月，担任新浪董事长，成为新浪历史上第一位董事长兼CEO。</p>
<p><a class="btn btn-default" href="http://baike.baidu.com/link?url=pHdSNLGX6yoOhq2Nq1FeDr860tp9O7CjVqTjmi8uaJkYlM7MNzLaDRtKLq_yfiBOJTbZ5fHD4_Qqvv-TGS5FVf1QjbGyVntPnTKJbPjbtLN-yIP-s2b0TgKxan_CsfDc" role="button">View details »</a></p>
</div>
<div class="col-lg-4">
<img class="img-circle" src="http://pic.chinaz.com/thumb/2017/0422/17042213312352161.jpg" alt="Generic placeholder image" width="160" height="140">
<h2>丁磊</h2>
<p>丁磊，男，1971年10月1日生于浙江省宁波市。网易公司创始人，现担任网易公司董事局主席兼首席执行官。
1993年本科毕业于电子科技大学，1997年5月创立网易公司，与张朝阳、王志东并称为网络三剑客。2000年6月，网易在纳斯达克正式挂牌上市。2009年，宣布网易养猪计划。2015年2月11日，入选“2014中国互联网年度人物”。 </p>
<p><a class="btn btn-default" href="http://baike.baidu.com/item/%E4%B8%81%E7%A3%8A/15174" role="button">View details »</a></p>
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">俄罗斯大火蔓延到大兴安岭林区<span class="text-muted">千人扑救</span></h2>
<p class="lead">据国家森防指办公室消息：4月30日，内蒙古大兴安岭乌玛林业局伊木河林场疑似发生森林火灾，经5月1日早晨飞机观察确认，该火灾为俄罗斯境外火烧入伊木河林场。</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="500x500" src="http://m2.biz.itc.cn/pic/new/n/17/88/Img8978817_n.jpg" data-holder-rendered="true">
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7 col-md-push-5">
<h2 class="featurette-heading">菲律宾总统参观中国海军远航访问编队长春舰 <span class="text-muted"></span></h2>
<p class="lead">据新华社菲律宾达沃5月1日电 当地时间1日下午，菲律宾总统杜特尔特率菲政府和军队官员，登上正在菲律宾达沃市进行友好访问的中国海军远航访问编队长春舰参观。</p>
</div>
<div class="col-md-5 col-md-pull-7">
<img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="500x500" src="http://d.ifengimg.com/w640_h500/p2.ifengimg.com/cmpp/2017/05/01/20/29527075-a384-4bd3-b063-ad9e225cdc94_size350_w1000_h665.jpg" data-holder-rendered="true">
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="500x500" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDUwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzUwMHg1MDAvYXV0bwpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE1YmM3Y2E5MWM0IHRleHQgeyBmaWxsOiNBQUFBQUE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6MjVwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTViYzdjYTkxYzQiPjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjRUVFRUVFIi8+PGc+PHRleHQgeD0iMTg3IiB5PSIyNjEuNCI+NTAweDUwMDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true">
</div>
</div>
<hr class="featurette-divider">
<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
<p>© 2016 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer></div>
body {
padding-bottom: 40px;
color: #5a5a5a;
}
.navbar-wrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar .container {
width: auto;
}
.carousel {
height: 500px;
margin-bottom: 60px;
}
.carousel-caption {
z-index: 10;
}
.carousel .item {
height: 500px;
background-color: black;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
image-
}
.marketing .col-lg-4 {
margin-bottom: 20px;
text-align: center;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-right: 10px;
margin-left: 10px;
}
.featurette-divider {
margin: 80px 0;
}
.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
@media (min-width: 768px) {
.navbar-wrapper {
margin-top: 20px;
}
.navbar-wrapper .container {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
border-radius: 4px;
}
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
@media (min-width: 992px) {
.featurette-heading {
margin-top: 120px;
}
}