bootstrap學習總結1

什麼是Bootstrap？

　　bootstrap就是一個前端框架，有Twitter公司開發

最大的優點：

　　開源　　：

　　響應式設計：Bootstrap 的響應式 CSS 能夠自適應於桌上型電腦、平板電腦和手機。更多有關響應式設計的內容詳見 Bootstrap 響應式設計。

學習網站：

　　極客學院，匯智網，慕課網，bootstrap中文文件。

開始需要知道：

　　bootstrap的js是依賴於jQuery的，所以在引入bootstrap.js時必須先引入jQuery.js;

HTML 模板

一個使用了 Bootstrap 的基本的 HTML 模板如下所示：

<!-- HTML5的文件型別 -->
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim 和 Respond.js 用於讓 IE8 支援 HTML5元素和媒體查詢 -->
<!-- 注意： 如果通過 file:// 引入 Respond.js 檔案，則該檔案無法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (Bootstrap 的 JavaScript 外掛需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已編譯的外掛 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

　　在這裡，可以看到包含了 jquery.js、bootstrap.min.js 和bootstrap.min.css 檔案，用於讓一個常規的 HTML 檔案變為使用了 Bootstrap 的模板。

為了讓 Bootstrap 開發的網站對移動裝置友好，確保適當的繪製和觸屏縮放，需要在網頁的 head 之中新增 viewport meta 標籤，如下所示：

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

width 屬性控制裝置的寬度。假設您的網站將被帶有不同螢幕解析度的裝置瀏覽，那麼將它設定為 device-width 可以確保它能正確呈現在不同裝置上。

initial-scale=1.0 確保網頁載入時，以 1:1 的比例呈現，不會有任何的縮放。

在移動裝置瀏覽器上，通過為 viewport meta 標籤新增 user-scalable=no 可以禁用其縮放（zooming）功能。

通常情況下，maximum-scale=1.0 與 user-scalable=no 一起使用。這樣禁用縮放功能後，使用者只能滾動螢幕，就能讓您的網站看上去更像原生應用的感覺。

注意，這種方式並不推薦所有網站使用，還是要看您自己的情況而定！

<meta name="viewport" content="width=device-width,
　　　　　　　　　　　　  　nitial-scale=1.0,
　　　　　　　　　　　　　　maximum-scale=1.0,
　　　　　　　　　　　　　　user-scalable=no">

bootstrap學習總結1

什麼是Bootstrap？

HTML 模板

相關文章