iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
Modern Web

30天學網頁設計系列 第 25

Day25 工具介紹:Bootstrap(一)

Bootstrap初學介紹

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

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

那最入門的是CSS框架,CSS代表了網頁的門面、設計感,是構成網頁的基本元素,應用Bootstrap則可以幫助開發者設計網頁時,以立即套用的功能,加速建構響應式內容,也可以提前處理一些跨瀏覽器可能產生的問題。
但也不一定要使用Bootstrap,CSS發展自今,設計上也越來越方便,Bootstrap只是提前幫各位做好一些工作,然而有時候做了太多工作,或者開發過程中不想要太多的束縛,就可以選擇不使用Bootstrap。

這邊也介紹一些Bootstrap的優點:

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

也由於Bootstrap全面性,累積了許多愛用者,社群資源也算蠻豐富的,幾乎大大小小的問題都可以找到相關ㄉ討論

安裝

目前最穩定的版本是 3.X
getbootstrap

下載之後解壓縮檔案,並更名為你的專案,接著,根據其Basic template開始,建立index.html,就可以開始,這個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以及自己自訂的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,讓他在本地端運作,這樣測試起來比較快。


上一篇
Day24 jQuery 基本教學(四)
下一篇
Day26 如何使用bootstrap
系列文
30天學網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言