Gitte - 开源个人博客网站
<!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.0">
<title>Gitte - 开源个人博客网站</title>
<link rel="stylesheet" href="./bootstrap-3.3.7-dist/bootstrap.css">
<script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="./js/jquery-1.11.0.min.js"></script>
<style>
h1 {
text-align: center;
font-size: 50px;
font-weight: bold;
margin-top: 80px;
}
<pre><code> p {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-top: 20px;
}
</style>
</code></pre>
</head>
<body>
<!-- 顶部导航条 -->
<nav class="navbar navbar-default navbar-fixed-top ">
<div class="container">
<div class="navbar-heard">
<button type="button" class="navbar-toggle " data-toggle="collapse"
data-target="#">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Gitte</a>
</div>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav">
<li><a href="#">首页</a></li>
<li><a href="#">开源软件</a></li>
<li><a href="#">动态</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" class="denglu">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="搜索">
</div>
</form>
</div>
</div>
</nav>
<!-- 页面内容 -->
<div class="container main">
<h1>欢迎访问我们的网站</h1>
<p>Gitte 是一个开源的个人博客网站。</p>
</div>
<!-- 底部导航条 -->
<nav class="navbar navbar-default navbar-fixed-bottom navbar-inverse">
<div class="container">
<p class="navbar-text">底部导航条</p>
<ul class="nav navbar-nav">
<li><a href="#">Git 大全</a></li>
<li><a href="#">Git 命令学习</a></li>
<li><a href="#">帮助文档</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">版权声明</a></li>
</ul>
</div>
</nav>
<!-- 分页组件--pagination -->
<div style="text-align:center ; margin-top: 500px;">
</div>
<!-- 翻页组件--pager -->
<!-- <div style="text-align:center ; margin-top: 100px;"> <ul class="pager"> <li><a href="#">上一页</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">下一页</a></li> </ul> </div> -->
<!-- 警告框 -->
<div class="alert alert-success" role="alert" style="margin-top:-400px ;">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit
longer so that you can see how spacing within an alert works with this kind of content.</p>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
<!-- 动态进度条 -->
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45"
aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete (success)</span>
</div>
</div>
<div class="container mt-5">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<script>
$(document).ready(function() {
var progress = 0;
var interval = setInterval(function() {
progress += 10;
$('.progress-bar').css('width', progress + '%').attr('aria-valuenow', progress);
if (progress >= 100) {
clearInterval(interval);
}
}, 1000);
});
</script>
<div class="container mt-5">
<h3>游戏加载进度条</h3>
<div class="progress">
<div id="progress-bar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
<script>
// 模拟加载进度
function simulateLoading() {
var progressBar = document.getElementById('progress-bar');
var progress = 0;
var interval = setInterval(function() {
progress += 10;
progressBar.style.width = progress + '%';
progressBar.setAttribute('aria-valuenow', progress);
progressBar.innerHTML = progress + '%';
if (progress >= 100) {
clearInterval(interval);
progressBar.classList.remove('progress-bar-animated');
progressBar.classList.add('bg-success');
progressBar.innerHTML = '加载完成';
}
}, 2000);
}
<pre><code> // 页面加载完成后开始模拟加载进度
document.addEventListener('DOMContentLoaded', function() {
simulateLoading();
});
</script>
</code></pre>
</body>
<script>
</script>
<p></htm</p>
原文地址: https://www.cveoy.top/t/topic/pccu 著作权归作者所有。请勿转载和采集!