<span class="line"><span style="color: #88C0D0">composer</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">create-project</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">laravel/laravel</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">lab-web</span></span>
<span class="line"></span>
<span class="line"><span style="color: #88C0D0">cd</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">lab-web</span></span>
<span class="line"></span>
<span class="line"><span style="color: #616E88"># 安裝 laravel 專案的必要模組</span></span>
<span class="line"><span style="color: #88C0D0">npm</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">install</span></span>
<span class="line"></span>
<span class="line"><span style="color: #616E88"># 安裝 bootstrap 的模組</span></span>
<span class="line"><span style="color: #88C0D0">npm</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">i</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">--save</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">bootstrap</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">@popperjs/core</span></span>
<span class="line"><span style="color: #88C0D0">npm</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">i</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">--save-dev</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">sass</span></span>

<span class="line"><span style="color: #88C0D0">@import</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">'</span><span style="color: #A3BE8C">bootstrap/dist/css/bootstrap.css</span><span style="color: #ECEFF4">'</span><span style="color: #81A1C1">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #88C0D0">...</span></span>

<span class="line"><span style="color: #88C0D0">import</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">*</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">as</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">bootstrap</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">from</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">'</span><span style="color: #A3BE8C">bootstrap</span><span style="color: #ECEFF4">'</span><span style="color: #81A1C1">;</span></span>
<span class="line"><span style="color: #88C0D0">window.bootstrap</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">bootstrap</span><span style="color: #81A1C1">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #88C0D0">...</span></span>

<span class="line"><span style="color: #88C0D0">import</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">{</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">defineConfig</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">}</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">from</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">'</span><span style="color: #A3BE8C">vite</span><span style="color: #ECEFF4">'</span><span style="color: #81A1C1">;</span></span>
<span class="line"><span style="color: #88C0D0">import</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">laravel</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">from</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">'</span><span style="color: #A3BE8C">laravel-vite-plugin</span><span style="color: #ECEFF4">'</span><span style="color: #81A1C1">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #81A1C1">export</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">default</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">defineConfig</span><span style="color: #ECEFF4">(</span><span style="color: #D8DEE9FF">{</span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #88C0D0">plugins:</span><span style="color: #D8DEE9FF"> [</span></span>
<span class="line"><span style="color: #D8DEE9FF">        </span><span style="color: #88C0D0">laravel(</span><span style="color: #D8DEE9FF">{</span></span>
<span class="line"><span style="color: #D8DEE9FF">            </span><span style="color: #88C0D0">input:</span><span style="color: #D8DEE9FF"> [</span><span style="color: #ECEFF4">'</span><span style="color: #A3BE8C">resources/css/app.css</span><span style="color: #ECEFF4">'</span><span style="color: #D8DEE9FF">, </span><span style="color: #ECEFF4">'</span><span style="color: #A3BE8C">resources/js/app.js</span><span style="color: #ECEFF4">'</span><span style="color: #A3BE8C">],</span></span>
<span class="line"><span style="color: #D8DEE9FF">            </span><span style="color: #88C0D0">refresh:</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">true</span><span style="color: #A3BE8C">,</span></span>
<span class="line"><span style="color: #D8DEE9FF">        }</span><span style="color: #ECEFF4">)</span><span style="color: #A3BE8C">,</span></span>
<span class="line"><span style="color: #D8DEE9FF">    ],</span></span>
<span class="line"><span style="color: #D8DEE9FF">});</span></span>
<span class="line"></span>

<span class="line"><span style="color: #81A1C1"><!</span><span style="color: #88C0D0">doctype</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">htm</span><span style="color: #D8DEE9FF">l</span><span style="color: #81A1C1">></span></span>
<span class="line"><span style="color: #81A1C1"><</span><span style="color: #D8DEE9FF">html lang=</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">en</span><span style="color: #ECEFF4">"</span><span style="color: #81A1C1">></span></span>
<span class="line"><span style="color: #D8DEE9FF">  </span><span style="color: #81A1C1"><</span><span style="color: #88C0D0">head></span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #81A1C1"><</span><span style="color: #88C0D0">meta</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">charset=</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">utf-8</span><span style="color: #ECEFF4">"</span><span style="color: #81A1C1">></span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #81A1C1"><</span><span style="color: #88C0D0">meta</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">name=</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">viewport</span><span style="color: #ECEFF4">"</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">content=</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">width=device-width, initial-scale=1</span><span style="color: #ECEFF4">"</span><span style="color: #81A1C1">></span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #81A1C1"><</span><span style="color: #88C0D0">title>Bootstrap</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">demo</span><span style="color: #81A1C1"><</span><span style="color: #A3BE8C">/titl</span><span style="color: #D8DEE9FF">e</span><span style="color: #81A1C1">></span></span>
<span class="line"><span style="color: #D8DEE9FF">	</span><span style="color: #88C0D0">@vite([</span><span style="color: #88C0D0">"resources/css/app.css"</span><span style="color: #88C0D0">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">resources/js/app.js</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">]</span><span style="color: #D8DEE9FF">)</span></span>
<span class="line"><span style="color: #D8DEE9FF">  </span><span style="color: #81A1C1"><</span><span style="color: #88C0D0">/head></span></span>
<span class="line"><span style="color: #D8DEE9FF">  </span><span style="color: #81A1C1"><</span><span style="color: #88C0D0">body></span></span>
<span class="line"><span style="color: #D8DEE9FF">	</span><span style="color: #81A1C1"><</span><span style="color: #88C0D0">div</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">class=</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">container py-4 px-3 mx-auto</span><span style="color: #ECEFF4">"</span><span style="color: #81A1C1">></span></span>
<span class="line"><span style="color: #D8DEE9FF">      </span><span style="color: #81A1C1"><</span><span style="color: #88C0D0">h1>Hello,</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">Bootstrap</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">and</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">Vite!</span><span style="color: #81A1C1"><</span><span style="color: #A3BE8C">/h</span><span style="color: #81A1C1">1></span></span>
<span class="line"><span style="color: #D8DEE9FF">	  </span><span style="color: #81A1C1"><</span><span style="color: #88C0D0">div</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">class=</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">dropdown</span><span style="color: #ECEFF4">"</span><span style="color: #81A1C1">></span></span>
<span class="line"><span style="color: #D8DEE9FF">        </span><span style="color: #81A1C1"><</span><span style="color: #88C0D0">button</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">class=</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">btn btn-secondary dropdown-toggle</span><span style="color: #ECEFF4">"</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">type=</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">button</span><span style="color: #ECEFF4">"</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">data-bs-toggle=</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">dropdown</span><span style="color: #ECEFF4">"</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">aria-expanded=</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">false</span><span style="color: #ECEFF4">"</span><span style="color: #81A1C1">></span></span>
<span class="line"><span style="color: #D8DEE9FF">            </span><span style="color: #88C0D0">Dropdown</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">button</span></span>
<span class="line"><span style="color: #D8DEE9FF">        </span><span style="color: #81A1C1"><</span><span style="color: #88C0D0">/button></span></span>
<span class="line"><span style="color: #D8DEE9FF">        </span><span style="color: #81A1C1"><</span><span style="color: #88C0D0">button</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">class=</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">btn btn-primary</span><span style="color: #ECEFF4">"</span><span style="color: #81A1C1">></span><span style="color: #A3BE8C">Primary</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">button</span><span style="color: #81A1C1"><</span><span style="color: #A3BE8C">/butto</span><span style="color: #D8DEE9FF">n</span><span style="color: #81A1C1">></span></span>
<span class="line"><span style="color: #D8DEE9FF">        </span><span style="color: #81A1C1"><</span><span style="color: #88C0D0">ul</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">class=</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">dropdown-menu</span><span style="color: #ECEFF4">"</span><span style="color: #81A1C1">></span></span>
<span class="line"><span style="color: #D8DEE9FF">            </span><span style="color: #81A1C1"><</span><span style="color: #88C0D0">li><a</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">class=</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">dropdown-item</span><span style="color: #ECEFF4">"</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">href=</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">#</span><span style="color: #ECEFF4">"</span><span style="color: #81A1C1">></span><span style="color: #A3BE8C">Action</span><span style="color: #81A1C1"><</span><span style="color: #A3BE8C">/</span><span style="color: #D8DEE9FF">a><</span><span style="color: #A3BE8C">/l</span><span style="color: #D8DEE9FF">i</span><span style="color: #81A1C1">></span></span>
<span class="line"><span style="color: #D8DEE9FF">            </span><span style="color: #81A1C1"><</span><span style="color: #88C0D0">li><a</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">class=</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">dropdown-item</span><span style="color: #ECEFF4">"</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">href=</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">#</span><span style="color: #ECEFF4">"</span><span style="color: #81A1C1">></span><span style="color: #A3BE8C">Another</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">action</span><span style="color: #81A1C1"><</span><span style="color: #A3BE8C">/</span><span style="color: #D8DEE9FF">a><</span><span style="color: #A3BE8C">/l</span><span style="color: #D8DEE9FF">i</span><span style="color: #81A1C1">></span></span>
<span class="line"><span style="color: #D8DEE9FF">            </span><span style="color: #81A1C1"><</span><span style="color: #88C0D0">li><a</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">class=</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">dropdown-item</span><span style="color: #ECEFF4">"</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">href=</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">#</span><span style="color: #ECEFF4">"</span><span style="color: #81A1C1">></span><span style="color: #A3BE8C">Something</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">else</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">here</span><span style="color: #81A1C1"><</span><span style="color: #A3BE8C">/</span><span style="color: #D8DEE9FF">a><</span><span style="color: #A3BE8C">/l</span><span style="color: #D8DEE9FF">i</span><span style="color: #81A1C1">></span></span>
<span class="line"><span style="color: #D8DEE9FF">        </span><span style="color: #81A1C1"><</span><span style="color: #88C0D0">/ul></span></span>
<span class="line"><span style="color: #D8DEE9FF">      </span><span style="color: #81A1C1"><</span><span style="color: #88C0D0">/div></span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #81A1C1"><</span><span style="color: #88C0D0">/div></span></span>
<span class="line"><span style="color: #D8DEE9FF">  </span><span style="color: #81A1C1"><</span><span style="color: #88C0D0">/body></span></span>
<span class="line"><span style="color: #81A1C1"><</span><span style="color: #D8DEE9FF">/html</span><span style="color: #81A1C1">></span></span>

<span class="line"><span style="color: #88C0D0">npm</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">run</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">build</span></span>
<span class="line"></span>
<span class="line"><span style="color: #88C0D0">php</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">artisan</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">serve</span></span>