Bootstrap 簡介
Bootstrap 官方網站, front-end open source toolkit。Bootstrap
簡單地說,Bootstrap 提供一堆寫好的 css 與 js。將他寫好的東西引入進來,就會將我的元件變得很漂亮。
值得一提的是 Bootstrap 內件是沒有 ajax,如果要用 ajax 要將 js slim 版本換成完整功能的版本。 slim 版本有將一些功能砍掉,檔案變得比較小。
如何使用 Bootstrap
依照官方文件指示,先將 css 貼上,引用後他會預設幫你調整一些東西。所以如果將相對應的 class 拿掉,會發現跟原本的還是不一樣。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
components 可以看到 bootstrap 提供的各個 ui 元件。
<button type="button" class="btn btn-primary">Primary</button>
可以藉由看文件知道他是不是 bootstrap 的 class name。
一樣可以搭配 jQuery
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<title>BootStrap</title>
<script>
$(document).ready(() => {
$('.btn').click(() => $('.alert').show())
})
</script>
</head>
<body>
<div style="display: none" class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<button type="button" class="btn btn-primary">Primary</button>
</body>
有些效果,例如 : dropdown,需要引入 js。一般來說放在 body 最下方。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<title>BootStrap</title>
</head>
<body>
<div style="display: none" class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<button type="button" class="btn btn-primary">Primary</button>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
此外,也有各種 utilities 的 class,可以方便我們調格式。這種寫法有幾種名稱,名稱一號 : utilities css,名稱二號 : atomic css,名稱三號 : functional css。好處是 : 不需要自己寫 css,只要加一堆 className 就好了
Bootstrap 的網格系統
先備知識 : 網格系統
會將一行分成固定欄數,每一欄等寬,格子與格子間有 margin。這樣的好處是比例漂亮、rwd layout 調整方便。
bootstrap 實做 rwd
<div class="container">
<div class="row">
<div class="col-4">
<div class="box">box1</div>
</div>
<div class="col-4">
<div class="box">box2</div>
</div>
<div class="col-4">
<div class="box">box3</div>
</div>
</div>
</div>
平板以下佔 12 欄,平板以上佔四欄
<div class="col-12 col-md-4">
offset 介紹
可以指定他的位置,從哪一格開始佔到第幾格。有點類似 css grid。
舉例:佔三欄,但偏移三欄
.col-md-3 .offset-md-3
bootstrap 有哪些元件 ?
- alert : 跳通知,可以搭配 dismiss (可以透過 js 或屬性方式控制開關)
- badge : 跟 tag 概念差不多
- breadcrumb : 麵包屑
- button/button group
- card
- carousel
- collapse
- dropdown
- forms (常用)
- input groups
- media objects
- modal (常用),點了之後會跳彈窗出來
- nav/ navbar
- Pagination (分頁功能)
- Popovers
- Progress (進度條)
- Scrollspy
- spinner (loading 的等待時間)
- toast (適合用在 ui 的提醒)
- Tooltips (滑鼠移上去就出現的提醒)
重點
bootstrap 是一個工具包,可以利用裡面的東西組合起來開發成自己的網站
- bootstrap 還是原生的 html 元素,只是加上自己設計的 className 還有一些 tag,這些 tag 有些是給 bootstrap 用,有些是給瀏覽器用。
- bootstrap 裡的原件,有些需要先引入 css 有些則是需要 js
- bootstrap 網格系統,可以寫在不同的解析度要怎麼安排他的位置。
- utilities class 可以不用寫 css 就有 css 的效果
- theming 可以達到客製化效果,相關參考 : bootswatch