【JAVAWEB學習筆記】07
今天主要學習了BootStrap，viewport的介紹和最後對網站進行了重構
今天晨讀單詞：
Compatible:兼容性
viewport：視口
device：設備
initial：初始化(縮寫init)
Template：模板
scale：縮放
container：容器
fluid：液體，流
navbar：導航條
icon：圖標
dropdown：向下
separator：分割
group：組
current：當前
inverse：相反的
active：激活
default：默認的
item：項
Viewport介紹
一、Viewport的概念
通俗的講，移動設備上的viewport就是設備的屏幕上能用來顯示我們的網頁的那一塊區域
二、css中的1px並不等於設備的1px
在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個像素往往都是對應著電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺，那就是css 中的像素就是設備的物理像素。但實際情況卻並非如此，css中的像素只是一個抽象的單位，在不同的設備或不同的環境中，css中的1px所代表的設備物理 像素是不同的。在為桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。在早先的移動設備中，屏幕像素密度都比較低，如 iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等於一個屏幕物理像素的。後來隨著技術的發展，移動設備的屏幕像 素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著 同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等於兩個物理像素的。其他品牌的移動設備也是這個道理。例如安卓設備根據屏幕像素密度可分為 ldpi、mdpi、hdpi、xhdpi等不同的等級，分辨率也是五花八門，安卓設備上的一個css像素相當於多少個屏幕物理像素，也因設備的不同而不 同，沒有一個定論。
還有一個因素也會引起css中px的變化，那就是用戶縮放。例如，當用戶把頁面放大一倍，那麽css中1px所代表的物理像素也會增加一倍；反之把頁面縮小一倍，css中1px所代表的物理像素也會減少一倍。
三、利用meta標簽對viewport進行控制
我們在開發移動設備的網站時，最常見的的一個動作就是把下面這個東西復制到我們的head標簽中：
<meta name="viewport" content="width=device-width[ThinkPad1] , initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
該meta標簽的作用是讓當前viewport的寬度等於設備的寬度，同時不允許用戶手動縮放。也不允許用戶縮放不同的網站有不同的要求，但讓 viewport的寬度等於設備的寬度，這個應該是大家都想要的效果，如果你不這樣的設定的話，那就會使用那個比屏幕寬的默認viewport，也就是說會出現橫向滾動條。
meta viewport 標簽首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動設備的viewport問題。後來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支持，事實也證明這個東西還是非常有用的。
在蘋果的規範中，meta viewport 有6個屬性(暫且把content中的那些東西稱為一個個屬性和值)，如下：
|
width |
設置layout viewport 的寬度，為一個正整數，或字符串"width-device" |
|
initial-scale |
設置頁面的初始縮放值，為一個數字，可以帶小數 |
|
minimum-scale |
允許用戶的最小縮放值，為一個數字，可以帶小數 |
|
maximum-scale |
允許用戶的最大縮放值，為一個數字，可以帶小數 |
|
height |
設置layout viewport 的高度，這個屬性對我們並不重要，很少使用 |
|
user-scalable |
是否允許用戶進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許 |
這些屬性可以同時使用，也可以單獨使用或混合使用，多個屬性同時使用時用逗號隔開就行了。
四、總結
第一，必須設置 meta viewport 標簽
如果不設置meta viewport標簽，那麽移動設備上瀏覽器默認的寬度值為800px，980px，1024px等這些，總之是大於屏幕寬度的。這裏的寬度所用的單位px都是指css中的px，它跟代表實際屏幕物理像素的px不是一回事。
第二、設置瀏覽器視口寬度為設備理想寬度
每個移動設備瀏覽器中都有一個理想的寬度，這個理想的寬度是指css中的寬度，跟設備的物理寬度沒有關系，在css中，這個寬度就相當於100%的 所代表的那個寬度。我們可以用meta標簽把viewport的寬度設為那個理想的寬度，如果不知道這個設備的理想寬度是多少，那麽用device- width這個特殊值就行了
<meta name="viewport" content="width=device-width[ThinkPad2] , initial-scale=1">
[ThinkPad1]要得到ideal viewport(理想視口)默認的layout viewport的寬度設為移動設備的屏幕寬度。因為meta viewport中的width能控制layout viewport的寬度，所以我們只需要把width設為width-device這個特殊的值就行了。
[ThinkPad2]瀏覽器的寬度設置為設備的理想寬度
重構後網站就變成響應式的了，很棒！！！！
重構的效果圖：
重構的代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--聲明文檔兼容模式，表示使用IE瀏覽器的最新模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--設置視口的寬度(值為設備的理想寬度)，頁面初始縮放值<理想寬度/可見寬度>-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
<title>使用插件建設網站</title>
<!-- 引入Bootstrap核心樣式文件 -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- 引入jQuery核心js文件 -->
<script src="../js/jquery-1.11.3.min.js"></script>
<!-- 引入BootStrap核心js文件 -->
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<!--標題部分-->
<div class="container">
<div class="row">
<div class="col-lg-3">
<img src="../img/logo2.png" class="img-responsive" />
</div>
<div class="col-lg-6">
<img src="../img/header.png" class="img-responsive" />
</div>
<div class="col-lg-3" style="margin-top: 15px;">
<a href="#">登陸</a>
<a href="#">註冊</a>
<a href="#">Engilsh</a>
</div>
</div>
</div>
<!--導航欄部分-->
<div class="container" style="margin-top: 10px;">
<nav class="navbar navbar-inverse">
<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" aria-expanded="false">
<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="#">Brand</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="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<!--輪播圖部分-->
<div class="container">
<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" aria-hidden="true"></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" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="container">
<div class="row">
<span style="font-size: 30px;">熱門商品</span>
<img src="../img/title2.jpg" />
</div>
<div class="row">
<div class="col-lg-2 visible-lg" ><!--style="border: 1px solid red;"-->
<img src="../img/big01.jpg" height="435px"/>
</div>
<div class="col-lg-10"> <!--style="border: 1px solid red;"-->
<div class=" row" ><!--style="width: 945px;"-->
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" align="center" >
<img src="../img/middle01.jpg" class="img-responsive"/>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6" align="center " style="margin-top: 35px;">
<img src="../img/small05.jpg " />
<a href="# "><p><font color="gray ">咖啡機</font></p></a>
<a href="# "><p><font color="red ">￥999</font></p></a>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6" align="center " style="margin-top: 35px;">
<img src="../img/small05.jpg "/>
<a href="# "><p><font color="gray ">咖啡機</font></p></a>
<a href="# "><p><font color="red ">￥999</font></p></a>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6" align="center " style="margin-top: 35px;">
<img src="../img/small05.jpg "/>
<a href="# "><p><font color="gray ">咖啡機</font></p></a>
<a href="# "><p><font color="red ">￥999</font></p></a>
</div>
</div>
<div class="row" >
<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6" align="center " style="margin-top: 20px;">
<img src="../img/small05.jpg "/>
<a href="# "><p><font color="gray ">咖啡機</font></p></a>
<a href="# "><p><font color="red ">￥999</font></p></a>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6" align="center " style="margin-top: 20px;">
<img src="../img/small05.jpg "/>
<a href="# "><p><font color="gray ">咖啡機</font></p></a>
<a href="# "><p><font color="red ">￥999</font></p></a>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6" align="center " style="margin-top: 20px;">
<img src="../img/small05.jpg "/>
<a href="# "><p><font color="gray ">咖啡機</font></p></a>
<a href="# "><p><font color="red ">￥999</font></p></a>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6" align="center " style="margin-top: 20px;">
<img src="../img/small05.jpg "/>
<a href="# "><p><font color="gray ">咖啡機</font></p></a>
<a href="# "><p><font color="red ">￥999</font></p></a>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6" align="center " style="margin-top: 20px;">
<img src="../img/small05.jpg "/>
<a href="# "><p><font color="gray ">咖啡機</font></p></a>
<a href="# "><p><font color="red ">￥999</font></p></a>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6" align="center " style="margin-top: 20px;">
<img src="../img/small05.jpg "/>
<a href="# "><p><font color="gray ">咖啡機</font></p></a>
<a href="# "><p><font color="red ">￥999</font></p></a>
</div>
</div>
</div>
</div>
</div>
<!--<div class=" row" >
<div class="col-lg-12">
<img src="../img/middle01.jpg" class="img-responsive"/>
</div>
</div>-->
</body>
</html>
【JAVAWEB學習筆記】07