ئاساسلىق مەزمۇنغا ئاتلاڭ Docs يول باشلاش
in English

Webpack and bundlers

Webpack ياكى باشقا بولاقلارنى ئىشلىتىپ Bootstrap نى تۈرىڭىزگە قانداق كىرگۈزۈشنى ئۆگىنىۋېلىڭ.

Bootstrap نى ئورنىتىش

Npm ئارقىلىق bootstrap نى Node.js مودۇلى قىلىپ قاچىلاڭ.

JavaScript ئەكىرىش

بۇ قۇرنى ئەپنىڭ كىرىش نۇقتىسىغا (ئادەتتە ياكى ) قوشۇش ئارقىلىق Bootstrap نىڭ JavaScript نى ئەكىرىڭ :index.jsapp.js

// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';

ئۇنىڭدىن باشقا ، ئەگەر سىز پەقەت بىر قانچە قىستۇرمىمىزغا ئېھتىياجلىق بولسىڭىز ، ئېھتىياجغا ئاساسەن قىستۇرمىلارنى ئايرىم ئەكىرىسىز :

import Alert from 'bootstrap/js/dist/alert';
...

Bootstrap مۈلۈكتە كۆرسىتىلگەن Popper غا باغلىق . بۇ سىزنىڭ ئۇنى ئىشلىتىشىڭىزگە peerDependenciesكاپالەتلىك قىلىشىڭىز كېرەكلىكىدىن دېرەك بېرىدۇ .package.jsonnpm install @popperjs/core

ئۇسلۇبلارنى ئەكىرىش

ئالدىن تەييارلانغان ساسنى ئەكىرىش

Bootstrap نىڭ تولۇق يوشۇرۇن كۈچىدىن بەھرىمەن بولۇش ۋە ئۇنى ئېھتىياجىڭىزغا ماسلاشتۇرۇش ئۈچۈن ، ئەسلى ھۆججەتلەرنى تۈرنىڭ باغلاش جەريانىنىڭ بىر قىسمى سۈپىتىدە ئىشلىتىڭ.

ئالدى بىلەن ، ئۆزىڭىزنىڭكىنى قۇرۇپ ، ئىچىگە قاچىلانغان ئىختىيارى ئۆزگەرگۈچى مىقدارنى_custom.scss قاپلىۋېتىڭ . ئاندىن ئاساسلىق Sass ھۆججىتىڭىزنى ئىشلىتىپ ئۆزىڭىزنىڭ ئۆزگەرگۈچى مىقدارنى ئەكىرىڭ ، ئاندىن Bootstrap:

@import "custom";
@import "~bootstrap/scss/bootstrap";

Bootstrap نى تۈزۈش ئۈچۈن ، لازىملىق يۈكلىگۈچلەرنى قاچىلاش ۋە ئىشلىتىشكە كاپالەتلىك قىلىڭ: sass-loader ، Autoprefixer بىلەن postcss-loader . ئەڭ ئاز تەڭشەش ئارقىلىق تور بېتىڭىزنىڭ سەپلىمىسى بۇ قائىدىلەرنى ئۆز ئىچىگە ئېلىشى كېرەك:

// ...
{
  test: /\.(scss)$/,
  use: [{
    // inject CSS to page
    loader: 'style-loader'
  }, {
    // translates CSS into CommonJS modules
    loader: 'css-loader'
  }, {
    // Run postcss actions
    loader: 'postcss-loader',
    options: {
      // `postcssOptions` is needed for postcss 8.x;
      // if you use postcss 7.x skip the key
      postcssOptions: {
        // postcss plugins, can be exported to postcss.config.js
        plugins: function () {
          return [
            require('autoprefixer')
          ];
        }
      }
    }
  }, {
    // compiles Sass to CSS
    loader: 'sass-loader'
  }]
}
// ...

تۈزۈلگەن CSS نى ئەكىرىش

ئۇنىڭدىن باشقا ، سىز بۇ قۇرنى تۈرىڭىزنىڭ كىرىش نۇقتىسىغا قوشۇش ئارقىلىق Bootstrap نىڭ تەييار CSS نى ئىشلىتەلەيسىز:

import 'bootstrap/dist/css/bootstrap.min.css';

بۇ خىل ئەھۋالدا سىز پەقەت ئۇسلۇب يۈكلىگۈچى ۋە css-css يۈكلىگۈچىگە ئېھتىياجلىق بولمىسىڭىز ، تور بەت سەپلىمىسىگە ئالاھىدە ئۆزگەرتىش كىرگۈزمەي تۇرۇپ ، ھازىرقى قائىدىڭىزنى ئىشلىتەلەيسىز .sass-loader

// ...
module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    }
  ]
}
// ...