導入 Bootstrap

Bootstrap 用以簡化 RWD 並加速 Web 開發時跨瀏覽器的網頁排版設計作業,運用此框架,經由簡單的設定,便能讓網頁支援各種現代化的網頁版面設計與Web應用開發,同時適用各種尺寸的裝置瀏覽需求。

Bootstrap 是一個免費的程式框架,使用它之前必須先至官方網站 Bootstrap Download 下載必要的檔案。



進入網站之後,按一下畫面中的 Download Bootstrap 按鈕,會下載一個 zip 格式的 bootstrap-x.x.x  壓縮檔,將其解壓縮,其中包含三個資料夾 - css、font 與 js , css 包含所需的樣式檔案,js 則是需要的 JavaScript  檔案,一開始練習 Bootstrap 並不需要用到全部的檔案,我們只需要最基本的 css 樣式檔案與 JavaScript 檔案即可開始運用 Bootstrap 框架。

另外要注意的是,其中與 JavaScript 有關的開發都需要 jQuery ,因此一個基本的Bootstrap 必須含入 bootstrap.min.css、bootstrap.min.js以及 jQuery.js 等檔案。

考慮以下的網頁內容:

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Layout</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
</head>
<body>
   
    // 套用 Bootstrap 設計網頁內容
   
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

在這個網頁中,標頭的部份透過 link 含入 bootstrap.min.css 檔案,而 body 結束前,則利用 script 將 bootstrap.min.js 與 jquery.js 兩個 JavaScript檔案含入。

當你套用Bootstrap,網頁中HTML5宣告<!DOCTYPE html>是必要的,同時它會針對網頁進行一些初始化的設定:
  • 移除 body 預設的 margin 樣式設定,同時設定background-color: white;。
  • 以 @baseFontFamily、@baseFontSize與 @baseLineHeight 屬性為排版基礎字型。
  • 以 @linkColor 設定鏈結顏色樣式,並且只有在 :hover 樣式作用時顯示底線。
  • 以 Normalize.css 重置樣式設定。
如果不想自行設定,可以透過 CDN 方式含入所需的檔案,至 Bootstrap CDN 找到以下的連結字串設定,並且依序複製到網頁即可。



中間的 bootstrap-theme.min.css 這一段 CSS配置是選擇性的,初步的學習並不一定需要,可以自行決定是否同時引用。

第一次使用 Bootstrap - 網格系統(Grid System)

完成上述的配置之後,接下來就可以開始將 Bootstrap 運用在網頁設計上,首先示範的是網格系統(Grid System)。



P.S.

Bootstrap 提供了官方技術文件,讀者亦可自行參考:
http://getbootstrap.com/css/



Bootstrap-響應式設計

沒有留言: