Bootstrap

什麼是Bootstrap？它是一個現在當紅的前端元件庫，而且支援RWD，主要用在開發網站HTML、CSS和JS的開源工具包。

什麼是RWD？響應式網頁設計簡稱RWD，簡單說是指網頁能配合不同的解析度(如手機或平板)調整佈局排版，讓不同的設備都可以得到最好的視覺體驗，例如原本在電腦上水平排列的內容，換到手機瀏覽時因畫面變小，而自動改為垂直排列，這可以讓我們不用特別另外做一個手機專用網站，只要使用RWD網站就能通吃所有設備，有效節省維護成本(只需更新、維護一個網站)，近年來因為手機上網的比例大增，RWD也成了基本的網站需求。

我們在製作網站時會遇上各種情況，例如預算不足、時程很趕等等…，這時Bootstrap的元件庫就會幫上大忙了，裡面有各式各樣常用的元件，而且我們還能依需求修改它，這樣就不用什麼內容都自已做了，直接拿現成的來改就好，非常方便！

Bootstrap中文網站
https://bootstrap.hexschool.com/

Bootstrap+Vue

那麼今天就來嘗試看看它該怎麼使用，這次要重頭開始新建一個全新網站！可新增一個資料夾來放，現在用vscode開起它吧，接著：
1.執行npm i -g vue-cli
(安裝最新版本的vue-cli)
2.執行vue init bootstrap-vue/webpack-simple my-web
(安裝bootstrap-vue 及 webpack，因為首次嘗試，所以我先選簡易版的webpack-simple(完整版為webpack)來安裝。)

webpack是什麼？簡單說它會幫我們編譯Preprocess成瀏覽器看得懂的內容，接著打包成完成檔，最後再交給server做上傳。

安裝的過程它會問你許多設定問題：

• ? Project name my-web(網站名稱想取名叫什麼？我取my-web)。
• ? Project description A Vue.js project(專案描述)。
• ? Author(作者是誰)。
• ? Use sass? Yes(是否使用sass，我選是)

接著完成安裝，你會在資料夾裡看到你的新網站了！
3.輸入cd my-web
進到新建的網站目錄底下。
4.執行npm i。
安裝套件。
5.執行npm run dev。
過去我們要把網站起起來預設是使用npm run serve，不過這次新增的網站預設是用npm run dev，你可以從檔案README.md看到以上設定，當然也能修改它。

安裝完成，網站也起起來了，那接下來實驗看看是否能把元件加入！以下bootstrap-vue網站裡有各種元件讓你挑：

bootstrap-vue
https://bootstrap-vue.js.org/docs/components/alert

我就先選個常用的大Banner吧！
我直接把bootstrap元件庫carousel的內容復製到src資料夾裡的app.vue檔裡(還記得它是首頁嗎？)：

<template>
  <div>
    <b-carousel id="carousel1"
                style="text-shadow: 1px 1px 2px #333;"
                controls
                indicators
                background="#ababab"
                :interval="4000"
                img-width="1024"
                img-height="480"
                v-model="slide"
                @sliding-start="onSlideStart"
                @sliding-end="onSlideEnd"
    >

      <!-- Text slides with image -->
      <b-carousel-slide caption="First slide"
                        text="Nulla vitae elit libero, a pharetra augue mollis interdum."
                        img-src="https://picsum.photos/1024/480/?image=52"
      ></b-carousel-slide>

      <!-- Slides with custom text -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
        <h1>Hello world!</h1>
      </b-carousel-slide>

      <!-- Slides with image only -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58">
      </b-carousel-slide>

      <!-- Slides with img slot -->
      <!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
      <b-carousel-slide>
        <img slot="img" class="d-block img-fluid w-100" width="1024" height="480"
             src="https://picsum.photos/1024/480/?image=55" alt="image slot">
      </b-carousel-slide>

      <!-- Slide with blank fluid image to maintain slide aspect ratio -->
      <b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          eros felis, tincidunt a tincidunt eget, convallis vel est. Ut pellentesque
          ut lacus vel interdum.
        </p>
      </b-carousel-slide>

    </b-carousel>

    <p class="mt-4">
      Slide #: {{ slide }}<br>
      Sliding: {{ sliding }}
    </p>

  </div>
</template>

<script>
export default {
  data () {
    return {
      slide: 0,
      sliding: null
    }
  },
  methods: {
    onSlideStart (slide) {
      this.sliding = true
    },
    onSlideEnd (slide) {
      this.sliding = false
    }
  }
}
</script>

以上元件內容來自https://bootstrap-vue.js.org/docs/components/carousel

完成後看看這次的首頁，是不是有一個現成的Banner！而且功能完善，可左右換圖，連程式都幫你寫好了，bootstrap-vue網站裡還有針對這個元件詳細說明，方便你修改它！

以上就是今天的實測，如有做錯的地方也希望大家多多指教，謝謝~