Getting started
Accessibility（无障碍）
Browsers and devices（浏览器和设备）
Build tools（构建工具）
Contents（内容）
Download（下载）
JavaScript
Theming Bootstrap（主题Bootstrap）
Webpack
Components: Alerts
Alerts（警报）
Components: Badges
Badges（徽章）
Components: Breadcrumb
Breadcrumb
Components: Button group
Button group（按钮组）
Components: Buttons
Buttons（按钮）
Components: Cards
Components: Carousel
Cards（卡）
Carousel（圆盘传送带）
Components: Collapse
Collapse（折叠）
Components: Dropdowns
Dropdowns（下拉菜单）
Components: Forms
Forms（表单）
Components: Input group
Input group（输入群组）
Components: Input group
Jumbotron（广告大屏幕）
Components: List group
List group（列表组）
Components: Modal
Modal（互动视窗）
Components: Navbar
Navbar（导航栏）
Components: Navs
Navs（导航栏）
Components: Pagination
Pagination（分页）
Components: Popovers
Popovers（弹出框）
Components: Progress
Progress（进度条）
Components: Scrollspy
Scrollspy（滚动监听）
Components: Tooltips
Tooltips（提示工具）
Content
Code（代码）
Figures（图片区）
Images（图片）
Reboot（重置）
Tables（表格）
Typography（排版）
Layout
Grid（网格）
Layout（布局）
Media object（多媒体对象）
Utilities for layout（排版通用类别）
Migration
Migrating to v4（迁移到v4）
Utilities
Borders（边框）
Clearfix（清除浮动）
Close icon（关闭图标）
Colors（颜色）
Display property（显示属性）
Embeds（内嵌）
Flex（弹性）
Float（浮动）
Image replacement（图像替换）
Position（位置）
Screenreaders（荧幕阅读器）
Sizing（尺寸）
Spacing（间隔）
Text（文本）
Vertical alignment（垂直对齐）
Visibility（能见度）
©
Ce document utilise Manuel du site Web PHP chinois Libérer
personnages
学习如何使用 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配置。