利用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/，起步—>基本模板

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="zh-CN"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;"> 3</span>   <span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;"> 4</span>       <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;"> 5</span>       <span style="color: #008000;"><!--</span><span style="color: #008000;">不支持老版本IE</span><span style="color: #008000;">--></span> 
<span style="color: #008080;"> 6</span>       <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="IE=edge"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;"> 7</span>       <span style="color: #008000;"><!--</span><span style="color: #008000;">device-width自适应移动端宽度，initial-scale=1不进行缩放</span><span style="color: #008000;">--></span> 
<span style="color: #008080;"> 8</span>     <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, initial-scale=1"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;"> 9</span>     <span style="color: #008000;"><!--</span><span style="color: #008000;"> 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ </span><span style="color: #008000;">--></span> 
<span style="color: #008080;">10</span>     <span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Bootstrap 101 Template<span style="color: #0000ff;"></span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">11</span>     <span style="color: #008000;"><!--</span><span style="color: #008000;"> Bootstrap 核心样式文件 </span><span style="color: #008000;">--></span> 
<span style="color: #008080;">12</span>     <span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="CSS/bootstrap.min.css"</span><span style="color: #ff0000;"> rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">13</span>   <span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">14</span>   <span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">15</span>     <span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>你好，世界！<span style="color: #0000ff;"></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">16</span>     <span style="color: #008000;"><!--</span><span style="color: #008000;"> jQuery CDN加速 </span><span style="color: #008000;">--></span> 
<span style="color: #008080;">17</span>     <span style="color: #0000ff;"><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"</span><span style="color: #0000ff;">></span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">18</span>     <span style="color: #008000;"><!--</span><span style="color: #008000;">-bootstrap的核心JS文件必须放在jQuery文件之后，因为bootstrap基于jQuery </span><span style="color: #008000;">--></span> 
<span style="color: #008080;">19</span>     <span style="color: #0000ff;"><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="js/bootstrap.min.js"</span><span style="color: #0000ff;">></span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">20</span>   <span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">21</span> <span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span>

Copy after login

View Code

（2）导航条 参考Bootstrap中文网 http://v3.bootcss.com/components/#navbar，组件—>导航条

<span style="color: #008080;"> 1</span> <span style="color: #008000;"><!--</span><span style="color: #008000;">---------------------------------------导航条设计开始-------------------------------</span><span style="color: #008000;">--></span> 
<span style="color: #008080;"> 2</span>       <span style="color: #008000;"><!--</span><span style="color: #008000;">黑色导航条样式为navbar-inverse，白色样式为default  ， .navbar-fixed-top导航条固定在顶端</span><span style="color: #008000;">--></span> 
<span style="color: #008080;"> 3</span>        <span style="color: #0000ff;"><span style="color: #800000;">nav </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="navbar navbar-inverse navbar-fixed-top"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;"> 4</span>            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container-fluid"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;"> 5</span>                <span style="color: #008000;"><!--</span><span style="color: #008000;"> Brand and toggle get grouped for better mobile display </span><span style="color: #008000;">--></span> 
<span style="color: #008080;"> 6</span>                <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="navbar-header"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;"> 7</span>                    <span style="color: #008000;"><!--</span><span style="color: #008000;">----button为实现响应式布局，如果在手机上查看，点击button就可以弹出菜单--</span><span style="color: #008000;">--></span> 
<span style="color: #008080;"> 8</span>                    <span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="button"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="navbar-toggle collapsed"</span><span style="color: #ff0000;"> data-toggle</span><span style="color: #0000ff;">="collapse"</span><span style="color: #ff0000;"> data-target</span><span style="color: #0000ff;">="#bs-example-navbar-collapse-1"</span><span style="color: #ff0000;"> aria-expanded</span><span style="color: #0000ff;">="false"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;"> 9</span>                        <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sr-only"</span><span style="color: #0000ff;">></span>Toggle navigation<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">10</span>                        <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="icon-bar"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">11</span>                        <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="icon-bar"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">12</span>                        <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="icon-bar"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">13</span>                    <span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">14</span>                    <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="navbar-brand"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>ShareGIS<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;">-方log的地方</span><span style="color: #008000;">--></span> 
<span style="color: #008080;">15</span>                <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">16</span> 
<span style="color: #008080;">17</span>                 <span style="color: #008000;"><!--</span><span style="color: #008000;"> 当浏览器小于某个值时，点击button图标显示导航条的内容（注意这里的id与button 的id对应）&mdash;>
</span><span style="color: #008080;">18</span> 
<span style="color: #008080;">19</span> <span style="color: #008000;">               <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
</span><span style="color: #008080;">20</span> <span style="color: #008000;">                   <!--具体菜单项</span><span style="color: #008000;">--></span> 
<span style="color: #008080;">21</span>                    <span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="nav navbar-nav"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">22</span>                        <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="active"</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>首页 <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sr-only"</span><span style="color: #0000ff;">></span>(current)<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;">普通菜单</span><span style="color: #008000;">--></span> 
<span style="color: #008080;">23</span>                        <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="dropdown"</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;">下拉菜单</span><span style="color: #008000;">--></span> 
<span style="color: #008080;">24</span>                            <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="dropdown-toggle"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="dropdownMenu1"</span><span style="color: #ff0000;"> data-toggle</span><span style="color: #0000ff;">="dropdown"</span><span style="color: #ff0000;"> aria-haspopup</span><span style="color: #0000ff;">="true"</span><span style="color: #ff0000;"> aria-expanded</span><span style="color: #0000ff;">="true"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">25</span> <span style="color: #000000;">                               技术博客 
</span><span style="color: #008080;">26</span>                                <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="caret"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">27</span>                            <span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">28</span>                            <span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="dropdown-menu dropdowncolor"</span><span style="color: #ff0000;"> aria-labelledby</span><span style="color: #0000ff;">="dropdownMenu1"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">29</span>                                <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>GIS<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;">下拉菜单项</span><span style="color: #008000;">--></span> 
<span style="color: #008080;">30</span>                                <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>.NET基础<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">31</span>                                <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Asp .NET MVC<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">32</span>                                <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>前端<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">33</span>                            <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">34</span>                        <span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">35</span>                        <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>我的生活<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">36</span>                        <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>教程<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">37</span>                        <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>电脑小知识<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">38</span>                        <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>留言板<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">39</span>                        <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>关于我<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">40</span>                    <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">41</span>                    <span style="color: #008000;"><!--</span><span style="color: #008000;">搜索表单</span><span style="color: #008000;">--></span> 
<span style="color: #008080;">42</span>                    <span style="color: #0000ff;"><span style="color: #800000;">form </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="navbar-form navbar-left"</span><span style="color: #ff0000;"> role</span><span style="color: #0000ff;">="search"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">43</span>                        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="form-group"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">44</span>                            <span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="form-control"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="Search"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">45</span>                        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">46</span>                        <span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="btn navbar-btn"</span><span style="color: #0000ff;">></span>搜索<span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">47</span>                    <span style="color: #0000ff;"></span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">48</span>                    <span style="color: #008000;"><!--</span><span style="color: #008000;">导航栏右部，一般的登录 注册</span><span style="color: #008000;">--></span> 
<span style="color: #008080;">49</span>                    <span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="nav navbar-nav navbar-right"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">50</span>                        <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>登录<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">51</span>                        <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>注册<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">52</span>                    <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">53</span>                <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;"> /.navbar-collapse </span><span style="color: #008000;">--></span> 
<span style="color: #008080;">54</span>            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;"> /.container-fluid </span><span style="color: #008000;">--></span> 
<span style="color: #008080;">55</span>        <span style="color: #0000ff;"></span><span style="color: #800000;">nav</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">56</span>        <span style="color: #008000;"><!--</span><span style="color: #008000;">----------------------------------------导航条结束------------------------------</span><span style="color: #008000;">--></span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Copy after login

View Code

全景图片：

响应式图片：

（3）轮播 参考Bootstrap中文网 http://v3.bootcss.com/css/#grid Javascript插件—>Carousel

<span style="color: #008080;"> 1</span> <span style="color: #008000;"><!--</span><span style="color: #008000;">------------------------------------------------轮播开始------------------------------------------</span><span style="color: #008000;">--></span>
<span style="color: #008080;"> 2</span>    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="carousel-example-generic"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="carousel slide"</span><span style="color: #ff0000;"> data-ride</span><span style="color: #0000ff;">="carousel"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span>        <span style="color: #008000;"><!--</span><span style="color: #008000;"> ol指示器  ol标签与ul标签不同 ol为是有序列表 ul为是无序列表 </span><span style="color: #008000;">--></span>
<span style="color: #008080;"> 4</span>        <span style="color: #0000ff;"><span style="color: #800000;">ol </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="carousel-indicators"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span>              <span style="color: #008000;"><!--</span><span style="color: #008000;"> 指示器 </span><span style="color: #008000;">--></span>
<span style="color: #008080;"> 6</span>            <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">data-target</span><span style="color: #0000ff;">="#carousel-example-generic"</span><span style="color: #ff0000;"> data-slide-to</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="active"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span>            <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">data-target</span><span style="color: #0000ff;">="#carousel-example-generic"</span><span style="color: #ff0000;"> data-slide-to</span><span style="color: #0000ff;">="1"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 8</span>            <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">data-target</span><span style="color: #0000ff;">="#carousel-example-generic"</span><span style="color: #ff0000;"> data-slide-to</span><span style="color: #0000ff;">="2"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 9</span>            <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">data-target</span><span style="color: #0000ff;">="#carousel-example-generic"</span><span style="color: #ff0000;"> data-slide-to</span><span style="color: #0000ff;">="3"</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span>        <span style="color: #0000ff;"></span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">11</span> 
<span style="color: #008080;">12</span>        <span style="color: #008000;"><!--</span><span style="color: #008000;"> 包装的轮播图片</span><span style="color: #008000;">--></span>
<span style="color: #008080;">13</span>        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="carousel-inner"</span><span style="color: #ff0000;"> role</span><span style="color: #0000ff;">="listbox"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">14</span>            <span style="color: #008000;"><!--</span><span style="color: #008000;">图片</span><span style="color: #008000;">--></span>
<span style="color: #008080;">15</span>            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item active"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">16</span>                <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="/Images/1.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="风景1"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">17</span>                <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="carousel-caption"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">18</span>                    <span style="color: #008000;"><!--</span><span style="color: #008000;">h4中的内容显示到图片上面，</span><span style="color: #008000;">--></span>
<span style="color: #008080;">19</span>                    <span style="color: #0000ff;"><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>真正的才智是刚毅的志向。 —— 拿破仑<span style="color: #0000ff;"></span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">20</span>                <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">21</span>            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">22</span>            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">23</span>                <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="/Images/2.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="风景2"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">24</span>                <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="carousel-caption"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">25</span>                    <span style="color: #0000ff;"><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>志向不过是记忆的奴隶，生气勃勃地降生，但却很难成长。 —— 莎士比亚<span style="color: #0000ff;"></span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">26</span>                <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">27</span>            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">28</span>            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">29</span>                <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="/Images/3.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="风景3"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">30</span>                <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="carousel-caption"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">31</span>                    <span style="color: #0000ff;"><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>志向和热爱是伟大行为的双翼。 —— 歌德<span style="color: #0000ff;"></span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">32</span>                <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">33</span>            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">34</span>            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">35</span>                <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="/Images/4.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="风景4"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">36</span>                <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="carousel-caption"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">37</span>                    <span style="color: #0000ff;"><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>生活有度，人生添寿。 —— 书摘<span style="color: #0000ff;"></span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">38</span>                <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">39</span>            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">40</span>        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">41</span> 
<span style="color: #008080;">42</span>        <span style="color: #008000;"><!--</span><span style="color: #008000;"> Controls </span><span style="color: #008000;">--></span>
<span style="color: #008080;">43</span>        <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left carousel-control"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="#carousel-example-generic"</span><span style="color: #ff0000;"> role</span><span style="color: #0000ff;">="button"</span><span style="color: #ff0000;"> data-slide</span><span style="color: #0000ff;">="prev"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">44</span>            <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="glyphicon glyphicon-chevron-left"</span><span style="color: #ff0000;"> aria-hidden</span><span style="color: #0000ff;">="true"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">45</span>            <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sr-only"</span><span style="color: #0000ff;">></span>Previous<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">46</span>        <span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">47</span>        <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right carousel-control"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="#carousel-example-generic"</span><span style="color: #ff0000;"> role</span><span style="color: #0000ff;">="button"</span><span style="color: #ff0000;"> data-slide</span><span style="color: #0000ff;">="next"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">48</span>            <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="glyphicon glyphicon-chevron-right"</span><span style="color: #ff0000;"> aria-hidden</span><span style="color: #0000ff;">="true"</span><span style="color: #0000ff;">></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">49</span>            <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="sr-only"</span><span style="color: #0000ff;">></span>Next<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">50</span>        <span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">51</span>    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">52</span>    <span style="color: #008000;"><!--</span><span style="color: #008000;">------------------------------------------------轮播结束------------------------------------------</span><span style="color: #008000;">--></span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Copy after login

View Code

全景图

（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））

<span style="color: #008080;"> 1</span> <span style="color: #008000;"><!--</span><span style="color: #008000;">-------主体----------------</span><span style="color: #008000;">--></span> 
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;"> 3</span>     <span style="color: #008000;"><!--</span><span style="color: #008000;">声明行</span><span style="color: #008000;">--></span> 
<span style="color: #008080;"> 4</span>     <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="row"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;"> 5</span>         <span style="color: #008000;"><!--</span><span style="color: #008000;">为3的栅格系统，相对于一行放四个</span><span style="color: #008000;">--></span> 
<span style="color: #008080;"> 6</span>         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-sm-3"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;"> 7</span>             <span style="color: #008000;"><!--</span><span style="color: #008000;">img-thumbnail 方形加外边框</span><span style="color: #008000;">--></span> 
<span style="color: #008080;"> 8</span>             <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="/Images/八镜台.jpg"</span><span style="color: #ff0000;">  class</span><span style="color: #0000ff;">="img-thumbnail"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="八镜台"</span><span style="color: #0000ff;">/></span> 
<span style="color: #008080;"> 9</span>             <span style="color: #0000ff;"><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>八镜台<span style="color: #0000ff;"></span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">10</span>             <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>八境台坐落在江西省赣州市北八境公园内，章江和贡江在这里汇合，为省级重点风景名胜区。<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">11</span>             <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="btn btn-success"</span><span style="color: #ff0000;"> role</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>详细<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">12</span>         <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">13</span>         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-sm-3"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">14</span>             <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="/Images/标建2.jpg"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="img-thumbnail"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="标建"</span> <span style="color: #0000ff;">/></span> 
<span style="color: #008080;">15</span>             <span style="color: #0000ff;"><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>商场<span style="color: #0000ff;"></span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">16</span>             <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>赣州第一条真正意义上的步行街。餐饮，购物都挺多商户的。可惜没有什么大的品牌进驻，购物群体也多是学生什么的.<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">17</span>             <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="btn btn-success"</span><span style="color: #ff0000;"> role</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>详细<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">18</span>         <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">19</span>         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-sm-3"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">20</span>             <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="/Images/标建4.jpg"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="img-thumbnail"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="标建2"</span><span style="color: #0000ff;">/></span>  
<span style="color: #008080;">21</span>             <span style="color: #0000ff;"><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>仿古建筑<span style="color: #0000ff;"></span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">22</span>             <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>如佛所谓“赣州文清路，模特满大街，豪车如流水，摩人挤掉鞋”。正是今天赣州文清路极尽繁华的真实写照。<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">23</span>             <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="btn btn-success"</span><span style="color: #ff0000;"> role</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>详细<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">24</span>         <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">25</span>         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-sm-3"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">26</span>             <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="/Images/城墙2.jpg"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="img-thumbnail"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="标建2"</span><span style="color: #0000ff;">/></span>  
<span style="color: #008080;">27</span>             <span style="color: #0000ff;"><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>古城墙<span style="color: #0000ff;"></span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">28</span>             <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>赣州古城墙，始建于汉代，距今已有二千年的历史，后来经过南宋、元、明、清、民国，历时900多年的不断修缮、加固<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">29</span>             <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="btn btn-success"</span><span style="color: #ff0000;"> role</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>详细<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">30</span>         <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">31</span>     <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">32</span>     <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="row"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">33</span>         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-sm-3"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">34</span>               <span style="color: #008000;"><!--</span><span style="color: #008000;">img-cricle 圆形图框</span><span style="color: #008000;">--></span> 
<span style="color: #008080;">35</span>             <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="/Images/郁孤台.jpg"</span><span style="color: #ff0000;">  class</span><span style="color: #0000ff;">="img-circle"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="八镜台"</span><span style="color: #0000ff;">/></span> 
<span style="color: #008080;">36</span>             <span style="color: #0000ff;"><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>郁孤台<span style="color: #0000ff;"></span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">37</span>             <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>郁孤台位于赣州城区西北部贺兰山顶，海拔131米，是城区的制高点，赣州宋代古城墙自台下逶迤而过，市级文物保护单位<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">38</span>             <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="btn btn-success"</span><span style="color: #ff0000;"> role</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>详细<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">39</span>         <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">40</span>         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-sm-3"</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">41</span>             <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="/Images/高层2.jpg"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="img-circle"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="标建"</span> <span style="color: #0000ff;">/></span> 
<span style="color: #008080;">42</span>             <span style="color: #0000ff;"><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>高层建筑<span style="color: #0000ff;"></span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">43</span>             <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>高层建筑，建筑高度大于27米的住宅和建筑高度大于24m的非单层厂房、仓库和其他民用建筑。<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">44</span>             <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="btn btn-success"</span><span style="color: #ff0000;"> role</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>详细<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">45</span>         <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 
<span style="color: #008080;">46</span>         <span style="color: #0000ff;"><span style="color: #800000"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Copy after login