Front_end - - Bootstrap框架

時間 2020-04-29

原文原文鏈接

bootstrap-3.3.7-dist/
├── css  // CSS文件
│   ├── bootstrap-theme.css  // Bootstrap主題樣式文件
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css  // 主題相關樣式壓縮文件
│   ├── bootstrap-theme.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css  // 核心CSS樣式壓縮文件
│   └── bootstrap.min.css.map
├── fonts  // 字體文件
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
└── js  // JS文件
    ├── bootstrap.js
    ├── bootstrap.min.js  // 核心JS壓縮文件
    └── npm.js

處理依賴jquery
因爲Bootstrap的某些組件依賴於jQuery，因此請確保下載對應版本的jQuery文件，來保證Bootstrap相關組件運行正常。git

5， Bootstrap全局樣式

排版、按鈕、表格、表單、圖片等咱們經常使用的HTML元素，Bootstrap中都提供了全局樣式。
咱們只要在基本的HTML元素上經過設置class就可以應用上Bootstrap的樣式，從而使咱們的頁面更美觀和諧。

5.1 標題相關

標題

<h1>一級標題36px</h1>
<h2>二級標題30px</h2>
<h3>三級標題24px</h3>
<h4>四級標題18px</h4>
<h5>五級標題14px</h5>
<h6>六級標題12px</h6>
<!--除了使用h標籤，Bootstrap內置了相應的全局樣式-->
<!--內聯標籤應用標題樣式-->
<span class="h1">一級標題36px</span>
<span class="h2">二級標題30px</span>
<span class="h3">三級標題24px</span>
<span class="h4">四級標題18px</span>
<span class="h5">五級標題14px</span>
<span class="h6">六級標題12px</span>

副標題

<!--一級標題中嵌入小標題-->
<h1>一級標題<small>小標題</small></h1>

5.2 文本對齊

<!--文本對齊-->
<p class="text-left">文本左對齊</p>
<p class="text-center">文本居中</p>
<p class="text-right">文本右對齊</p>

5.3 文本大小寫

<!--大小寫-->
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

5.4 表格

Class	描述
`.table-striped`	條紋狀表格
`.table-bordered`	帶邊框的表格
`.table-hover`	鼠標懸停變色的表格
````.table-condensed	緊縮型表格
`.table-responsive`	響應式表格

5.5 狀態類

Class`	描述
`.active`	鼠標懸停在行或單元格上時所設置的顏色
`.success`	標識成功或積極的動做
`.info`	標識普通的提示信息或動做
`.warning`	標識警告或須要用戶注意
`.danger`	標識危險或潛在的帶來負面影響的動做

5.6 表單

內聯表單
表單狀態
帶圖標的表單

5.7 按鈕

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

按鈕樣式

<!-- Standard button -->
<button type="button" class="btn btn-default">（默認樣式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首選項）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（通常信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危險）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（連接）Link</button>

按鈕大小

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按鈕）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按鈕）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默認尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默認尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按鈕）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按鈕）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

###5.8 圖片github

<img src="..." class="img-responsive" alt="Responsive image">

圖片形狀

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

5.9 輔助類

文本顏色

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

背景顏色

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

關閉按鈕

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

下拉三角

<span class="caret"></span>

快速浮動

<div class="pull-left">...</div>
<div class="pull-right">...</div>

內容塊居中

<div class="center-block">...</div>

清除浮動

<!-- Usage as a class -->
<div class="clearfix">...</div>

顯示與隱藏

<div class="show">...</div>
<div class="hidden">...</div>

6，經常使用Bootstrap組件

1 字體圖標
2 下拉菜單
3 按鈕組
4 輸入框俎
5 導航
6 分頁
7 標籤和徽章
8 頁頭
9 縮率圖
10 進度條
模擬滾動的進度條：

var $d1 = $("#d1");
var width = 0;
var theID = setInterval(setValue, 200);

function setValue() {
  if (width === 100) {
    clearInterval(theID);
  } else {
    width++;
    $d1.css("width", width+"%").text(width+"%");
  }
}

7，響應式開發

7.1 爲何要進行響應式開發？

隨着移動設備的流行，網頁設計必需要考慮到移動端的設計。同一個網站爲了兼容PC端和移動端顯示，就須要進行響應式開發。

7.2 什麼是響應式？

利用媒體查詢，讓同一個網站兼容不一樣的終端（PC端、移動端）呈現不一樣的頁面佈局。

7.3 用到的技術：

CSS3@media查詢
用於查詢設備是否符合某一特定條件，這些特定條件包括屏幕尺寸、是否可觸摸、屏幕精度、橫屏豎屏等信息。
常見屬性：
- device-width, device-height 屏幕寬、高
- width,height 渲染窗口寬、高
- orientation 設備方向
- resolution 設備分辨率
語法：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

不一樣的媒體使用不一樣的stylesheet

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

viewportajax
手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中，一般這個虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每一個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶能夠經過平移和縮放來看網頁的不一樣部分。npm
設置viewportbootstrap
一個經常使用的針對移動網頁優化過的頁面的 viewport meta 標籤大體以下：canvas

<meta name=」viewport」 content=」width=device-width, initial-scale=1, maximum-scale=1″>

- ````width````：控制 viewport 的大小，能夠指定的一個值，若是 600，或者特殊的值，如 device-width 爲設備的寬度（單位爲縮放爲 100% 時的 CSS 的像素）。
- ````height````：和 width 相對應，指定高度。
- ````initial-scale````：初始縮放比例，也便是當頁面第一次 load 的時候縮放比例。
- ````maximum-scale````：容許用戶縮放到的最大比例。
- ````minimum-scale````：容許用戶縮放到的最小比例。
- ````user-scalable````：用戶是否能夠手動縮放。

Bootstrap的柵格系統
- container
- row
- column
注意事項：使用Bootstrap的時候不要讓本身的名字與Bootstrap的類名衝突。

8， JavaScript插件

8.1 經常使用的Bootstrap自帶插件

8.1.1 模態框

模態框的HTML代碼放置的位置
務必將模態框的HTML代碼放在文檔的最高層級內（也就是說，儘可能做爲 body 標籤的直接子元素），以免其餘組件影響模態框的展示和/或功能。

8.1.1.1 HTML代碼：

<!-- 觸發模態框的按鈕 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- 模態框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

注意：
- 經過爲模態框設置 .bs-example-modal-lg和 .bs-example-modal-sm來控制模態框的大小。
- 經過 .fade類來控制模態框彈出時的動畫效果（淡入淡出效果）。
- 經過在 .modal-bodydiv中設置 .row可使用Bootstrap的柵格系統。

8.1.1.2 調用方式：

1 經過data屬性
- 經過在一個觸發彈出模態框的元素（例如：按鈕）上添加 data-toggle="modal"屬性，而後設置 data-target="#foo"屬性或 href="#foo"屬性，用來指向被控制的模態框。

<button type="button" data-toggle="modal" data-target="#myModal">顯示模態框</button>

2 經過JS代碼調用

$('#myModal').modal("show");  // 顯示
$('#myModal').modal("hide")   // 隱藏

經常使用參數：

名稱	可選值	默認值	描述
`backdrop`	`true/false/'static'`	`true`	`false`表示有沒有遮罩層，<br> `'static'`表示點擊遮罩層不關閉模態框
`keyboard`	`true/false`	`true`	鍵盤上的 `esc` 鍵被按下時關閉模態框。
`show`	`true/false`	`true`	模態框初始化以後就當即顯示出來。

方法：

$('#myModal').modal({
  keyboard: false
})

8.1.2 輪播圖

HTML代碼：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

能夠在爲圖片添加介紹信息：

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

方法：
設置切換間隔爲2秒，默認是5秒。

$('.carousel').carousel({
  interval: 2000
})

8.2 其餘經常使用插件

8.2.1 FontAwesome字體

詳細用法參見上述站點的Examples：https://fontawesome.com/?from=io

8.2.2 SweetAlert系列

SweetAlert：https://github.com/t4t5/sweetalert
SweetAlert2：https://github.com/sweetalert2/sweetalert2
SweetAlert 到 SweetAlert2 升級指南：https://github.com/sweetalert2/sweetalert2/wiki/Migration-from-SweetAlert-to-SweetAlert2
基本使用：
- swal("標題","內容","success);
使用SweetAlert在Ajax提交成功（done）或失敗（error）時分別提示不用的內容。
這是更新以前版本的寫法

function deleteRecord(recordID) {
    swal({
        title: "肯定要刪除這個產品嗎？",
        text: "刪除後可就沒法恢復了。",
        type: "warning",
        showCancelButton: true,
        closeOnConfirm: false,
        confirmButtonText: "是的，我要刪除！",
        confirmButtonColor: "#ec6c62",
        cancelButtonText: "容我三思"
    }, function (isConfirm) {
        if (!isConfirm) return;
        $.ajax({
            type: "post",
            url: "/delete/",
            data: {"id": recordID},
            success: function (data) {
                var dataObj = $.parseJSON(data);
                if (dataObj.status === 0) { //後端刪除成功
                    swal("刪除成功", dataObj.info, "success");
                    $("#p-" + recordID).remove()  //刪除頁面中那一行數據
                } else {
                    swal("出錯啦。。。", dataObj.msg, "error");  //後端刪除失敗
                }
            },
            error: function () {  // ajax請求失敗
                swal("啊哦。。。", "服務器走丟了。。。", "error");
            }
        })
    });
}

更新以後用這麼寫

swal({
  title: "這裏寫標題",
  text: "這裏放內容",
  icon: "warning",  // 這裏放圖標的類型（success,warning,info,error）
  buttons: {
    cancel: {
      text: "容我三思",
      visible: true,
      value: false
    },
    confirm: {
      text: "我就是要刪除"
    }
  }
}).then(function (isConfirm) {
    if (isConfirm){
      swal("你死定了", {button: "確認"});
    }

8.2.3 Toastr通知

參考：https://codeseven.github.io/toastr/

toastr["success"]("你已經成功被綠!")

8.2.4 jQueryLazyload懶加載

示例：

<!DOCTYPE html>
<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">
  <title>懶加載示例</title>
</head>
<body>
<div>
  <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  ...
  <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>

</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
<script>
  $("img.lazy").lazyload({
    effect: "fadeIn",
    event: "click"
  })
</script>
</body>
</html>