validate bootstrap知識點總結

2021-08-22 12:09:54 字數 2713 閱讀 3978

1.簡介(了解):validate是別人封裝好的第三方工具,是jquery的外掛程式.

作用:校驗表單

2.使用步驟

(1)匯入jquery.js

(2)匯入validate.js

(3)在頁面載入成功之後    

$(function(){})

(4)對表單進行校驗

$(function())

(5)編寫校驗的規則

$(function(),

messages:{}

});})

(6)編寫具體的規則

$(function()

},messages:

}});

})3.常用的校驗器

必填:       required

最值:       min|max

取值範圍:range        值:[min,max]

相等:       equalto        值:jquery表示式

長度:       minlength|maxlength

長度範圍:rangelength     值:[min長度,max長度]

1.簡介:webcss框架,集合了html/css/jquery為一家,ie 6/7/8相容性有問題(了解)

作用:建立響應式的頁面

響應式:適配不同的上網裝置            

2.使用步驟

(1)匯入bootstarp.css

(2)匯入jquery.js

(3)匯入bootstarp.js

(4)在head標籤新增乙個meta標籤  支援移動裝置

(5)將所有的內容放入到布局容器中.

bootstrap 需要為頁面內容和柵格系統包裹乙個 .container 容器。

我們提供了兩個作此用處的類

方式1:

方式2:

3.柵格系統

螢幕解析度》1200px         樣式:col-lg-x   大螢幕

992px《螢幕解析度<1200px   樣式:col-md-x   中等螢幕

768px《螢幕解析度<992px    樣式:col-sm-x   小螢幕

螢幕解析度<768px          樣式:col-xs-x   最小螢幕

注:一行分成12份

4.組成部分(了解)

(1)全域性css樣式--定義了一套css樣式

(2)元件--定義了很多可以直接使用的元件 例如:下拉列表 導航條 

(3)js外掛程式--例如:輪播圖 選項卡

5.其他

(1)隱藏

hidden-xs|sm|md|lg     在什麼螢幕下隱藏

(2)將乙個超連結偽裝成乙個按鈕

class="btn btn-primary"

(3)浮動到右邊

class="pull-right"  

1.案例一-表單校驗

(1)需求:通過validate外掛程式來校驗表單

(2)技術分析:jqery validate(rules,messages,校驗器)

(3)步驟分析:    

a.匯入jquery.js

b.匯入validate.js

c.在頁面載入成功之後 對表單進行校驗  

d.在validate中編寫校驗規則 

2.案例二-建立乙個響應式的頁面

(1)需求:建立一套頁面,可以根據上網裝置的不同自動調節顯示的效果.

(2)技術分析:bootstrap(柵格系統)

(3)步驟分析:

a.先有乙個模版頁面

b.建立乙個導航條

c.下面建立乙個輪播圖

d.下面再建立3個div

中等螢幕的時候 3個一行

小螢幕的時候   2個一行

最小螢幕的時候 1個一行

3.案例三-布局首頁

(1)需求:當螢幕為小螢幕的時候和超小螢幕的時候隱藏熱門商品中的左邊那張

當螢幕為超小螢幕隱藏middle

(2)技術分析:bootstrap(柵格系統),hidden-***

(3)步驟分析:

a.布局頁面

b.建立5個div

c.第乙個:logo

3個div 

小螢幕   二個一行 

超小螢幕 乙個一行

d.第二個div:導航條

e.第三個div:輪播圖

f.第四個div:最新商品

先分成左右兩個div

左邊的div 放一張 

螢幕為小螢幕的時候和超小螢幕的時候 隱藏

中等螢幕 佔2份

右邊的div 

中等螢幕 佔10份

螢幕為小螢幕的時候和超小螢幕的時候 佔12份

middle 

中等螢幕  6份

小螢幕      12份

超小螢幕  隱藏

商品:中等螢幕  2份

小螢幕       4份

超小螢幕  12份    

hashMap hashtable知識點總結

a hashmap實際上是乙個 鍊錶雜湊 的資料結構,即陣列和鍊錶的結合體。hashmap的底層結構是乙個陣列,陣列中的每一項是一條鍊錶。b hashmap的例項有倆個引數影響其效能 初始容量 和 裝填因子。c hashmap實現不同步,執行緒不安全。hashtable執行緒安全 d hashmap...

Se Map Proxy Symbol知識點總結

se map proxy symbol總結 是es6中新增的乙個資料結構。可以理解為乙個內容不可重複的陣列 初始化 常用方法和屬性 add item 用於向set物件內新增一項 item 被新增的項 注 如果新增的是已經存在的內容 則新增失敗 var set new set 0,1,2,3,set....

Robotframework變數知識點總結

目錄 scarlar變數 變數使用 list變數 變數使用 list 元素的使用 變數轉換 其他變數 變數檔案 一,變數與常量 變數都用表示。變數主要有兩類 scalar類和list類。scalar 類表示為 list類表示為 rf的底層語法是python,所以不需要特別宣告變數,只需要進行初始化賦...