bootstrap:

• webcss框架,
• 集合了html/css/jquery為一家
• 建立響應式的頁面
• 響應式:適配不同的上網裝置

bootstarp的入門

1. 下載bootstarp

   網站:http://www.bootcss.com/
   下載:用於生產環境的 Bootstrap
   

2. 匯入bootstarp.css

3. 匯入jquery.js

4. 匯入bootstrap.js

5. 新增一個meta標籤 支援移動裝置

   <meta name="viewport" content="width=device-width, initial-scale=1">
    
   

6. 將所有的內容放入到佈局容器中.

   Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。我們提供了兩個作此用處的類
   方式1:
   	<div class="container"></div>
   方式1:
   	<div class="container-fluid"></div>
   

7. 注意:

   bootstrap將每一行分成12份

8. 媒體查詢:

   假如大螢幕,每行顯示6個
   超大電腦,螢幕解析度>1200 使用: col-lg-2

   假如螢幕小點,每行顯示4個
   992<螢幕解析度<1200 使用: col-md-3

   再小點,每行顯示2個
   768<螢幕解析度<992 使用: col-sm-6

   繼續小,每行顯示1個
   螢幕解析度<768 使用:col-xs-12

bootstrap組成部分:

全域性css樣式--定義了一套css樣式
元件--定義了很多可以直接使用的元件 例如:字型圖示 導航條 
js外掛--例如:輪播圖 選項卡

validate使用步驟:

validate是別人封裝好的第三方工具
1.匯入jquery.js
2.匯入validate.js
3.在頁面載入成功之後 對錶單進行校驗  $("選擇器").validate()
4.在validate中編寫校驗規則
	$("選擇器").validate({
		rules:{},
		messages:{}
	});

rules格式:
	格式1:
		欄位的name屬性:"校驗器"
	格式2:				
		欄位的name屬性:{校驗器:值,校驗器:值}
例如:
	username:"required",
	password:{
		required:true,
		digits:true
	},
	repassword:{
		equalTo:"[name='password']"
	},
	zuixiaozhi:{
		min:5
	},
	shuzhiqujian:{
		range:[5,10]
	}
 

messages的格式:

格式1:
	欄位的name屬性:"提示資訊"
格式2:
	欄位的name屬性:{校驗器:"提示資訊",校驗器:提示資訊"}

例如:

username:"使用者名稱不能為空",
password:{
	required:"密碼不能為空",
	digits:"密碼只能是數字"
},
repassword:{
	equalTo:"兩次輸入的內容不一致"
},
zuixiaozhi:{
	min:"最小值應該大於{0}"
},
shuzhiqujian:{
	range:"輸入的範圍在{0}~{1}之間"
}