利用Bootstrap快速搭建个人响应式主页（附演示+源码）
1.前言
我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意。做网站后台的开发人员可能了解前端，可是自己写一个不错的前端还是很费事的。幸好我们有Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。我以后端程序员的角度讲一下前端设计（好别扭），网站的颜色搭配不那么理想。你可以自己改css样式，达到自己的目的。
下面是我自己用Bootstrap搭建的首页地址：共享gis：http://test.sharegis.cn/访问一下吧（手机电脑都试一下，体会一下响应式页面:-D，只做了首页）。
废话不多说，开始讲解：
2.实现
（1）基本模板搭建 参考Bootstrap中文网 http://v3.bootcss.com/getting-started/，起步—>基本模板
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <!--不支持老版本IE--> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <!--device-width自适应移动端宽度，initial-scale=1不进行缩放--> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> 10 <title>Bootstrap 101 Template</title> 11 <!-- Bootstrap 核心样式文件 --> 12 <link href="CSS/bootstrap.min.css" rel="stylesheet"> 13 </head> 14 <body> 15 <h1>你好，世界！</h1> 16 <!-- jQuery CDN加速 --> 17 <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> 18 <!---bootstrap的核心JS文件必须放在jQuery文件之后，因为bootstrap基于jQuery --> 19 <script src="js/bootstrap.min.js"></script> 20 </body> 21 </html>
（2）导航条 参考Bootstrap中文网 http://v3.bootcss.com/components/#navbar，组件—>导航条
1 <!-----------------------------------------导航条设计开始---------------------------------> 2 <!--黑色导航条样式为navbar-inverse，白色样式为default ， .navbar-fixed-top导航条固定在顶端--> 3 <nav class="navbar navbar-inverse navbar-fixed-top"> 4 <div class="container-fluid"> 5 <!-- Brand and toggle get grouped for better mobile display --> 6 <div class="navbar-header"> 7 <!------button为实现响应式布局，如果在手机上查看，点击button就可以弹出菜单----> 8 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 9 <span class="sr-only">Toggle navigation</span> 10 <span class="icon-bar"></span> 11 <span class="icon-bar"></span> 12 <span class="icon-bar"></span> 13 </button> 14 <a class="navbar-brand" href="#">ShareGIS</a><!---方log的地方--> 15 </div> 16 17 <!-- 当浏览器小于某个值时，点击button图标显示导航条的内容（注意这里的id与button 的id对应）—> 18 19 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 20 <!--具体菜单项--> 21 <ul class="nav navbar-nav"> 22 <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li><!--普通菜单--> 23 <li class="dropdown"><!--下拉菜单--> 24 <a class="dropdown-toggle" href="#" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 25 技术博客 26 <span class="caret"></span> 27 </a> 28 <ul class="dropdown-menu dropdowncolor" aria-labelledby="dropdownMenu1"> 29 <li><a href="#">GIS</a></li><!--下拉菜单项--> 30 <li><a href="#">.NET基础</a></li> 31 <li><a href="#">Asp .NET MVC</a></li> 32 <li><a href="#">前端</a></li> 33 </ul> 34 </li> 35 <li><a href="#">我的生活</a></li> 36 <li><a href="#">教程</a></li> 37 <li><a href="#">电脑小知识</a></li> 38 <li><a href="#">留言板</a></li> 39 <li><a href="#">关于我</a></li> 40 </ul> 41 <!--搜索表单--> 42 <form class="navbar-form navbar-left" role="search"> 43 <div class="form-group"> 44 <input type="text" class="form-control" placeholder="Search"> 45 </div> 46 <button type="submit" class="btn navbar-btn">搜索</button> 47 </form> 48 <!--导航栏右部，一般的登录 注册--> 49 <ul class="nav navbar-nav navbar-right"> 50 <li><a href="#">登录</a></li> 51 <li><a href="#">注册</a></li> 52 </ul> 53 </div><!-- /.navbar-collapse --> 54 </div><!-- /.container-fluid --> 55 </nav> 56 <!------------------------------------------导航条结束-------------------------------->
全景图片：
响应式图片：
（3）轮播 参考Bootstrap中文网 http://v3.bootcss.com/css/#grid Javascript插件—>Carousel
1 <!--------------------------------------------------轮播开始--------------------------------------------> 2 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 3 <!-- ol指示器 ol标签与ul标签不同 ol为是有序列表 ul为是无序列表 --> 4 <ol class="carousel-indicators"> 5 <!-- 指示器 --> 6 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 7 <li data-target="#carousel-example-generic" data-slide-to="1"></li> 8 <li data-target="#carousel-example-generic" data-slide-to="2"></li> 9 <li data-target="#carousel-example-generic" data-slide-to="3"></li> 10 </ol> 11 12 <!-- 包装的轮播图片--> 13 <div class="carousel-inner" role="listbox"> 14 <!--图片--> 15 <div class="item active"> 16 <img src="/Images/1.jpg" alt="风景1"> 17 <div class="carousel-caption"> 18 <!--h4中的内容显示到图片上面，--> 19 <h4>真正的才智是刚毅的志向。 —— 拿破仑</h4> 20 </div> 21 </div> 22 <div class="item"> 23 <img src="/Images/2.jpg" alt="风景2"> 24 <div class="carousel-caption"> 25 <h4>志向不过是记忆的奴隶，生气勃勃地降生，但却很难成长。 —— 莎士比亚</h4> 26 </div> 27 </div> 28 <div class="item"> 29 <img src="/Images/3.jpg" alt="风景3"> 30 <div class="carousel-caption"> 31 <h4>志向和热爱是伟大行为的双翼。 —— 歌德</h4> 32 </div> 33 </div> 34 <div class="item"> 35 <img src="/Images/4.jpg" alt="风景4"> 36 <div class="carousel-caption"> 37 <h4>生活有度，人生添寿。 —— 书摘</h4> 38 </div> 39 </div> 40 </div> 41 42 <!-- Controls --> 43 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 44 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 45 <span class="sr-only">Previous</span> 46 </a> 47 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 48 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 49 <span class="sr-only">Next</span> 50 </a> 51 </div> 52 <!--------------------------------------------------轮播结束-------------------------------------------->
全景图
（4）内容布局
a.栅格系统 参考Bootstrap中文网 http://v3.bootcss.com/css/#grid全局CSS样式—>栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
栅格系统的具体简介请参考帮助，这里我把我的理解说一下：Bootstrap把页面等分为12列，你可以将你的内容放入任意行中；比如可以（4：4：4）也可以（4：：3：2）总之相加不要超过12，当屏幕变小后原来一行4：4：4；变为了三行，每行占满屏幕，例如：全景图
响应式图
下面我们利用栅格系统搭建布局页面（对图片中的三维模型设计感兴趣的，可以参考我的博客开拓思维，如何用编程思想进行三维建模（1））
1 <!---------主体------------------> 2 <div class="container"> 3 <!--声明行--> 4 <div class="row"> 5 <!--为3的栅格系统，相对于一行放四个--> 6 <div class="col-sm-3"> 7 <!--img-thumbnail 方形加外边框--> 8 <img src="/Images/八镜台.jpg" class="img-thumbnail" alt="八镜台"/> 9 <h3>八镜台</h3> 10 <p>八境台坐落在江西省赣州市北八境公园内，章江和贡江在这里汇合，为省级重点风景名胜区。</p> 11 <p><a href="#" class="btn btn-success" role="button">详细</a></p> 12 </div> 13 <div class="col-sm-3"> 14 <img src="/Images/标建2.jpg" class="img-thumbnail" alt="标建" /> 15 <h3>商场</h3> 16 <p>赣州第一条真正意义上的步行街。餐饮，购物都挺多商户的。可惜没有什么大的品牌进驻，购物群体也多是学生什么的.</p> 17 <p><a href="#" class="btn btn-success" role="button">详细</a></p> 18 </div> 19 <div class="col-sm-3"> 20 <img src="/Images/标建4.jpg" class="img-thumbnail" alt="标建2"/> 21 <h3>仿古建筑</h3> 22 <p>如佛所谓“赣州文清路，模特满大街，豪车如流水，摩人挤掉鞋”。正是今天赣州文清路极尽繁华的真实写照。</p> 23 <p><a href="#" class="btn btn-success" role="button">详细</a></p> 24 </div> 25 <div class="col-sm-3"> 26 <img src="/Images/城墙2.jpg" class="img-thumbnail" alt="标建2"/> 27 <h3>古城墙</h3> 28 <p>赣州古城墙，始建于汉代，距今已有二千年的历史，后来经过南宋、元、明、清、民国，历时900多年的不断修缮、加固</p> 29 <p><a href="#" class="btn btn-success" role="button">详细</a></p> 30 </div> 31 </div> 32 <div class="row"> 33 <div class="col-sm-3"> 34 <!--img-cricle 圆形图框--> 35 <img src="/Images/郁孤台.jpg" class="img-circle" alt="八镜台"/> 36 <h3>郁孤台</h3> 37 <p>郁孤台位于赣州城区西北部贺兰山顶，海拔131米，是城区的制高点，赣州宋代古城墙自台下逶迤而过，市级文物保护单位</p> 38 <p><a href="#" class="btn btn-success" role="button">详细</a></p> 39 </div> 40 <div class="col-sm-3"> 41 <img src="/Images/高层2.jpg" class="img-circle" alt="标建" /> 42 <h3>高层建筑</h3> 43 <p>高层建筑，建筑高度大于27米的住宅和建筑高度大于24m的非单层厂房、仓库和其他民用建筑。</p> 44 <p><a href="#" class="btn btn-success" role="button">详细</a></p> 45 </div> 46 <div class="col-sm-3"> 47 <img src="/Images/公园.jpg" class="img-circle" alt="标建2"/> 48 <h3>赣州公园</h3> 49 <p>赣州公园是赣州城区最早的一个综合性公园，总面积2.97公顷。公园位于赣州市老城区文清路64号。</p> 50 <p><a href="#" class="btn btn-success" role="button">详细</a></p> 51 </div> 52 <div class="col-sm-3"> 53 <img src="/Images/蒋经国故居.jpg" class="img-circle" alt="标建2"/> 54 <h3>蒋经国故居</h3> 55 <p>现保存较好的主要是在章江古城墙处，故居是1940年蒋经国主持兴建的仿俄式砖木结构建筑，面积为170多平方米。</p> 56 <p><a href="#" class="btn btn-success" role="button">详细</a></p> 57 </div> 58 </div> 59 </div>
（5）标签页 参考Bootstrap中文网 http://v3.bootcss.com/css/#grid Javascript插件—>标签页
1 <!-------------------------标签页开始-----------------------------> 2 <div> 3 <div class="row"> 4 <h2>技术分类</h2> 5 </div> 6 <!-- Nav tabs页签 --> 7 <ul class="nav nav-tabs" role="tablist"> 8 <!--注意这里的#home与下面的div role="tabpanel" class="tab-pane active" id="home" 的id对应实现页签--> 9 <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">GIS基础</a></li> 10 <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">.NET基础</a></li> 11 <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Asp.net MVC</a></li> 12 <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Web GIS</a></li> 13 </ul> 14 15 <!-- Tab panes --> 16 <div class="tab-content"> 17 <!--active当前选中项--> 18 <div role="tabpanel" class="tab-pane active" id="home"> 19 <div class="row"> 20 <div class="col-sm-8"> 21 <h3>GIS基础介绍</h3> 22 <p style="font-size:14px">地理信息系统（Geographic Information System或 Geo－Information system，GIS）有时又称为“地学信息系统”。它是一种特定的十分重要的空间信息系统。它是在计算机硬、软件系统支持下， 23 对整个或部分地球表层（包括大气层）空间中的有关地理分布数据进行采集、储存、管理、运算、分析、显示和描述的技术系统。</p> 24 <p>位置与地理信息既是LBS的核心，也是LBS的基础。一个单纯的经纬度坐标只有置于特定的地理信息中，代表为某个地点、标志、方位后，才会被用户认识和理解。用户在通过相关技 25 术获取到位置信息之后，还需要了解所处的地理环境，查询和分析环境信息，从而为用户活动提供信息支持与服务。</p> 26 <p><a href="#" class="btn btn-success" role="button">详细了解</a></p> 27 </div> 28 <div class="col-sm-4"> 29 <img src="/Images/gis.jpg" class="img-thumbnail" alt="GIS基础"/> 30 </div> 31 </div> 32 </div> 33 <div role="tabpanel" class="tab-pane" id="profile"> 34 <div class="row"> 35 <div class="col-sm-8"> 36 <h3>.Net基础介绍</h3> 37 <p style="font-size:14px">.NET是 Microsoft XML Web services 平台。XML Web services 允许应用程序通过 Internet 进行通讯和共享数据，而不管所采用的是哪种操作 38 系统、设备或编程语言。Microsoft .NET 平台提供创建 XML Web services 并将这些服务集成在一起之所需。对个人用户的好处是无缝的、吸引人的体验。</p> 39 <p><a href="#" class="btn btn-success" role="button">详细了解</a></p> 40 </div> 41 <div class="col-sm-4"> 42 <img src="/Images/.Net.jpg" class="img-thumbnail" alt=".net"/> 43 </div> 44 </div> 45 </div> 46 <div role="tabpanel" class="tab-pane" id="messages"> 47 <div class="row"> 48 <div class="col-sm-8"> 49 <h3>Asp .net MVC介绍</h3> 50 <p style="font-size:14px">ASP.NET MVC 4已经正式发布，并内置于Visual Studio 2012， 51 新版本ASP.NET MVC版本新增了手机模版、单页应用程序，Web API等模版，更新了一些 javascript 库，其中示例页面也使用了jquery的AJAX登录， 52 并增加了OAuth认证/Entity Framework5的支持。同时也增强了对HTML5、AsyncController等的支持。</p> 53 <p><a href="#" class="btn btn-success" role="button">详细了解</a></p> 54 </div> 55 <div class="col-sm-4"> 56 <img src="/Images/MVC.jpg" class="img-thumbnail" alt="MVC"/> 57 </div> 58 </div> 59 </div> 60 <div role="tabpanel" class="tab-pane" id="settings"> 61 <div class="row"> 62 <div class="col-sm-8"> 63 <h3>Web GIS基础介绍</h3> 64 <p style="font-size:14px">Web GIS是Internet技术应用于GIS开发的产物，是现代GIS技术的重要组成部分。常见的Web GIS开发软件有超擎图形。 65 是一个交互式的、分布式的、动态的地理信息系统，是由多个主机、多个数据库的无线终端，并由客户机与服务器（HTTP服务器及应用服务器）相连所组成的。 66 GIS通过WWW功能得以扩展，真正成为一种大众使用的工具。 67 从WWW的任意一个节点，Internet用户可以浏览WebGIS站点中的空间数据、制作专题图，以及进行各种空间检索和空间分析，从而使GIS进入千家万户。</p> 68 <p><a href="#" class="btn btn-success" role="button">详细了解</a></p> 69 </div> 70 <div class="col-sm-4"> 71 <img src="/Images/webgis.jpg" class="img-thumbnail" alt="GIS基础"/> 72 </div> 73 </div> 74 </div> 75 </div> 76 77 </div> 78 <!-------------------------标签页结束----------------------------->
(6)版权信息
1 <div id="copyright"> 2 <p style="margin-top:10px">2016@共享gis All Rights Reserved. </p> 3 <p> 工信部备案号： 晋ICP备16002450号-1 </p> 4 <p> 联系方式：qq:1300776935 邮箱：hhy@sharegis.cn </p> 5 </div>
3展望
今天只是做了个人网站的响应式主页，后面我会用Asp .net MVC+Bootstrap等搭建一个自己的技术分享网站。我会把我网站的搭建过程以博客的形式记录，源码与大家共享。欢迎大家关注我，一同进步…………
本次源码地址：Share GIS
