效果展示： 总体代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="lib/html5shiv/html5shiv.min.js"></script> <script src="lib/respond/respond.min.js"></script> <![endif]--> <style> body { font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif; } @font-face { font-family: 'myfont'; src: url('font/MiFie-Web-Font.eot') format('embedded-opentype'), url('font/MiFie-Web-Font.svg') format('svg'), url('font/MiFie-Web-Font.ttf') format('truetype'), url('font/MiFie-Web-Font.woff') format('woff'); } [class^="icon-"], [class*=" icon-"] { font-family: myfont; font-style: normal; } .icon-mobilephone::before { content: "\e908"; font-size: 13px; } .icon-telephone::before { content: "\e909"; font-size: 15px; } .icon-logo::before { content: "\e93e"; } .icon-icon::before { content: "\e920"; } /** * 头部区域 */ header { /*height: 200px;*/ } header > .topbar { height: 40px; border-bottom: 1px solid #c0c0c0; line-height: 40px; } header > .topbar > .container > .row > div { height: 40px; font-size: 12px; color: #888; } header > .topbar > .container > .row > div + div { border-left: 1px solid #c0c0c0; } header a { color: #888; } header a:hover { text-decoration: none; color: red; } header .btn-sample { color: #fff; } header .mobile-link > img { display: none; position: absolute; left: 50%; margin-left: -60px; top: 30px; z-index: 1001; } header .mobile-link:hover > img { display: block; } header > .topbar > .container > .row > div:nth-of-type(4) > a:nth-of-type(2) { color: #888; font-size: 13px; } header > .topbar > .container > .row > div:nth-of-type(4) > a:nth-of-type(2):hover { text-decoration: none; color: red; } header .icon-icon { font-size: 50px; color: #E92322; line-height: 25px; vertical-align: middle; } header .icon-logo { text-align: center; font-size: 32px; color: #333; line-height: 32px; vertical-align: middle; } .navbar{ margin-bottom: 0; } /** * 测试样式区域 */ /* section { height: 200px; background-color: #fff; } */ section:nth-of-type(2n) { /* 选择到第1,3,5,。。。。 */ background-color: #f5f5f5; } /* 自己设置的btn样式 */ .btn-sample { color: #ffffff; background-color: #9830B0; border-color: #B06530; } .btn-sample:hover, .btn-sample:focus, .btn-sample:active, .btn-sample.active, .open .dropdown-toggle.btn-sample { color: #ffffff; background-color: #810B9C; border-color: #B06530; } .btn-sample:active, .btn-sample.active, .open .dropdown-toggle.btn-sample { background-image: none; } .btn-sample.disabled, .btn-sample[disabled], fieldset[disabled] .btn-sample, .btn-sample.disabled:hover, .btn-sample[disabled]:hover, fieldset[disabled] .btn-sample:hover, .btn-sample.disabled:focus, .btn-sample[disabled]:focus, fieldset[disabled] .btn-sample:focus, .btn-sample.disabled:active, .btn-sample[disabled]:active, fieldset[disabled] .btn-sample:active, .btn-sample.disabled.active, .btn-sample[disabled].active, fieldset[disabled] .btn-sample.active { background-color: #9830B0; border-color: #B06530; } .btn-sample .badge { color: #9830B0; background-color: #ffffff; } /* 自己修改2 */ .navbar-sample { background-color: #fff; border-color: #f5f5f5; width: 100%; top: 0; } .navbar-sample .navbar-brand { color: #777; } .navbar-sample .navbar-brand:hover, .navbar-sample .navbar-brand:focus { color: #5e5e5e; background-color: transparent; } .navbar-sample .navbar-text { color: #777; } .navbar-sample .navbar-nav > li > a { color: #777; } .navbar-sample .navbar-nav > li > a:hover, .navbar-sample .navbar-nav > li > a:focus { color: #333; background-color: transparent; } .navbar-sample .navbar-nav > .active > a, .navbar-sample .navbar-nav > .active > a:hover, .navbar-sample .navbar-nav > .active > a:focus { color: #555; background-color: #e7e7e7; } .navbar-sample .navbar-nav > .disabled > a, .navbar-sample .navbar-nav > .disabled > a:hover, .navbar-sample .navbar-nav > .disabled > a:focus { color: #ccc; background-color: transparent; } .navbar-sample .navbar-toggle { border-color: #ddd; } .navbar-sample .navbar-toggle:hover, .navbar-sample .navbar-toggle:focus { background-color: #ddd; } .navbar-sample .navbar-toggle .icon-bar { background-color: #888; } .navbar-sample .navbar-collapse, .navbar-sample .navbar-form { border-color: #e7e7e7; } .navbar-sample .navbar-nav > .open > a, .navbar-sample .navbar-nav > .open > a:hover, .navbar-sample .navbar-nav > .open > a:focus { color: #555; background-color: #e7e7e7; } @media (max-width: 767px) { .navbar-sample .navbar-nav .open .dropdown-menu > li > a { color: #777; } .navbar-sample .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-sample .navbar-nav .open .dropdown-menu > li > a:focus { color: #333; background-color: transparent; } .navbar-sample .navbar-nav .open .dropdown-menu > .active > a, .navbar-sample .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-sample .navbar-nav .open .dropdown-menu > .active > a:focus { color: #555; background-color: #e7e7e7; } .navbar-sample .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-sample .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-sample .navbar-nav .open .dropdown-menu > .disabled > a:focus { color: #ccc; background-color: transparent; } } .navbar-sample .navbar-link { color: #777; } .navbar-sample .navbar-link:hover { color: #333; } .navbar-sample .btn-link { color: #777; } .navbar-sample .btn-link:hover, .navbar-sample .btn-link:focus { color: #333; } .navbar-sample .btn-link[disabled]:hover, fieldset[disabled] .navbar-sample .btn-link:hover, .navbar-sample .btn-link[disabled]:focus, fieldset[disabled] .navbar-sample .btn-link:focus { color: #ccc; } .navbar-sample .navbar-nav > .active > a, .navbar-sample .navbar-nav > .active > a:hover, .navbar-sample .navbar-nav > .active > a:focus { background-color: #fff; border-bottom: 2px solid red; } .navbar-sample .navbar-nav > li > a:hover, .navbar-sample .navbar-nav > li > a:focus { color: #333; background-color: transparent; border-bottom: 2px solid red; } section > #carousel-example-generic > .carousel-inner > .item >img { width: 100%; } section > #carousel-example-generic > .carousel-inner > .item { background-repeat: no-repeat; background-position: center center; background-size: cover; } @media (min-width: 768px) { section > #carousel-example-generic > .carousel-inner > .item { height: 380px; } } section:nth-of-type(2) { padding: 50px 0; border-bottom: 1px solid #c0c0c0; } section:nth-of-type(2) > .container > .row > div { margin-bottom: 20px; } .icon-uniE907:before { content: "\e907"; font-size: 35px; } .icon-uniE906:before { content: "\e906"; } .icon-uniE905:before { content: "\e905"; } section:nth-of-type(3) { /*margin-bottom: 50px;*/ } section:nth-of-type(3) > .container > p { line-height: 60px; } section:nth-of-type(3) > .container > .pull-left > span{ color: red; } section:nth-of-type(3) > .container > .pull-left > a{ color: red; border-bottom: 1px dashed red; } section:nth-of-type(4) { height: auto; background: #f5f5f5; } section:nth-of-type(4) > .container .nav-tabs { margin-top: 30px; border: 0; border-bottom: 2px solid #ccc; margin-left: 20px; } section:nth-of-type(4) > .container .nav-tabs > li { } section:nth-of-type(4) > .container .nav-tabs > li >a{ color: #888; font-size: 15px; } section:nth-of-type(4) > .container .nav-tabs > li >a:hover{ color: red; background: transparent; font-size: 16px; border-color:transparent; } section:nth-of-type(4) > .container .nav-tabs > li.active >a{ background: transparent; border: 0; font-size: 16px; border-bottom: 4px solid red; } section:nth-of-type(4) .tab-content { margin:20px 0; } section:nth-of-type(4) .panel.panel-default { height: 150px; } section:nth-of-type(4) .panel-heading { float: right; width: 130px; padding: 0; color: #333; height: 150px; background: #fff; border-left:1px dashed #ccc; position: relative; } section:nth-of-type(4) .panel-heading::before, section:nth-of-type(4) .panel-heading::after{ content: ""; width: 18px; height: 18px; border-radius: 50%; position: absolute; background-color: #f5f5f5; left:-9px; } section:nth-of-type(4) .panel-heading::before { top:-9px; box-shadow:0px -1px 1px 0 #ccc inset; } section:nth-of-type(4) .panel-heading::after { bottom: -9px; box-shadow:0px 1px 1px 0 #ccc inset; } section:nth-of-type(4) .panel-body { margin-right: 130px; border-top-color: #333; } section:nth-of-type(4) .panel-body h5 { font-size: 16px; color: #fff; } section:nth-of-type(4) .panel-heading strong{ font-size: 50px; line-height: 150px; } section:nth-of-type(4) .panel-heading sub { font-size: 20px; } section:nth-of-type(4) .panel-body p { margin-bottom: 5px; font-size: 12px; } .panel-default.actived { background: red; } .panel-default > .panel-heading.actived { background: red; } .panel-default.actived::before { content: "\e915"; font-family: myfont; color: #fff; font-size: 50px; position: absolute; top:-10px; } .panel-default.disabled { background: #e0e0e0; } .panel-default .panel-heading.disabled { background: #e0e0e0; } .panel-heading > [type=button] { position: absolute; top:20px; width: 30px; height: 30px; padding: 0; border:1px solid green; text-align: center; font-weight: 700; } .panel-heading > [type=button]:nth-of-type(1) { left:70px; color: green; } .panel-heading > [type=button]:nth-of-type(2) { border:1px solid red; left:30px; color: red; } /*.panel-heading .btn-default:hover { color: #fff; background-color: #fff; border-color: #adadad; } .panel-heading .btn:hover, .btn:focus, .btn.focus { color: #333; text-decoration: none; }*/ /*新闻部分*/ section:nth-of-type(5) { padding-bottom: 50px; border-bottom: 1px solid #ccc; } #news { padding: 50px 0; margin-right: 10px; } #news .news-title { text-align: center; font-size: 18px; padding: 15px 0; border-bottom: 1px dashed #ccc; position: relative; } #news .news-title::after { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; border:1px solid #ccc; position: absolute; bottom:-5px; right: -10px; } @media (max-width: 768px) { #news .nav-tabs{ /*padding:0 3%;*/ } } #news .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { padding: 0px; width: 60px; height: 60px; line-height: 60px; color: #fff; background-color: red; border: 0; border-radius: 10px; text-align: center; } footer { height: 200px; } #news .nav-tabs { border:0; } #news .nav-tabs > li { border:0; width: 60px; height: 60px; color: #fff; margin:0 20px 10px 20px; } @media (max-width: 768px) { #news .nav-tabs > li { margin-top: 20px; } #news #news1 ul { margin-top: 20px; } } #news .nav-tabs > li>a { color: #ccc; padding: 0px; line-height: 60px; text-align: center; } #news .nav-tabs > li:hover, #news .nav-tabs > li>a:hover{ border:0; background: red; border-radius: 10px; color: #fff; } #news #news1 ul>li { margin-top: 5px; } /*模态框*/ #myModal .modal-body span{ font-size: 18px; color: #888; margin-left: 26px; } #myModal .modal-body input { margin-bottom: 10px; width: 360px; height: 30px; border:1px solid #ccc; outline: none; margin-left: 20px; } #myModal .modal-body input:nth-of-type(2) { margin-left: 38px; } </style> </head> <body> <header> <div class="topbar hidden-sm hidden-xs"> <div class="container"> <div class="row"> <div class="col-md-2 text-center"> <a class="mobile-link" href="#"> <i class="icon-mobilephone"></i> <span>微金所手机</span> <i class="glyphicon glyphicon-chevron-down"></i> <img src="img/c_06.jpg" alt=""> </a> </div> <div class="col-md-5 text-center"> <a class="telephone-link"href="#"> <i class="icon-telephone"></i> <span>4006-89-4006（服务时间：9:00-21:00）</span> </a> </div> <div class="col-md-2 text-center"> <a href="#">常见问题</a> <a href="#">财富登录</a> </div> <div class="col-md-3 text-center"> <a href="#" class="btn btn-sample btn-sm">免费注册</a> <a href="#" class="btn btn-link btn-md" data-toggle="modal" data-target="#myModal">登录</a> </div> </div> </div> </div> <nav class="navbar navbar-sample navbar-static-top" data-spy="affix" data-offset-top="60" data-offset-bottom="200"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_list" aria-expanded="false"> <span class="sr-only">切换菜单</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> <i class="icon-icon"></i> <i class="icon-logo"></i> </a> </div> <div id="nav_list" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">我要投资</a></li> <li><a href="#">我要借款</a></li> <li><a href="#">平台介绍</a></li> <li><a href="#">新手专区</a></li> <li><a href="#">最新动态</a></li> <li><a href="#">微论坛</a></li> </ul> <ul class="nav navbar-nav navbar-right hidden-sm"> <li><a href="#">个人中心</a></li> </ul> </div> </div> </nav> </header> <section> <div id="carousel-example-generic" class="carousel slide lunbo" data-ride="carousel"> <!-- Indicators --> <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> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active" data-image-lg="img/slide_01_2000x410.jpg" data-image-xs="img/slide_01_640x340.jpg"> </div> <div class="item" data-image-lg="img/slide_02_2000x410.jpg" data-image-xs="img/slide_02_640x340.jpg"> </div> <div class="item" data-image-lg="img/slide_03_2000x410.jpg" data-image-xs="img/slide_03_640x340.jpg"> </div> <div class="item" data-image-lg="img/slide_04_2000x410.jpg" data-image-xs="img/slide_04_640x340.jpg"> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </section> <section> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <a href="#"> <div class="media"> <div class="media-left"> <i class="icon-uniE907"></i> </div> <div class="media-body"> <h4 class="media-heading">支付交易保障</h4> <p>银联支付全程保障支付安全</p> </div> </div> </a> </div> <div class="col-md-4 col-sm-6"> <a href="#"> <div class="media"> <div class="media-left"> <i class="icon-uniE907"></i> </div> <div class="media-body"> <h4 class="media-heading">支付交易保障</h4> <p>银联支付全程保障支付安全</p> </div> </div> </a> </div> <div class="col-md-4 col-sm-6"> <a href="#"> <div class="media"> <div class="media-left"> <i class="icon-uniE907"></i> </div> <div class="media-body"> <h4 class="media-heading">支付交易保障</h4> <p>银联支付全程保障支付安全</p> </div> </div> </a></div> <div class="col-md-4 col-sm-6"> <a href="#"> <div class="media"> <div class="media-left"> <i class="icon-uniE907"></i> </div> <div class="media-body"> <h4 class="media-heading">支付交易保障</h4> <p>银联支付全程保障支付安全</p> </div> </div> </a></div> <div class="col-md-4 col-sm-6"> <a href="#"> <div class="media"> <div class="media-left"> <i class="icon-uniE907"></i> </div> <div class="media-body"> <h4 class="media-heading">支付交易保障</h4> <p>银联支付全程保障支付安全</p> </div> </div> </a></div> <div class="col-md-4 col-sm-6"> <a href="#"> <div class="media"> <div class="media-left"> <i class="icon-uniE907"></i> </div> <div class="media-body"> <h4 class="media-heading">支付交易保障</h4> <p>银联支付全程保障支付安全</p> </div> </div> </a></div> </div> </div> </section> <section> <div class="container"> <p class="pull-left"><i class="icon-uniE906"></i>现在有<span>458</span>人在排队，累计预约交易成功<span>7409</span>次。 什么是预约投标？ <a href="#"> 立即预约</a> </p> <p class="pull-right"><i class="icon-uniE905"></i> <a href="#">微金所企业宣传片</a></p> </div> </section> <section> <div class="container"> <div class="ul-wrapper"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">特别推荐</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">微投资</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">微消费</a></li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">微消费</a></li> <li role="presentation"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">微消费</a></li> <li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">微消费</a></li> <li role="presentation" class="pull-right hidden-xs hidden-sm"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">更多</a></li> </ul> </div> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="panel panel-default actived"> <div class="panel-heading actived text-center"> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">京</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">沪</button> <strong>8</strong> <sub>%</sub></div> <div class="panel-body text-center"> <h5>新手体验标65期</h5> <div class="row"> <div class="col-xs-6 text-left"> <p>起头金额</p> <p><strong>0.01</strong><sub>万</sub></p> </div> <div class="col-xs-6 text-right"> <p>起头金额</p> <p><strong>0.01</strong><sub>万</sub></p> </div> <div class="col-xs-6 text-left"> <p>起头金额</p> <p><strong>0.01</strong><sub>万</sub></p> </div> <div class="col-xs-6 text-right"> <p>起头金额</p> <p><strong>0.01</strong><sub>万</sub></p> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="panel panel-default disabled"> <div class="panel-heading disabled text-center"> <strong>8</strong> <sub>%</sub> </div> <div class="panel-body text-center"> <h5>新手体验标65期</h5> <div class="row"> <div class="col-xs-6 text-left"> <p>起头金额</p> <p><strong>0.01</strong><sub>万</sub></p> </div> <div class="col-xs-6 text-right"> <p>起头金额</p> <p><strong>0.01</strong><sub>万</sub></p> </div> <div class="col-xs-6 text-left"> <p>起头金额</p> <p><strong>0.01</strong><sub>万</sub></p> </div> <div class="col-xs-6 text-right"> <p>起头金额</p> <p><strong>0.01</strong><sub>万</sub></p> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="panel panel-default"> <div class="panel-heading text-center"> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">京</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">沪</button> <strong>8</strong> <sub>%</sub></div> <div class="panel-body text-center"> <h5>新手体验标65期</h5> <div class="row"> <div class="col-xs-6 text-left"> <p>起头金额</p> <p><strong>0.01</strong><sub>万</sub></p> </div> <div class="col-xs-6 text-right"> <p>起头金额</p> <p><strong>0.01</strong><sub>万</sub></p> </div> <div class="col-xs-6 text-left"> <p>起头金额</p> <p><strong>0.01</strong><sub>万</sub></p> </div> <div class="col-xs-6 text-right"> <p>起头金额</p> <p><strong>0.01</strong><sub>万</sub></p> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="panel panel-default actived"> <div class="panel-heading actived text-center"> <strong>8</strong> <sub>%</sub></div> <div class="panel-body text-center"> <h5>新手体验标65期</h5> <div class="row"> <div class="col-xs-6 text-left"> <p>起头金额</p> <p><strong>0.01</strong><sub>万</sub></p> </div> <div class="col-xs-6 text-right"> <p>起头金额</p> <p><strong>0.01</strong><sub>万</sub></p> </div> <div class="col-xs-6 text-left"> <p>起头金额</p> <p><strong>0.01</strong><sub>万</sub></p> </div> <div class="col-xs-6 text-right"> <p>起头金额</p> <p><strong>0.01</strong><sub>万</sub></p> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"></div> <div class="col-md-4 col-sm-6"></div> </div> </div> </div> <div role="tabpanel" class="tab-pane" id="profile">...</div> <div role="tabpanel" class="tab-pane" id="messages">...</div> <div role="tabpanel" class="tab-pane" id="settings">...</div> <div role="tabpanel" class="tab-pane" id="tab1">1</div> <div role="tabpanel" class="tab-pane" id="tab2">2</div> <div role="tabpanel" class="tab-pane" id="tab3">3</div> </div> </div> </section> <!-- 新闻版块 --> <section> <div class="container"> <div class="row"> <div id="news"> <div class="col-sm-2 col-sm-offset-3"> <div class="news-title"> 热点新闻 </div> </div> <div class="col-sm-1"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#news1" aria-controls="news1" role="tab" data-toggle="tab" data-title="热点新闻">news1</a></li> <li role="presentation"><a href="#news2" aria-controls="news2" role="tab" data-toggle="tab" data-title="媒体新闻">news2</a></li> <li role="presentation"><a href="#new3" aria-controls="new3" role="tab" data-toggle="tab" data-title="热点资讯">new3</a></li> <li role="presentation"><a href="#news4" aria-controls="news4" role="tab" data-toggle="tab" data-title="爱你三千遍">news4</a></li> </ul> </div> <div class="col-sm-6"> <div class="tab-content in fade"> <div role="tabpanel" class="tab-pane active" id="news1"> <ul> <li>微金所发钱了，大家快来抢啊！！</li> <li>微金所发钱了，大家快来抢啊！！</li> <li>微金所发钱了，大家快来抢啊！！</li> <li>微金所发钱了，大家快来抢啊！！</li> <li>微金所发钱了，大家快来抢啊！！</li> <li>微金所发钱了，大家快来抢啊！！</li> <li>微金所发钱了，大家快来抢啊！！</li> <li>微金所发钱了，大家快来抢啊！！</li> <li>微金所发钱了，大家快来抢啊！！</li> <li>微金所发钱了，大家快来抢啊！！</li> </ul> </div> <div role="tabpanel" class="tab-pane fade" id="news2">...</div> <div role="tabpanel" class="tab-pane fade" id="new3">...</div> <div role="tabpanel" class="tab-pane fade" id="news4">...</div> </div> </div> </div> </div> </div> </section> <section id="pattener"></section> <footer></footer> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">欢迎登录</h4> </div> <div class="modal-body"> <span>用户名：</span><input type="text"><br> <span>密码：</span><input type="password" name="" id=""> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary">登录</button> </div> </div> </div> </div> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="lib/jquery/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="lib/bootstrap/js/bootstrap.min.js"></script> <script> $(function(){ function resize(){ var windowWidth = $(window).width(); $('.carousel-inner>.item').each(function(i,item){ var imgSrc = windowWidth < 768 ? $(item).data('image-xs') : $(item).data('image-lg'); $(item).css('backgroundImage','url("'+imgSrc+'")'); if(windowWidth < 768) { $(item).css('backgroundImage',''); $(item).html('<img src="'+imgSrc+'" alt="" />'); }else { $(item).html(''); } }); } $(window).on('resize',resize).trigger('resize'); $('[data-toggle="tooltip"]').tooltip(); //控制标签页的标签容器宽度 var $ulContainer = $('.nav-tabs'); var width = 30; $ulContainer.children().each(function(i,item){ width += item.clientWidth; }); console.log(width); // 判断当前ul的宽是否超出屏幕，超出就显示横向滚动条 var windowWidth = $(window).width(); if(width>windowWidth) { $ulContainer.css("width",width).parent().css("overflow-x","scroll"); } //新闻点击时切换标题 $('#news .nav-tabs a').on('click',function(){ var title = $(this).data('title'); $('#news .news-title').text(title); }); //左滑右划 if(windowWidth < 768) { var startX; var endX; var distance = 50; $('.lunbo').on('touchstart',function(e){ startX = e.originalEvent.changedTouches[0].clientX; }); $('.lunbo').on('touchmove',function(e){ endX = e.originalEvent.changedTouches[0].clientX; }); $('.lunbo').on('touchend',function(e){ if(Math.abs(startX - endX) > distance) { startX > endX ? $('.lunbo').carousel('next') : $('.lunbo').carousel('prev'); } }); } }); </script> </body> </html>