Bootstrap 3.5 框架文件结构与 API 使用指南

一、文件结构

Bootstrap 3.5 的标准文件结构如下：

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

文件说明

1. ​​CSS 文件​​：

   • bootstrap.css：完整未压缩版本（开发使用）
   • bootstrap.min.css：压缩版本（生产使用）
   • bootstrap-theme.css：可选主题样式
   • bootstrap-theme.min.css：压缩版主题样式

2. ​​JS 文件​​：

   • bootstrap.js：包含所有插件的未压缩版本
   • bootstrap.min.js：压缩版本

3. ​​字体文件​​：

   • Glyphicons 字体文件（用于图标）

二、基本 API 使用

1. 引入 Bootstrap

2. 主要组件 API

导航栏 (Navbar)

  

    
    

      
        Toggle navigation
        
        
        
      
      Brand
    

    
    

      

        
Home
        
Link
        

          Dropdown 
          

            
Action
            
Another action
            
Something else here
          
        
      
    
  

模态框 (Modal)

  Launch demo modal




  

    

      

        
          ×
        
        
Modal title
      
      

        
Modal body text goes here.
      
      

        Close
        Save changes
      
    
  

轮播 (Carousel)

  
  

    

    

    

  

  
  

    

      
      

        
First slide label
        
Nulla vitae elit libero, a pharetra augue mollis interdum.
      
    
    

      
      

        
Second slide label
        
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      
    
    

      
      

        
Third slide label
        
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
      
    
  

  
  
    
  
  
    
  

三、JavaScript API 方法

1. 模态框方法

// 显示模态框
$('#myModal').modal('show');

// 隐藏模态框
$('#myModal').modal('hide');

// 切换模态框状态
$('#myModal').modal('toggle');

// 手动处理模态框事件
$('#myModal').on('shown.bs.modal', function (e) {
  // 模态框完全显示后执行
});

2. 标签页 (Tab) 方法

// 显示特定标签页
$('#myTab a[href="#profile"]').tab('show');

// 监听标签页切换事件
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // 新激活的标签页
  e.relatedTarget // 之前激活的标签页
});

3. 工具提示 (Tooltip)

// 初始化所有工具提示
$('[data-toggle="tooltip"]').tooltip();

// 方法调用
$('#element').tooltip('show');
$('#element').tooltip('hide');
$('#element').tooltip('toggle');
$('#element').tooltip('destroy');

4. 弹出框 (Popover)

// 初始化所有弹出框
$('[data-toggle="popover"]').popover();

// 方法调用
$('#element').popover('show');
$('#element').popover('hide');
$('#element').popover('toggle');
$('#element').popover('destroy');

四、自定义 Bootstrap

1. 使用 Less 变量

Bootstrap 3.5 使用 Less 作为 CSS 预处理器，可以修改以下核心变量：

// 修改主色调
@brand-primary: #428bca;

// 修改字体
@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;

// 修改网格系统
@grid-columns:              12;
@grid-gutter-width:         30px;

// 修改容器宽度
@container-desktop:            (940px + @grid-gutter-width);

2. 选择性引入组件

可以只引入需要的组件来减小文件体积：

// Core variables and mixins
@import "bootstrap/variables.less";
@import "bootstrap/mixins.less";

// Reset and dependencies
@import "bootstrap/normalize.less";
@import "bootstrap/print.less";
@import "bootstrap/glyphicons.less";

// Core CSS
@import "bootstrap/scaffolding.less";
@import "bootstrap/type.less";
@import "bootstrap/grid.less";

// 只引入需要的组件
@import "bootstrap/buttons.less";
@import "bootstrap/navs.less";
@import "bootstrap/navbar.less";

五、常见问题解决

1. ​​JavaScript 插件不工作​​：

   • 确保已引入 jQuery (v1.9.1 或更高版本)
   • 检查控制台是否有错误
   • 确保 DOM 加载完成后再初始化插件

2. ​​Glyphicons 图标不显示​​：

   • 检查字体文件路径是否正确
   • 确保 CSS 中字体路径配置正确

3. ​​响应式布局问题​​：

   • 确保 viewport meta 标签正确设置：

4. ​​浏览器兼容性问题​​：

   • Bootstrap 3 支持 IE8+，但某些功能需要 polyfill
   • 对于 IE8，需要引入 Respond.js 和 html5shiv

Bootstrap 3.5 虽然已经较旧，但仍然广泛应用于许多遗留项目中。如需新特性，建议升级到 Bootstrap 4 或 5 版本。