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（能见度）
©
本文档使用
php.cn手册 发布
文字
学习如何使用 Webpack 2 在您的项目中引入 Bootstrap。
安装 Bootstrap
安装引导作为一个使用NPM的Node.js模块。
导入JavaScript
进口引导JavaScript通常将这一行添加到应用程序的入口点%28index.js或app.js29%：
import 'bootstrap';
或者，你可以单独导入插件视需要：
import 'bootstrap/js/dist/util';import 'bootstrap/js/dist/dropdown';...
引导依赖于jQuery和波普尔，所以NPM会为您安装它们，如果需要的话。但它们必须由WebPack明确提供。将下列代码添加到plugins在您的webpack配置文件中：
plugins: [ ... new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery', 'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'], // In case you imported plugins individually, you must also require them here:
Util: "exports-loader?Util!bootstrap/js/dist/util",
Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", ... }) ... ]注意如果你选择单独导入插件，您还必须安装出口-装载机
进口样式
导入预编译SASS
要充分发挥Bootstrap的潜力并根据您的需要定制它，请使用源文件作为项目捆绑过程的一部分。
首先，创建自己的_custom.scss并使用它覆盖内置自定义变量然后，使用主Sass文件导入自定义变量，然后是Bootstrap：
@import "custom";@import "~bootstrap/scss/bootstrap";
要编译Bootstrap，请确保安装和使用所需的加载器：Sass-装载机，，，后置装载机带着自动复位器.在设置最少的情况下，您的WebPack配置应该包括此规则或类似的内容：
... {
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page }, {
loader: 'css-loader', // translates CSS into CommonJS modules }, {
loader: 'postcss-loader', // Run post css actions
options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js return [ require('precss'), require('autoprefixer') ]; } } }, {
loader: 'sass-loader' // compiles SASS to CSS }] }, ...导入编译后的CSS
或者，您也可以通过简单地将这一行添加到项目的入口点来使用Bootstrap的现成的css：
import 'bootstrap/dist/css/bootstrap.min.css';
在这种情况下，您可以使用现有的规则css没有任何特殊的修改WebPack配置。