Bootstrap學習筆記（一）

時間 2019-11-20

原文原文鏈接

Bootstrap學習筆記（一）

第一部分：Bootstrap簡介

·　　Bootstrap是目前很是流行的一個框架，它是由Twitter公司的Mark Otto和Jacob Thornton開發並在2011年8月在GitHub上發佈的開源做品，其基於HTML、CSS、Javascript。它的一大特色是簡單靈活，經過學習Bootstrap咱們能夠很輕鬆的開發Web項目。css

　　Bootstrap的特色以下：html

移動設備優先
全部的主流瀏覽器都支持
容易上手，簡單易學
響應式設計--可以自適於臺式機、平板電腦、手機

　　下面這個是Bootstrap的模板，咱們若是要使用Bootstrap，下面的這個佈局是最基本的。html5

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/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>

　　注意：

其中 html5shir.js主要是爲了讓不支持HTML5特性的IE瀏覽器版本識別HTML5中的元素，respond.js是爲了讓不支持css3中媒體查詢( Media Query )的瀏覽器（主要是IE9如下的版本）支持媒體查詢。
html5shiv.min.js和respond.min.js在頁面頂部引入是爲了不在渲染過程當中出現閃動問題，jquery.js和bootstrap.js在頁面底部加載視爲了不js的阻斷加載致使頁面渲染緩慢的問題。
若是你不須要使用js組件，那麼就不須要引入jQuery和bootstrap.js了。
其中的一些文件，咱們可使用Bootstrap中文網提供的免費CDN加速服務--基於國內雲廠商的CDN服務，訪問速度更快、加速效果更明顯、沒有速度和寬帶限制、永久免費。
固然，其中的css和js文件也能夠不經過cdn引入，咱們也能夠經過下面的網站下載獲得：jquery

　點擊下載css3
下面是推薦CDN

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- 可選的Bootstrap主題文件（通常不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">


<!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件，其中包含了全部的已經編譯的插件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>



 <!-- 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]-->

固然，其中的css和js文件也能夠不經過cdn引入，咱們也能夠經過下面的網站下載獲得：bootstrap

　點擊下載瀏覽器

下面是Bootstrap瀏覽器、設備支持狀況：架構

第二部分：Bootstrap總體架構

1.css12柵格系統

　　柵格系統就是：框架

以規則的網格陣列來指導和規範網頁中的版面佈局和信息分佈。佈局

　　它將網頁的總寬度平分爲12份，開發人員能夠自由按份組合，以便開發出簡潔方便的程序。

2.基礎佈局組件

　　在12柵格系統的基礎上，Bootstrap提供了多種基礎佈局組件，好比排版、代碼、表格、按鈕、表單等等。也就是說，以前咱們須要使用不少的css代碼來修飾html元素，可是有了bootstrap提供的基礎佈局組件，咱們只須要給元素加上特定名稱的類名就能夠設計出漂亮的html元素啦，是否是很方便呢！

3.jQuery的引入

　　Bootstrap中全部的JavaScript插件都依賴於jQuery 1.0 +，若是要使用js插件，那麼咱們就必需要引入jQuery庫；若是咱們不須要使用js插件，那咱們就不須要引入jQuery庫，就更不用引入bootstrap.js了。

4.響應式設計

　　什麼是響應式設計？

　　響應式設計就是一個網站能兼容多個終端，而不是爲每個終端作一個特定的版本。

5.css組件

　　在3.x版本例提供了20種css組件，包括下拉菜單、按鈕組、按鈕下拉菜單、導航、導航條、麪包屑導航、排版等等。一樣地，對於這些組件，咱們只須要寫出html後加上特定的class名稱便可。

6.JavaScript插件

　　新版的JavaScript插件總共有12中，包括輪播圖等很是實用。

第三部分：柵格系統

　　其原理十分簡單，即經過定義容器的大小，平分12份，再經過調整內外邊距，最後結合柵格系統便可作出強大的響應式的柵格系統。

　　注意：

行(row)必須包含在.container中。
列(column)必須包含在行(row)中。

　　1.因爲是響應式設計，因此咱們須要根據設備的寬度來區分4種類型的瀏覽器。 經過分界點768px、992px、1220px劃分爲超小屏、小屏、中屏、大屏。

　　2.由於要使用柵格系統，因此必須在外層有一個.container的div，這個div不會佔滿整個瀏覽器屏幕（這裏假設.container的div是body的惟一子元素），而是有必定的間隙，咱們查看其源代碼可知：

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

會經過媒體查詢來設置.container的寬度，對於超小屏幕這裏沒有設置，應該爲100%；對於小屏幕設置爲750px;對於中屏設置爲970px；對於大屏，設置位1170px；除此以外，還設置了兩邊的padding，而且經過值爲auto的左右margin使得其居中。

　　注意：

container中沒有設置height，因此說若是類名爲container的div下沒有其餘元素，那咱們是看不到的，必須添加height才能將其顯示出來。
在源碼中能夠看到*{ box-sizing: border-box;}這句代碼，因此說若是咱們不人工覆蓋，全部的元素都是border-box，即相似與IE的盒模型。因此說咱們添加更大的padding值，container這個div寬度不會增長，只是內容的寬度減少了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。