BootStrap实战四之网站内容添加（上）

网站内容代码：

<section class="content-wrap">
        <div class="container">
            <div class="row">
                <main class="col-md-8 main-content">
                    <article class="post tag-abuot-ghost tag-ghost-in-depth tag-zhu-shuo">
                        <div class="post-head">
                            <h1 class="post-title">
                                <a href="#">Node.js v4 LTS 成为 Ghost 推荐版本</a>
                            </h1>
                            <div class="post-meta">
                                <span class="author">
                                    作者
                                    <a href="#">王赛</a>
                                    </span>
                                    •
                                    <time class="date" datetime="2015-10-10">2015年10月10日</time>
                            </div>
                        </div>
                        <div class="post-content">
                            <p>
                                从这周起，我们将 Ghost 推荐 Node.js 版本升级为 Node.js v4 LTS。 我们这样做其实已经落后于计划了。然而，经过大量测试之后，我们确信 Ghost 可以在 Node.js v4 平台上流畅的运行并且内存消耗比原来也减少了。目前，Ghost(Pro) 上托
                            </p>
                        </div>
                        <div class="post-permalink">
                            <a href="#" class="btn btn-default">阅读全文</a>
                        </div>
                        <div class="footer clearfix">
                            <hr>
                            <div class="pull-left tag-list">
                                <a href="#">Ghost</a>
                                <a href="#">深度玩转</a>
                                <a href="#">助手函数</a>
                            </div>
                        </div>
                </main>
            </div>
        </div>
    </section>

对应的 app.css 文件内容：

/*网站内容（上）*/
.post{
    padding: 35px;
    background:#ffffff;
    margin-bottom: 35px;
    position: relative;
    overflow: hidden;
}

.post .post-head{
    text-align: center;

}

.post .post-head .post-title{
    margin: 0;
    font-size: 2.5em;
    line-height: 1em;
}

.post .post-head .post-title a{
    color: #303030;
}

.post .post-head .post-meta{
    color:#959595;
    margin: 14px 0 0px;
}

.post-content{
    font:400 18px/1.62 "Glyphicons Halflings";
    color:#444443;
}

.post-content p{
    margin-top: 0;
    margin-bottom: 1.46em;
}

.btn-default{
    border:1px solid #e67e22;
    background: #e67e22;
    color: #ffffff;
    transition: all 0.2s ease-in-out;
    -webkit-transition:all 0.2s ease-in-out;;
}

.btn{
    padding: 7px 14px;
    border-radius: 2px;
}

.post .post-footer{
    margin-top: 30px;
    border-top:1px solid #ebebeb;
    padding-height:21px 0 0;
}

.post .post-footer .tag-list{
    color: #959595;
    line-height: 28px;
}