bootstrap開發一個簡單網頁。
CSS代碼:javascript
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;
}css
HTML代碼: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">html5
<!--引用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>java
</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
<!--引用jquery-->
<script type="text/javascript" src="j#"></script>chrome
<!--引用bootstrap.js-->
<script src="#"></script>bootstrap
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();
});
})();
ide
- 1. 用bootstrap寫一個簡潔的網頁
- 2. 教你寫一個簡單的網頁（html網頁開發入門）
- 3. Bootstrap-實現簡單的網站首頁
- 4. 手機網頁開發簡單總結
- 5. 一個簡單完整的網頁
- 6. 用Django創建一個簡單網頁
- 7. 自學網頁開發，打算本身開發一個簡單的網站，記錄下本身開發過程
- 8. 基於bootstrap的網頁開發
- 9. vue+bootstrap 實現一個簡單分頁器
- 10. 使用Bootstrap編寫一個簡單的網頁輪播圖效果
- 更多相關文章...
- • Web 網頁 驗證 - 網站建設指南
- • 第一個MyBatis程序 - MyBatis教程
- • PHP開發工具
- • Github 簡明教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。