Web—08-移動端庫和框架

時間 2019-11-21

標籤 web 移動框架欄目 HTML 简体版

原文原文鏈接

移動端js事件

移動端的操做方式和PC端是不一樣的，移動端主要用手指操做，因此有特殊的touch事件，touch事件包括以下幾個事件：javascript

一、touchstart: //手指放到屏幕上時觸發
二、touchmove: //手指在屏幕上滑動式觸發
三、touchend: //手指離開屏幕時觸發
四、touchcancel: //系統取消touch事件的時候觸發，比較少用

移動端通常有三種操做，點擊、滑動、拖動，這三種操做通常是組合使用上面的幾個事件來完成的，全部上面的4個事件通常不多單獨使用，通常是封裝使用來實現這三種操做，可使用封裝成熟的js庫。css

zeptojs

Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript庫，它與jquery有着相似的api。若是你會用jquery，那麼你也會用zepto。Zepto的一些可選功能是專門針對移動端瀏覽器的；它的最初目標是在移動端提供一個精簡的相似jquery的js庫。前端

[zepto官網](http://zeptojs.com/)
[zepto中文api](http://www.css88.com/doc/zeptojs_api/)
zepto包含不少模塊，默認下載版本包含的模塊有Core, Ajax, Event, Form, IE模塊，若是還須要其餘的模塊，能夠自定義構建。
[zepto自定義構建地址](http://github.e-sites.nl/zeptobuilder/)

swiper

swiper.js是一款成熟穩定的應用於PC端和移動端的滑動效果插件，通常用來觸屏焦點圖、觸屏整屏滾動等效果。 swiper分爲2.x版本和3.x版本，2.x版本支持低版本瀏覽器(IE7)，3.x放棄支持低版本瀏覽器，適合應用在移動端。vue

2.x版本中文網址java

3.x版本中文網地址jquery

swiper使用方法：

<script type="text/javascript" src="js/swiper.min.js"></script>

<!--
  若是頁面引用了jquery或者zepto，就引用 swiper.jquery.min.js,它的容量比swiper.min.js

  <script src="path/to/swiper.jquery.min.js"></script>
-->

......

<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
......

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<script> 
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
  prevButton: '.swiper-button-prev',
  nextButton: '.swiper-button-next',
    initialSlide :1,
  paginationClickable: true,
  loop: true,
  autoplay:3000,
  autoplayDisableOnInteraction:false
});
</script>

swiper使用參數：

一、initialSlide：初始索引值，從0開始
二、direction：滑動方向 horizontal | vertical
三、speed：滑動速度，單位ms
四、autoplay：設置自動播放及播放時間
五、autoplayDisableOnInteraction：用戶操做swipe後是否還自動播放，默認是true，再也不自動播放
六、pagination：分頁圓點
七、paginationClickable：分頁圓點是否點擊
八、prevButton：上一頁箭頭
九、nextButton：下一頁箭頭
十、loop：是否首尾銜接

bootstrap

簡單、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。來自Twitter，是目前很受歡迎的前端框架之一。 Bootrstrap是基於HTML、CSS、JavaScript的，讓書寫代碼更容易。移動優先，響應式佈局開發。git

bootstrap中文網址github

bootstrap 容器

container-fluid 流體
container
    1170
    970
    750
    100%

<div class="container-fluid">流體容器</div>
<div class="container">響應式固定容器</div>

bootstrap響應式查詢區間：

一、大於等於768
二、大於等於992
三、大於等於1200

bootstrap 柵格系統

bootstrap將頁面橫向分爲12等分，按照12等分定義了適應不一樣寬度等分的樣式類，這些樣式類組成了一套響應式、移動設備優先的流式柵格系統：web

一、col-lg- 大於1200排成一行，小於1200分別佔一行
二、col-md- 大於992排成一行，小於992分別佔一行
三、col-sm- 大於768排成一行，小於768分別佔一行
四、col-xs- 始終排列成一行

<style type="text/css">
    div[class*='col-']{

        background-color:cyan;
        border:1px solid #ddd;
        height:50px;
    }
</style>

......

<div class="container">
    <div class="row">
        <div class="col-lg-3">col-lg-3</div>
        <div class="col-lg-3">col-lg-3</div>
        <div class="col-lg-5">col-lg-5</div>
        <div class="col-lg-1">col-lg-1</div>
    </div>
    <br>
    <br>
    <div class="row">
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-3">col-md-3</div>
    </div>
    <br>
    <br>
    <div class="row">
        <div class="col-sm-3">col-sm-3</div>
        <div class="col-sm-3">col-sm-3</div>
        <div class="col-sm-3">col-sm-3</div>
        <div class="col-sm-3">col-sm-3</div>
    </div>
    <br>
    <br>
    <div class="row">
        <div class="col-xs-3">col-xs-3</div>
        <div class="col-xs-3">col-xs-3</div>
        <div class="col-xs-3">col-xs-3</div>
        <div class="col-xs-3">col-xs-3</div>
    </div>
</div>

列偏移

一、col-lg-offset-
二、col-md-offset-
三、col-sm-offset-
四、col-xs-offset-

bootstrap 按鈕

一、btn 聲明按鈕
二、btn-default 默認按鈕樣式
三、btn-primay
四、btn-success
五、btn-info
六、btn-warning
七、btn-danger
八、btn-link
九、btn-lg
十、btn-md
十一、btn-xs
十二、btn-block 寬度是父級寬100%的按鈕
1三、active
1四、disabled
1五、btn-group 定義按鈕組

<!-- 通常按鈕組 -->
<div class="btn-group">
    <input type="button" name="" value="按鈕一" class="btn btn-primary">
    <input type="button" name="" value="按鈕二" class="btn btn-warning">
    <input type="button" name="" value="按鈕三" class="btn btn-danger">
</div>

<!-- 通欄按鈕組 
     若是用input標籤作按鈕，須要將它用 btn-group的容器包起來
-->
<div class="btn-group btn-group-justified">
    <div class="btn-group">
        <input type="button" name="" value="按鈕一" class="btn btn-primary">
    </div>
    <div class="btn-group">
        <input type="button" name="" value="按鈕二" class="btn btn-warning">
    </div>
    <div class="btn-group">
        <input type="button" name="" value="按鈕三" class="btn btn-danger">
    </div>
</div>

<!-- 通欄按鈕組，若是用a標籤作按鈕，就不用上面的結構，直接寫
-->
<div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-primary">按鈕一</a>
    <a href="#" class="btn btn-default">按鈕二</a>
    <a href="#" class="btn btn-default">按鈕三</a>
</div>

bootstrap 表單

一、form 聲明一個表單域
二、form-inline 內聯表單域
三、form-horizontal 水平排列表單域
四、form-group 表單組、包括表單文字和表單控件
五、form-control 文本輸入框、下拉列表控件樣式
六、checkbox checkbox-inline 多選框樣式
七、radio radio-inline 單選框樣式
八、input-group 表單控件組
九、input-group-addon 表單控件組物件樣式
十、input-group-btn 表單控件組物件爲按鈕的樣式
十一、form-group-lg 大尺寸表單
十二、form-group-sm 小尺寸表單

<!--  表單  -->
<form role="form">
  <div class="form-group form-group-lg">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

<!--  表單控件組  -->
<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">@</span>
</div>

<!--  表單控件組  -->
<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
</div>

bootstrap 圖片

img-responsive 聲明響應式圖片bootstrap

bootstrap 字體圖標

經過字體代替圖標，font文件夾須要和css文件夾在同一目錄

bootstrap 導航條

一、navbar 聲明導航條
二、navbar-default 聲明默認的導航條樣式
三、navbar-inverse 聲明反白的導航條樣式
四、navbar-static-top 去掉導航條的圓角
五、navbar-fixed-top 固定到頂部的導航條
六、navbar-fixed-bottom 固定到底部的導航條
七、navbar-header 申明logo的容器
八、navbar-brand 針對logo等固定內容的樣式
十一、nav navbar-nav 定義導航條中的菜單
十二、navbar-form 定義導航條中的表單
1三、navbar-btn 定義導航條中的按鈕
1四、navbar-text 定義導航條中的文本
1五、navbar-left 菜單靠左
1六、navbar-right 菜單靠右

<!-- 可伸縮菜單 data-target="#.." 須要加#  -->
<div class="navbar navbar-inverse navbar-static-top ">
    <div class="container">
    <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
         <a href="#" class="navbar-brand">LOGO</a>
    </div>
    <div class="collapse navbar-collapse" id="mymenu">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">首頁</a></li>
            <li><a href="#">公司新聞</a></li>
            <li><a href="#">行業動態</a></li>
        </ul>
        <form class="navbar-form navbar-right">
            <div class="form-group">
                <div class="input-group">
                  <input type="text" class="form-control">
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Go!</button>
                  </span>
                </div>    
            </div>
        </form>
    </div>
    </div>
</div>

路徑導航

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

巨幕

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

bootstrap 模態框

一、modal 聲明一個模態框
二、modal-dialog 定義模態框尺寸
三、modal-lg 定義大尺寸模態框
四、modal-sm 定義小尺寸模態框
五、modal-header
六、modal-body
七、modal-footer

<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">大彈出框按鈕</button>

<div class="modal fade" id="mymodal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    大尺寸彈出框
                </div>
                <div class="modal-body">
                    模態框主體
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default"  data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
            </div>
        </div>
</div>

bootstrap 下拉菜單

一、dropdown-toggle
二、dropdown-menu

<div class="row">            
    <div class="dropdown">
        <div class="btn btn-primary  dropdown-toggle" data-toggle="dropdown">
            下拉菜單
            <span class="caret"></span>
        </div>
        <ul class="dropdown-menu">
            <li><a href="#">菜單一</a></li>
            <li><a href="#">菜單二</a></li>
            <li><a href="#">菜單三</a></li>
        </ul>
    </div>
</div>

bootstrap 隱藏類

一、hidden-xs
二、hidden-sm
三、hidden-md
四、hidden-lg

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。