非常教程

Bootstrap 4参考手册

快速开始 | Getting started

构建工具 | Build tools

学习如何使用Bootstrap包含的npm脚本来构建我们的文档,编译源代码,运行测试等等。

工具设置

Bootstrap 为其构建系统使用NPM脚本。我们的package.json包含了处理框架的便捷方法,包括编译代码,运行测试等等。

要使用我们的构建系统并在本地运行我们的文档,您需要一份Bootstrap源文件和Node的副本。按照这些步骤,你应该准备好摇滚:

  1. 下载并安装Node.js,我们用它来管理我们的依赖关系。
  2. 浏览到根/bootstrap目录并运行npm install以安装我们在package.json中列出的本地依赖项。
  3. 安装Ruby,安装捆扎机用gem install bundler,最后运行bundle install。这将安装所有的Ruby依赖项,比如Jekyll和插件。
    • Windows用户:阅读本指南以使Jekyll无故障运行。

完成后,您将能够运行命令行提供的各种命令。

使用NPM脚本

我们的package.json包含以下命令和任务:

任务

描述

npm run dist

npm run dist用编译的文件创建/ dist目录。使用Sass,Autoprefixer和UglifyJS。

npm测试

与npm run dist相同,它在本地运行测试

npm运行文档

构建和删除用于文档的CSS和JavaScript。然后您可以通过npm run docs-serve在本地运行文档。

运行npm run以查看所有npm脚本。

Autoprefixer

Bootstrap使用Autoprefixer(包含在我们的构建过程中)在构建时自动将供应商前缀添加到某些CSS属性。这样做可以节省时间和代码,让我们可以一次性编写CSS的关键部分,同时不再需要像v3中那样的供应商混合类。

我们通过我们的GitHub存储库中的单独文件来维护通过Autoprefixer支持的浏览器列表。有关详细信息,请参阅/package.json。

当地文件

在本地运行我们的文档需要使用Jekyll,这是一款体面灵活的静态站点生成器,它为我们提供:基本包含,基于Markdown的文件,模板等。以下是如何开始它:

  1. 运行上面的工具安装程序以安装Jekyll(站点构建器)和其他Ruby依赖项bundle install
  2. 从根/bootstrap目录运行npm run docs-serve命令行。
  3. http://localhost:9001在您的浏览器中打开,并瞧。

通过阅读文档了解更多关于使用Jekyll的信息。

故障排除

如果遇到安装依赖关系的问题,请卸载所有以前的依赖项版本(全局和本地)。然后,重新运行npm install

Bootstrap 4

Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。

主页 https://getbootstrap.com/
源码 https://github.com/twbs/bootstrap
版本 4
发布版本 4.0.0-beta.2

Bootstrap 4目录

1.快速开始 | Getting started
2.组件·信息提示框 | Alerts
3.组件·徽章 | Badges
4.组件·面包屑导航 | Breadcrumb
5.组件·按钮组 | Button group
6.组件·按钮 | Buttons
7.组件·卡片 | Cards
8.组件·轮播 | Carousel
9.组件·折叠 | Collapse
10.组件·下拉菜单 | Dropdowns
11.组件·表单 | Forms
12.组件·输入框组 | Input group
13.组件·大屏幕 | Jumbotron
14.组件·列表组 | List group
15.组件·模态框 | Modal
16.组件·导航栏 | Navbar
17.组件·导航 | Navs
18.组件·分页 | Pagination
19.组件·弹出框 | Popovers
20.组件·进度条 | Progress
21.组件·滚动监听 | Scrollspy
22.组件·提示工具 | Tooltips
23.内容 | Content
24.布局 | Layout
25.迁移 | Migration
26.实用工具 | Utilities
27.Bootstrap4 网格系统
28.Bootstrap4 按钮组
29.Bootstrap4 按钮
30.Bootstrap4 图像形状
31.Bootstrap4 表格
32.Bootstrap4 颜色
33.Bootstrap4 文字排版
34.Bootstrap4 轮播
35.Bootstrap4 表单控件
36.Bootstrap4 表单
37.Bootstrap4 导航栏
38.Bootstrap4 导航
39.Bootstrap4 折叠
40.Bootstrap4 下拉菜单
41.Bootstrap4 卡片
42.Bootstrap4 分页
43.Bootstrap4 小工具
44.Bootstrap4 滚动监听
45.Bootstrap4 弹出框
46.Bootstrap4 提示框
47.Bootstrap4 模态框
48.Bootstrap 4 多媒体对象
49.Bootstrap 4 Flex(弹性)布局
50.Bootstrap4 创建一个网页
51.Bootstrap4 自定义表单
52.Bootstrap4 面包屑导航(Breadcrumb)