你的位置:首页 > 软件开发 > 网页设计 > 利用Bootstrap快速搭建个人响应式主页(附演示+源码)

利用Bootstrap快速搭建个人响应式主页(附演示+源码)

发布时间:2016-04-24 12:00:16
1.前言 我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意。做网站后台的开发人员可能了解前端,可是自己写一个不错的前端还是很费事的。幸好我们有Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Boots ...

1.前言

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

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

     废话不多说,开始讲解:

2.实现

(1)基本模板搭建    参考Bootstrap中文网 http://v3.bootcss.com/getting-started/,起步—>基本模板

利用Bootstrap快速搭建个人响应式主页(附演示+源码)利用Bootstrap快速搭建个人响应式主页(附演示+源码)
 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='/images/loading.gif' data-original="http://www.cnblogs.com///cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>18   <!--bootstrap核心JS文件 (必须放在在jQuery,以为bootstrap基于必须放在在jQuery) -->19   <script src='/images/loading.gif' data-original="js/bootstrap.min.js"></script>20  </body>21 </html>

原标题:利用Bootstrap快速搭建个人响应式主页(附演示+源码)

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录