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

冷不防 2021-09-13 23:14 273阅读 0赞

**网站内容代码：**

<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; }