【JAVAWEB學習筆記】07_BootStrap、Viewport介紹

時間  2019-11-21
標籤 JAVAWEB學習筆記 bootstrap viewport 介紹 欄目 Bootstarp 简体版
原文   原文鏈接

今天主要學習了BootStrap，viewport的介紹和最後對網站進行了重構css

今天晨讀單詞：html

Compatible:兼容性
viewport：視口
device：設備
initial：初始化(縮寫init)
Template：模板
scale：縮放
container：容器
fluid：液體，流
navbar：導航條
icon：圖標
dropdown：向下
separator：分割
group：組
current：當前
inverse：相反的
active：激活
default：默認的
item：項jquery

 

Viewport介紹web

1、Viewport的概念bootstrap

通俗的講，移動設備上的viewport就是設備的屏幕上能用來顯示咱們的網頁的那一塊區域，在具體一點，就是瀏覽器上(也多是一個app中的webview)用來顯示網頁的那部分區域，但viewport又不侷限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域要小。在默認狀況下，通常 來說，移動設備上的viewport都是要大於瀏覽器可視區域的，這是由於考慮到移動設備的分辨率相對於桌面電腦來講都比較小，因此爲了能在移動設備上正 常顯示那些傳統的爲桌面瀏覽器設計的網站，移動設備上的瀏覽器都會把本身默認的viewport設爲980px或1024px（也多是其它值，這個是由 設備本身決定的），但帶來的後果就是瀏覽器會出現橫向滾動條，由於瀏覽器可視區域的寬度是比這個默認的viewport的寬度要小的。下圖列出了一些設備上瀏覽器的默認viewport的寬度。瀏覽器

2、css中的1px並不等於設備的1pxapp

在css中咱們通常使用px做爲單位，在桌面瀏覽器中css的1個像素每每都是對應着電腦屏幕的1個物理像素，這可能會形成咱們的一個錯覺，那就是css 中的像素就是設備的物理像素。但實際狀況卻並不是如此，css中的像素只是一個抽象的單位，在不一樣的設備或不一樣的環境中，css中的1px所表明的設備物理 像素是不一樣的。在爲桌面瀏覽器設計的網頁中，咱們無需對這個津津計較，但在移動設備上，必須弄明白這點。在早先的移動設備中，屏幕像素密度都比較低，如 iphone3，它的分辨率爲320x480，在iphone3上，一個css像素確實是等於一個屏幕物理像素的。後來隨着技術的發展，移動設備的屏幕像 素密度愈來愈高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提升了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味着 一樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等於兩個物理像素的。其餘品牌的移動設備也是這個道理。例如安卓設備根據屏幕像素密度可分爲 ldpi、mdpi、hdpi、xhdpi等不一樣的等級，分辨率也是五花八門，安卓設備上的一個css像素至關於多少個屏幕物理像素，也因設備的不一樣而不 同，沒有一個定論。iphone

    還有一個因素也會引發css中px的變化，那就是用戶縮放。例如，當用戶把頁面放大一倍，那麼css中1px所表明的物理像素也會增長一倍；反之把頁面縮小一倍，css中1px所表明的物理像素也會減小一倍。ide

 

3、利用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表明容許

這些屬性能夠同時使用，也能夠單獨使用或混合使用，多個屬性同時使用時用逗號隔開就好了。

 

4、總結

    第一，必須設置 meta viewport 標籤

若是不設置meta viewport標籤，那麼移動設備上瀏覽器默認的寬度值爲800px，980px，1024px等這些，總之是大於屏幕寬度的。這裏的寬度所用的單位px都是指css中的px，它跟表明實際屏幕物理像素的px不是一回事。

    第2、設置瀏覽器視口寬度爲設備理想寬度

每一個移動設備瀏覽器中都有一個理想的寬度，這個理想的寬度是指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">
                &nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size: 30px;">熱門商品</span>&nbsp;&nbsp;&nbsp;
                <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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程