day-8.16--/--Bootstrap

------------恢複内容開始------------

引入Bootstrap

引入css樣式

<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css" />//  引入線上的位址，或者直接在bootstrap上下載下傳好引入本地位址

引入js 

同樣的可以引入線上的位址，或者引入下載下傳好的位址     但是要先引入jquery的js，因為bootstrap實在jquery的基礎上建立的

按鈕的樣式：預設  btn-default；首選項：btn-primary;  一般資訊：btn-info； 

　　　　　　成功  btn-success;  警告：btn-warning；  危險：btn-danger；連結：btn-link。

表單以及輪播圖等的排列方向屬性值：vertical垂直的  horizontal水準的

響應式布局   網格系統

當盒子的類名字首為.col-xs  /  .col-sm-  /  .col-md  /  .col-lg-

　　行必須放置在 .container  class 内，以便獲得适當的對齊和内邊距

　　使用行來建立列的水準組。

　　網格系統是通過指定您想要橫跨的十二個可用的列來建立的。例如，要建立三個相等的列，則使用三個

　　 .col-xs-4。

　　分别對應超小裝置、小型裝置、中型裝置、大型裝置

　　偏移列：偏移是一個用于更專業的布局的有用功能。它們可用來給列騰出更多的空間。

　　　　比如col- ??-系列不支援偏移，但可以通過使用一個空單元格來實作效果。

　　　　如： .col-md-offset-* 類，*寫數字幾就是偏移幾個位置

data-target怎麼用？用來定義的觸發的模态彈出窗是哪個，屬性值為.類名或者#id

swiper輪播圖：

　　垂直切換選項direction:vertical  /  horizontal;  循環模式：loop:true;

吸頂：原理：利用scroll事件進行監聽scrollTop的值，當scrollTop達到一定的值得時候設定吸頂元素的

　　　　　　position : fixed;屬性   實作方法：寫入事件監聽，監聽滾動條

擷取自定義屬性的幾種方式：<div class="mynav" data-spy="affix" data-offset-top="150">

　　$(".mynav").attr("data-spy")

　　document.getElementsByClassName("mynav")[0].getAttribute("data-spy")

　　document.getElementsByClassName("mynav")[0].dataset.spy

　　document.getElementsByclassName("mynav")[0].onclick = function(e){ console.log(e) }

顯示隐藏：hidden:??在某種螢幕下隐藏  /  visible:??在某種螢幕下顯示  /  xs sm md lg

視口：

　　1、視口的作用：在移動浏覽器中，當頁面寬度超出裝置，浏覽器内部虛拟的一個頁面容器，将頁面容器縮放到裝置這麼大，然後展示；

　　2、目前大多數手機浏覽器的視口寬度都是980

　　3、是口的寬度可以通過meta标簽設定

　　4、次屬性為移動端頁面視口設定，目前表示在移動端頁面的寬度為裝置寬度，并不縮放

width：是口的寬度

initial-scale:初始化縮放

user-scalable：是否語序使用者自行縮放（值：yes、no；或者1、0）

minimum-scale：最小縮放，一般設定使用者不允許縮放，就沒必要設定最小最大縮放

maximum-scale：最大縮放