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 id="你好-世界">你好，世界！</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 <!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 id="你好-世界">你好，世界！</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>
全景图片：
响应式图片：
（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="/static/imghwm/default1.png" data-src="/Images/1.jpg" class="lazy" alt="风景1">17 <div class="carousel-caption">18 <!--h4中的内容显示到图片上面，-->19 <h4 id="真正的才智是刚毅的志向-拿破仑">真正的才智是刚毅的志向。 —— 拿破仑</h4>20 </div>21 </div>22 <div class="item">23 <img src="/static/imghwm/default1.png" data-src="/Images/2.jpg" class="lazy" alt="风景2">24 <div class="carousel-caption">25 <h4 id="志向不过是记忆的奴隶-生气勃勃地降生-但却很难成长-莎士比亚">志向不过是记忆的奴隶，生气勃勃地降生，但却很难成长。 —— 莎士比亚</h4>26 </div>27 </div>28 <div class="item">29 <img src="/static/imghwm/default1.png" data-src="/Images/3.jpg" class="lazy" alt="风景3">30 <div class="carousel-caption">31 <h4 id="志向和热爱是伟大行为的双翼-歌德">志向和热爱是伟大行为的双翼。 —— 歌德</h4>32 </div>33 </div>34 <div class="item">35 <img src="/static/imghwm/default1.png" data-src="/Images/4.jpg" class="lazy" alt="风景4">36 <div class="carousel-caption">37 <h4 id="生活有度-人生添寿-书摘">生活有度，人生添寿。 —— 书摘</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 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="/static/imghwm/default1.png" data-src="/Images/1.jpg" class="lazy" alt="风景1">17 <div class="carousel-caption">18 <!--h4中的内容显示到图片上面，-->19 <h4 id="真正的才智是刚毅的志向-拿破仑">真正的才智是刚毅的志向。 —— 拿破仑</h4>20 </div>21 </div>22 <div class="item">23 <img src="/static/imghwm/default1.png" data-src="/Images/2.jpg" class="lazy" alt="风景2">24 <div class="carousel-caption">25 <h4 id="志向不过是记忆的奴隶-生气勃勃地降生-但却很难成长-莎士比亚">志向不过是记忆的奴隶，生气勃勃地降生，但却很难成长。 —— 莎士比亚</h4>26 </div>27 </div>28 <div class="item">29 <img src="/static/imghwm/default1.png" data-src="/Images/3.jpg" class="lazy" alt="风景3">30 <div class="carousel-caption">31 <h4 id="志向和热爱是伟大行为的双翼-歌德">志向和热爱是伟大行为的双翼。 —— 歌德</h4>32 </div>33 </div>34 <div class="item">35 <img src="/static/imghwm/default1.png" data-src="/Images/4.jpg" class="lazy" alt="风景4">36 <div class="carousel-caption">37 <h4 id="生活有度-人生添寿-书摘">生活有度，人生添寿。 —— 书摘</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 <!--------------------------------------------------轮播结束-------------------------------------------->
（5）标签页 参考Bootstrap中文网 http://v3.bootcss.com/css/#grid Javascript插件—>标签页
1 <!-------------------------标签页开始-----------------------------> 2 <div> 3 <div class="row"> 4 <h2 id="技术分类">技术分类</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 id="GIS基础介绍">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 class="img-thumbnail lazy" src="/static/imghwm/default1.png" data-src="/Images/gis.jpg" 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 id="Net基础介绍">.Net基础介绍</h3>37 <p style="max-width:90%">.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 class="img-thumbnail lazy" src="/static/imghwm/default1.png" data-src="/Images/.Net.jpg" 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 id="Asp-net-MVC介绍">Asp .net MVC介绍</h3>50 <p style="max-width:90%">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 class="img-thumbnail lazy" src="/static/imghwm/default1.png" data-src="/Images/MVC.jpg" 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 id="Web-GIS基础介绍">Web GIS基础介绍</h3>64 <p style="max-width:90%">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 class="img-thumbnail lazy" src="/static/imghwm/default1.png" data-src="/Images/webgis.jpg" 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
声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
HTML的目的：启用Web浏览器可以显示内容May 03, 2025 am 12:03 AMHTML的核心目的在于让浏览器理解并展示网页内容。1.HTML通过标签定义网页结构和内容，如、到、等。2.HTML5增强了多媒体支持，引入了和标签。3.HTML提供了表单元素，支持用户交互。4.优化HTML代码可提升网页性能，如减少HTTP请求和压缩HTML。
为什么HTML标签对Web开发很重要？May 02, 2025 am 12:03 AMhtmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）heSdefinElayout，语义和互动性。2）SemantictagsiCtagSimproveCacsibilitieAndseo.3）pose poseriblesibilityAndseoandseo.3）poser
说明将一致的编码样式用于HTML标签和属性的重要性。May 01, 2025 am 12:01 AM一致的HTML编码风格很重要，因为它提高了代码的可读性、可维护性和效率。1)使用小写标签和属性，2)保持一致的缩进，3)选择并坚持使用单引号或双引号，4)避免在项目中混合使用不同风格，5)利用自动化工具如Prettier或ESLint来确保风格的一致性。
如何在 Bootstrap 4 中实现多项目轮播？Apr 30, 2025 pm 03:24 PM在Bootstrap4中实现多项目轮播的解决方案在Bootstrap4中实现多项目轮播并不是一件简单的事情。虽然Bootstrap...
deepseek官网是如何实现鼠标滚动事件穿透效果的？Apr 30, 2025 pm 03:21 PM如何实现鼠标滚动事件穿透效果？在我们浏览网页时，经常会遇到一些特别的交互设计。比如在deepseek官网上，�...
HTML 视频的播放控件样式怎么修改Apr 30, 2025 pm 03:18 PM无法直接通过CSS修改HTML视频的默认播放控件样式。1.使用JavaScript创建自定义控件。2.通过CSS美化这些控件。3.考虑兼容性、用户体验和性能，使用库如Video.js或Plyr可简化过程。
在手机上使用原生select会带来哪些问题？Apr 30, 2025 pm 03:15 PM在手机上使用原生select的潜在问题在开发移动端应用时，我们常常会遇到选择框的需求。通常情况下，开发者倾...
在手机上使用原生select的弊端是什么？Apr 30, 2025 pm 03:12 PM在手机上使用原生select的弊端是什么？在移动设备上开发应用时，选择合适的UI组件是非常重要的。许多开发者�...
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
Windows 11 KB5054979中的新功能以及如何解决更新问题
4 周前ByDDD
如何修复KB5055523无法在Windows 11中安装？
3 周前ByDDD
如何修复KB5055518无法在Windows 10中安装？
3 周前ByDDD
R.E.P.O.的每个敌人和怪物的力量水平
3 周前By尊渡假赌尊渡假赌尊渡假赌
蓝王子：如何到达地下室
3 周前ByDDD
热工具
SublimeText3 英文版
推荐：为Win版本，支持代码提示！
安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。
禅工作室 13.0.1
功能强大的PHP集成开发环境
Atom编辑器mac版下载
最流行的的开源编辑器
VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器
