Bootstrap入门（二）：基本布局
1.要实现的基本布局需求
分析：
整个页面共可分为四大部份
顶部菜单 （标记为1）：菜单
中部左边列表（标记为2）：三个样式一致的列表项
中部右边部件（标记为3）：三个样式差异的部件
底部描述（标记为4）：版本等描述
2.开始布局
基本结构：
针对1的布局需求，基本上是三层布局，在Body中定义四个版块。其中2、3版块由于是属于中部，故由一个Div包住。
2.1 顶部菜单（标记1）
<!-- 顶部菜单 （标记为1）：菜单 --> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle collapsed" aria-expanded="false" aria-controls="navbar" type="button" data-toggle="collapse" data-target="#navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#"> <img class="img-responsive" src="img/logo.png" style=""></a> </div> <div class="collapse navbar-collapse" id="navbar"> <ul class="nav navbar-nav"> <li><a href="#">Posts</a></li> <li><a href="#about">Tags</a></li> <li><a href="#contact">Inspirations</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav>
navbar-fixed-top：设置菜单固定在顶部
.navbar-fixed-top {
top: 0px;
border-width: 0 0 1px;
}
2.2 中部左边列表（标记2）
<div class="blog-post-list col-lg-9 col-md-12"> <div class="blog-post-item"> <h3>建筑的意义</h3> <p class="datetime">2017年5月23日</p> <p> 建筑的首要意义在于为人提供一个住所，免于恶劣天气与自然灾害侵扰，进而能在一地方安稳地生存下去。此意义要求了建筑最基本、最根的样式与特点：坚固。抵御的自然灾害包括气候变化，其它物种及其他人的侵犯。建筑的首要意义在于为人提供一个住所，免于恶劣天气与自然灾害侵扰，进而能在一地方安稳地生存下去。此意义要求了建筑最基本、最根的样式与特点：坚固。抵御的自然灾害包括气候变化，其它物种及其他人的侵犯。建筑的首要意义在于为人提供一个住所，免于恶劣天气与自然灾害侵扰，进而能在一地方安稳地生存下去。此意义要求了建筑最基本、最根的样式与特点：坚固。抵御的自然灾害包括气候变化，其它物种及其他人的侵犯。建筑的首要意义在于为人提供一个住所，免于恶劣天气与自然灾害侵扰，此意义要求了建筑最基本、最根的样式与特点：坚固。抵御的自然灾害包括气候变化，其它物种及其他人的侵犯。 </p> <div class="tags-list"> <a class="tag-item" href="#">建筑</a> <a class="tag-item" href="#">栱</a> </div> </div> <div class="blog-post-item"> <h3>建筑的意义</h3> <p class="datetime">2017年5月23日</p> <p>建筑的首要意义在于为人提供一个住所，免于恶劣天气与自然灾害侵扰，进而能在一地方安稳地生存下去。此意义要求了建筑最基本、最根的样式与特点：坚固。抵御的自然灾害包括气候变化，其它物种及其他人的侵犯。</p> <div class="tags-list"> <a class="tag-item" href="#">建筑</a> <a class="tag-item" href="#">栱</a> </div> </div> <div class="blog-post-item"> <h3>建筑的意义</h3> <p class="datetime">2017年5月23日</p> <p>建筑的首要意义在于为人提供一个住所，免于恶劣天气与自然灾害侵扰，进而能在一地方安稳地生存下去。此意义要求了建筑最基本、最根的样式与特点：坚固。抵御的自然灾害包括气候变化，其它物种及其他人的侵犯。</p> <div class="tags-list"> <a class="tag-item" href="#">建筑</a> <a class="tag-item" href="#">栱</a> </div> </div> <div class="blog-post-item"> <h3>建筑的意义</h3> <p class="datetime">2017年5月23日</p> <p>建筑的首要意义在于为人提供一个住所，免于恶劣天气与自然灾害侵扰，进而能在一地方安稳地生存下去。此意义要求了建筑最基本、最根的样式与特点：坚固。抵御的自然灾害包括气候变化，其它物种及其他人的侵犯。</p> <div class="tags-list"> <a class="tag-item" href="#">建筑</a> <a class="tag-item" href="#">栱</a> </div> </div> <div class="page-index-container"> <ul class="pagination"> <li><a href="/?page=1">««</a></li> <li><a href="/?page=6">Prev</a></li> <li><span>…</span></li> <li><a href="/?page=2">2</a></li> <li><a href="/?page=3">3</a></li> <li><a href="/?page=4">4</a></li> <li><a href="/?page=5">5</a></li> <li><a href="/?page=6">6</a></li> <li class="active"><a>7</a></li> <li><a href="/?page=8">8</a></li> <li><a href="/?page=9">9</a></li> <li><a href="/?page=10">10</a></li> <li><a href="/?page=11">11</a></li> <li><span>…</span></li> <li><a href="/?page=8">Next</a></li> <li><a href="/?page=29">»»</a></li> </ul> </div> </div>
2.3.中部右边部件（标记3）
<div class="blog-Side col-lg-3"> <section class="blog-author blog-info-desktop-lg"> <div> <img class="img-responsive" src="img/Yu-weizLogoSmall.jpg" /> </div> <div class="btn-group btn-group-justified bottom"> <button type="button" class="btn btn-success" style="border:0px;width: 50%"> E-mail </button> <button type="button" class="btn btn-primary" style="border:0px;width: 50%"> GitHub </button> </div> </section> <div class="bor"></div> <section> <div class="side-widget"> <div class="tags-header div-padding">Top tags</div> <div class="tags-list side-widget-tags div-padding" style="padding-top:12px"> <a class="tag-item" href="#">建筑</a> <a class="tag-item" href="#">栱</a> <a class="tag-item" href="#">建筑</a> <a class="tag-item" href="#">栱</a> <a class="tag-item" href="#">建筑</a> <a class="tag-item" href="#">栱</a> <a class="tag-item" href="#">建筑</a> <a class="tag-item" href="#">栱</a> </div> </div> </section> <div class="bor"></div> <section class="side-widget"> <div class="tags-header div-padding">Apps</div> <div class="div-padding side-widget-list-items" style="padding-top:12px;position:relative"> <div style="padding:4px 0px"> <a href="#" class=" btn-group-justified"> <div style="text-align:center"> <div class="col-xs-4"> <img style="width:48px;height:48px" class="img-responsive" src="https://store-images.s-microsoft.com/image/apps.30451.9007199266244281.126aa408-79d8-480d-928d-433f8bf427ba.143b0a61-174d-41c4-8c70-8237d6c24789?w=124&h=124&q=90&mode=crop" /> </div> <div class="col-xs-8 apps-item-font"> Sketch Board</div> </div> </a> </div> <div style="padding:4px 0px"> <a href="#" class=" btn-group-justified"> <div style="text-align:center"> <div class="col-xs-4"> <img style="width:48px;height:48px" class="img-responsive" src="https://store-images.s-microsoft.com/image/apps.21209.9007199266372775.f22025ae-8398-4b28-b2c0-979d493c4463.904855de-7706-475d-a5e3-4cc80b858f4a?w=124&h=124&q=90&mode=crop" /> </div> <div class="col-xs-8 apps-item-font"> Sketch Touch</div> </div> </a> </div> <div style="padding:4px 0px"> <a href="#" class=" btn-group-justified"> <div style="text-align:center"> <div class="col-xs-4"> <img style="width:48px;height:48px" class="img-responsive" src="https://store-images.s-microsoft.com/image/apps.54811.9007199266244282.086a1a16-9984-4179-80d9-91d22f931018.f6ed94da-755a-4359-ae2c-2ad8bec94986?w=180&h=180&q=60" /> </div> <div class="col-xs-8 apps-item-font"> Photo Creator</div> </div> </a> </div> </div> </section> </div>
3. 底部描述（标记4）
<Footer> <div class="container"> <div class="row"> <div class="col-lg-12"> <h2>Copyright</h2> <p>© 2009 - 2017 Touching.vip </p> </div> </div> </div> </Footer>
4.附CSS
* {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
padding-top: 50px;
font-size: 15px;
color: #555;
}
/*顶部导航栏*/
.navbar-nav a {
font-size: 16px;
margin: 0 8px;
}
/*中部内容容器*/
.starter-template {
padding: 40px 0px;
text-align: center;
}
/*文章列表*/
.blog-post-item {
padding: 16px 0px;
}
.blog-post-item h3 {
margin-top: 0px;
color: #1A4FA3;
}
.datetime {
margin-bottom: 12px;
color: #bbbbbb;
}
/*分页*/
.index-active {
background: red;
}
.page-index-container {
border-top: 1px solid #f0f0f0;
margin-top: 8px;
}
/*-------------*/
/*标签样式*/
.tags-list {
padding-top: 4px;
}
.tags-list a {
display: inline-block;
background: #005687;
color: #fff;
padding: 5px 10px;
font-size: 14px;
margin-right: 10px;
margin-bottom: 10px;
text-decoration: none;
font-size: 14px;
}
.tags-list a:hover {
background: #426ab3;
color: #fff;
text-decoration: none;
}
.tags-header {
background: #e0e0e0;
border-bottom: 1px solid #d4d4d4;
}
/*-------------*/
/*侧栏部件*/
.side-widget-list-items a {
color: #05173F;
padding: 0 0;
}
.side-widget-list-items a:hover {
color: #426ab3;
text-decoration: none;
}
.side-widget {
border: 1px solid #d4d4d4;
margin-top: 12px;
}
/*-------------*/
/*作者信息部件*/
.blog-author {
background: #fff;
border: 1px solid #e5e5e5;
text-align: center;
}
.blog-info-desktop-lg {
overflow: hidden;
color: #fff;
}
.apps-item-font {
padding: 10px 0px;
text-align: left;
font-size: 16px;
}
/*-----------*/
footer {
padding-top: 20px;
background-color: #05173B;
color: #96a8c3;
padding-bottom: 20px;
margin-top: 40px;
}
/*公共样式*/
.bor {
clear: both;
height: 12px;
}
.transparent {
background: transparent;
}
.theme-color {
color: #05173F;
}
.div-padding {
padding: 8px;
}
5.图片滤镱
.card-bkimg { -moz-filter: blur(28px); -webkit-filter: blur(28px); filter: blur(28px); min-width: 134%; margin-left: -30px; margin-top: -20px; } <div style="height:288px"> <img class="card-bkimg" style="height:308px" src="img/img1.jpg" /> </div>
