转眼bootstrap已经学习了两周了。中间按照bootstrap中文网做了一些简单的练习,对bootstrap整体的布局有了一些了解。再学习了1个多星期之后,我利用5 1的时间做了一个公司网站的练习。整体感觉就是,用别人的还是比较简单。而我自己来做还是比较麻烦,也许这就是传说中的眼高手低吧。那既然这样了,我接下来准备把bootstrap 中文网和官网的讲解都给练一遍。这样也许出以后出的效果会比较的酷吧!
中间做了一个练习,以后还会接着写bootstrap的学习之路。我要用CSDN记录我一个从0开始学bootstrap的整个学习历程和心理变化。
虽然5 1做的练习不能拿出来公布。不过, 5 1 还是学到了一点。就是再写html页面的时候。每个页面都会有重复的内容,比如导航条。 每个页面都写会比较烦。
我使用js来实现:
方法如下:
nav.js 文件, 文件内容:
$(function(){
var nav = '<div class="row-fluid"><div class="span1" ><a href="#" id="logo" class="logo thumbnail"><img src="./images/meehoo-logo.jpg" alt="logo" /> </a> </div></div><div class="row-fluid"><div class="span3 offset9"><a href="#"><img src="./images/sina.png" alt="" />新浪微博</a><a href="#"><img src="./images/tencent.png" alt="" />腾讯微博</a></div></div><div class="navbar"><div class="navbar-inner"><div class="container"><ul class="nav" ><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="../meehoo.html">主页</a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="news.html">行业新闻</a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="epiboly.html">外包业务</a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="company.html">公司简介</a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="about-us.html">关于我们</a></li></ul></div></div></div>'
$("#wrapper").prepend(nav);
});
我在需要的html页面直接放上:
<div class="wrapper" id="wrapper"> 整体的div
<script type="text/javascript" src="./js/nav.js"></script> 引入js
ok, 世界的一切都平静了。 以后所有的页面就不用写nav了,呵呵,还挺不错。