CSS代码:
body{
padding-top: 50px;
padding-bottom: 50px;
overflow: auto!important;
}
.modal{
overflow: auto!important
}
.carousel{
height: 395px;
background-color: #000;
margin-bottom: 40px;
}
.carousel .item{
height: 395px;
background-color: #000;
}
.carousel img{
width: 100%;
}
.carousel-caption p{
margin-bottom: 20px;
line-height: 1.8;
font-size: 15px;
}
#summary-container .col-md-4{
text-align: center;
}
hr.divider{
margin:40px 0;
}
.feature{
padding: 30px 0;
}
.feature-heading{
font-size: 40px;
color: #2a6496;
margin-top: 120px;
}
.feature-heading .text-muted{
font-size: 25px;
color: #999;
}
#demo-navbar li:hover{
background-color: red;
}
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--引用bootstrap的CSS样式-->
<link rel="stylesheet" href="#">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<title>bootstrap开发一个网页</title>
</head>
<body>
<!-- 导航条 -->
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#demo-navbar">
<span class="sr-only">Toggle navigtion</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 class="collapse navbar-collapse" id="demo-navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">综述</a></li>
<li><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="#tab_1">Chrome</a></li>
<li><a href="#tab_2">Firefox</a></li>
<li><a href="#tab_3">Opera</a></li>
<li><a href="#tab_4">Safari</a></li>
</ul></li>
<li><a href="#" data-toggle="modal" data-target="#about">关于</a></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>
<li data-target="#carousel-example-generic" data-slide-to="5"></li>
</ol>
<!-- 图片 -->
<div class="carousel-inner">
<div class="item active">
<img src="#" alt="1 slide">
<!-- 图片中添加文字 -->
<div class="carousel-caption"><h2>看图说话</h2><p>这是第一张图片</p>
<p><a href="##" class="btn btn-lg btn-primary" role="button" target="_blank">点击下载</a></p></div>
</div>
<div class="item">
<img src="#" alt="2 slide">
<!-- 图片中添加文字 -->
<div class="carousel-caption"><h2>看图说话</h2><p>这是第二张图片</p>
<p><a href="##" class="btn btn-lg btn-primary" role="button" target="_blank">点击下载</a></p></div>
</div>
<div class="item">
<img src="#" alt="3 slide">
<!-- 图片中添加文字 -->
<div class="carousel-caption"><h2>看图说话</h2><p>这是第三张图片</p>
<p><a href="##" class="btn btn-lg btn-primary" role="button" target="_blank">点击下载</a></p></div>
</div>
<div class="item">
<img src="#" alt="4 slide">
<!-- 图片中添加文字 -->
<div class="carousel-caption"><h2>看图说话</h2><p>这是第四张图片</p>
<p><a href="##" class="btn btn-lg btn-primary" role="button" target="_blank">点击下载</a></p></div>
</div>
<div class="item">
<img src="#" alt="5 slide">
<!-- 图片中添加文字 -->
<div class="carousel-caption"><h2>看图说话</h2><p>这是第五张图片</p>
<p><a href="##" class="btn btn-lg btn-primary" role="button" target="_blank">点击下载</a></p></div>
</div>
<div class="item">
<img src="#" alt="6 slide">
<!-- 图片中添加文字 -->
<div class="carousel-caption"><h2>看图说话</h2><p>这是第六张图片</p>
<p><a href="##" class="btn btn-lg btn-primary" role="button" target="_blank">点击下载</a></p></div>
</div>
</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">上一页</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">下一页</span></a>
</div>
<!-- 三格布局栅栏系统 -->
<div class="container" id="summary-container">
<div class="row">
<div class="col-md-4">
<img src="#" class="img-circle" alt="chrome">
<h3>图片1</h3>
<p>不要说话</p>
<p><a href="##" class="btn btn-lg btn-primary" role="button">点击下载</a></p>
</div>
<div class="col-md-4">
<img src="#" class="img-circle" alt="chrome">
<h3>图片2</h3>
<p>不要说话</p>
<p><a href="##" class="btn btn-lg btn-primary" role="button">点击下载</a></p>
</div>
<div class="col-md-4">
<img src="#" class="img-circle" alt="chrome">
<h3>图片3</h3>
<p>不要说话</p>
<p><a href="##" class="btn btn-lg btn-primary" role="button">点击下载</a></p>
</div>
</div>
<!-- 划分线 -->
<hr class="divider">
<!-- 标签页 -->
<ul class="nav nav-tabs" role="tablist" id="tab_list">
<li class="active"><a href="#tab_1" role="tab" data-toggle="tab">1</a></li>
<li><a href="#tab_2" role="tab" data-toggle="tab">2</a></li>
<li><a href="#tab_3" role="tab" data-toggle="tab">3</a></li>
<li><a href="#tab_4" role="tab" data-toggle="tab">4</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_1">
<div class="row feature">
<div class="col-md-5">
<img src="go.jpg" class="feature-image img-responsive" alt="1">
</div>
<div class="col-md-7">
<h3 class="feature-heading">11111<span class="text-muted">one</span></h3>
<p class="lead">11111111111111111111111111111111111</p>
</div>
</div>
</div>
<div class="tab-pane" id="tab_2">
<div class="row feature">
<div class="col-md-7">
<img src="go.jpg" class="feature-image img-responsive" alt="2">
</div>
<div class="col-md-5">
<h3 class="feature-heading">2222<span class="text-muted">two</span></h3>
<p class="lead">222222222222222222222222222222222</p>
</div>
</div>
</div>
<div class="tab-pane" id="tab_3">
<div class="row feature">
<div class="col-md-5">
<img src="go.jpg" class="feature-image img-responsive" alt="3">
</div>
<div class="col-md-7">
<h3 class="feature-heading">3333<span class="text-muted">three</span></h3>
<p class="lead">333333333333333333333333333333333</p>
</div>
</div>
</div>
<div class="tab-pane" id="tab_4">
<div class="row feature">
<div class="col-md-7">
<img src="#" class="feature-image img-responsive" alt="4">
</div>
<div class="col-md-5">
<h3 class="feature-heading">44444<span class="text-muted">four</span></h3>
<p class="lead">444444444444444444444</p>
</div>
</div>
</div>
</div>
</div>
<!-- 划分线 -->
<hr class="divider">
<!-- 底部版权 -->
<footer>
<p class="pull-right"><a href="#top">回到顶部</a></p>
<p>2016*******</p>
</footer>
<div class="modal fade" id="about">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true" class="sr-only">Close</span></button>
<h4 class="modal-title">关于</h4>
</div>
<div class="modal-body"><p>弹出框，你懂了么</p></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">了解了</button>
<button type="button" class="btn btn-default" data-dismiss="modal">了解了</button>
</div>
</div>
</div>
</div>
<!--引用jquery-->
<script type="text/javascript" src="j#"></script>
<!--引用bootstrap.js-->
<script src="#"></script>
Jquery代码：
(function(){
var Modal = {};
//解决Modal弹出时页面左右移动问题
Modal.adjustBody_beforeShow = function(){
console.log("1")
var body_scrollHeight = $('body')[0].scrollHeight;
var docHeight = document.documentElement.clientHeight;
if(body_scrollHeight > docHeight){
$('body').css({
'overflow' : 'hidden',
'margin-left' : '18px'
});
$('.modal').css({'overflow-y':'scroll'})
}else{
$('body').css({
'overflow' : 'auto',
'margin-left' : '0'
});
$('.modal').css({'overflow-y':'auto'})
}
}
Modal.adjustBody_afterShow = function(){
console.log("2")
var body_scrollHeight = $('body')[0].scrollHeight;
var docHeight = document.documentElement.clientHeight;
if(body_scrollHeight > docHeight){
$('body').css({
'overflow' : 'auto',
'margin-left' : '0'
});
}else{
$('body').css({
'overflow' : 'auto',
'margin-left' : '0'
});
}
}
$('#about').modal('hide');
$('#about').on('show.bs.modal', function (event) {
Modal.adjustBody_beforeShow();
});
$('#about').on('hidden.bs.modal', function (event) {
Modal.adjustBody_afterShow();
});
})();