Bootstrap 初學介紹 #靜態篇

什麼是Bootstrap?

Bootstrap是目前響應式及行動裝置網頁設計,最知名的框架,提供了包含HTML、CSS及JS等內容的框架。

看到關鍵字響應式網頁,就可以知道Bootstrap是前端應用工具

完整的Bootstrap包含了

  1. bootstrap.css — CSS框架
  2. bootstrap.js — JavaScript/jQuery 框架
  3. glyphicons — 圖示集(icon font set)

那最入門的當然就是CSS框架,也就是本篇介紹的主要內容
CSS代表了網頁的門面、設計感,是構成網頁的基本元素

應用Bootstrap則可以幫助開發者設計網頁時
有一些可以立即套用的功能,加速建構響應式內容
也提前幫你處理一些跨瀏覽器可能產生的問題

每個人都應該要用Bootstrap嗎?

當然不
CSS發展自今,設計上也越來越方便
Bootstrap只是提前幫你做好一些工作
然而有時候幫你做了太多工作
或者你開發過程中不想要太多的束縛

以下幾點,則可能是你應用Bootstrap的優點

  • 避免重工,可以應用一些現成的功能
  • 較複雜的響應式設計則很快就可以應用
  • 在不同專案中、或是同專案不同開發者
    可以在開發過程中取得應用及解讀程式碼的一致性
  • Bootstrap也提供了一些速成樣板
  • 確保跨瀏覽器的閱讀相容性

再者,也由於Bootstrap全面性
已經累積了一定的愛用者,所以社群資源也滿豐富的
幾乎大大小小的問題都可以找到相關討論

Hello, World!

目前最穩定的版本是 3.X
https://getbootstrap.com/docs/3.3/getting-started/

下載之後解壓縮檔案,並更名為你的專案
接著,根據其Basic template開始
建立index.html,就可以開始Bootstrap之旅囉

這個Basic template,建立了一個基本的html架構
並包含了ㄧ些基本設定,如viewport、stylesheet link等

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

其中,幾個比較重要的設定

<meta name="viewport" content="width=device-width, initial-scale=1">

這一個設定是響應式的設計的啟端,
為的是將"內容的寬度參數" 等於 "設備的顯示寬度"
這樣之後在CSS裡面設定width:100%才會符合設備的顯示寬度

補充: 這邊常常也會設定是否允許使用者手動放大網頁
user-scalable=0 代表不允許,若沒特殊需求就維持這個設定吧
或是 user-scalable=1, maximum-scale=2.0
則代表允許手動放大,最多放大到2倍

<link href="css/bootstrap.min.css" rel="stylesheet">

這邊的範例只先引入min.css的內容,
其他還有完整版css、theme.css、theme.min.css

如果只是為了設定響應式的格線
及一些簡單排版(例如navbar、jumbotron)
則使用min.css就夠了
(min.css其實只是完整版CSS的一行版本/壓縮版)

一般網頁則會依據需求同時引入好幾份文件
但是最基本的,就是min.css以及自己自訂的style.css這兩份

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>     
<script src="js/bootstrap.min.js"></script>

最下面則是引用jquery的來源
之所以會看到來源包含"ajax.googleapis…"的原因
就是因為jquery運作必須仰賴JavaScript引擎,這邊則是藉助了googleapis
比較有規模的則會在自己伺服器建引擎。
而開發時則下載 JavaScript,讓他在本地端運作,這樣測試起來比較快

Navigation Bar

在Bootstrap的範例中,已經建好了基本的Navbar

大概長這樣

Brand 給你放網站logo,要不要放連結自己決定
從左至右Link、Dropdown、Search bar 則是具個別功能的Navbar元件

從這些文字,對應html的架構,再從中挑選自己想要的
以下則是參考Tania Rascia文章的範例Navbar

<nav class="navbar navbar-inverse navbar-static-top">  
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Balance Web Development</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Consulting</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>

整個navbar的class設定就是”navbar navbar-inverse navbar-static-top”
這邊可以進去看一下這幾個class的設定
舉例而言,navbar是設定一些基本的border、margin及高度這樣
而navbar-inverse的意思 就只是顏色反白而已,沒有特殊功能

這邊挑了幾個部分
第一段 是"navbar-header"
包含了 "網站標題或LOGO"(navbar-brand)及"響應按鈕"(navbar-toggle collapsed)
其中,navbar-brand較容易理解,button比較難一些

 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">   
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

首先看class
navbar-toggle的CSS設定

基本上,Navbar-toggle就只有設定基本的margin、border跟padding
再來就是大於768px時候,display:none(大於768px會消失)
所以也沒有甚麼重要的

重要的是這邊

data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"

data-toggle跟data-target是bootstrap自訂的屬性
這邊的意思是:
當點擊menu按鈕時,觸發了”collapse”這個事件,這個事件的目標是下面的”bs-example-navbar-collapse-1”這個navbar的div,按了就展開。

相關說明 參考下列連結

第二段則是

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

這邊的設定就是呼應上面的toggle
id的部分跟上面的data-target吻合
也就是上面按鈕作動時,會與這個class牽連

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a>      
<ul class="dropdown-menu">
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Consulting</a></li>

此外裡面也放了一個dropdown-toggle
data-toggle則是dropdown
(那個"caret"就是一個三角形的符號而已)

意思就是按了下面會跑出來這樣
這些小工具都是使用bootstrap的優點之一
雖然CSS都可以自己重建,但是用bootstrap則可以省不少時間

但在還不熟悉bootstrap的時候
其實就多挖官網裡面的範例
然後自己套用想要的功能進去
多試幾次,就會抓到裡面參數的作用

接下來
主視覺的部分,就是Jumbotron了(電視牆)

現在滿多網頁都喜歡設計成這樣(上圖是bootstrap範例)
就是把畫面用一個完整的背景圖填滿
jumbotron這邊的設定比較簡單
基本上就是jumbotron->container

<div class="jumbotron">  
<div class="container">
<h1>Ready. Set. Code.</h1>
<p>Are you ready to boilerstrap your cross-compatible buzzword? We're Sassy, flat and semantic, so what are you waiting for?</p>
<br>
<p>
<a class="btn btn-primary btn-lg" href="#" role="button">Download Free Trial »</a>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a>
</p>
</div>
</div>

這邊,再看一下jumbotron的css

主要就推上下padding而已

Grid

格線,是bootstrap很重要的工具
也就是建立響應式網頁的不二法寶

基本上只要懂兩個概念
就能建完一個基本的響應式網頁格線

第一個概念是12欄位的設定
bootstrap把一個網頁分為十二欄
如果你想佔版面分兩欄,就是兩格六欄(2*6/12)
如果你想把版面分三欄,就是建三格四欄(3*4/12)

再來,第二個概念就是斷點(breakpoint)
bootstrap已經幫你先把裝置尺寸分為四類
分別是XS、SM、MD、LG
對應的前綴詞如下表所示

假設你需要在MD尺寸下建一行三格
就是三個 .col-md-4

回到Tania Rascia的範例,格線設定如下

<div class="container">  
<div class="row">
<div class="col-md-4">
<span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
<h3>Cloud Computable</h3>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
<h3>Backwards Compatible</h3>
<p>Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor.</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-console" aria-hidden="true"></span>
<h3>GUI Free</h3>
<p>Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
</div>
</div>
</div>

這邊的設定也很簡單
就是container->row->三格col-md-4

這邊有個小問題
col-md-4在md尺寸的裝置下會呈現佔4/12
那在其他尺寸呢?

可以參考這篇
以此為例如果只有md設定,尺寸往上會維持三欄(LG)
尺寸往下(XS、SM)就會從原本三欄,變成三行

其他grid功能參考說明

icon

<span class="glyphicon glyphicon-console" aria-hidden="true"></span>

bootstrap已經有內建icon可以用了
只要給他一個class,就會變出icon

這邊有說明icon使用方法
以及基本的icon圖示介紹

大致上就這樣

最後
附上Tania Rascia完整範例

參考

數位轉型

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store