bootstrap响应式导航栏点击collapse的按钮没有反应，不会向下展开
BootStrap框架
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
BootStrap框架起步、全局CSS样式、组件、JavaScript插件及定制指南
Bootstrap是一个由Twitter开发的流行前端框架，它基于HTML、CSS和JavaScript，旨在加速Web开发过程。以下是如何起步使用Bootstrap，应用其全局CSS样式、组件以及JavaScript插件，并进行定制的简要指南。
起步
-
引入依赖：在项目中，首先需要引入Bootstrap的CSS和JS文件。你可以直接从Bootstrap官网下载或通过CDN链接引用。
-
基本结构：建立HTML的基本结构，通常包含
<!DOCTYPE html>,<html>,<head>和<body>标签。在<head>部分加入Bootstrap的CSS链接，在<body>底部加入Bootstrap的JS文件及其依赖jQuery（Bootstrap JS依赖于jQuery）。 -
响应式设计：利用Bootstrap的栅格系统实现页面的响应式布局，通过添加
.container、.row和一系列.col-*类来组织内容。
全局CSS样式
Bootstrap提供了一套全面的CSS样式，包括排版、表单、按钮等基础元素的样式。只需将元素包裹在相应的Bootstrap类中即可应用这些样式，例如，为按钮添加.btn 和 .btn-primary 类以获得预设样式。
组件
Bootstrap包含多种预先设计好的UI组件，如导航栏（navbar）、卡片（card）、模态框（modal）、轮播（carousel）等。使用组件时，按照文档提供的HTML结构示例复制代码，并根据需要调整内容和类名。
JavaScript插件
Bootstrap附带了一系列强大的JavaScript插件，用于增强交互性，如模态对话框、下拉菜单、轮播等。使用它们需先确保已正确加载jQuery和Bootstrap的JS文件。然后，通过数据属性（data attributes）或JavaScript调用激活插件功能。
定制
-
定制下载：访问Bootstrap官网的定制页面，选择你需要的组件、颜色方案和JavaScript插件，生成自定义版本的Bootstrap。
-
SASS变量：如果你使用SASS编译Bootstrap，可以通过修改SASS变量文件来自定义颜色、字体、间距等。
-
覆盖默认样式：在自己的CSS文件中，编写特定的选择器来覆盖Bootstrap的默认样式，确保CSS加载顺序正确，自定义样式在Bootstrap之后加载。
通过上述步骤，你可以快速上手并根据项目需求灵活运用Bootstrap的各种特性。对于更深入的学习和具体示例，请参考Bootstrap中文网的官方文档。
