基於bootstrap_博客頁面

時間  2019-12-02
標籤 基於 bootstrap 博客 頁面 欄目 Bootstarp 简体版
原文   原文鏈接 
<!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>

 

網頁效果圖展現：css

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程