买网站的域名南阳网站开发公司
一、文件结构
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">×</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">
- 确保 viewport meta 标签正确设置：
-
浏览器兼容性问题：
- Bootstrap 3 支持 IE8+，但某些功能需要 polyfill
- 对于 IE8，需要引入 Respond.js 和 html5shiv
Bootstrap 3.5 虽然已经较旧，但仍然广泛应用于许多遗留项目中。如需新特性，建议升级到 Bootstrap 4 或 5 版本。