前面的有了bootstrap再也不担心网站的前端设计,我介绍了bootstrap,现在在理解bootstrap的基础上,接下来,我将使用bootstrap来打造一个网页,以更加深入地认识得使用bootstrap。
目标:使用Bootstrap快速打造一个网站
看完这篇文章,即使你是一只菜鸟,只要稍懂html+css,你也能使用Bootstrap来快速打造一个网点。
惦量一下,由于本文是图文描述,可能会很长,看情况了,如果太长了我会分章,废话少说了。。。
先来整体看一下效果
源码下载点击这里

本页的导航使用响应式布局,当浏览器缩小至或者小于768px,导航将收起,如图所示

点击时导航会展开

主体使用流体式布局,浏览器缩小时,布局框架和内容都会变得狭小

接下来,看看是如何实现的吧。
加载相关的样式文件和js文件
加载相关的样式文件和js文件,如果你想查阅官方文档你可以点击这里
如果你还记得前面的导航子菜单,它是如何实现的?其实它只需加载下面一行JS代码就可搞定
呵呵,是不是很轻松啊,如果不是使用Bootstrap ,你会JS,你也可能花了很多时间都写不出来;
你不会JS,那就更惨了,到百度的海量信息去筛选吧,你懂的。在这里,你只需,拈来就用。
网站导航制作
Bootstrap也提供几款导航,上面是一款比较经典的,当然,如果你觉得不好看,可以自己修改,或者自己制作哦。导航代码如下
网站的布局
布局仍是网站制作的重点,对我来说,我最看重的是Bootstrap的强大的布局功能。从上面那个实例抽出它的布局代码,如
Bootstrap有一套完整的栅格系统,其默认的栅格系统为12列 ,如上面的主体main两栏布局,使用的是8:4栅格,8+4=12,也就是不管多少栏,它们的栅格相加总是为12。
好了,到此就先告一段落吧,后面还会有更详细的解说。










