基於bootstrap_博客頁面
阿新 • • 發佈：2018-03-04
arr document face page des containe sca spa asc
<!DOCTYPE html> <!-- saved from url=(0036)http://v3.bootcss.com/examples/blog/ --> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"content="width=device-width, initial-scale=1"> <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其後！ --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="http://v3.bootcss.com/favicon.ico"> <title>我的博客改編版</title> <!-- Bootstrap core CSS --> <link href="./files/bootstrap.min.css" rel="stylesheet"> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <link href="./files/ie10-viewport-bug-workaround.css" rel="stylesheet"> <!-- Custom styles for this template--> <link href="./files/blog.css" rel="stylesheet"> <!-- Just for debugging purposes. Don‘t actually copy these 2 lines! --> <!--[if lt IE 9]> <script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src="./files/ie-emulation-modes-warning.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="blog-masthead navbar-fixed-top"> <div class="container"> <nav class="blog-nav"> <a class="blog-nav-item active" href="#">主頁</a> <a class="blog-nav-item" href="#">日誌</a> <a class="blog-nav-item" href="#">說說</a> <a class="blog-nav-item" href="#">隨筆</a> <a class="blog-nav-item" href="#">關於我</a> </nav> </div> </div> <div class="container"> <div class="blog-header"> <h1 class="blog-title">welcome to my-盜版博客</h1> <p class="lead blog-description">世界上最幸福的事莫過於餓的時候吃個熱熱的包子</p> </div> <div class="row"> <div class="col-sm-8 blog-main"> <div class="blog-post"> <h3 class="blog-post-title">my blog_post</h3> <p class="blog-post-meta">2015八月</p> <p>你站在橋上看流水，水中倒影也在看你。你以為他是你的影子，他卻以為你是他的影子...</p> <hr> <p>浮生過客如雲，誰為誰動情，誰為誰留影？</p> <blockquote> <p>不為你綠的花葉，本座便讓它一世雕零，從此東天休想花好。 不為你照的明月，本座便讓它永夜殘缺，從此東天休想月圓。</p> </blockquote> <p>我顛覆整個蒼穹，不為長生，不為縱橫，只為擺正你的倒影.......</p> <h3>不歸路</h3> <p>“紅顏似水流不返，可憐公子不思凡…”</p> <h3>拜你所賜</h3> <p>“惟將終夜長開眼，報答平生未展眉，背燈和月就花陰，十年蹤跡十年心…”</p> <pre><code>“何謂醉？卒於酉，死於酒，便是醉...若我守住心中一絲澄明，則任身體醉倒，心卻不醉，而終究，一絲醉意都不存於心。”</code></pre> <p> 樂莫樂兮新相知，悲莫悲兮生別離...我心如竹盼君歸，我身化海君不知..</p> <h3>十步一幻，君莫回頭。輪回一響，君道成空。</h3> <p>“雨不來，方有勢...山不動，故有勢...潛龍在淵，有騰飛之勢...青蟲結繭，有化蝶之勢...人王不殺，有服人之勢...天地不爭，有傾覆之勢！”</p> <h3>相思成疾</h3> <p>殺氣，並非殺人氣勢，而是一種威，一種魔威。如同不出鞘的魔劍，讓人不敢逼視。有魔頭種花養魚，耕讀閑遊，但殺氣並未減弱，而是藏了鋒芒，變得更加深沈，一旦動用，魔威更盛。</p> <pre><code>雖千萬人吾往矣！敵人強也好，弱也罷，都無法都要我心中執念。我若要去，縱然前方有千軍萬馬，也無人可阻！唯有如此，才配得上一個戰字！</code></pre> <p> 空心竹。有魂居，魂生根，在竹心...殘魂之所以能漠視輪回，寄身竹內，只因心有執著。若心悲，則竹滅，則魂死... </p> <p>“雨不來，方有勢...山不動，故有勢...潛龍在淵，有騰飛之勢...青蟲結繭，有化蝶之勢...人王不殺，有服人之勢...天地不爭，有傾覆之勢！”</p> <p>那一年，我立於萬敵之前，不求勝敗，只為握緊你的溫暖。那一世，我走遍十萬星河，不為修來世，只為途中與你相見。那一日，我頭顱高懸，心中卻是坦然一片。</p> <p><a href="">想看更多句子嗎？</a></p> </div><!-- /.blog-post --> <nav> <ul class="pager"> <li><a href="#">上一頁</a></li> <li><a href="#">下一頁</a></li> </ul> </nav> </div><!-- /.blog-main --> <div class="col-sm-3 col-sm-offset-1 blog-sidebar"> <div class="sidebar-module sidebar-module-inset"> <h4>我是墨水</h4> <p>第一花好，不教萬葉恨蕭蕭；第二月圓，不叫蕭郎負嬋娟；最要家好人相歡，此生此夜永平安</p> </div> <div class="sidebar-module"> <h4>Archives</h4> <ol class="list-unstyled"> <li><a href="#">2012-08</a></li> <li><a href="#">2012-09</a></li> <li><a href="#">2012-12</a></li> <li><a href="#">2013-03</a></li> <li><a href="#">2013-05</a></li> <li><a href="#">2013-08</a></li> <li><a href="#">2013-09</a></li> <li><a href="#">2014-04</a></li> <li><a href="#">2014-08</a></li> <li><a href="#">2015-03</a></li> <li><a href="#">2016-08</a></li> <li><a href="#">2017-10</a></li> <li><a href="#">···</a></li> </ol> </div> <div class="sidebar-module"> <h4>作者本人</h4> <ol class="list-unstyled"> <li><a href="#">我是墨水</a></li> <li><a href="#">執魔</a></li> <li><a href="#">合體雙修</a></li> </ol> </div> </div><!-- /.blog-sidebar --> </div><!-- /.row --> </div><!-- /.container --> <footer class="blog-footer"> <p>Blog template built for <a href="#">Bootstrap</a> by <a href="#">執迷</a>.</p> <p> <a href="#">返回頂部↑</a> </p> </footer> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="./files/jquery.min.js"></script> <script>window.jQuery || document.write(‘<script src="../../assets/js/vendor/jquery.min.js"><\/script>‘)</script> <script src="./files/bootstrap.min.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="./files/ie10-viewport-bug-workaround.js"></script> </body> </html>
網頁效果圖展示：
基於bootstrap_博客頁面