Python-bootstrap

1 引入

若是想要用到BootStrap提供的js插件，那麼還須要引入jQuery框架，由於BootStrap提供的js插件是依賴於jQuery的
<link type="text/css" rel="stylesheet" href="../css/bootstrap.css">
<script type="text/javascript" src="../bootstrap.js"></script>
<script type="text/javascript" src="../jquery-1.12.4.min.js"></script>

2 容器

- 固定寬度：.container
- 流式佈局：.container-fluid

3 響應式佈局

- 超小屏幕：小於 768px
- 小屏幕：大於等於 768px
- 中等屏幕：大於等於 992px
- 大屏幕：大於等於 1200px

爲何要進行響應式開發？

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

什麼是響應式？

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

用到的技術：

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">

viewport

手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中，一般這個虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每一個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶能夠經過平移和縮放來看網頁的不一樣部分。

設置viewport

一個經常使用的針對移動網頁優化過的頁面的 viewport meta 標籤大體以下：

<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的類名衝突。

4 柵格系統

一、概念

將父級可用寬度(content)均分爲12等份

0. 包含在container裏面
1. 每一行（row）均分紅12列(col-xx-**）必須放在row中)，
2. 每個標籤能夠自定義佔的列數（col-xx-**）

列偏移

列排序

 

二、列比

- 超小屏幕：.col-xs-*
- 小屏幕：.col-sm-*
- 中等屏幕：.col-md-*
- 大屏幕：.col-lg-*
v-hint：只設置小屏列比會影響大屏列比；只設置大屏列比小屏時會撐滿屏幕

三、行

<div class="row"></div>
...
<div class="row"></div>

四、列偏移

- 超小屏幕：.col-xs-offset-*
- 小屏幕：.col-sm-offset-*
- 中等屏幕：.col-md-offset-*
- 大屏幕：.col-lg-offset-*

5 經常使用組件

字體圖標

優勢：
size小
放大不失真
能夠隨字體顏色變化而變化
1. Bootstrap自帶的
<span class='glyphicon glyphicon-heart'></span>
2. font Awesome
<i class="fa fa-heart"></i>
http://www.fontawesome.com.cn/

下拉菜單
按鈕組
輸入框俎
導航
分頁
標籤和徽章
頁頭
縮率圖
進度條

補充：滾動的進度條
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+"%");
}
}

6. Bootstrap經常使用組件
7. Bootstrap經常使用插件

1. 模態框

模態框的HTML代碼放置的位置

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

<!-- 觸發模態框的按鈕 -->
<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">×</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的柵格系統。

2. 輪播圖

<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. 其餘插件

1. SweetAlert for bootstrap

https://lipis.github.io/bootstrap-sweetalert/

REFERENCE-LIWENZHOU :http://www.cnblogs.com/liwenzhou/p/8214637.html