您的位置:首页 > Web前端 > BootStrap

BootStrap实战四之网站内容添加(上)

2016-11-13 17:19 357 查看
网站内容代码:

<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;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  bootstrap