1 引入

如果想要用到BootStrap提供的js插件，那么還需要引入jQuery框架，因為BootStrap提供的js插件是依賴于jQuery的

2 容器

- 固定寬度：.container

- 流式布局：.container-fluid

3 響應式布局

- 超小屏幕：小于 768px

- 小屏幕：大于等于 768px

- 中等屏幕：大于等于 992px

- 大屏幕：大于等于 1200px

為什么要進行響應式開發(fā)？

隨著移動設備的流行，網(wǎng)頁設計必須要考慮到移動端的設計。同一個網(wǎng)站為了兼容PC端和移動端顯示，就需要進行響應式開發(fā)。

什么是響應式？

利用媒體查詢，讓同一個網(wǎng)站兼容不同的終端(PC端、移動端)呈現(xiàn)不同的頁面布局。

用到的技術：

CSS3@media查詢

用于查詢設備是否符合某一特定條件，這些特定條件包括屏幕尺寸、是否可觸摸、屏幕精度、橫屏豎屏等信息。

常見屬性：

device-width, device-height 屏幕寬、高

width,height 渲染窗口寬、高

orientation 設備方向

resolution 設備分辨率

語法：

@media mediatype and|not|only (media feature) {

CSS-Code;

}

不同的媒體使用不同的stylesheet

viewport

手機瀏覽器是把頁面放在一個虛擬的"窗口"(viewport)中，通常這個虛擬的"窗口"(viewport)比屏幕寬，這樣就不用把每個網(wǎng)頁擠到很小的窗口中(這樣會破壞沒有針對手機瀏覽器優(yōu)化的網(wǎng)頁的布局)，用戶可以通過平移和縮放來看網(wǎng)頁的不同部分。

設置viewport

一個常用的針對移動網(wǎng)頁優(yōu)化過的頁面的 viewport meta 標簽大致如下：

width：控制 viewport 的大小，可以指定的一個值，如果 600，或者特殊的值，如 device-width 為設備的寬度(單位為縮放為 100% 時的 CSS 的像素)。

height：和 width 相對應，指定高度。

initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。

maximum-scale：允許用戶縮放到的最大比例。

minimum-scale：允許用戶縮放到的最小比例。

user-scalable：用戶是否可以手動縮放。

Bootstrap的柵格系統(tǒng)

container

row

column

注意事項： 使用Bootstrap的時候不要讓自己的名字與Bootstrap的類名沖突。

4 柵格系統(tǒng)

1、概念

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

0. 包含在container里面

1. 每一行(row)均分成12列(col-xx-**)必須放在row中)，

2. 每一個標簽可以自定義占的列數(shù)(col-xx-**)

列偏移

列排序

2、列比

- 超小屏幕：.col-xs-*

- 小屏幕：.col-sm-*

- 中等屏幕：.col-md-*

- 大屏幕：.col-lg-*

v-hint：只設置小屏列比會影響大屏列比；只設置大屏列比小屏時會撐滿屏幕

3、行

...

4、列偏移

- 超小屏幕：.col-xs-offset-*

- 小屏幕：.col-sm-offset-*

- 中等屏幕：.col-md-offset-*

- 大屏幕：.col-lg-offset-*

5 常用組件

字體圖標

優(yōu)點：

size小

放大不失真

可以隨字體顏色變化而變化

1. Bootstrap自帶的

2. font Awesome

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. 模態(tài)框

模態(tài)框的HTML代碼放置的位置

務必將模態(tài)框的HTML代碼放在文檔的最高層級內(nèi)(也就是說，盡量作為 body 標簽的直接子元素)，以避免其他組件影響模態(tài)框的展現(xiàn)和/或功能。

Launch demo modal

×

Modal title

...

Close

Save changes

注意：

通過為模態(tài)框設置?.bs-example-modal-lg和?.bs-example-modal-sm來控制模態(tài)框的大小。

通過?.fade類來控制模態(tài)框彈出時的動畫效果(淡入淡出效果)。

通過在?.modal-bodydiv中設置?.row可以使用Bootstrap的柵格系統(tǒng)。

2. 輪播圖

...

...

...

Previous

Next

可以在為圖片添加介紹信息：

...

...

方法：

設置切換間隔為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

總結

以上是生活随笔為你收集整理的python bootstrap_Python-bootstrap的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。