bootstrap + validate總結
阿新 • • 發佈：2019-02-06
bootstrap:
css框架,html/css/js集於一身.ie 6/7/8相容性有問題
開發響應式頁面,使用於不同的上網裝置
使用步驟:
1.匯入bootstrap.css
2.匯入jquery.js
3.匯入bootstrap.js
4.必須設定一個meta標籤
5.必須將內容放入一個佈局容器
.container或者.container-fluid
前提:
一行分成12份.
柵格系統:
解析度>1200px 使用col-lg-n 樣式
1200px>解析度>992px 使用col-md-n 樣式
992px>解析度>768px 使用col-sm-n 樣式
768px>解析度 使用col-xs-n 樣式
隱藏:
hidden-xs|sm|md|lg 在什麼螢幕下隱藏
組成
css樣式
元件 導航條 下拉選單
js外掛輪播圖 選項卡
jquery的外掛.
使用步驟:
1.匯入jquery.js
2.匯入validate.js
3.在頁面載入成功之後 對錶單進行校驗
$(function(){
$("選擇器").validate();
})
4.在validate方法中編寫校驗規則即可
$(function(){
$("選擇器").validate({
rules:{
//格式1: name值:"校驗器"
//格式2: name值:{校驗器:值,校驗器值}
},
messages:{
//格式1: name值:"提示資訊"
//格式2: name值:{校驗器:"提示資訊",校驗器:"提示資訊"
}
});
});
常用的校驗器:
required:必須的
min:最小值
minlength:最小的長度
range:取值區間
rangelength:長度區間
equalTo:jquery表示式 判斷是否相等
css框架,html/css/js集於一身.ie 6/7/8相容性有問題
開發響應式頁面,使用於不同的上網裝置
使用步驟:
1.匯入bootstrap.css
2.匯入jquery.js
3.匯入bootstrap.js
4.必須設定一個meta標籤
5.必須將內容放入一個佈局容器
.container或者.container-fluid
前提:
一行分成12份.
柵格系統:
解析度>1200px 使用col-lg-n 樣式
1200px>解析度>992px 使用col-md-n 樣式
992px>解析度>768px 使用col-sm-n 樣式
768px>解析度 使用col-xs-n 樣式
隱藏:
hidden-xs|sm|md|lg 在什麼螢幕下隱藏
組成
css樣式
元件 導航條 下拉選單
js外掛輪播圖 選項卡
---------------------------------------------------------------------
validate外掛:校驗表單jquery的外掛.
使用步驟:
1.匯入jquery.js
2.匯入validate.js
3.在頁面載入成功之後 對錶單進行校驗
$(function(){
$("選擇器").validate();
})
4.在validate方法中編寫校驗規則即可
$(function(){
$("選擇器").validate({
rules:{
//格式1: name值:"校驗器"
//格式2: name值:{校驗器:值,校驗器值}
},
messages:{
//格式1: name值:"提示資訊"
//格式2: name值:{校驗器:"提示資訊",校驗器:"提示資訊"
}
});
});
常用的校驗器:
required:必須的
min:最小值
minlength:最小的長度
range:取值區間
rangelength:長度區間
equalTo:jquery表示式 判斷是否相等