使用bootstrap框架做一个Aotm Blog个人博客

最新推荐文章于 2025-09-10 09:05:07 发布

原创

最新推荐文章于 2025-09-10 09:05:07 发布 · 521 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #前端 #html

使用bootstrap框架做一个Aotm Blog个人博客，展示一些自己的个人信息，有四个博客分类：心情记录、学习笔记、旅行相册、美食打卡。

主界面图：

心情记录界面

学习笔记界面：

旅行相册界面：

美食打卡界面：

代码展示：

主界面代码：index

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/iconfont.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/new_file.css" />
		<title> Aotm Blog个人博客</title>
	</head>
	<style>
		.icon {
			width: 1.5em;
			height: 1.5em;
			vertical-align: -0.15em;
			fill: currentColor;
			overflow: hidden;
		}
	</style>

	<body>
		<div class="container-fluid">
			<!--缩进的主体内容-->
			<div class="container bg-white">
				<!--顶部部分：logo+导航--+搜索-->
				<div class="row  border-bottom border-dark">
					<!--logo-->
					<nav class="navbar navbar-expand-lg ">
						<a href="#" class="navbar-brand">
							<img class="logo-img" src="img/logo.jpg" />
						</a>
						<a href="#" class="logo-text">
							<h3 class="font-weight-bold"> Aotm<br /> Blog</h3>
						</a>
					</nav>
					<!--导航-->
					<div class="border-top border-bottom border-dark mt-4 mb-5 ml-5">
						<ul class="list-inline pt-3 pl-5 pr-5 ">
							<li class="list-inline-item pl-5 pr-5">
								<a href="" class="nav-text">博客</a>
							</li>
							<li class="list-inline-item pl-5 pr-5">
								<a href="" class="nav-text">关于我</a>
							</li>
							<li class="list-inline-item pl-5 pr-5">
								<a href="" class="nav-text">和我联系</a>
							</li>
						</ul>
					</div>
					<!--搜索框-->
					<div class="mt-4 mb-5 ml-3">
						<form class="form-inline" method="post">
							<input type="text" class="inpu-sousuo" value="" placeholder="请输入关键字" />
							<button class="btn-sousuo bg-secondary ">
				<span class="iconfont icon-sousuo2 text-white"></span>
			</button>
						</form>
					</div>
				</div>
				<!--body身体部分：左菜单+右内容-->
				<div class="row border-bottom border-dark">
					<!--左菜单-->
					<div class="col-lg-3">
						<h5 class="font-weight-bold">
					博客分类
				</h5>
						<!--垂直菜单-->
						<div class="border-top-color">
							<ul class="list-unstyled pt-2">
								<li class="pl-2 pb-2 xinqing">
									<a href="#" class="nav-text">心情记录</a>
								</li>
								<li class="pl-2 pb-2 xuexi">
									<a href="#" class="nav-text">学习笔记</a>
								</li>
								<li class="pl-2 pb-2  lvxing">
									<a href="#" class="nav-text">旅行相册</a>
								</li>
								<li class="pl-2 pb-2 meishi">
									<a href="#" class="nav-text">美食打卡</a>
								</li>
							</ul>
						</div>
						<h5 class="font-weight-bold">
					关于博主
				</h5>
						<!--博主信息-->
						<div class="border-top-color pt-2">
							<img src="img/88.jpg" class="rounded-circle w-75" />
							<ul class="list-unstyled pt-2">
								<li class="pl-2 pb-2 ">博主：迪迦
									<a class="nav-text" href="#">
										<abbr title="个人信息编辑"><span class="iconfont icon-bianji1"></span></abbr>
									</a>
								</li>
								<li class="pl-2 pb-2 ">出生日期：未知</li>
								<li class="pl-2 pb-2 ">星座：水瓶座</li>
								<li class="pl-2 pb-2 ">新居城市：M78星</li>
								<li class="pl-2 pb-2 ">职业：奥特曼</li>
								<li class="pl-2 pb-2 ">爱好：打怪兽</li>

							</ul>
							<!--图标链接-->
							<div class=" mb-3 ml-5">
								&