2. 程式人生 > >BootStrap基礎知識總結

BootStrap基礎知識總結

阿新 • • 發佈：2018-11-28

文章目錄

目標

掌握什麼是響應式及響應式的原理

掌握BootStrap的柵格系統

瞭解BootStrap的其他元件及JS控制元件

表單校驗案例

技術分析

  • trigger : 觸發事件,但是會執行類似瀏覽將游標移到輸入框內的這種瀏覽器預設行為
  • triggerHandler : 僅僅只會觸發事件所對應的函式
  • is()

步驟分析

  1. 首先給必填項,新增尾部新增一個小紅點
  2. 獲取使用者輸入的資訊,做相應的校驗
  3. 事件: 獲得焦點, 失去焦點, 按鍵擡起
  4. 表單提交的事件

程式碼實現

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="../css/style.css" />
		<title></title>
		<!--
			1. 首先給必填項,新增尾部新增一個小紅點
			2. 獲取使用者輸入的資訊,做相應的校驗
			3. 事件: 獲得焦點, 失去焦點, 按鍵擡起
			4. 表單提交的事件
			
			Jq的方式來實現:
				1. 匯入JQ的檔案
				2. 文件載入事件: 在必填項後天加一個小紅點
				3. 表單校驗確定事件: blur focus keyup
				4. 提交表單 submit
		-->
 

		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			
			$(function(){  //預設做一些頁面初始化
				//動態在必填項後面新增小紅點
				$(".bitian").after("<font class='high'>*</font>");
				
				//給必填項繫結事件
				$(".bitian").blur(function(){
					//首先獲取使用者當前輸入的值
					var value = this.value; //123
					//清空上一次提示的資訊
					$(this).parent().find(".formtips").remove();
					
					//判斷當前的值是哪一項輸入的值
					if($(this).is("#username")){  //判斷是否是使用者名稱輸入項
						if(value.length < 6){
							$(this).parent().append("<span class='formtips onError'>使用者名稱太短了</span>");
						}else{
							$(this).parent().append("<span class='formtips onSuccess'>使用者名稱夠用</span>");
						}
					}
					
					if($(this).is("#password")){  //判斷是否是密碼輸入項
						if(value.length < 6){
							$(this).parent().append("<span class='formtips onError'>,密碼太短了</span>");
						}else{
							$(this).parent().append("<span class='formtips onSuccess'>密碼夠用</span>");
						}
					}
				}).focus(function(){
					$(this).triggerHandler("blur");
				}).keyup(function(){
					$(this).triggerHandler("blur");
				})
				
				
				
				//給表單提交繫結事件
				$("form").submit(function(){
					//觸發所有必填項的校驗
					$(".bitian").trigger("focus");
					//找到錯誤資訊的個數
					if($(".onError").length > 0){
						return false;
					}
					return true;
				});
			});
			
			
			
			
			
			
			
		/*	
			$(function(){
				// 在所有必填項後天加一個小紅點 *
				$(".bitian").after("<font class='high'>*</font>");
				
				//事件繫結
				$(".bitian").blur(function(){
//					var value = this.value;
					var value = $(this).val();
					//清空當前必填項後面的span 
//					$(".formtips").remove();
					$(this).parent().find(".formtips").remove();
					//獲得當前事件是誰的
					if($(this).is("#username")){
						//校驗使用者名稱
						if(value.length < 6){
							$(this).parent().append("<span class='formtips onError'>使用者名稱太短了</span>");
						}else{
							$(this).parent().append("<span class='formtips onSuccess'>使用者名稱夠用</span>");
						}
					}
					
					if($(this).is("#password")){
						//校驗密碼
						if(value.length < 3){
							$(this).parent().append("<span class='formtips onError'>密碼太短了</span>");
						}else{
							$(this).parent().append("<span class='formtips onSuccess'>密碼夠用</span>");
						}
					}
				}).focus(function(){
					$(this).triggerHandler("blur");
				}).keyup(function(){
					$(this).triggerHandler("blur");
				});
				
//				$(".bitian").blur(function(){}).focus(function(){}).keyup(function(){})

				//給表單繫結提交事件
				$("form").submit(function(){
					//觸發必填項的校驗邏輯
					$(".bitian").trigger("focus");
					
					var length = $(".onError").length
					if(length > 0){
						return false;
					}
					return true;
				});
			});*/
			
		</script>
	</head>
	<body>
		<form action="../index.html">
			<div>
				使用者名稱:<input type="text" class="bitian" id="username" />
			</div>
			<div>
				密碼:<input type="password"  class="bitian" id="password" />
			</div>
			<div>
				手機號:<input type="tel" />
			</div>
			<div>
				<input type="submit" />
			</div>
		</form>
	</body>
</html>

使用JQuery傳送請求區域性重新整理頁面

​ 資料交換格式:

​ json

​ xml

​

  • 什麼是JSON

    JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。它基於ECMAScript的一個子集。 JSON採用完全獨立於語言的文字格式，但是也使用了類似於C語言家族的習慣（包括C、C++、C#、Java、JavaScript、Perl、Python等）。這些特性使JSON成為理想的資料交換語言。 易於人閱讀和編寫，同時也易於機器解析和生成(一般用於提升網路傳輸速率)。

  • JSON格式

    ​ JSON物件

    { key1:value}   
{"username":"zhangsan","password":"123"}

    ​ JSON陣列

    [{ key1:value},{ key1:value},{ key1:value}]

    ​

使用BootStrap開發一個響應式的頁面出來

需求分析

開發一套響應式頁面.讓他能夠在各種裝置上顯示正常,提升使用者體驗

技術分析

BootStap概述

  • 什麼是BootStrap

    ​

  • BootStrap有什麼作用

    • 提高開發人員的工作效率

  • 什麼是響應式頁面

    • 適應不同的解析度顯示不同樣式,提高使用者的體驗

      ​

  • BootStrap的中文網

  • 下載BootStrap

  • BootStrap結構

    • 全域性CSS
      • bootStrap中已經定義好了一套CSS的樣式表
    • 元件
      • BootStrap定義的一套按鈕,導航條等元件
    • JS外掛
      • BootStrap定義了一套JS的外掛,這些外掛已經預設實現了很多種效果
BootStrap的入門開發
  • 引入相關的標頭檔案
		<!-- 最新版本的 Bootstrap 核心 CSS 檔案 -->
		<link rel="stylesheet" href="../css/bootstrap.css" />
		
		<!--需要引入JQuery-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		
		<!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
		<script type="text/javascript" src="../js/bootstrap.js" ></script>
		
		<meta name="viewport" content="width=device-width, initial-scale=1">
  • BootStrap的佈局容器

.container 類用於固定寬度並支援響應式佈局的容器。

<div class="container">
  ...
</div>

.container-fluid 類用於 100% 寬度，佔據全部視口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

  • row

    Bootstrap 柵格系統的工作原理：

    • “行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。
    • 通過“行（row）”在水平方向建立一組“列（column）”。
    • 你的內容應當放置於“列（column）”內，並且，只有“列（column）”可以作為行（row）”的直接子元素。
    • 類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速建立柵格佈局。Bootstrap 原始碼中定義的 mixin 也可以用來建立語義化的佈局。
    • 通過為“列（column）”設定 padding 屬性，從而建立列與列之間的間隔（gutter）。通過為 .row 元素設定負值 margin 從而抵消掉為 .container 元素設定的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding

    ​

  • BootStrap的柵格系統

    • 響應式設計: 這種設計依賴於CSS3中的媒體查詢
    • 柵格樣式:
      • 裝置解析度大於1200 使用lg樣式
      • 裝置解析度大於992 < 1200 使用md樣式
      • 裝置解析度大於768 < 992 使用sm樣式
      • 裝置解析度小於768使用xs樣式

  • BootStrap的全域性CSS

    • 定義了一套CSS
      • 對頁面中的元素進行定義
      • 列表元素,表單,按鈕,圖片…

使用BootStrap佈局網站首頁

需求分析

請使用BootStrap對我們的首頁進行優化

技術分析

步驟分析

  1. 新建一個HTML頁面.引入bootStrap相關的js和CSS
  2. 定義一個整體的div, 將整體的div分成8個部分
  3. 完成沒部分的內容顯示

程式碼實現

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			準備工作:
			<meta name='viewport'>
			1.匯入bootstrap css檔案
			2.匯入JQuery
			3.bootstrap.js
			
			4.寫一個div  class = container 支援響應式的佈局容器
			
		-->
		<link rel="stylesheet" href="../css/bootstrap.min.css">

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

		<!--
			
		jQuery檔案。務必在bootstrap.min.js 之前引入
		 -->
		<script src="../js/jquery-1.11.0.js"></script>

		<!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
		<script src="../js/bootstrap.min.js"></script>

	</head>

	<body>
		<div class="container">

			<div class="row">
				<div class="col-md-4">
					<img src="../img/logo2.png" />
				</div>
				<div class="col-md-4 hidden-xs">
					<img src="../img/header.png" />
				</div>
				<div class="col-md-4">
					<a href="#">登入</a>
					<a href="#">註冊</a>
					<a href="#">購物車</a>
				</div>
			</div>

			<!--選單-->
			<div class="row">
				<div class="col-md-12">
					<nav class="navbar navbar-inverse" role="navigation">
						<div class="container-fluid">
							<!-- Brand and toggle get grouped for better mobile display -->
							<div class="navbar-header">
								<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						        <span class="sr-only">Toggle navigation</span>
						        <span class="icon-bar"></span>
						        <span class="icon-bar"></span>
						        <span class="icon-bar"></span>
						      </button>
								<a class="navbar-brand" href="#">首頁</a>
							</div>

							<!-- Collect the nav links, forms, and other content for toggling -->
							<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
								<ul class="nav navbar-nav">
									<li class="active">
										<a href="#">手機數碼</a>
									</li>
									<li>
										<a href="#">鞋靴箱包</a>
									</li>
									<li>
										<a href="#">電腦辦公</a>
									</li>
									<li class="dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown">所有分類 <span class="caret"></span></a>
										<ul class="dropdown-menu" role="menu">
											<li>
												<a href="#">手機數碼</a>
											</li>
											<li>
												<a href="#">鞋靴箱包</a>
											</li>
											<li>
												<a href="#">電腦辦公</a>
											</li>
											<li class="divider"></li>
											<li>
												<a href="#">Separated link</a>
											</li>
											<li class="divider"></li>
											<li>
												<a href="#">One more separated link</a>
											</li>
										</ul>
									</li>
								</ul>
								<form class="navbar-form navbar-right" role="search">
									<div class="form-group">
										<input type="text" class="form-control" placeholder="請輸入要搜尋的商品">
									</div>
									<button type="submit" class="btn btn-default">搜尋</button>
								</form>

							</div>
							<!-- /.navbar-collapse -->
						</div>
						<!-- /.container-fluid -->
					</nav>
				</div>
			</div>

			<div>
				<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
   
 

            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
BootStrap基礎知識總結

     
  
 
  
  
 
 
  文章目錄
  
   
    
     目標
     
      掌握什麼是響應式及響應式的原理
      掌握BootStrap的柵格系統
      瞭解BootStrap的其他元件及JS控制元件
     
     表單校驗案例
     
      技術分 



  
 

    


    
    
前端基礎知識總結

     
 pla   部分   一個   知識   法則   總結   情況   元素   保存   一、html中alt和title的區別
1.alt是圖片的屬性值，當圖片無法加載的時候，會用alt屬性的值來替換圖片。
2.而title是圖片的標題，當鼠標移動到圖片上時，會顯示圖片的名稱。
 
[email  



  
 

    


    
    
工作中能用到的基礎知識總結（二）

     
 protected   構造函數   blog   繼承鏈   附加   調用   初始化   傳統   -s   簡介
       繼承、封裝和多態是面向對象編程的重要特性。要想運用好，就必須熟悉這三種特性，本篇說說我對封裝、繼承和多態相關的知識總結。
知識點
一、訪問修飾符
     C#中類及 



  
 

    


    
    
基礎知識總結之  jdk部分

     
 比較   java_home   二進制   一模一樣   出現   path   解釋   字節碼   編譯   第一次安裝jdk 按照操作走完  會出現 C:\Program Files\Java\jdk1.8.0_91 和 C:\Program Files\Java\jre1.8.0_91 兩個目錄 （ 



  
 

    


    
    
操作系統基礎知識總結（一）

     
 一個   快速   會有   處理死鎖   b2c   fcm   死鎖   空間   存儲系統   1. 進程和線程的區別
進程
進程，即正在運行的程序，程序從硬盤載入到內存就變成進程。進程是資源的擁有者，每個進程都擁有著自己的內存空間與多個線程。
線程
線程是指令的執行者，是計算機執行指令的基本單元，一個 



  
 

    


    
    
正常性入職崗前培訓（非培訓機構的實習生入職培訓）---基礎知識總結

     
 希望   交通   說我   真的   spring   思路   query   mvc   data-   一：正常性大三實習生入職崗前培訓總結：

也許題目應該叫"那個矯情的大三實習生已經入職實習了"：
之前那個矯情的大三生寫的找工作的感受（上次是偏理論性，這次是實踐性出來找工作）：
一個忙著找 



  
 

    


    
    
Bootstrap基礎知識

     
 color   pac   定義   實現   back   ref   trap   tail   tab    bootstrap框架中的data-xxx 的屬性
如, data-toggle="table", 不加這個屬性，就不能實現框架自帶的js效果.
答:
1. 這個是自定義屬性。自己寫的，通 



  
 

    


    
    
HTML基礎知識總結

     
 博客園   arc   隱藏域   下拉列表框   後臺   羅馬   number   control   navigator   HTML基礎知識總結   

 
轉載文章- 原文地址：http://www.cnblogs.com/46ly/ 
經過這段時間的學習，對於html的一些基礎知識有了一定的了解 



  
 

    


    
    
網絡基礎知識總結

     
 tcp/ip協議   ip地址分類   子網劃分   計算機網絡的基礎，可以簡單的總結為以下條例；   Ⅰ.網絡層次的劃分    為了以便在更大範圍內建立計算機網絡，國際標準化組織（ISO）在1978年提出了“開放系統互聯網參考模型”，即著名的OSI（Open System Interconnection）模 



  
 

    


    
    
微信小程序開發基礎知識總結

     
 nodes   owa   wim   remove   ide   rdd   custom   value   onload   微信小程序在無論在功能、文檔及相關支持方面，都是優於前面幾種微信賬號類型，它提供了很多原生程序才有的接口，使得我們的小程序在很多方面突破H5頁面應用的限制，更加接近原生程序的功 



  
 

    


    
    
作用域-基礎知識總結------彭記（07）

     
 ()   基礎知識   如果   成了   size   ron   查找   搜索   log   作用域
1.變量起作用的範圍
-一個變量的作用域就是從這個變量定義開始到這個變量所在的{}結束
2.在js中，只有函數可以創建作用域
-沒有塊級作用域--意味著在if或者for中定義的變量在它們的外部也能夠訪 



  
 

    


    
    
嚴格模式-基礎知識總結------彭記（015）

     
 sign   htm   property   mode   font   uncaught   ron   type   無效   嚴格模式

<script>
    /*嚴格模式*/
    "use strict";
    /*如果同時定義多個同名的變量，後面的將前面的覆蓋*/
     



  
 

    


    
    
計算機網絡基礎知識總結

     
 組播   設備驅動   失敗   所有   傳輸過程   reference   自動   網段   次方   
 轉自：http://www.cnblogs.com/maybe2030/p/4781555.html#top
閱讀目錄

1. 網絡層次劃分
2. OSI七層網絡模型
3. IP地址
4. 子網 



  
 

    


    
    
js中eval，arguments與異常處理的用法-基礎知識總結------彭記（017）

     
 報錯   字符串   nts   字符   number   拖動   ron   cnblogs   數組   eval的使用：
 

<script>
    /*eval的作用：
    * 1.將字符串當成js代碼來執行
    * 2.可以將json格式的字符串轉換為js對象*/

   



  
 

    


    
    
laravel  基礎知識總結

     
 arr   -c   rem   條件   -type   存在   line   網站   int   1.請求類型
get , put , post , patch , delete 等
2.路由訪問方式
get , post , any , match([‘get‘,post])
3.路由傳參
Rout 



  
 

    


    
    
事件流，事件捕獲與事件冒泡-基礎知識總結------彭記（018）

     
 sca   ie9   com   pre   類型   har   code   做出   viewport   事件流：
-事件流包括三個階段-事件捕獲階段、處於目標階段和事件冒泡階段。
-首先發生的是事件捕獲，為截獲事件提供了機會，然後是實際的目標接收到事件，最後一個階段是冒泡階段，可以在這個階段對事件 



  
 

    


    
    
模擬QQ聊天與視頻聊天同時進行-------java基礎知識總結

     
 span   img   mage   java基礎知識   java基礎   @override   args   pub   spa   前言：多線程的知識
代碼：


 1 package com.day13.math;
 2 /** 
 3 * 類說明 :模擬QQ聊天與視頻聊天同時進行
 4 * @a 



  
 

    


    
    
UNIX SHELL基礎知識總結(二)

     
 chm   shell基礎   文件夾   丟失   查看   .cn   exec   log   ges   1. vim,vi及ex的關系
vim不需要安裝，vi為ex的“Visual Mode”,Vim是vi的高級版本；
2. Unix Shell 快捷鍵
Ctrl+a/e將光標定位到 命令的頭/尾
 



  
 

    


    
    
構造方法和一般方法的區別（面試）-----java基礎知識總結

     
 col   進行   span   round   構造方法   基礎知識   fff   font   size   
構造方法：對象創建時，就會調用與之對應的構造方法，對對象進行初始化；

           一般方法：對象創建後，需要方法功能時才會調用。

構造方法，在對象創建時，會調用且只調用一次。 



  
 

    


    
    
python基礎知識總結

     
 基礎   roc   python基礎   C4D   water   pytho   tex   ima   adf   python基礎知識總結