آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

فعال سازی بوت استرپ

Install bootstrap به عنوان یک ماژول Node.js با استفاده از npm.

 

وارد کردن جاوا اسکریپت

جاوا اسکریپت Bootstrap را وارد کنید با اضافه کردن این خط به نقطه ورود برنامه خود:

 

 import 'bootstrap';

 

به علاوه، ممکن است پلاگین ها را به صورت جداگانه وارد کنید.

 

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/dropdown';
...

بوت استرپ به jquery و popper بستگی دارد و به عنوان  peerDependencies تعریف شده است، و به معنی این است که شما باید هر دو برا به پوشه ی  package.json خود اضافه کنید با استفاده از  npm install --save jquery popper.js.

 

وارد کردن استایل 

 

واردات از پیش ساخته شده sass

برای لذت بردن کامل از بوت استرپ و سفارشی کردن آن با نیاز های خود، از فایل های منبع به عنوان بخشی از فرآیند بسته بندی پروژه یتان استفاده کنید.

ابتدا custom.scss خود را ایجاد کنید و از آن برای تغییر نام متغیر های ساخته شده در متغیرهای دلخواه استفاده کنید. سپس از فایل sass اصلی خود برای وارد کردن متغیرهای سفارشی خود استفاده کنید و بوت استرپ آن را وارد کنید:

 

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

 

برای بوت استرپ برای کامپایل، مطمئن شوید که شما نصب و استفاده از بارگیری های مورد نیاز: sass-loader، postcss-loader با Autoprefixer انجام داده اید. با تنظیم حداقل، پیکربندی 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 کامپایل شده

همچنین شما می توانید CSS آماده برای استفاده بوستراپ را به سادگی با اضافه کردن این خط به نقطه ورود پروژه خود استفاده کنید:

 

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

 

در این مورد شما می توانید از قوانین موجود برای CSS بدون تغییرات خاصی در پیکربندی webpack استفاده کنید، به غیر از این که فقط به سبک بارگذاری و CSS-loader نیاز ندارید.

 

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