python bootstrap_Python-bootstrap
1 引入
如果想要用到BootStrap提供的js插件，那么還需要引入jQuery框架，因?yàn)锽ootStrap提供的js插件是依賴于jQuery的
2 容器
- 固定寬度：.container
- 流式布局：.container-fluid
3 響應(yīng)式布局
- 超小屏幕：小于 768px
- 小屏幕：大于等于 768px
- 中等屏幕：大于等于 992px
- 大屏幕：大于等于 1200px
為什么要進(jìn)行響應(yīng)式開發(fā)？
隨著移動(dòng)設(shè)備的流行，網(wǎng)頁(yè)設(shè)計(jì)必須要考慮到移動(dòng)端的設(shè)計(jì)。同一個(gè)網(wǎng)站為了兼容PC端和移動(dòng)端顯示，就需要進(jìn)行響應(yīng)式開發(fā)。
什么是響應(yīng)式？
利用媒體查詢，讓同一個(gè)網(wǎng)站兼容不同的終端(PC端、移動(dòng)端)呈現(xiàn)不同的頁(yè)面布局。
用到的技術(shù)：
CSS3@media查詢
用于查詢?cè)O(shè)備是否符合某一特定條件，這些特定條件包括屏幕尺寸、是否可觸摸、屏幕精度、橫屏豎屏等信息。
常見屬性：
device-width, device-height 屏幕寬、高
width,height 渲染窗口寬、高
orientation 設(shè)備方向
resolution 設(shè)備分辨率
語(yǔ)法：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
不同的媒體使用不同的stylesheet
viewport
手機(jī)瀏覽器是把頁(yè)面放在一個(gè)虛擬的"窗口"(viewport)中，通常這個(gè)虛擬的"窗口"(viewport)比屏幕寬，這樣就不用把每個(gè)網(wǎng)頁(yè)擠到很小的窗口中(這樣會(huì)破壞沒有針對(duì)手機(jī)瀏覽器優(yōu)化的網(wǎng)頁(yè)的布局)，用戶可以通過平移和縮放來看網(wǎng)頁(yè)的不同部分。
設(shè)置viewport
一個(gè)常用的針對(duì)移動(dòng)網(wǎng)頁(yè)優(yōu)化過的頁(yè)面的 viewport meta 標(biāo)簽大致如下：
width：控制 viewport 的大小，可以指定的一個(gè)值，如果 600，或者特殊的值，如 device-width 為設(shè)備的寬度(單位為縮放為 100% 時(shí)的 CSS 的像素)。
height：和 width 相對(duì)應(yīng)，指定高度。
initial-scale：初始縮放比例，也即是當(dāng)頁(yè)面第一次 load 的時(shí)候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動(dòng)縮放。
Bootstrap的柵格系統(tǒng)
container
row
column
注意事項(xiàng)： 使用Bootstrap的時(shí)候不要讓自己的名字與Bootstrap的類名沖突。
4 柵格系統(tǒng)
1、概念
將父級(jí)可用寬度(content)均分為12等份
0. 包含在container里面
1. 每一行(row)均分成12列(col-xx-**)必須放在row中)，
2. 每一個(gè)標(biāo)簽可以自定義占的列數(shù)(col-xx-**)
列偏移
列排序
2、列比
- 超小屏幕：.col-xs-*
- 小屏幕：.col-sm-*
- 中等屏幕：.col-md-*
- 大屏幕：.col-lg-*
v-hint：只設(shè)置小屏列比會(huì)影響大屏列比；只設(shè)置大屏列比小屏?xí)r會(huì)撐滿屏幕
3、行
...
4、列偏移
- 超小屏幕：.col-xs-offset-*
- 小屏幕：.col-sm-offset-*
- 中等屏幕：.col-md-offset-*
- 大屏幕：.col-lg-offset-*
5 常用組件
字體圖標(biāo)
優(yōu)點(diǎn)：
size小
放大不失真
可以隨字體顏色變化而變化
1. Bootstrap自帶的
2. font Awesome
http://www.fontawesome.com.cn/
下拉菜單
按鈕組
輸入框俎
導(dǎo)航
分頁(yè)
標(biāo)簽和徽章
頁(yè)頭
縮率圖
進(jìn)度條
補(bǔ)充：滾動(dòng)的進(jìn)度條
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代碼放置的位置
務(wù)必將模態(tài)框的HTML代碼放在文檔的最高層級(jí)內(nèi)(也就是說，盡量作為 body 標(biāo)簽的直接子元素)，以避免其他組件影響模態(tài)框的展現(xiàn)和/或功能。
Launch demo modal
×
Modal title
...
Close
Save changes
注意：
通過為模態(tài)框設(shè)置?.bs-example-modal-lg和?.bs-example-modal-sm來控制模態(tài)框的大小。
通過?.fade類來控制模態(tài)框彈出時(shí)的動(dòng)畫效果(淡入淡出效果)。
通過在?.modal-bodydiv中設(shè)置?.row可以使用Bootstrap的柵格系統(tǒng)。
2. 輪播圖
...
...
...
Previous
Next
可以在為圖片添加介紹信息：
...
...
方法：
設(shè)置切換間隔為2秒，默認(rèn)是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
總結(jié)
以上是生活随笔為你收集整理的python bootstrap_Python-bootstrap的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 8086处理器的无条件转移指令——《x8
- 下一篇： python beautifulrepo