JavaWEB開發05_Bootstrap
上次課內容:
什麼JQ : write less do more 寫更少的代碼,作更多的事情 javascript函數庫javascript
基本選擇器:css
ID選擇器: #ID名稱html
類選擇器: .類名前端
元素選擇器: 元素的名稱java
通配符選擇器: * 找出頁面上全部元素jquery
選擇器分組: 選擇器1,選擇器2 [選擇器1 , 選擇器2] ajax
層級選擇器:json
後代選擇器: 選擇器1 選擇器2 找出來的選擇器1 下面的全部選擇器2 子孫bootstrap
子元素選擇器: 選擇器1 > 選擇器2 找出來的是全部的子節點 兒子數組
相鄰兄弟選擇器: 選擇器1+選擇器2 找出來的緊挨着本身的弟弟
兄弟選擇器: 選擇器1~選擇器2 找出全部的弟弟
(找出全部兄弟: $("div").siblings() )
屬性選擇器:
選擇器 div 選擇器[title] 選擇器[title='test'] 選擇器[title='test'][style]
基本的過濾器: 選擇器:過濾器 $("div:first")
:first : 找出第一個元素
:last 找出最後一個元素
:even 找出偶數索引
:odd 找出奇數
:gt(index) greater-than大於
:lt(index) 小於
:eq(index) 等於
表單選擇器:
:input 找出全部的輸入項, textarea select button
:password
:text
:radio
表單對象屬性的過濾器
:selected
:checked
經常使用函數:
屬性prop() properties
若是傳入一個參數 就是獲取
prop("src","../img/1.jpg");
設置圖片路徑
attr : 操做一些自定義的屬性 <img abc='123' />
prop: 一般是用來操做元素固有屬性的 ,建議你們使用prop來操做屬性
css() ; 修改css樣式
addClass() : 添加一個class樣式
removeClass() : 移除
blur : 綁定失去焦點
focus: 綁定得到焦點事件
click:
dblclick
change
append : 給本身添加兒子
appendTo : 把本身添加到別人家
prepend : 在本身子節點最前面添加子節點
after : 在本身後面添加一個兄弟
before: 在本身前面添加一個兄弟
$("數組對象").each(function(index,data))
$.each(arr,function(index,data))
表單校驗案例
技術分析
- trigger : 觸發事件,可是會執行相似瀏覽將光標移到輸入框內的這種瀏覽器默認行爲
- triggerHandler : 僅僅只會觸發事件所對應的函數
- is()
步驟分析
- 首先給必填項,添加尾部添加一個小紅點
- 獲取用戶輸入的信息,作相應的校驗
- 事件: 得到焦點, 失去焦點, 按鍵擡起
- 表單提交的事件
代碼實現
使用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>
校驗表單擴展:
trigger : 觸發瀏覽器默認行爲
triggerHandler : 不會觸發
is : 判斷
find : 查找
老黃曆:
什麼json: 輕量級的數據交換格式
json對象: {"username":"zhangsan"}
json數組: [ {"username":"zhangsan"}, {"username":"zhangsan"}, {"username":"zhangsan"}]
ajax異步請求:
同步和異步
-
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
- 「行（row）」必須包含在
-
BootStrap的柵格系統
- 響應式設計: 這種設計依賴於CSS3中的媒體查詢
-
柵格樣式:
- 設備分辨率大於1200 使用lg樣式
- 設備分辨率大於992 < 1200 使用md樣式
- 設備分辨率大於768 < 992 使用sm樣式
- 設備分辨率小於768使用xs樣式
-
BootStrap的全局CSS
-
定義了一套CSS
- 對頁面中的元素進行定義
- 列表元素,表單,按鈕,圖片...
-
步驟分析
代碼實現
使用BootStrap佈局網站首頁
需求分析
請使用BootStrap對咱們的首頁進行優化
技術分析
步驟分析
- 新建一個HTML頁面.引入bootStrap相關的js和CSS
- 定義一個總體的div, 將總體的div分紅8個部分
- 完成沒部分的內容顯示
代碼實現
<!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 -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../img/1.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="../img/2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="../img/3.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!--最新商品這裏-->
<div class="row">
<div class="col-md-12">
<h3>最新商品<img src="../images/title2.jpg"/></h3>
</div>
</div>
<!--商品部分 -->
<div class="row">
<!--左邊div-->
<div class="col-md-2 hidden-sm hidden-xs">
<img src="../products/hao/big01.jpg" width="100%" height="100%" />
</div>
<!--右邊div-->
<div class="col-md-10">
<!--上面部分-->
<div class="row">
<!--中等廣告圖-->
<div class="col-md-6">
<img src="../products/hao/middle01.jpg" width="100%" />
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
</div>
<!--下面部分-->
<div class="row">
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="../products/hao/ad.jpg" width="100%" />
</div>
</div>
<!--最新商品這裏-->
<div class="row">
<div class="col-md-12">
<h3>最新商品<img src="../images/title2.jpg"/></h3>
</div>
</div>
<!--商品部分 -->
<div class="row">
<!--左邊div-->
<div class="col-md-2 hidden-sm hidden-xs">
<img src="../products/hao/big01.jpg" width="100%" height="100%" />
</div>
<!--右邊div-->
<div class="col-md-10">
<!--上面部分-->
<div class="row">
<!--中等廣告圖-->
<div class="col-md-6">
<img src="../products/hao/middle01.jpg" width="100%" />
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
</div>
<!--下面部分-->
<div class="row">
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
<!--商品項-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆漿機</p>
<p>$998</p>
</div>
</div>
</div>
</div>
<!--頁腳廣告-->
<div>
<img src="../image/footer.jpg" width="100%" />
</div>
<!--網站聲明-->
<div style="text-align: center;">
<a href="http://www.itheima.com">關於咱們</a>
<a href="http://www.itheima.com">聯繫咱們</a>
<a href="http://www.itheima.com">招賢納士</a>
<a href="http://www.itheima.com">法律聲明</a>
<a href="http://www.itheima.com">友情連接</a>
<a href="http://www.itheima.com">支付方式</a>
<a href="http://www.itheima.com">配送方式</a>
<a href="http://www.itheima.com">服務聲明</a>
<a href="http://www.itheima.com">廣告聲明</a>
<br />
Copyright © 2005-2016 傳智商城 版權全部
</div>
</div>
</body>
</html>
五天前端內容總結
- JQ方式校驗表單(要求作出來)
-
json : (瞭解)
- json對象 {}
- json數組 [{},{}]
- $.get(url,function(data){}) (瞭解)
-
bootstrap: Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式佈局、移動設備優先的 WEB 項目。
-
全局CSS樣式: css樣式
-
柵格系統:
- 將屏幕劃分紅12個格子,12列
- class='row' 當前是行
- 行裏面放的是列 col-屏幕分辨率-數字 (每一種分辨率後的數字總和必須是等於12,若是超過12,另起一行)
- col-lg-數字: 在超寬屏幕上使用
- col-md-數字: 在中等屏幕上,PC電腦
- col-sm-數字: 在平板電腦上
- col-xs-數字: 在手機上
-
- 組件: 導航條 , 進度條, 字體
- javascript插件 : 輪播圖
- 複製粘貼
-
- 什麼是響應式: 會根據不一樣的分辨率去顯示不一樣頁面結構,提升用戶體驗
- HTML: 超文本標記語言: 設計網頁,決定了網頁的結構
- CSS: 層疊樣式表 ,主要是用來美化頁面, 將美化和HTML代碼進行分離,提升代碼複用性
- javascript: 腳本語言,由瀏覽器解釋執行, 弱類型語言(var i), 提供用戶交互
-
jquery: javascript函數庫,進一步的封裝
-
選擇器:
- ID選擇器
- 類選擇器
- 元素選擇器
- 通配符選擇器
- 選擇器分組
-
層級選擇器
- 後代選擇器
- 子元素選擇器
- 相鄰兄弟選擇器
- 兄弟選擇器 : 找出全部的弟弟
-
屬性選擇器:
- 選擇器[屬性名稱='屬性的值']
-
表單選擇器
- :input
- :text
- :password
-
body > div > div:nth-child(7) > div:nth-child(3) > div:nth-child(8)
-
基本的過濾器
- :first
- :last
- :even
- :odd
- :gt
- :lt
- :eq
-
表單對象屬性
- :selected
- :checked
相關文章
- 1. JAVAweb開發（一）javaweb概述
- 2. JavaWeb之JavaWeb開發入門
- 3. javaweb開發
- 4. JavaWeb開發
- 5. javaweb Servlet開發
- 6. JavaWeb - Servlet開發
- 7. javaweb開發之jsp開發
- 8. JavaWeb開發01——Servlet
- 9. JavaWeb開發入門
- 10. JavaWeb——JSP開發1
- 更多相關文章...
- • Spring使用AspectJ開發AOP：基於XML和基於Annotation - Spring教程
- • ionic 切換開關操作 - ionic 教程
- • PHP開發工具
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. No provider available from registry 127.0.0.1:2181 for service com.ddbuy.ser 解決方法
- 2. Qt5.7以上調用虛擬鍵盤(支持中文)，以及源碼修改(可拖動，水平縮放)
- 3. 軟件測試面試- 購物車功能測試用例設計
- 4. ElasticSearch（概念篇）：你知道的, 爲了搜索…
- 5. redux理解
- 6. gitee創建第一個項目
- 7. 支持向量機之硬間隔（一步步推導，通俗易懂）
- 8. Mysql 異步複製延遲的原因及解決方案
- 9. 如何在運行SEPM配置嚮導時將不可認的複雜數據庫密碼改爲簡單密碼
- 10. windows系統下tftp服務器使用
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. JAVAweb開發（一）javaweb概述
- 2. JavaWeb之JavaWeb開發入門
- 3. javaweb開發
- 4. JavaWeb開發
- 5. javaweb Servlet開發
- 6. JavaWeb - Servlet開發
- 7. javaweb開發之jsp開發
- 8. JavaWeb開發01——Servlet
- 9. JavaWeb開發入門
- 10. JavaWeb——JSP開發1