bootstrap博客頁面
阿新 • • 發佈：2017-05-06
ots src 效果圖 linu oot nav search scrip div
部分效果圖：
代碼部分：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>似水流年的Blog</h1>
<h4>逝者如斯夫，不舍晝夜</h4>
</div>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav ">
<li><a href="">首頁</a></li>
<li class="active"><a href="">文章</a></li>
<li><a href="">關於</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="search"/>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</nav>
<div class="row">
<div class="col-lg-8">
<article>
<h2><a href="">第一篇文章</a></h2>
<div>
<p>近日，“格鬥狂人”徐曉冬KO“太極宗師”雷公事件，引發了諸多有關中國武術的爭論。其實，在歷史
上，中國武術曾多次亮相擂臺，並留下不少可信的文字、照片，以及視頻記錄。仔細研究這些記錄，是不
難管中窺豹，得見中國武術之真實戰力的。</p>
<p>對於中國武術在擂臺上的表現，古書中的記載或語焉不詳，或缺少可信證據，大多屬於傳說性質。
直到近代，隨著大眾媒體的出現，我們才有機會見到真實武術對決的樣子。比如中華國術館組織兩次“國
術國考”的情況，即被媒體記錄了下來。</p>
</div>
</article>
<article>
<h2><a href="">第二篇文章</a></h2>
<div >
<p>近日，“格鬥狂人”徐曉冬KO“太極宗師”雷公事件，引發了諸多有關中國武術的爭論。其實，在歷史
上，中國武術曾多次亮相擂臺，並留下不少可信的文字、照片，以及視頻記錄。仔細研究這些記錄，是不
難管中窺豹，得見中國武術之真實戰力的。</p>
<p>對於中國武術在擂臺上的表現，古書中的記載或語焉不詳，或缺少可信證據，大多屬於傳說性質。
直到近代，隨著大眾媒體的出現，我們才有機會見到真實武術對決的樣子。比如中華國術館組織兩次“國
術國考”的情況，即被媒體記錄了下來。</p>
</div>
</article>
<article>
<h2><a href="">第三篇文章</a></h2>
<div >
<p>近日，“格鬥狂人”徐曉冬KO“太極宗師”雷公事件，引發了諸多有關中國武術的爭論。其實，在歷史
上，中國武術曾多次亮相擂臺，並留下不少可信的文字、照片，以及視頻記錄。仔細研究這些記錄，是不
難管中窺豹，得見中國武術之真實戰力的。</p>
<p>對於中國武術在擂臺上的表現，古書中的記載或語焉不詳，或缺少可信證據，大多屬於傳說性質。
直到近代，隨著大眾媒體的出現，我們才有機會見到真實武術對決的樣子。比如中華國術館組織兩次“國
術國考”的情況，即被媒體記錄了下來。</p>
</div>
</article>
<ul class="pagination">
<li><a href=""><<</a></li>
<li><a href="">3</a></li>
<li class="active"><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">>></a></li>
</ul>
</div>
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">欄目列表</div>
<div class="panel-body">
<ul>
<li><a href="">PHP技術</a></li>
<li><a href="">Linux運維</a></li>
<li><a href="">深層挖掘</a></li>
<li><a href="">生活休閑</a></li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">欄目列表</div>
<div class="panel-body">
<ul>
<li><a href="">PHP技術</a></li>
<li><a href="">Linux運維</a></li>
<li><a href="">深層挖掘</a></li>
<li><a href="">生活休閑</a></li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">欄目列表</div>
<div class="panel-body">
<ul>
<li><a href="">PHP技術</a></li>
<li><a href="">Linux運維</a></li>
<li><a href="">深層挖掘</a></li>
<li><a href="">生活休閑</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="well text-center">底部信息?2009-2017</div>
</div>
</div>
</body>
</html>
經過不斷探索，還是寫完了。
bootstrap博客頁面