前言

人生好難啊~ 漂亮前端很難啊~ 符合雇主的前端更難啊~ 這可能是很多前端工程師的苦痛，☆然我只是做做小網站的前端，但是因為雇主一直給我改需求，搞到我比設計師還忙阿QQ，我說大哥阿!你能不能跟設計師橋好在跟我說啊!他X的不要一直改需求阿!!!!!!
好啦，抱怨就到這裡，這次來講講『我都會你沒理由不會的』前端美觀框架-Bootstrap，裡面其實是CSS + jQuery，有很多寫好的套件可以直接使用!

來源

本次的內容皆是截至Bootstrap中文版，本篇只會介紹我覺得常用的，看完我的文章的想更瞭解可以去以下連結看~

連結

恭喜賀喜 團長飛飛今年台科大資安AI碩士班正取!! 要離開我們的QQ 要常回來看我喔~

工商時間

雖然我們團隊在今天失敗了，小編還是要跟大家宣傳一下，我們團員的文章都相當不錯，覺得小編文章無聊的可以去看看喔~~

1. 飛飛 大四資工人生，快畢業了，然後呢
2. HelloWorld 在電腦硬體軟體遇到神奇經歷 與 資工人該知道的10件事情
3. 阿褚 挑戰 Daily UI！

加在head

• 因為Bootstrap有引入的CSS跟Javascript，所以需要先引入(就是加在HTML的head)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></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"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

切版網格

• 跟據Bootstrap規劃一個網頁一橫行(row)共12格(col)，並且可指定當row的max-width為各種數值時，使用多少比例的col ex: col-sm-3
• 共有.col- .col-sm- .col-md- .col-lg- .col-xl-
• 
• 假設本次只要切3:3:3

<div class="container">
  <div class="row">
    <div class="col-3"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
  </div>
</div>

也可寫成

<div class="container">
  <div class="row">
    <div class="col-3 offset-3"></div>
    <div class="col-3"></div>
  </div>
</div>

• 超好用圖形化介面的切版!! 連結

元件集

• Bootstrap 有提供許多元件的寫法，讓大家去參考。

1. 按鈕(Buttons)
   • 不同於HTML的按鈕，可以有很多種樣式，只需要加在class就可以使用!
     

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

2. 輪播(Carousel)
   • 輪播功能也是目前網站很常使用的套件，我開發的很多網站都是使用這個套件，超級好用!
     

<div id="Carousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#Carousel" data-slide-to="0" class="active"></li>
    <li data-target="#Carousel" data-slide-to="1"></li>
    <li data-target="#Carousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="圖片連結1" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="圖片連結2" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="圖片連結3" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#Carousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#Carousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

3. 導覽列(Navbar)
   • 這是每個網站都必備的東西，最難搞的是手機板啊!!!，所以不介紹XD
     

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

響應式圖片

• 我覺得這個最好用，常常因為手機板或是瀏覽器頁面大小不一樣，造成圖片跑版，只要套用這一個響應式圖片，圖片再也不會跑版了!!

1. 響應式圖片
   • 在class加入img-fluid

<img src="..." class="img-fluid" alt="Responsive image">

2. 圖片對齊

<img src="..." class="rounded float-left" alt="圖片置右">
<img src="..." class="rounded float-right" alt="圖片置左">
<div class="text-center">
  <img src="..." class="rounded" alt="圖片置中">
</div>

(再次申明: 本篇程式碼有些參考於Bootstrap中文版，如果有違反版權請告知小編)