Bootstrap4完成的博客首页
代码：
index.html：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Blog</title>
<link rel="stylesheet" href="./module/bootstrap-4.3.1-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./module/fontawesome-free-5.11.2-web/css/all.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/custom-md.css">
<link rel="stylesheet" href="./css/custom-lg.css">
<style type="text/css">
.carousel-item {
height: 100px;
}
.carousel-item:nth-of-type(3) {
background-color: yellowgreen;
}
.carousel-item:nth-of-type(1) {
background-color: rgb(230, 70, 203);
}
.carousel-item:nth-of-type(2) {
background-color: rgb(221, 99, 43);
}
</style>
</head>
<body>
<!-- 头部 -->
<header class="navbar fixed-top navbar-expand-md app-bg-main">
<a href="#" class="navbar-brand app-text-main mr-5">LOGO</a>
<form class="form-inline app-search-form app-search-form-md">
<input type="text" class="app-search-input" placeholder="请输入关键字..." name="search">
<i class="fa fa-search text-white app-search-btn"></i>
</form>
<button class="navbar-toggler ml-auto text-white" data-toggle="collapse" data-target="#app-navbar">
<i class="fa fa-bars"></i>
</button>
<div id="app-navbar" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link app-text-main">首页</a>
</li>
<li class="nav-item mr-3">
<a href="#" class="nav-link app-text-main">随笔</a>
</li>
<li class="nav-item mr-3">
<a href="#" class="nav-link app-text-main">留言</a>
</li>
<li class="nav-item mr-3">
<a href="#" class="nav-link app-text-main">问答</a>
</li>
<li class="nav-item mr-3">
<a href="#" class="nav-link app-text-main">关于</a>
</li>
</ul>
<form class="form-inline app-search-form app-search-form-lg">
<input type="text" class="app-search-input" placeholder="请输入关键字..." name="search">
<i class="fa fa-search text-white"></i>
</form>
</div>
<div class="text-white app-menu ml-5">
<i class="app-menu-icon"></i>
<i class="app-menu-icon"></i>
<i class="app-menu-icon"></i>
</div>
</header>
<!-- Content -->
<div class="container-fluid app-content">
<div class="row">
<div class="col-md-2 hidden-xs d-none d-none d-md-block">
<div class="row app-sidebar-left">
<div class="card w-100">
<div class="card-header app-bg-main">
<div class="app-user-icon text-center">
<img src="./images/tx.jpeg" class="rounded-circle" alt="头像">
</div>
<div class="text-center app-userinfo-name mt-2">
<span>寻水的鱼</span>
</div>
</div>
<div class="card-body">
<h6 class="text-secondary ml-3 mt-3">分类</h6>
<div class="app-sidebar-left-classes">
<div class="card">
<div class="card-header app-sidebar-left-bg-main">
<button class="btn-link btn app-sidebar-left-text-main " data-toggle="collapse"
data-target="#java">
<i class="fa fa-laptop-code"></i> Java
</button>
</div>
<div class="collapse" id="java" data-parent=".app-sidebar-left-classes">
<div class="card-body">
<div class="list-group ml-4">
<div class="list-group-item"><a class="app-sidebar-left-text-main"
href="#">Java基础</a></div>
<div class="list-group-item"><a class="app-sidebar-left-text-main"
href="#">Spring</a></div>
<div class="list-group-item"><a class="app-sidebar-left-text-main"
href="#">Spring Boot</a></div>
<div class="list-group-item"><a class="app-sidebar-left-text-main"
href="#">Spring Cloud</a></div>
<div class="list-group-item"><a class="app-sidebar-left-text-main"
href="#">Spring Security</a></div>
<div class="list-group-item"><a class="app-sidebar-left-text-main"
href="#">MyBatis</a></div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header app-sidebar-left-bg-main">
<button class="btn-link btn app-sidebar-left-text-main " data-toggle="collapse"
data-target="#web">
<i class="fa fa-file-code"></i> 前端
</button>
</div>
<div class="collapse" id="web" data-parent=".app-sidebar-left-classes">
<div class="card-body">
<div class="list-group ml-4">
<div class="list-group-item"><a class="app-sidebar-left-text-main"
href="#">HTML5</a></div>
<div class="list-group-item"><a class="app-sidebar-left-text-main"
href="#">CSS3</a></div>
<div class="list-group-item"><a class="app-sidebar-left-text-main"
href="#">Bootstrap</a></div>
<div class="list-group-item"><a class="app-sidebar-left-text-main"
href="#">Vue</a></div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header app-sidebar-left-bg-main">
<button class="btn-link btn app-sidebar-left-text-main " data-toggle="collapse"
data-target="#database">
<i class="fa fa-database"></i> 数据库
</button>
</div>
<div class="collapse" id="database" data-parent=".app-sidebar-left-classes">
<div class="card-body">
<div class="list-group ml-4">
<div class="list-group-item"><a class="app-sidebar-left-text-main"
href="#">MySQL</a></div>
<div class="list-group-item"><a class="app-sidebar-left-text-main"
href="#">Oracle</a></div>
<div class="list-group-item"><a class="app-sidebar-left-text-main"
href="#">PostgressSQL</a></div>
<div class="list-group-item"><a class="app-sidebar-left-text-main"
href="#">SQL Server</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer app-footer-bg-main app-sidebar-left-text-main">
<small>友链：<a href="#" class="app-friend app-sidebar-left-text-main"
href="#">你好，明天！</a></small>
</div>
</div>
</div>
</div>
<div class="col-md-10">
<!-- banner -->
<div class="row mb-3 ml-2">
<div class="carousel slid col-md-12 " data-ride="carousel">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target=".carousel"></li>
<li data-slide-to="1" data-target=".carousel"></li>
<li data-slide-to="2" data-target=".carousel"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active"></div>
<div class="carousel-item"></div>
<div class="carousel-item"></div>
</div>
</div>
</div>
<!-- article -->
<div class="row">
<!-- article -->
<div class="col-md-12 col-lg-10">
<div class="row">
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body app-article-title">
<h5>原码、补码、反码以及位运算</h5>
<small class="text-secondary">
原码、补码、反码的概念以及位运算原码、补码、反码的概念以及位运算1 原码、补码、反码1.1 原码组成1.2 反码1.3 补码1.4 总结2 位运算2.1
按位与&2.2 按位或|2.3 按位异或^2.4 右移运算>>2.5 左移运算<&am...
</small>
</div>
<div class="card-footer clearfix">
<div class="float-left app-info-badge">
<div class="badge bg-danger text-white">线程池</div>
<div class="badge bg-info text-white">Spring Boot</div>
<div class="badge bg-warning text-white">Spring Boot</div>
</div>
<div class="float-right app-article-info">
<a href="#"><i class="fa fa-clock"></i><small
class="ml-1">2019-12-01</small></a>
<a class="ml-3" href="#"><i class="fa fa-comment-dots"></i><small
class="ml-1">1</small></a>
<a class="ml-3" href="#"><i class="fa fa-thumbs-up"></i><small
class="ml-1"></small>1</small></a>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body app-article-title">
<h5>原码、补码、反码以及位运算</h5>
<small class="text-secondary">
原码、补码、反码的概念以及位运算原码、补码、反码的概念以及位运算1 原码、补码、反码1.1 原码组成1.2 反码1.3 补码1.4 总结2 位运算2.1
按位与&2.2 按位或|2.3 按位异或^2.4 右移运算>>2.5 左移运算<&am...
</small>
</div>
<div class="card-footer clearfix">
<div class="float-left app-info-badge">
<div class="badge bg-warning text-white">Spring Boot</div>
<div class="badge bg-danger text-white">线程池</div>
<div class="badge bg-primary text-white">Spring</div>
</div>
<div class="float-right app-article-info">
<a href="#"><i class="fa fa-clock"></i><small
class="ml-1">2019-12-01</small></a>
<a class="ml-3" href="#"><i class="fa fa-comment-dots"></i><small
class="ml-1">1</small></a>
<a class="ml-3" href="#"><i class="fa fa-thumbs-up"></i><small
class="ml-1"></small>1</small></a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body app-article-title">
<h5>原码、补码、反码以及位运算</h5>
<small class="text-secondary">
原码、补码、反码的概念以及位运算原码、补码、反码的概念以及位运算1 原码、补码、反码1.1 原码组成1.2 反码1.3 补码1.4 总结2 位运算2.1
按位与&2.2 按位或|2.3 按位异或^2.4 右移运算>>2.5 左移运算<&am...
</small>
</div>
<div class="card-footer clearfix">
<div class="float-left app-info-badge">
<div class="badge bg-danger text-white">线程池</div>
<div class="badge bg-info text-white">Spring Boot</div>
<div class="badge bg-warning text-white">Spring Boot</div>
</div>
<div class="float-right app-article-info">
<a href="#"><i class="fa fa-clock"></i><small
class="ml-1">2019-12-01</small></a>
<a class="ml-3" href="#"><i class="fa fa-comment-dots"></i><small
class="ml-1">1</small></a>
<a class="ml-3" href="#"><i class="fa fa-thumbs-up"></i><small
class="ml-1"></small>1</small></a>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body app-article-title">
<h5>原码、补码、反码以及位运算</h5>
<small class="text-secondary">
原码、补码、反码的概念以及位运算原码、补码、反码的概念以及位运算1 原码、补码、反码1.1 原码组成1.2 反码1.3 补码1.4 总结2 位运算2.1
按位与&2.2 按位或|2.3 按位异或^2.4 右移运算>>2.5 左移运算<&am...
</small>
</div>
<div class="card-footer clearfix">
<div class="float-left app-info-badge">
<div class="badge bg-warning text-white">Spring Boot</div>
<div class="badge bg-danger text-white">线程池</div>
<div class="badge bg-primary text-white">Spring</div>
</div>
<div class="float-right app-article-info">
<a href="#"><i class="fa fa-clock"></i><small
class="ml-1">2019-12-01</small></a>
<a class="ml-3" href="#"><i class="fa fa-comment-dots"></i><small
class="ml-1">1</small></a>
<a class="ml-3" href="#"><i class="fa fa-thumbs-up"></i><small
class="ml-1"></small>1</small></a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body app-article-title">
<h5>原码、补码、反码以及位运算</h5>
<small class="text-secondary">
原码、补码、反码的概念以及位运算原码、补码、反码的概念以及位运算1 原码、补码、反码1.1 原码组成1.2 反码1.3 补码1.4 总结2 位运算2.1
按位与&2.2 按位或|2.3 按位异或^2.4 右移运算>>2.5 左移运算<&am...
</small>
</div>
<div class="card-footer clearfix">
<div class="float-left app-info-badge">
<div class="badge bg-danger text-white">线程池</div>
<div class="badge bg-info text-white">Spring Boot</div>
<div class="badge bg-warning text-white">Spring Boot</div>
</div>
<div class="float-right app-article-info">
<a href="#"><i class="fa fa-clock"></i><small
class="ml-1">2019-12-01</small></a>
<a class="ml-3" href="#"><i class="fa fa-comment-dots"></i><small
class="ml-1">1</small></a>
<a class="ml-3" href="#"><i class="fa fa-thumbs-up"></i><small
class="ml-1"></small>1</small></a>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body app-article-title">
<h5>原码、补码、反码以及位运算</h5>
<small class="text-secondary">
原码、补码、反码的概念以及位运算原码、补码、反码的概念以及位运算1 原码、补码、反码1.1 原码组成1.2 反码1.3 补码1.4 总结2 位运算2.1
按位与&2.2 按位或|2.3 按位异或^2.4 右移运算>>2.5 左移运算<&am...
</small>
</div>
<div class="card-footer clearfix">
<div class="float-left app-info-badge">
<div class="badge bg-warning text-white">Spring Boot</div>
<div class="badge bg-danger text-white">线程池</div>
<div class="badge bg-primary text-white">Spring</div>
</div>
<div class="float-right app-article-info">
<a href="#"><i class="fa fa-clock"></i><small
class="ml-1">2019-12-01</small></a>
<a class="ml-3" href="#"><i class="fa fa-comment-dots"></i><small
class="ml-1">1</small></a>
<a class="ml-3" href="#"><i class="fa fa-thumbs-up"></i><small
class="ml-1"></small>1</small></a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body app-article-title">
<h5>原码、补码、反码以及位运算</h5>
<small class="text-secondary">
原码、补码、反码的概念以及位运算原码、补码、反码的概念以及位运算1 原码、补码、反码1.1 原码组成1.2 反码1.3 补码1.4 总结2 位运算2.1
按位与&2.2 按位或|2.3 按位异或^2.4 右移运算>>2.5 左移运算<&am...
</small>
</div>
<div class="card-footer clearfix">
<div class="float-left app-info-badge">
<div class="badge bg-danger text-white">线程池</div>
<div class="badge bg-info text-white">Spring Boot</div>
<div class="badge bg-warning text-white">Spring Boot</div>
</div>
<div class="float-right app-article-info">
<a href="#"><i class="fa fa-clock"></i><small
class="ml-1">2019-12-01</small></a>
<a class="ml-3" href="#"><i class="fa fa-comment-dots"></i><small
class="ml-1">1</small></a>
<a class="ml-3" href="#"><i class="fa fa-thumbs-up"></i><small
class="ml-1"></small>1</small></a>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card">
<div class="card-body app-article-title">
<h5>原码、补码、反码以及位运算</h5>
<small class="text-secondary">
原码、补码、反码的概念以及位运算原码、补码、反码的概念以及位运算1 原码、补码、反码1.1 原码组成1.2 反码1.3 补码1.4 总结2 位运算2.1
按位与&2.2 按位或|2.3 按位异或^2.4 右移运算>>2.5 左移运算<&am...
</small>
</div>
<div class="card-footer clearfix">
<div class="float-left app-info-badge">
<div class="badge bg-warning text-white">Spring Boot</div>
<div class="badge bg-danger text-white">线程池</div>
<div class="badge bg-primary text-white">Spring</div>
</div>
<div class="float-right app-article-info">
<a href="#"><i class="fa fa-clock"></i><small
class="ml-1">2019-12-01</small></a>
<a class="ml-3" href="#"><i class="fa fa-comment-dots"></i><small
class="ml-1">1</small></a>
<a class="ml-3" href="#"><i class="fa fa-thumbs-up"></i><small
class="ml-1"></small>1</small></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- sidebar-right -->
<div class="col-lg-2 d-none d-lg-block app-sidebar-right ">
</div>
</div>
</div>
</div>
</div>
<!-- footer -->
<footer class="row app-footer app-footer-bg-main app-footer-text-main">
<div class="text-center app-copyright">
<small>LOGO v1.0.0 更新于2019-12-12</small><br>
<small>Copyright © 2019 LOGO 浙ICP备 xxxxxxxx号-x </small>
</div>
</footer>
<script src="./module/jquery-3.4.1.min.js"></script>
<script src="./module/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
index.css：
.app-bg-main {
background-color: #4e9a78 !important;
}
.app-text-main {
color: #fff !important;
}
.app-footer-bg-main {
background-color: #356851 !important;
}
.app-footer-text-main {
color: rgb(184, 179, 179) !important;
}
.app-sidebar-left-text-main {
color: rgb(189, 191, 192) !important;
}
.app-friend.app-sidebar-left-text-main:hover{
color: #fff !important;
}
.app-sidebar-left-bg-main {
background-color: #fff !important;
}
.app-sidebar-left-text-main {
color: #adadad;
}
.app-sidebar-left-text-main:hover {
color: #868585;
text-decoration: none;
}
.app-sidebar-left-text-main:visited {
text-decoration: none;
}
.app-content {
margin-top: 60px;
}
.carousel {
padding: 0 !important;
}
.app-search-input {
outline: none;
border: none;
background-color: #4e9a78;
border-bottom: #fff 1px solid;
width: 10rem;
color: #fff;
}
.app-search-input::placeholder {
color: rgb(194, 197, 197);
}
.app-menu {
display: inline-block;
}
.app-menu .app-menu-icon {
display: block;
width: 1.3rem;
border: 1px #fff solid;
margin: .3rem auto;
}
.app-menu .app-menu-icon:nth-of-type(2) {
width: 2rem;
}
.app-article-title {
color: rgb(87, 88, 88);
}
.app-article-info > a {
font-size: .7rem !important;
color: #9ba6ac !important;
}
.app-user-icon > img {
max-width: 64px;
}
.app-sidebar-left {
position: fixed;
width: 16.66%;
height: 87vh;
}
.app-sidebar-right {
height: 500px;
background-color: hotpink;
}
.app-userinfo-name {
color: #fff;
}
.app-sidebar-left .card {
border: none !important;
}
.app-sidebar-left .card-header {
border: none !important;
}
.app-sidebar-left .card-footer {
border-radius: 0 !important;
}
.app-sidebar-left .card-body {
padding: 0 !important;
}
.app-sidebar-left-classes .card-body {
padding: 0 !important;
}
.app-sidebar-left .list-group-item {
border: none !important;
}
.app-footer {
height: 8;
justify-content: center;
align-items: center;
}
custom-md.css：
@media screen and (max-width: 768px) {
.app-search-form {
margin: 0 auto;
}
.app-search-input {
width: 0;
opacity: 0;
}
.app-search-form-md {
display: inline-block;
}
.app-search-form-lg {
display: none;
}
.app-menu {
display: none;
}
.app-search-input-change-long {
display: inline-block;
animation: input-long .3s ease forwards;
}
.app-search-input-change-short {
display: inline-block;
animation: input-short 1s ease forwards;
}
@keyframes input-long {
from {
width: 0;
opacity: 0;
}
to {
width: 10em;
opacity: 1;
}
}
@keyframes input-short {
from {
width: 10em;
opacity: 1;
}
to {
width: 0em;
opacity: 0;
}
}
}
index.js：
$(function() {
$('.app-search-form-md .app-search-btn').click(function(e) {
let input = $('.app-search-form-md .app-search-input');
if (input.hasClass('app-search-input-change-short') && input.val().trim() == '' && input.width() > 0) {
return ;
}
if (!input.hasClass('app-search-input-change-long')) {
input.addClass('app-search-input-change-long');
input.removeClass('app-search-input-change-short');
input.focus();
}
})
$('.app-search-form-md .app-search-input').blur(function(e) {
if ($(this).val().trim() == '' && $(this).hasClass('app-search-input-change-long')) {
$(this).removeClass('app-search-input-change-long');
$(this).addClass('app-search-input-change-short');
}
})
})
custom-lg.css：
@media screen and (min-width: 768px) {
.app-search-form-md {
display: none;
}
.app-search-form-lg {
display: inline-block;
}
}
