專案開發技巧篇(四) : Bootstrap 元件

每日一談

嗨，大家好 ! 我是阿蘇
今天是Day26 ， 剩下最後倒數幾天，快要完結篇啦 !!
今天分享的是 bootstrap 常用的元件，究竟元件要如何使用呢 ? 讓我們開始進入今天主題 !

元件 component

Bootstrap 的元件是非常實用的功能，他有很多實用元件，可以幫助你快速開發，使用方式也很簡單，只要載入bootstrap，然後去元件文檔找尋你想要使用的元件來使用，貼到 html 即可，比較要注意的是元件的格式要找bs規範走，不然會無法正常顯示

Bootstrap 查看元件

在左邊我們可以看到 Bootstrap 本身可以使用的元件，我們在使用時可以複製他程式碼在修改裡面內容，特別要注意是要注意它的格式規範，Bootstrap 元件有他既定格式，所以要善用文檔，元件他會說明有不同用法

常使用的元件

• 手風琴 (Accordion)
• 麵包屑 (Breadcrumb)
• 按鈕 (Buttons)
• 卡片 (Cards)
• 折疊 (Collapse)
• 下拉選單 (Dropdowns)
• 互動視窗 (Modal) 彈跳視窗
• 導覽與頁籤 (Navs and tabs)
• 導覽列 (Navbar)
• 分頁 (Pagination)

Bootstrap 元件範例

Button 按鈕

按鈕基本樣式，可以使用在各個地方小元件，並透過修改樣式，讓他符合你的設計稿

Nav bar導覽列

支援響應式，會自動切換版型，使用元件你只需要修改標籤內容，並將它樣式微調客製

範例 - navbar 導覽列
可以看到最上面的nav會隨著我的尺寸不同切換大小，這個使用的是bootstrap元件製作而成，我再將他客製成我要的樣式

card 卡片

常用在電商網站、商品介紹、等等，很多地方都適用

範例 - card 運用

元件使用是十分廣泛的，也十分方便，我在做 side project 也常使用元件來開發，像是modal 彈出視窗，或是很多小元件的運用，不妨有空多看看 Bootstrap 元件文檔，看看有那些元件是可以運用的 ! 熟悉後就能靈活運用自如了喔 !

下一篇會來實作教學如何 Bootstrap 元件客製化，讓他驚為天人變得不一樣 !