前言

这是博主自己动手搭建网站尝试过程的一些记录，
上篇：electerm远程连接云服务器，部署环境并发布第一个静态页面
总目录：自己动手搭建网站系列总目录
上篇写了连接云服务器，并发布一个静态页面，至此，所谓的“网站”总算有了一点可以看到的东西，可惜仍然是简陋到惨不忍睹。所以接下来的目标是把网站搭建得好看点并实现一些功能，这篇就简单记录下怎么用bootstrap搭建几个简单的静态页面。

顺便补充一点内容：在看与网站有关的文章时候，我们经常看到“静态页面”和“动态页面”这两个词，那么究竟什么是“动态页面”，什么是“静态页面”，它们的区别又在哪呢？

这里简单谈下博主个人的看法，个人觉得静态页面就是“中看不中用”的界面。例如我用html搭了个登录页面，看起来像那么回事，有两个框框用来填账户和密码，还有个按钮用来提交，但实际上这只是用来看的，点提交按钮页面根本没啥变化，还是原样子，这就是静态页面。那么更进一步，我们接着把登录的逻辑用代码补充完整，比如怎么处理用户输入，怎么验证用户名和密码，登录完怎么跳转…这样下来，登录页面就“内外兼修”了，就算是个动态页面了。简单来说，静态页面就是做展示界面用的，动态页面则兼有展示和逻辑处理的功能。一般而言，后缀为.html的都可归为静态页面一类。

一、bootstrap简介

bootstrap官网
什么是bootstrap,一个比较官方的介绍：“Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目”。说实话，什么“响应式布局”博主也不是很清楚，不过这并不影响咱们用它。咱主要看重的是“框架”。

大家应该都对html、css、js有所了解，这些都是搭网页需要用到的技术，html让图形界面可以用一堆标记来描述，css是主要是一些固定的样式，用来控制字体、图形等网页元素的格式（例如大小、颜色等），js作用就比较大了，其中一个功能就是“动态效果”，注意此动态非彼动态，不是指“动态页面”，而是“会动的页面”，比如动画、轮播图、游动的图标等…当然，除此之外，js还有许多作用，有兴趣的可以自行了解，这里就不再赘述。

而bootstrap就是用上面的东西做出来的一套的“组件”，让我们不必从原始的html开始搭建网页。例如我想要一个好看的输入框，直接去bootstrap那里找对应的样式，然后复制过来改改就行，不必自己重新写一个；又或者我要搞个轮播图（就是一张一张图轮流展示的那种）功能，直接找bootstrap提供的样式，自己把图片扔进去就成了。如果你觉得bootstrap提供的样式不是很满意，你还可以去改改它的源代码，在它的基础上制定自己想要的独特样式…

二、bootstrap环境准备

bootstrap主要有两种引入方式，本地引入需要把文件下载下来，放到项目目录里，操作上稍微麻烦，然而方便调试和查看代码；而快捷引入（通过cdn)相当于从云端引入，非常快捷方便，然而不便查看代码和调试，两种方式各有优劣吧。

（1）本地导入

下载bootstrap

具体的介绍大家可以参考官方中文文档
和菜鸟教程（推荐，博主自己主要就是跟着这个学的）
顺便一说，菜鸟教程这网站非常适合web技术初学者，它们的讲解详实易懂，而且有许多实例，虽然这名字有点坑…。

博主这里讲讲下载和简单使用。我们进入
bootstrap官网如下图，如果要下载最新版本直接点击download就行，要下载其它版本点击"All release"，博主用的是3.系列的，因为那时我找的教程3系列的最全…下面演示的是下载3版本，点击"All release"

选择3.4

点击“download bootstrap”即可

下载好后解压缩，解压好后应该是下面这个样子的，有三个文件，最新版似乎没有fonts文件，需要自己去官网下载。

下载jQuery

有了以上文件还不行，我们还需要下载一个叫“jQuery”的东西，jQuery官网，点击download,进入如下界面
然后选择一个版本下载，我这里点击上方标红的，出现如下界面

鼠标右键，点击另存为，存到刚刚解压好的bootstrap的js目录里

这样我们就把准备工作完成了，接下来就是应用了。

（2）快捷引入（比较方便）

直接在网页的head标签内添加如下几行就行，其中bootstrap和jquery的版本号是可以改的。

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

三、bootstrap搭建页面

3.1 bootstrap引入项目

我这里使用的是eclipse，使用本地导入方式引入bootstrap，当然，编程工具大家选自己喜欢的就行。只要把上面准备好的文件和网页文件放到同一级目录下，然后按照如下格式引入就行（在html的head标签段中添加下面这么几行）

    <link rel="stylesheet" href="css/bootstrap.min.css"><script src="js/jquery-3.6.0.min.js"></script><script src="js/bootstrap.min.js"></script>

博主因为后面要考虑升级网站，这里就采用jsp（Java server pages）,至于什么是jsp 简单说来，就是加强版的HTML，属于javaweb技术体系的一环，可以内嵌Java代码以实现和后端的交互等。不过咱们先别管这么多，总之，搭静态页面的时候.html结尾的文件和.jsp结尾的文件其实是一样的，jsp方便后面升级成动态页面罢了。另外，由于jsp技术是整个javaweb体系的一环，所以我后端也理所当然地要用Java来写。虽说，jsp放到现在有点“古老”，不过对博主而言，反正只是尝试搭个网站，能用就行。

至于为啥不用更简单的php，这就一言难尽了（反正不是我不会php的原因…）咳咳，好了，闲话少说，下面进入正题。

3.2 bootstrap搭建简单页面

怎么在eclipse中新建一个简单的网站项目我在另外一篇记录。eclipse新建一个简单的网站（web）项目

在eclipse中新建一个“dynamic web project”(动态网站项目)，不要疑惑，我明明说的是搭静态页面，怎么新建起动态网站项目了，动态的部分我不写不就是静态网站了吗？

然后新建一个jsp文件,上面已经说过了，不必非得是jsp，直接html也行，我这里用jsp而已。后面就是写代码搭建页面了，bootstrap有一套网格结构，至于什么是网格结构，简单来说就是将一个网页通过容器（container）、行（row）、列(col-)切分开，变成网一样的形状。具体的介绍大家可以参考官网和菜鸟教程，这里就不细表了。

总之bootstrap网格的基本结构大概是下面这样子的。

<div class="container">     <!-- 容器 --><div class="row">         <!--行-->><div class="col-*-*"></div>   <!--列，3版本里列有以下几种型号：超小设备手机（<768px）（.col-xs-n）、小型设备平板电脑（≥768px）（.col-sm-n）中型设备台式电脑（≥992px）（.col-md-n）、大型设备台式电脑（≥1200px）（.col-lg-n）n代表某个数字，注意行内的列加起来不应超过12--><div class="col-*-*"></div>      </div><div class="row">...</div></div><div class="container">....

下面就直接贴几个我写好的页面代码，都弄好后，博主的项目结构大概是下面这个样子

index.jsp（一般网站首页都取名为index.xxx），为了装饰，我在页面内引入了许多图片，所以直接复制代码运行（引入bootstrap的情况下）会没有图。

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta charset="UTF-8"><title>微光落尘的个人空间</title><script src="js/jquery-3.5.1.min.js"></script><link href="css/bootstrap.min.css"  rel="stylesheet"><script src="js/bootstrap.min.js"></script><style>.fakeimg {height: 200px;background: #F0FFFF;}.back-img{background-image:url(img/hometown1.jpg)}</style>
</head>
<body><div class="jumbotron text-center back-img" style="margin-bottom:0" ><h1>欢迎来小尘空间</h1><p>小站虽小，或有其妙</p></div><nav class="navbar navbar-inverse"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="#">导航栏</a></div><div class="collapse navbar-collapse" id="myNavbar"><ul class="nav navbar-nav"><li class="active"><a href="index.jsp">主页</a></li><li class="active"><a href="scenery.jsp">江山如画</a></li><li class="active"><a href="blog.jsp">博客专栏</a></li><li class="active"></li></ul></div></div></nav><div class="container"><div class="row"><div class="col-md-4">                     <h2 class="text-primary">自我介绍...</h2><div style="background: #F0FFFF">              <p class="text-primary">代号：苍山沐风人<br>座右铭：东方欲晓，晨光逐道<br>兴趣爱好：南山牧马，北海垂杆...<br>                                                   专业序列：逐道之尘<br>附加信息：介于无危险和极度危险之间，建议小心接触，如果能在拜访的时候戴上龙灵鱼，他将非常高兴</p><p class="text-primary">补充说明： 以上都是瞎编的</p>         </div><h2 class="text-primary">网站访问参考手册</h2><%-- 后续升级：做一个自我介绍的栏目列表，可以后台管理 --%><h5 class="text-info">说明：本手册没有什么可信度，信不信取决于读者的想法</h5><ul style="background:#F0FFFF;"> <li class="text-primary">建议一、如果你在本站首页看到了让你感到奇怪的话语，不要惊讶，那是正常的。（因为那都是我瞎编的，什么，你问我是谁，嗯，你或许可以试着猜猜看？猜对没有奖励哦！）</li><li  class="text-primary">建议二、如果你感觉有些无聊和烦闷，可以试着逛逛“江山如画”页面，或许这会让你感觉好点（虽然，但是，那里还只有几张...一些涂抹痕迹）</li>                                              <li  class="text-primary">建议三、当你点击“博客专栏”，发现后续查看文章的操作都没有响应，不要惊慌，立即点击导航栏去到其它页面（因为博客功能我还没开发好）</li><li  class="text-primary">建议四、如果你逛完网站后想要和我说点什么，请点击主页的“给我留言”，你会很容易找到它，如果没有，请点击刷新，若还是没有，那......</li><li  class="text-primary">建议六、本网站合规合法，你不用担心本网站被封禁（因为我还没有备案）</li> <li  class="text-primary">最后，祝您参光愉快，天天开心！（对了，我在网站的某处留了一个彩蛋，你猜会在哪儿呢？）</li>       </ul>                           </div> <div class="col-md-8"><h2 class="text-primary">美丽家乡</h2><div id="myCarousel" class="carousel slide"><!-- 轮播（Carousel）指标 --><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0"  class="active"></li><li data-target="#myCarousel" data-slide-to="1" ></li><li data-target="#myCarousel" data-slide-to="2" ></li></ol>   <!-- 轮播（Carousel）项目 --><div class="carousel-inner"><div class="item active" ><img src="img/hometown1.jpg" alt="First slide"><div class="carousel-caption">标题 1</div></div><div class="item" ><img src="img/hometown2.jpg" alt="Second slide"><div class="carousel-caption">标题 2</div></div><div class="item" ><img src="img/hometown3.jpg" alt="Third slide"><div class="carousel-caption">标题 3</div></div></div><!-- 轮播（Carousel）导航 --><a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div></div></div></div><div class="jumbotron text-center" style="margin-bottom:0"><p style="color:#0000FF;font-size:30px"><a href="message.jsp">给我留言<span class="glyphicon glyphicon-pencil"></span></a></p><br><p>备案信息：暂无</p></div>
</body>
</html>

blog.jsp（博客页面）

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta charset="UTF-8"><title>微光落尘的个人空间</title><link rel="stylesheet" href="css/bootstrap.min.css"><script src="js/jquery-3.5.1.min.js"></script><script src="js/bootstrap.min.js"></script><style>.fakeimg {height: 200px;background: #F0FFFF;}.back-img{background-image:url(img/hometown1.jpg)}</style>
</head>
<body><div class="jumbotron text-center back-img" style="margin-bottom:0" ><h1>欢迎来小尘空间</h1><p>小站虽小，或有其妙</p></div><nav class="navbar navbar-inverse"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="#">导航栏</a></div><div class="collapse navbar-collapse" id="myNavbar"><ul class="nav navbar-nav"><li class="active"><a href="index.jsp">主页</a></li><li class="active"><a href="scenery.jsp">吟游赏景</a></li><li class="active"><a href="blog.jsp">博客专栏</a></li></ul></div></div></nav>  <ul class="list-group"><li class="list-group-item"><span class="badge">新</span>文章一：......</li><li class="list-group-item">文章二：......</li><li class="list-group-item">文章三：......</li><li class="list-group-item">文章四：......</li><li class="list-group-item">文章五：......</li><li class="list-group-item">文章六：......</li></ul></body>
</html>

scenery.jsp（风景展示页面）

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head><meta charset="UTF-8"><title>微光落尘的个人空间</title><link rel="stylesheet" href="css/bootstrap.min.css"><script src="js/jquery-3.5.1.min.js"></script><script src="js/bootstrap.min.js"></script>
</head>
<body><nav class="navbar navbar-inverse"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="#">导航栏</a></div><div class="collapse navbar-collapse" id="myNavbar"><ul class="nav navbar-nav"><li class="active"><a href="index.jsp">主页</a></li><li class="active"><a href="scenery.jsp">吟游赏景</a></li><li class="active"><a href="blog.jsp">博客专栏</a></li></ul></div></div></nav>  <div id="myCarousel" class="carousel slide"><!-- 轮播（Carousel）指标 --><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0"  class="active"></li><li data-target="#myCarousel" data-slide-to="1" ></li><li data-target="#myCarousel" data-slide-to="2" ></li></ol>   <!-- 轮播（Carousel）项目 --><div class="carousel-inner"><div class="item active" ><img src="img/pic1.jpg" alt="First slide"><div class="carousel-caption">“美丽校园”</div></div><div class="item" ><img src="img/pic2.jpg" alt="Second slide"><div class="carousel-caption">标题2</div></div><div class="item" ><img src="img/pic3.jpg" alt="Third slide"><div class="carousel-caption"">标题3</div></div></div><!-- 轮播（Carousel）导航 --><a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div></body>
</html>

message.jsp(留言页面)

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta charset="UTF-8"><title>微光落尘的个人空间</title><link rel="stylesheet" href="css/bootstrap.min.css"><script src="js/jquery-3.5.1.min.js"></script><script src="js/bootstrap.min.js"></script><style>.back-img{background-image:url(img/hometown1.jpg)}</style>
</head>
<body><div class="jumbotron text-center back-img" style="margin-bottom:0" ><h1>欢迎来小尘空间</h1><p>小站虽小，或有其妙</p></div><nav class="navbar navbar-inverse"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="#">导航栏</a></div><div class="collapse navbar-collapse" id="myNavbar"><ul class="nav navbar-nav"><li class="active"><a href="index.jsp">主页</a></li><li class="active"><a href="scenery.jsp">吟游赏景</a></li><li class="active"><a href="blog.jsp">博客专栏</a></li></ul></div></div></nav>  <form role="form" id="form1"><div class="form-group"><label for="name">tip:欢迎留言!!!</label><textarea id="tarea" class="form-control" rows="6"></textarea><br>  <button type="submit" id="btn1_send class="btn btn-success">发送</button></div></form></body>
</html>

AdminLog.jsp（后台登录页面）

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta charset=UTF-8"><title>微光落尘的个人空间</title><link rel="stylesheet" href="css/bootstrap.min.css"><script src="js/jquery-3.5.1.min.js"></script><script src="js/bootstrap.min.js"></script><script src="js/dealEvent.js"></script><style>.in_style{background-color:rgba(30,144,255,0.1);color:#1E90FF}body{background:url("img/hometown2.jpg")  no-repeat center center;   /*加载背景图*/   /* 背景图不平铺 */background-size:cover;  /* 让背景图基于容器大小伸缩 */background-attachment:fixed;        /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */ background-color:#CCCCCC;   /* 设置背景颜色，背景图加载过程中会显示背景色 */}</style>
</head>
<body><div class="text-center"  ><nav class="navbar navbar-inverse"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="#">导航栏</a></div><div class="collapse navbar-collapse" id="myNavbar"><ul class="nav navbar-nav"><li class="active"><a href="index.jsp">主页</a></li><li class="active"><a href="scenery.jsp">吟游赏景</a></li><li class="active"><a href="blog.jsp">博客专栏</a></li></ul></div></div></nav>  <div><h1>欢迎来小尘空间</h1><p>网站后台传送门</p></div><div class="container"><div class="row" style="margin-top:30px"><div class="col-sm-4 col-md-offset-4"><form  id="form1" class="bs-example bs-example-form" role="form" method="post"><div class="input-group"><span class="input-group-addon control-label in_style">时空节点</span><input type="text" name="username" class="form-control in_style" placeholder=""></div>
<br><div class="input-group"><span class="input-group-addon control-label in_style">开启秘钥</span><input type="password" name="password" class="form-control in_style" placeholder=""></div>
<br><div class="input-group-btn"><button type="submit" id="b_log" class="btn btn-success" style="background-color:rgba(0,0,0,0.1);border:none;color:#1E90FF">点击传送</button></div></form></div></div></div></div>
</body>
</html>

最后添几张跑起来的效果图

如果本篇文章对您有帮助的话，别忘了点个赞！

自己动手搭网站（四）：用bootstrap写几个简单的页面相关推荐

自己动手搭网站（六）：javaweb搭建一个简单的个人博客系统
目录前言一.一点建网站的背景知识二.个人博客系统介绍 1.核心功能和数据库 2.前端页面 3.后端 servlet service层 dao层配置文件参考资料前言这篇博主会介绍下我用ja ...
自己动手搭建网站系列总目录
引言说起来,博主从学习计算机相关知识那天开始,就对自己动手搭建网站有着一种莫名的憧憬与向往.只是那时所学实在太少,撑不起这个想法,也没想着用一些自助建站工具什么的,感觉用起来少了点意思,而且也挺麻烦 ...
【京东电商网站主界面仿写——HTML第四部分】
由于这个项目整体的代码较长,所以分成几个部分给大家展示. 比较完整的效果在这里~~[京东网站主界面仿写--使用Html5+CSS3+JavaScript等实现(附源代码和效果),挺炫的喔~~~] 这里 ...
Django实现迷你淘宝(四) --- 基于Bootstrap的商品页面设计与美化
欢迎查看本系列的其他文章: postgres安装与入门 django安装与入门基于django的用户验证系统实现基于Bootstrap的商品页面设计与美化基于jQuery和AJax的购物车设计与 ...
自己动手搭建网站：域名和云服务器选购
系列文章:自己动手搭建网站系列总目录目录 1.引言 2.域名选购 3.云服务器选购 3.1选购云服务器 3.2配置安全组规则 4.参考资料 1.引言注意:现在的网站要进行"双备案&quo ...
从零搭建一个基于React+Nextjs的SSR网站(四)：如何搭建服务器并部署Nextjs项目
个人博客源码:https://github.com/shaotianyu/blog-front PS: 如果你有疑惑,可以给我留言,咱们一起解决它. 从零搭建一个基于React+Nextjs的SSR网 ...
网站api自己怎么写_网站描述怎么写？对网站优化有什么作用？
随着互联网的发展越来越快,网站的竞争也越来越激烈,如何在多样化的网络环境中将自己的网站脱颖而出,单靠网页标题是不够吸引的,还需要有夺人眼球的网站网页描述.网站描述就是网站的基础标签TDK中的D,也就是 ...
自己动手写CPU(5)简单算术操作指令实现_1
自己动手写CPU(5)简单算数操作指令实现_1 指令介绍 MIPS32指令集架构定义的所有算术操作指令,共有21条共有三类,分别是: 简单算术指令乘累加.乘累减指令除法指令算术指令操作介绍一 ...
* 四、要求写一个方法：method。该方法要求传入一个数字n（n要小于10）， * 该方法能够计算得到所有各位上的数字不超过n且每一位的数字都不重复的三位数的个数。
package Day04;/*** 四.要求写一个方法:method.该方法要求传入一个数字n(n要小于10),* 该方法能够计算得到所有各位上的数字不超过n且每一位的数字都不重复的三位数的个数.* ...

自己动手搭网站（四）：用bootstrap写几个简单的页面

目录

前言