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（滾動監(jiān)聽）
Components: Tooltips
Tooltips（提示工具）
Content
Code（代碼）
Figures（圖片區(qū)）
Images（圖片）
Reboot（重置）
Tables（表格）
Typography（排版）
Layout
Grid（網(wǎng)格）
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（能見度）
?
本文檔使用 php中文網(wǎng)手冊 發(fā)布
文字
學習如何使用 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
要充分發(fā)揮Bootstrap的潛力并根據(jù)您的需要定制它，請使用源文件作為項目捆綁過程的一部分。
首先，創(chuàng)建自己的_custom.scss并使用它覆蓋內置自定義變量然后，使用主Sass文件導入自定義變量，然后是Bootstrap：
@import "custom";@import "~bootstrap/scss/bootstrap";
要編譯Bootstrap，請確保安裝和使用所需的加載器：Sass-裝載機，，，后置裝載機帶著自動復位器.在設置最少的情況下，您的WebPack配置應該包括此規(guī)則或類似的內容：
... {
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的現(xiàn)成的css：
import 'bootstrap/dist/css/bootstrap.min.css';
在這種情況下，您可以使用現(xiàn)有的規(guī)則css沒有任何特殊的修改WebPack配置。