利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing

1.前言

我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意。做网站后台的开发人员可能了解前端，可是自己写一个不错的前端还是很费事的。幸好我们有Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。我以后端程序员的角度讲一下前端设计（好别扭），网站的颜色搭配不那么理想。你可以自己改css样式，达到自己的目的。

下面是我自己用Bootstrap搭建的首页地址：共享gis：http://test.sharegis.cn/访问一下吧（手机电脑都试一下，体会一下响应式页面:-D，只做了首页）。

废话不多说，开始讲解：

2.实现

（1）基本模板搭建 参考Bootstrap中文网 http://v3.bootcss测试数据/getting-started/，起步—>基本模板

  1     DOCTYPE html  >  
  2     html   lang  ="zh-CN"  >  
  3       head  >  
  4           meta   charset  ="utf-8"  >  
  5           不支持老版本IE  -->  
  6           meta   http-equiv  ="X-UA-Compatible"   content  ="IE=edge"  >  
  7           device-width自适应移动端宽度，initial-scale=1不进行缩放  -->  
  8         meta   name  ="viewport"   content  ="width=device-width, initial-scale=1"  >  
  9          上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！   -->  
 10         title  > Bootstrap 101 Template   title  >  
 11          Bootstrap 核心样式文件   -->  
 12         link   href  ="CSS/bootstrap.min.css"   rel  ="stylesheet"  >  
 13       head  >  
 14       body  >  
 15         h1  > 你好，世界！   h1  >  
 16          jQuery CDN加速   -->  
 17         script   src  ="//cdn.bootcss测试数据/jquery/1.11.3/jquery.min.js"  >  script  >  
 18         -bootstrap的核心JS文件必须放在jQuery文件之后，因为bootstrap基于jQuery   -->  
 19         script   src  ="js/bootstrap.min.js"  >  script  >  
 20       body  >  
 21     html  >  

查看更多关于利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing的详细内容...