###### tags: `Bootstrap` # Bootstrap 筆記 資料更新於20201030 ## Bootstrap是什麼? Bootstrap:是響應式及行動裝置網頁設計，最知名的框架，提供了包含HTML、CSS及JS等內容的框架。 -> 框架? Bootstrap:是一個由 HTML、CSS 和 JavaScript 寫成的前端框架。 核心的設計目標是達成RWD響應式與行動優先，也就是讓你的網站排版可以自動適應螢幕大小。 ## 完整的Bootstrap包含 bootstrap.css — CSS框架 bootstrap.js — JavaScript/jQuery 框架 glyphicons — 圖示集(icon font set) ## Bootstrap解決的問題 可以幫助開發者設計網頁時有一些可以立即套用的功能，加速建構響應式內容 也提前幫你處理一些跨瀏覽器可能產生的問題 ## Bootstrap 安裝 [Bootstrap下載網址](https://getbootstrap.com/docs/3.3/getting-started/)以 bootstrap-3.3.7-dist.zip 版本為範例 將檔案解壓後，於bootstrap-3.3.7-dist資料夾下，將3個資料夾css,fonts,js 複製到網站目錄 C:\Inetpub\wwwroot 下就可以引用了。 另外也要將jquery.js裝起來，才可以最簡單的方法完整使用Bootstrap。(到jquery官網下載 jquery.js) 使用方法: 導入 Bootstrap 的方式和平常引入 CSS 和 JavaScript 檔案的方式一樣，下載檔案之後，將其引入到 HTML 檔案裡。 參考:[Bootstrap 環境安裝](http://www.w3big.com/zh-TW/bootstrap/bootstrap-environment-setup.html) ## Bootstrap 簡易安裝 **(因非正常程序安裝，不確定是否完整，全面，需要再測試)** 需要的檔案:放在相對應的資料夾下 css/bootstrap.min.css /jquery/1.11.2/jquery.js js/bootstrap.min.js 程式碼與放置位置 需要HTML5網頁 ```htmlmixed= <link href="css/bootstrap.min.css" rel="stylesheet"> 放在<head></head>間 下面兩行，放在<body></body>間(最好放在</body>之前)。 <script src="/jquery/1.11.2/jquery.js"></script> <script src="js/bootstrap.min.js"></script> ``` 設定好，可以用 Bootstrap_Navbar.html測試之 Bootstrap_Navbar.html內容 ```htmlmixed= <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <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> <script src="/jquery/1.11.2/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> ``` ## Bootstrap 使用 根據其Basic template開始 建立index.html，就可以開始Bootstrap Basic template內容:檔名 index.html ```htmlmixed= <!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> ``` index.html檔案內容說明 ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--這一個設定是響應式的設計的啟端，為的是將"內容的寬度參數" 等於 "設備的顯示寬度" 這樣之後在CSS裡面設定width:100%才會符合設備的顯示寬度--> <title>Bootstrap 101 Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--這邊的範例只先引入min.css的內容，其他還有完整版css、theme.css、theme.min.css，自訂的style.css 也可由此引入 --> </head> <body> <h1>Hello, world!</h1> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- 引用jquery的來源(可以自身網站的jquery來源)。此位置要先於bootstrap的js --> <script src="js/bootstrap.min.js"></script> <!-- 使用 bootstrap的js --> </body> </html> ``` 網頁引用四步驟:(要HTML5) 1. 設定為響應網頁:<meta name="viewport" content="width=device-width, initial-scale=1"> 2. 引入bootstrap css: <link href="css/bootstrap.min.css" rel="stylesheet"> 3. 引入jQuery: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 4. 引入bootstrap.js: <script src="js/bootstrap.min.js"></script> ## Bootstrap 網頁畫面安排 bootstrap把一個網頁分為十二欄 如果你想佔版面分兩欄，就是兩格六欄=> 一欄位佔六格 如果你想把版面分三欄，就是建三格四欄=> 一欄位佔四格 bootstrap把裝置尺寸分為四類 分別是XS、SM、MD、LG 所以MD尺寸的三欄位的 class 設定方法 .clo-md-4。 尺寸區分 |功能|xs|sm|md|lg| |-|-|-|-|-| |螢幕尺寸|<768px|>=768px|>=970px|>=1200px| |設備|手機|平板|一般桌機|大螢幕桌機| |頁面最大寬度|自動|750px|970px|1170px| |類別前置碼|.col-xs-|.col-sm-|.col-md-|.col-lg-| |欄位最大寬度|自動|62px|81px|97px| 頁面div class 階層設定順序是container->row->三格col-md-4 ## 圖示 bootstrap已經有內建icon可以用了 只要給他一個class，就會變出icon。`<span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>` 出現<span class="glyphicon glyphicon-cloud" aria-hidden="true"></span> 雲端圖示。 ## 響應式圖像 語法: ```<img src="..." class="img-responsive" alt="響應式圖像">``` --- #### 參考資料: 參考:[Bootstrap 的官方網站](https://getbootstrap.com/) 參考:[Bootstrap 是什麼？給網頁設計新手的 Bootstrap 4入門教學](https://tw.alphacamp.co/blog/bootstrap-4-introduction) 參考:[bootstrap-初學介紹-靜態篇](https://medium.com/@weilihmen/bootstrap-%E5%88%9D%E5%AD%B8%E4%BB%8B%E7%B4%B9-%E9%9D%9C%E6%85%8B%E7%AF%87-f20500235b33) <=觀念由此入門。 參考:[Bootstrap 教程](http://www.w3big.com/zh-TW/bootstrap/default.html) S20200609 By YTC M20200819 By YTC M20201008 增加Bootstrap 簡易安裝 說明 M20201030