bootstrap仿Ghost开源博客主页

最新推荐文章于 2024-08-08 07:05:26 发布

i大俊

最新推荐文章于 2024-08-08 07:05:26 发布

阅读量1.2k

点赞数

分类专栏： CSS与HTML Webpack 文章标签： bootstrap 博客

本文链接：https://blog.csdn.net/hope_It/article/details/71189598

版权

CSS与HTML 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

Webpack

14 篇文章 8 订阅

订阅专栏

都说实践是检验是否掌握的标准，由于bootstrap之前用的不多，但是最近又需要使用，借此机会模仿一个Ghost开源博客主页

搭建bootstrap环境

效果预览：Ghost开源博客主页

先到官网下载bootstrap框架，这里用的是bootstrap3.2版本
使用sublime编辑器即可

在官网上复制框架基础页面

加上本地的css,js文件

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ghost 开源博客平台 | Ghost中文网</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>
    <script src="js/jquery-1.11.1.min.js "></script>
    <script src="js/bootstrap.min.js "></script>
    <script src="js/main.js "></script>
</body>

</html>

应用到的bootstrap内容

栅格布局（应用很多）
响应式导航条
各种居中排版

最后界面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8KrGQM5g-1570936508403)(https://img-blog.csdn.net/20170505160121155?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaG9wZV9JdA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)]
这里写图片描述