bootstrap仿Ghost开源博客主页

来源：互联网发布：js四舍五入取两位小数编辑：程序博客网时间：2024/05/21 15:47

都说实践是检验是否掌握的标准，由于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内容

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

最后界面

这里写图片描述

源码地址

0 0