Bootstrap

使用Bootstrap快速构建响应式网站!

全球最受欢迎的前端组件库,用于开发响应式布局、移动优先的WEB项目。

Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源框架,基于移动优化和响应式设计原理,提供Sass和mixins参数定义、响应式栅格系统、可扩展的组件,快速构建项目或者整个app 。

Bootstrap建模工具 BootstrapVue BootstrapVue

当前版本:v5.0.1 | 文档更新于:2021-6-9 版本纵览
翻译整理:Zoomla!逐浪CMS团队

Bootstrap 安装

通过npm、Composer或Meteor安装Bootstrap的源Sass和JavaScript文件。

程序包管理的安装不包括文档或我们的完整构建脚本,您还可以使用我们的npm模板仓库通过npm快速生成Bootstrap项目。

阅读手册
npm install bootstrap
gem install bootstrap -v 5.0.1

jsDelivr 引用

如果你只是需要将预编译的 CSS 或 JS 文件引入你的页面,可以直接使用 jsDelivr云端引用。

通过我们的入门模板你可以直接操作它,或者浏览示例以快速启动项目。当然,你也可以选择分别包含Popper和JS。

查看文档
<!-- 仅仅CSS引用 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<!-- 混合Popper的JS引用 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>

逐浪官方的国服版(含zico图标系统)

基于zico集合的中国大陆通引用源

这个实例中包含了Bootstrap 5、zico(一个优秀的国产开源图标及webfont库)、jquery的中国引用源。


<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="renderer" content="webkit|ie-comp|ie-stand"/>
<link href="//code.z01.com/v5/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//code.z01.com/css/zico.min.css" rel="stylesheet"/>
<script src="//demo.z01.com/js/jquery-3.2.1.min.js" ></script>
<script src="//code.z01.com/v5/dist/js/bootstrap.bundle.min.js" ></script>

Bootstrap 图标

Bootstrap有史以来第一次拥有自己的开源SVG图标库,方便与Bootstrap的组件和文档一起使用。

Bootstrap图标旨在与Bootstrap组件配合使用,它可以在任何项目中使用。 由于是SVG,因此可以快速轻松地进行扩展,可以通过多种方式实现,也可以使用CSS进行样式设置。

获取图标
Bootstrap

主题

使用Bootstrap并升级到具有官方优惠主题 - 纯正使用Bootstrap构建的工具包,包含新的组件和插件,文档和构建工具。

主题在Bootstrap上构建,作为它们自己的扩展框架,具有丰富的新组件和插件,文档以及强大的构建工具。

浏览主题
Bootstrap