当前位置：首页 > news >正文

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

news 来源：原创 2025/6/7 8:30:20

一、文件结构

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

文件说明

CSS 文件：
- bootstrap.css：完整未压缩版本（开发使用）
- bootstrap.min.css：压缩版本（生产使用）
- bootstrap-theme.css：可选主题样式
- bootstrap-theme.min.css：压缩版主题样式
JS 文件：
- bootstrap.js：包含所有插件的未压缩版本
- bootstrap.min.js：压缩版本
字体文件：
- Glyphicons 字体文件（用于图标）

二、基本 API 使用

1. 引入 Bootstrap

<!DOCTYPE html>
<html>
<head><title>Bootstrap 3.5</title><!-- 引入 Bootstrap CSS --><link rel="stylesheet" href="path/to/bootstrap.min.css"><!-- 可选主题 --><!-- <link rel="stylesheet" href="path/to/bootstrap-theme.min.css"> -->
</head>
<body><!-- 页面内容 --><!-- jQuery (Bootstrap 插件依赖) --><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><!-- 引入 Bootstrap JS --><script src="path/to/bootstrap.min.js"></script>
</body>
</html>

2. 主要组件 API

导航栏 (Navbar)

<nav class="navbar navbar-default"><div class="container-fluid"><!-- 品牌和切换按钮 --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Brand</a></div><!-- 导航链接 --><div class="collapse navbar-collapse" id="navbar-collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">Home</a></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li></ul></li></ul></div></div>
</nav>

模态框 (Modal)

<!-- 触发按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Launch demo modal
</button><!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">Modal title</h4></div><div class="modal-body"><p>Modal body text goes here.</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div>
</div>

轮播 (Carousel)

<div id="myCarousel" class="carousel slide" data-ride="carousel"><!-- 指示器 --><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li></ol><!-- 轮播项目 --><div class="carousel-inner"><div class="item active"><img src="..." alt="First slide"><div class="carousel-caption"><h3>First slide label</h3><p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p></div></div><div class="item"><img src="..." alt="Second slide"><div class="carousel-caption"><h3>Second slide label</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div><div class="item"><img src="..." alt="Third slide"><div class="carousel-caption"><h3>Third slide label</h3><p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p></div></div></div><!-- 控制按钮 --><a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

三、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";

五、常见问题解决

JavaScript 插件不工作：
- 确保已引入 jQuery (v1.9.1 或更高版本)
- 检查控制台是否有错误
- 确保 DOM 加载完成后再初始化插件
Glyphicons 图标不显示：
- 检查字体文件路径是否正确
- 确保 CSS 中字体路径配置正确
响应式布局问题：
- 确保 viewport meta 标签正确设置：
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```
浏览器兼容性问题：
- Bootstrap 3 支持 IE8+，但某些功能需要 polyfill
- 对于 IE8，需要引入 Respond.js 和 html5shiv