Saya sudah menambahkan Bootstrap 4 di tema khusus saya.
Saya menambahkan Bootstrap 3 dengan menggunakan referensi:
Cara menggunakan bootstrap di tema khusus saya
Tetapi, bootstrap 4 tidak berfungsi.
Jawaban:
Untuk menambahkan Bootstrap 4 In Magento 2.2.3 (diuji) & di atas dalam tema khusus Anda, ikuti langkah-langkah di bawah ini
1) Bootstrap file css di dalam folder web
Catatan :
THEME_LOCATION=>app\design\frontend\vendor-name\theme-name\
THEME_LOCATION\web\css\bootstrap.css Panggil bootstrap file css di default_head_blocks
THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xmlMenambahkan css
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<!--Bootstrap css-->
<css src="css/bootstrap.css" />
</head>
</page>2) Menambahkan file Js dalam bentuk bundel daripada individual karena individu tidak berfungsi
Tempatkan file bootstrap.bundle.js dapat diunduh dari sini
THEME_LOCATION\Magento_Theme\web\js\bootstrap.bundle.jsPanggil Bootstrap Js Ke requireejs-config.js
THEME_LOCATION\Magento_Theme\requirejs-config.jskode untuk
var config = {
paths: {
'bootstrap':'Magento_Theme/js/bootstrap.bundle',
} ,
shim: {
'bootstrap': {
'deps': ['jquery']
}
}
};Tambahkan kode di bawah ini di header.phtml setelah tag skrip Anda sudah ada
THEME_LOCATION\Magento_Theme\templates\html\header.phtmlKode:
<script type="text/javascript">require(['bootstrap']);</script>Jalankan Perintah di Bawah Ini:
php bin/magento setup:static-content:deploy (Append -f if you are using Magento 2.2.x >= version)
php bin/magento cache:flush
Catatan: Diuji pada Magento 2.2.3 dan Terbaru juga 2.2.6. Juga diuji pada 2.3.3
Diperbarui : Unduh Bootstrap yang dikompilasi dari sini dan gunakan bundle js
Anda dapat menambahkan Bootstrap dengan cara ini, ikuti langkah-langkah di bawah ini: Catatan: Solusi ini tidak berfungsi dengan Magento 2.2.3 dan di atasnya
1) Tempatkan JS dan CSS Anda di lokasi di bawah ini
/ app / design / frontend / vendor-name / theme-name / web / css
/ app / design / frontend / vendor-name / theme-name / web / js
2) Panggil file di default_head_blocks.xml Anda
app/design/frontend/vendor-name/theme-name/Magento_Theme/layout/default_head_blocks.xmltambahkan baris kode ini
<css src="css/bootstrap.css" />
<script src="js/bootstrap.min.js"/>3) Jalankan perintah di bawah ini
php bin/magento setup:upgrade
php bin/magento setup:static-content:deployAnda harus menggunakan manajer paket bower untuk menambahkan bootstrap 4 di folder web tema Anda.
MENGAPA? Karena ada pembaruan yang konstan & mudah dikelola. Jalankan perintah pembaruan Bootstrap 4 diperbarui.
JUGA: Kami lebih suka menggunakan KURANG atau SCSS dengan bootstrap 4. Kuat dan mudah untuk refactor.
Ikuti langkah-langkah di bawah ini untuk menginstal bower:
1) Instal LTS nodeJS pada OS Anda masing-masing dari: https://nodejs.org/en/
2) Instal pengelola paket bower secara global: npm install -g bower
3) Pasang gitdari: https://git-scm.com/
4) Instal bootstrap 4:
Dalam webdirektori Anda tema kustom Magento
Sebagai contoh: Buka terminal di <Magento root>/app/design/frontend/MyCustom/theme/web/
Jalankan perintah ini untuk menginstal bootstrap 4:
bower install bootstrap4
5) Setelah ini, Anda perlu menambahkan font, bootstrap CSS & bootstrap JS di node tata letak default untuk meningkatkan boostrap pada setiap halaman dalam Magento_Thememodul dalam tema khusus Anda.
Kami menggunakan tegukan untuk mengkompilasi SCSS ke CSS.
sudo npm install -g bower. Setelah menginstal bower, instal paket js / css di direktori Theme Anda:app/design/frontend/My/Theme/
bower_componentske webmenggunakan .bowerrc file konfigurasi.
package.jsonFile pertama yang terbuka dari Bootstrap 4, jika Anda melihat fileskunci array hanya menunjukkan bahwa pencocokan jenis file akan ditambahkan ke direktori proyek Anda. fileskunci hanya digunakan oleh perintah Bower. Jika Anda ingin berkontribusi atau mengkompilasi ulang Bootstrap maka Anda harus mencoba Benang. Karena itu akan menambah file / direktori yang tidak perlu ke proyek. Webpack dan Parcel adalah untuk proyek simpul yang dikompilasi untuk penggunaan JavaScript untuk frontend.
Setelah membaca jawaban di atas, saya punya saran lain: masukkan Bootstrap 4 ke dalam modul, dan gunakan CDN untuk menautkan file Bootstrap.
Saya berasumsi Anda tahu cara membuat modul dasar. Jika tidak, Anda bisa merujuk ke sini . Jadi inilah langkah-langkahnya:
Buat file app/code/Vendor/Module/view/frontend/layout/default_head_blocks.xmldengan kode berikut:
<?xml version="1.0"?>
<!--
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<link rel="stylesheet" type="text/css" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous" src_type="url" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" src_type="url"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous" src_type="url"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous" src_type="url"></script>
</head>
</page>Aktifkan modul dan jalankan setup:upgradeperintah, itu saja!
Manfaat:
Diuji pada Magento 2.2.4, tetapi harus bekerja di semua versi Magento 2.X. EDIT * mengubah tag tautan href ke src agar sejajar dengan devdocs. Referensi:
The attribute 'integrity' is not allowed.