本文共 1400 字，大约阅读时间需要 4 分钟。

写在前面： Bootstrap是目前最流行的前端框架，我从简单的实例开始，写一份文字版的Bootstrap教程，希望能对大家有所帮助。 准备工作： 1、下载Bootstrap框架核心文件。 2、下载jQuery文件。 3、下载HTML5兼容IE的JS插件。 （各位可以从网上找到Bootstrap和jQuery以及HTML5 JS的官方下载地址，也可以直接点击下面的下载链接下载，我已经将jQuery文件放在了js目录里了。） HTML结构： 1、Bootstrap框架的文档必须声明为HTML5文件类型，所以你的每一个页面都必须按照下面的格式进行设置：

......

2、添加HTML文档meta标记，需要两条标记：

         3、引入所需要的核心文件，包括Bootstrap的CSS文件，jQuery插件，Bootstrap的JS核心文件，以及HTML5.JS文件。

 

那么现在，你的HTML文档，应该是这个样子的：

正式开始： 现在就可以在body之间写上你的网页结构代码了，添加上Bootstrap相应的CSS类样式，就可以完成一个最简单的Bootstrap主页了。 首先，写好HTML结构代码：

    
        
     
这是一个简单的Bootstrap主页
        
     
这是一个简单的Bootstrap主页，制作这个主页，可以分为三个步骤：
            
     
一、使用HTML5基本文档类型，并写好网站声明。    
        
     
二、引入必须的Bootstrap核心文件。
        
     
三、将页面代码放入container类容器中。
    

在这个普通的结构代码的DIV上，添加CSS类.container，我们就可以看到页面的变化。上面的HTML结构和内容代码将变成如下：

    
        
        
        
        
            
        
        
    
    
        
     
这是一个简单的Bootstrap主页
        
     
这是一个简单的Bootstrap主页，制作这个主页，可以分为三个步骤：
            
     
一、使用HTML5基本文档类型，并写好网站声明。    
        
     
二、引入必须的Bootstrap核心文件。
        
     
三、将页面代码放入container类容器中。
    
    
    

现在在浏览器中打开这个页面浏览，拖动浏览器窗口的大小，可以看到页面随着浏览器的大小变化，而出现相应的适应变化，这个简单的Bootstrap主页，到这里就写完了。 (模拟手机端显示) （模拟平板电脑显示） （模拟桌面设备显示） 可以看到，在不同分辨率下，页面边距是自动变化和适应的，这就是Bootstrap的强大之处。

转载地址：https://leeguoren.blog.csdn.net/article/details/51721407 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！