簡單紀錄一下Bootstrap的用法，先介紹一下什麼是Bootstrap，要了解Bootstrap前的必備知識是HTML，CSS及Javascript，若不懂上述三種技術則看不懂以下內容是正常的。
Bootstrap是一個免費開源的網站開發"工具"，是一種結合了css和javascript程式的套件，可幫助開發者快速開發一個擁有自適應性特色的網站(responsive web design, RWD)。
什麼是自適應性的網站呢? 其實自適應性網站的特色就是在不同大小的螢幕下，會自動呈現最適合該螢幕大小的版面內容，也因此能帶來最好的使用者體驗。
由於目前人們會使用各種螢幕大小的設備來上網，例如桌上型電腦，筆電，手機，平板等，為了配合各種螢幕尺寸，所以網站要能依螢幕大小去自動調整成最適合的版面，使用者用起來才會覺得舒服愉快，否則在小小的手機螢幕上要去點選小小的字非常痛苦，造成不好的使用者體驗。
若是不好理解，可以先暫時把bootstrap看成一個CSS模板(template)。
Bootstrap是一種網站前端(front-end)的開發框架，使用了許多HTML，CSS及Javascript技術，其中包含各種元素的設計模板，例如字型，表格，區塊，選單，段落文字等等，所以直接套用bootstrap可以很快的建立一個美麗外觀的網站，不用再花費太多的心思去進行外觀上的設計，對非前端的開發者來說是個還算便利的工具。
不過使用bootstrap還是要學習他的命名規則慣例用法等，個人覺得不是很好上手。
菜鳥工程師肉豬-版權所有不得轉載
如何使用Bootstrap 3
- 先到bootstrap官網，然後選擇download下載Bootstrap。
- 下載後可得到一個壓縮檔，內有三個資料夾，分別為css，font及js資料夾，將這三個資料夾放入您網站目錄的最上層(例如與index.html同一層)
- 編輯要套用bootstrap的html網頁。使用bootstrap需要利用HTML5及CSS，因此html需宣告為
<!DOCTYPE html>
步驟3~6
- 在
<head>標籤內新增以下內容，告訴瀏覽器這份html要使用的css及javascript來源位置(即剛剛下載資料夾內文件的擺放位置)
<link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/bootstrap.min.js"></script> - 在
<head>標籤內新增下面的meta標籤及屬性，此段宣告簡單來說式為了讓網頁在手持裝置上也有好體驗。 - 在
<body>內新增一組<div>標籤，div的class為"container"，container為bootstrap css樣式 - 開始編輯您的網頁內容吧，之後在
<div class="container">標籤內的內容都會套用bootstrap的樣式了。
<meta name="viewport" content="width=device-width, initial-scale=1">
如果覺得文章有幫助的話還幫忙點個Google廣告，感恩。
沒有留言:
張貼留言