多语言展示
当前在线:634今日阅读:61今日分享:18

HTML 5 前端框架 Bootstrap 使用教程

Bootstrap是Twitter推出的一个开源的前端框架。Bootstrap由Twitter的设计师Mark Otto和Jacob Thornton合作开发,由动态语言Less写成。它是一套“易用、优雅、灵活、可扩展”的前端工具集,提供了优雅的HTML/CSS规范。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括MSNBC()的Breaking News都使用了该项目。Bootstrap兼容于所有主流浏览器,包括各种移动设备。
工具/原料
1

Windows系统

2

Dreamweaver编辑器

方法/步骤
1

下载和使用Bootstrap建立了一个响应式的12网格布局系统,它引入了fixed和fluid-with两种布局方式,可以快速构建Web应用。目前Bootstrap最新版本为3.0.0,可以在Bootstrap的官方网站http://twitter.github.com/bootstrap/上下载源码。

3

从上面的代码可以看到:Bootstrap基于JQuery构建,所以需先引入JQuery。Bootstrap框架代码包括了bootstrap.js和bootstrap.css两个文件。然后,我们可以将如下代码替换body元素的内容:         

            
                 
                                        
                 
                      
                          

Hello world!

                      
                 
            
        
    

4

上面的代码中,我们采用流式布局构建,将页面分成两部分:左边是7个链接,占3个宽度;右边是一个Hello world的标题,占9个宽度。效果如下:

推荐信息