目录
前言
这是博主自己动手搭建网站尝试过程的一些记录，
上篇：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>
最后添几张跑起来的效果图
如果本篇文章对您有帮助的话，别忘了点个赞！
249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
