iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 17
0
自我挑戰組

在資訊宅中打滾的通訊系生系列 第 17

Day-17 Bootstrap前端人生

前言

人生好難啊~ 漂亮前端很難啊~ 符合雇主的前端更難啊~ 這可能是很多前端工程師的苦痛,☆然我只是做做小網站的前端,但是因為雇主一直給我改需求,搞到我比設計師還忙阿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>
  1. 輪播(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>
  1. 導覽列(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">
  1. 圖片對齊
<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中文版,如果有違反版權請告知小編)


上一篇
Day-16 資料庫篇 - SQLite(4)
下一篇
Day-18 伺服器筆記篇-Apache
系列文
在資訊宅中打滾的通訊系生30

尚未有邦友留言

立即登入留言