不知道说什么，随便打点东西，心情不是太好~~~~~
自己做了一个基于bootstrap的网页，刚开始做，有点累了，先上传这些上去，以后还会更新~~~~~~~~
--------------------------------------------------------------------------------------------心情低落的分割线--------------------------------------------------------------------------------------------
首先是截图
对bootstrap的一些简单的应用，很简单。。。。下面是代码~~~~~~~~~
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的网站</title>
<link rel="stylesheet" href="https://fonts.gdgdocs.org/css?family=Lobster" type="text/css">
<!-- 导入谷歌字体 -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="carousel-inner">
<nav class="navbar navbar-default navbar-fixed-top" style="margin-bottom: 0px;">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#"><b>丶</b></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">因为一个人<span class="sr-only">(current)</span></a></li>
<li><a href="#">爱上一座城</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="#">我的Ps</a></li>
<li><a href="#">我的代码</a></li>
<li><a href="#">我的心情</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">额~ 一些骚东西</a></li>
<!-- <li role="separator" class="divider"></li> -->
</ul>
</li>
<li><a href="http://www.cleanall.xyz/birthday/boot/index.html">Happy birthday！</a></li>
</ul>
<form class="navbar-form navbar-left" onsubmit="return baiduWithHttps(this)" action="http://www.baidu.com/baidu" target="_blank">
<div class="form-group">
<input type="text" onfocus="checkHttps" class="form-control" name="word" placeholder="也许~">
</div>
<button type="submit" class="btn btn-default">这一刻永恒</button>
</form>
<!-- -->
<script src="http://s1.bdstatic.com/r/www/cache/global/js/BaiduHttps_20150714_zhanzhang.js"></script>
<script>
function checkHttps () {
BaiduHttps.useHttps();
};
function baiduWithHttps (formname) {
var data = BaiduHttps.useHttps();
if (data.s === 0) {
return true;
}
else {
formname.action = 'https://www.baidu.com/baidu' + '?ssl_s=1&ssl_c' + data.ssl_code;
return true;
}
};
</script>
<!-- -->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- banner -->
<!-- <img class="center-block" src="img/banner.jpg" width="100%" /> -->
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="img/banner.jpg" alt="First slide">
</div>
<div class="item">
<img src="img/banner1.jpg" alt="Second slide">
</div>
<div class="item">
<img src="img/banner2.jpg" alt="Third slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
</div>
</div>
<!--导航结束-->
<div">
<h2>专业知识</h2>
<!-- 进度条 -->
<p style="float: left; margin-left: 50px; margin-right: 50px; font-weight: bold;">web前端</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span class="sr-only">40% 完成</span>
</div>
</div>
<p style="float: left; margin-left: 50px; margin-right: 50px; font-weight: bold;">平面设计</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">40% 完成</span>
</div>
</div>
<p style="float: left; margin-left: 50px; margin-right: 50px; font-weight: bold;">学习能力</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
<span class="sr-only">40% 完成</span>
</div>
</div>
</div>
<div style="clear: both;"></div>
<!-- 进度条结束 -->
</body>
<script src="js/jquery-3.2.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>
喜欢的关注一下，感到我做的不好的，请指点我，真的，很喜欢前端设计，~~~~只希望自己可以勤能补拙~~~~~~~~~~~
上文网页所在的网址：