Bootstrap速學教程之簡要介紹

ytkahcom發表於2016-07-08
boot

　　Bootstrap是Twitter推出的一個用於前端開發的開源工具包，由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架，不用請UI設計師也能開發出中規中矩的網頁，並且最重要的是支援html5、css3移動端自適應，現在很多所謂的三合一五合一網站是基於bootstrap搭建的。

　　我們來看一個簡單的例子

<!DOCTYPE html><!-- html5格式 -->
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤放在最前面，其他內容跟隨其後！ -->
    <meta name="description" content="這是描述">
    <title>這是標題</title>
    <!-- 新 Bootstrap 核心 CSS 檔案 cdn加速 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- 可選的Bootstrap主題檔案（一般不用引入） -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

    <!-- jQuery檔案。務必在bootstrap.min.js 之前引入 -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
  <body>
    <!-- 導航欄 -->
    <nav class="navbar">
      <div class="container">
      </div>
    </nav>

    <!-- 主題內容 -->
    <div class="container">
    </div>
  </body>
</html>

　　筆記：

　　1.Bootstrap 使用到的某些 HTML 元素和 CSS 屬性需要將頁面設定為 HTML5 文件型別。

　　2.Bootstrap 不支援 IE 古老的相容模式。為了讓 IE 瀏覽器執行最新的渲染模式下，建議將此 <meta> 標籤加入到你的頁面中 IE=edge

　　3.Bootstrap 3 是移動裝置優先的。針對移動裝置的樣式融合進了框架的每個角落，而不是增加一個額外的檔案。為了確保適當的繪製和觸屏縮放，需要在 <head> 之中新增 viewport 後設資料標籤。可選設定（viewport）設定 meta 屬性為 user-scalable=no可以禁用其縮放（zooming）功能。這樣禁用縮放功能後，使用者只能滾動螢幕，就能讓你的網站看上去更像原生應用的感 覺。

　　4.jquery用1.*版本，2.0版本不支援ie6/7/8

　　5.<nav>是bootstrap中內建的導航樣式，pc端可以展示完整的一行，移動端會收縮到右上角的選單menu中

　　6.內容主體div可以用container，有固定寬度並支援響應式佈局的容器，container-fluid用於 100% 寬度


相關文章