目录搜索
Getting startedAccessibility(无障碍)Browsers and devices(浏览器和设备)Build tools(构建工具)Contents(内容)Download(下载)JavaScriptTheming Bootstrap(主题Bootstrap)WebpackComponents: AlertsAlerts(警报)Components: BadgesBadges(徽章)Components: BreadcrumbBreadcrumbComponents: Button groupButton group(按钮组)Components: ButtonsButtons(按钮)Components: CardsComponents: CarouselCards(卡)Carousel(圆盘传送带)Components: CollapseCollapse(折叠)Components: DropdownsDropdowns(下拉菜单)Components: FormsForms(表单)Components: Input groupInput group(输入群组)Components: Input groupJumbotron(广告大屏幕)Components: List groupList group(列表组)Components: ModalModal(互动视窗)Components: NavbarNavbar(导航栏)Components: NavsNavs(导航栏)Components: PaginationPagination(分页)Components: PopoversPopovers(弹出框)Components: ProgressProgress(进度条)Components: ScrollspyScrollspy(滚动监听)Components: TooltipsTooltips(提示工具)ContentCode(代码)Figures(图片区)Images(图片)Reboot(重置)Tables(表格)Typography(排版)LayoutGrid(网格)Layout(布局)Media object(多媒体对象)Utilities for layout(排版通用类别)MigrationMigrating to v4(迁移到v4)UtilitiesBorders(边框)Clearfix(清除浮动)Close icon(关闭图标)Colors(颜色)Display property(显示属性)Embeds(内嵌)Flex(弹性)Float(浮动)Image replacement(图像替换)Position(位置)Screenreaders(荧幕阅读器)Sizing(尺寸)Spacing(间隔)Text(文本)Vertical alignment(垂直对齐)Visibility(能见度)
文字

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

工具设置

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

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

下载并安装Node.js,我们用它来管理我们的依赖关系。

浏览到根/bootstrap目录并运行npm install以安装我们在package.json中列出的本地依赖项。

安装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的文件,模板等。以下是如何开始它:

运行上面的工具安装程序以安装Jekyll(站点构建器)和其他Ruby依赖项bundle install。

从根/bootstrap目录运行npm run docs-serve命令行。

http://localhost:9001在您的浏览器中打开,并瞧。

故障排除

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

上一篇:下一篇: