Cara menggunakan bootstrap di vue

Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.

Menggunakan bootstrap di vue.js

Bootstrap adalah rangka kerja CSS yang popular untuk membuat aplikasi web yang responsif dan mudah alih. Menggunakan bootstrap di vue.js sangat mudah.

Langkah 1: Pasang bootstrap

 <code class="bash">npm install bootstrap</code>

Langkah 2: Import bootstrap

Dalam fail main.js aplikasi Vue.js anda, import bootstrap:

 <code class="javascript">import 'bootstrap'</code>

Langkah 3: Gunakan komponen bootstrap

Bootstrap menyediakan pelbagai komponen seperti butang, bar navigasi, dan kotak corak yang boleh digunakan secara langsung dalam templat Vue.js. Berikut adalah beberapa komponen yang paling biasa:

• Butang:

   <code class="html"><button type="button" class="btn btn-primary">按钮</button></code>

• Bar Navigasi:

   <code class="html"><nav class="navbar navbar-expand-lg navbar-light bg-light"> ... </nav></code>

• Kotak Mod:

   <code class="html"><div class="modal fade" id="myModal" tabindex="-1" role="dialog"> ... </div></code>

Langkah 4: Gaya Custom (Pilihan)

Jika anda perlu menyesuaikan gaya lalai bootstrap, anda boleh menggunakan preprocessor CSS seperti SASS atau kurang.

Langkah 5: Gunakan plugin (pilihan)

Bootstrap menyediakan pelbagai plugin untuk menambah ciri tambahan, seperti:

• Prompt Popup
• Hantar pengesahan
• Carousel

NOTIS:

• Pastikan anda hanya mempunyai salinan bootstrap dalam permohonan anda.
• Jika anda menggunakan CSS dan JS Bootstrap, letakkan fail JS Bootstrap di hujung aplikasi Vue.js.

Atas ialah kandungan terperinci Cara menggunakan bootstrap di vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!