14,前端-animate.css-jquery插件介紹-@media媒體查詢-移動端單位-bootstrap

時間 2019-11-20

標籤前端 animate.css animate css jquery 插件介紹 media 媒體查詢移動單位 bootstrap 欄目 CSS 简体版

原文原文鏈接

前端-animate.css-jquery插件介紹-@media媒體查詢-移動端單位-bootstrapjavascript

jqueryUI官網css

https://jqueryui.com/html

jqueryUI 中文網：前端

http://www.jqueryui.org.cn/html5

官網demo：java

https://www.oschina.net/project/tag/273/jqueryjquery

Jquery UIwebpack

網址:www.jqueryui.org.cn/git

animate的使用,github

1,網址:https://daneden.github.io/animate.css/,點下面的:View on GitHub

2,進另外一個網址,https://github.com/daneden/animate.css

下載源碼;

http://www.jqueryui.org.cn/demo/5719.html

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
    <div class="animated bounce delay-2s">
        bounce
    </div>

    <button>動畫版</button>
    <div id="active">
        示例
    </div>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $('button').click(function(event) {

                $('#active').addClass('animated bounceOutLeft delay-2s');
            });

        })

    </script>
</body>
</html>

animate,示例代碼

拔網頁,

網址:http://www.jq22.com/

選擇一個要用的插件

1,右鍵-查看源代碼-搜索:iframe-找到以下的一行代碼

2,把src裏面的地址打開-右鍵-審查元素-source-按照文件目錄結構在磁盤建文件夾-把相應的內容拷貝到對應的文件夾裏.

移動端及響應式

m站,通常就是移動端站

響應式頁面

爲何作響應式頁面

由於電腦、平板、手機的屏幕是差距很大的，假如在電腦上寫好了一個頁面，在電腦上看起來沒問題，可是若是放到手機上的話，那可能就會亂了.之前的解決辦法，能夠再專門爲手機定製一個頁面，當用戶訪問的時候，判斷設備是手機仍是電腦，若是是手機就跳轉到相應的手機頁面，例如訪問百度,手機訪問www.baidu.com就會跳轉到m.baidu.com，到如今的開發了一種自適應寫法.

緣由

CSS3的@media查詢

使用 @media 查詢，你能夠針對不一樣的屏幕大小定義不一樣的樣式。 @media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式，特別是若是你須要設置設計響應式的頁面，@media 是很是有用的。當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面，這對調試來講是一個極大的便利。

@media mediaType and|not|only (media feature) {
     /*CSS-Code;*/
}

媒體類型（mediaType ）類型有不少，在這裏不一一列出來了，只列出了經常使用的幾個。

screen：用於電腦屏幕，平板電腦，智能手機等。（最經常使用） speech 應用於屏幕閱讀器等發聲設備媒體功能

media feature：

1.max-width:定義輸出設備中的頁面最大可見區域寬度

　　2.min-width:定義輸出設備中的頁面最小可見區域寬度

響應式頁面,

設置Meta標籤

首先咱們在使用 @media 的時候須要先設置下面這段代碼，來兼容移動設備的展現效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
有這行代碼的就是移動端的,

這段代碼的幾個參數解釋：

width = device-width：寬度等於當前設備的寬度

initial-scale：初始的縮放比例（默認設置爲1.0，即表明不縮放）

user-scalable：用戶是否能夠手動縮放（默認設置爲no，由於咱們不但願用戶放大縮小頁面）

min-width,就是最小寬度是設置值時,才顯示設置的樣式

max-width:就是能顯示設置的最大寬度,超過此寬度就再也不顯示設置的樣式,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <style>

    /*屏幕寬度小於800px,顯示藍色,800-1199px顯示綠色,1200以上顯示紅色,*/
        @media screen and (min-width: 1200px){
            body{
                background-color: red;
            }
        }

        @media screen and (min-width:800px) and (max-width: 1199px){
            body{
                background-color: green;
            }    
        }
        
        @media screen and (max-width: 800px){
            body{
                background-color: blue;
            }
        }
    </style>
</head>
<body>   
</body>
</html>

示例代碼

加載兼容文件JS

由於IE8既不支持HTML5也不支持CSS3 @media ，因此咱們須要加載兩個JS文件，來保證咱們的代碼實現兼容效果：

<!--[if lt IE 9]>
　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
　　<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

設置IE渲染方式默認爲最高(可選) 如今有不少人的IE瀏覽器都升級到IE9以上了，因此這個時候就有又不少詭異的事情發生了，例如如今是IE9的瀏覽器，可是瀏覽器的文檔模式倒是IE8 爲了防止這種狀況，咱們須要下面這段代碼來讓IE的文檔渲染模式永遠都是最新的

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

ps:這段代碼後面加了一個chrome=1，若是用戶的電腦裏安裝了 chrome，就可讓電腦裏面的IE不論是哪一個版本的均可以使用Webkit引擎及V8引擎進行排版及運算，若是沒有安裝，就顯示IE最新的渲染模式。

移動端單位介紹

W3C文檔把尺寸單位劃分爲兩類：相對長度單位和絕對長度單位

然而相對長度單位按照不一樣的參考元素，又能夠分爲字體相對單位和視窗相對單位

字體相對單位有：em、ex、ch、rem；

視窗相對單位則包含：vw、vh、vmin、vmax幾種

絕對定位則是固定尺寸，它們採用的是物理度量單位：cm、mm、in、px、pt以及pc。但在實際應用中，咱們使用最普遍的則是em、rem、px以及百分比（%）來度量頁面元素的尺寸。

px: 絕對（固定）單位
缺點：任何狀況下都是固定值，會致使佈局在不一樣尺寸下的設備錯位

%：相對定位（會有影響發生變化）相對於父級（自身）大小進行定位
缺點：能肯定範圍的仍是比較好計算的，對於不太好肯定值得地方很差使用百分比，而且會致使變形，高度通常很差控制

em: 相對定位（會有影響發生變化） em=當前字體大小
缺點：會根據當前容器字體大小發生變化，假如每一個容器字體大小不一致，那麼計算會很是麻煩

rem
r==root
em=字體大小 font-size
rem 相對單位
只依賴於html字體大小

動態的修改根元素的font-size：

須要經過js去控制：

/*得到頁面寬度後動態修改html上的fontsize
* 320爲iphone5設計稿下的頁面寬度，以下設置後頁面的頁面在iphone5等寬屏幕上html
* 的font-size會變爲20px，即 1rem = 100px    1px=0.05rem
* 因此設置元素尺寸的時候，若是測量設計稿 15px  則需設置尺寸爲 (0.05*15)rem = 0.75rem   
*/


!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            console.log(width)
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

作響應式須要引入的文件

示例代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
        <title>移動端佈局</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                list-style: none;
            }
            .clearfix:after{
                content: '';
                display: block;
                clear: both;
            }
            html{
                width: 100%;
                height: 100%;
                /*font-size: 30px;*/
                overflow: hidden;
            }
            body{
                width: 100%;
                height: 100%;
                overflow: auto;
            }
            .head-box{
                width: 100%;
                height: 4rem;
                background-color: red;
                position: absolute;
                top: 0;
                left: 0;    
            }
            .list{
                margin-top: 4rem;
                font-size: 1.5rem;
            }
            
            .list .item{
                float: left;
                width: 7rem;
                height: 7rem;
                border: 1px solid black;
                margin: 0.25rem;
                
            }
            
            
            
        </style>
    </head>
    <body>
        
        <header class="head-box">
            <div class="head-top"></div>
            <div class="head-bottom"></div>
        </header>
        
        <ul class="list clearfix">
            <li class="item">1111111</li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
        
    </body>
    <script src="./js/resize.js"></script>
</html>

View Code

Bootstrap學習

對前端的項目進行壓縮的工具備:glup,webpack

Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、javascript 的，它簡潔靈活，使得 Web 開發更加快捷。

它用於開發響應式佈局、移動設備優先的 WEB 項目

CSS語言的分類:

css,正常的前面的學的css語言,

less:能夠定義變量,等等,後綴名爲.less的文件,瀏覽器不認識,須要進行再編譯,轉譯成css,瀏覽器才能識別,

sass,sass跟less相似,

Bootstrap的下載

Bootstrap第一步，先將生成環境的Bootstrap下載下來。而後將下載，而後引入到本身建好的當前目錄中

1,http://www.bootcss.com/-Bootstrap3中文文檔-起步(在導航欄找)-下載-(用於生產環境的 Bootstrap)-解壓到本地.

可使用cdn資源
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- 能夠引入本身下載的bootstrap -->
<link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">

Bootstrap支持移動設備優先

也就是說使用Bootstrap能夠在移動設備上運行。爲了確保適當的繪製和觸屏縮放，須要在<head>之中添加viewport元數據標籤

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

在移動設備瀏覽器上，經過爲視口（viewport）設置 meta 屬性爲 user-scalable=no 能夠禁用其縮放（zooming）功能。這樣禁用縮放功能後，用戶只能滾動屏幕，就能讓你的網站看上去更像原生應用的感受。注意，這種方式咱們並不推薦全部網站使用，仍是要看你本身的狀況而定！

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Bootstrap重置樣式

爲了加強跨瀏覽器表現的一致性，咱們使用了 Normalize.css，這是由 Nicolas Gallagher 和 Jonathan Neal 維護的一個CSS 重置樣式庫。

1,reset.css,,

2,Normalize.css,

佈局容器

Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器。咱們提供了兩個做此用處的類。注意，因爲 padding 等屬性的緣由，這兩種容器類不能互相嵌套。

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

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

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

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

柵格系統

詳情見網址,

https://v3.bootcss.com/css/#grid

練習代碼

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap --> 
    <!-- 使用cdn -->
    <!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->
    <!-- 能夠引入本身下載的bootstrap -->
    <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：經過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起做用 -->

    <!-- 若是想在IE下支持響應式,須要把下面的if段代碼解注, -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


  </head>
  <body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6">
                使用單一的一組 .col-md-* 柵格類，就能夠建立一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一塊兒的（超小屏幕到小屏幕這一範圍），在桌面（中等）屏幕設備上變爲水平排列。全部「列（column）必須放在 」 .row 內。
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                使用單一的一組 .col-md-* 柵格類，就能夠建立一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一塊兒的（超小屏幕到小屏幕這一範圍），在桌面（中等）屏幕設備上變爲水平排列。全部「列（column）必須放在 」 .row 內。
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                使用單一的一組 .col-md-* 柵格類，就能夠建立一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一塊兒的（超小屏幕到小屏幕這一範圍），在桌面（中等）屏幕設備上變爲水平排列。全部「列（column）必須放在 」 .row 內。
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                使用單一的一組 .col-md-* 柵格類，就能夠建立一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一塊兒的（超小屏幕到小屏幕這一範圍），在桌面（中等）屏幕設備上變爲水平排列。全部「列（column）必須放在 」 .row 內。
            </div>
        </div>
    </div>

    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
    <!-- <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> -->
    <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
    <!-- <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
  </body>
</html>

練習代碼

不要修改bootstrap內部的類名,

有些代碼不知道起什麼做用,能夠採起註釋掉來觀察註釋掉先後的變化,來肯定代碼的做用,

練習代碼

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>練習-Bootstrap 101 Template</title>

    <!-- Bootstrap --> 
    <!-- 使用cdn -->
    <!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->
    <!-- 能夠引入本身下載的bootstrap -->
    <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：經過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起做用 -->

    <!-- 若是想在IE下支持響應式,須要把下面的if段代碼解注, -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


  </head>
  <body>

    <!-- <nav class="navbar navbar-default"> -->
    <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="#">路飛學城</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="#">首頁<span class="sr-only">(current)</span></a></li>
        <li><a href="#">課程</a></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-info">登陸</button>
        <button type="submit" class="btn btn-default">註冊</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <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>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
    <table class="table">
        <tr>
            <td>ID</td>
            <td>name</td>
            <td>age</td>
        </tr>
        <tr>
            <td>1</td>
            <td>張三</td>
            <td>29</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>25</td>
        </tr>
    </table>

    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>