前端之移動端庫和框架bootstrap

本文轉載自查看原文 2019-06-16 17:11 2445 js/jquery/ 前端學習

學習移動端場景下的js事件；制作移動端特效常用的js庫；介紹移動端常用開發框架Bootstrap；介紹動態樣式語言less、sass、stylus的基本使用。

移動端js事件

移動端的操作方式和PC端是不同的，移動端主要用手指操作，所以有特殊的touch事件，touch事件包括如下幾個事件：

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

移動端一般有三種操作，點擊、滑動、拖動，這三種操作一般是組合使用上面的幾個事件來完成的，所有上面的4個事件一般很少單獨使用，一般是封裝使用來實現這三種操作，可以使用封裝成熟的js庫。

移動端js庫

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/

touch模塊封裝了針對移動端常用的事件，可使用此模塊進行移動端特定效果開發，這些事件有：

tap 元素tap的時候觸發，此事件類似click，但是比click快。
longTap 當一個元素被按住超過750ms觸發。
swipe, swipeLeft, swipeRight, swipeUp, swipeDown 當元素被划過時觸發。(可選擇給定的方向)

swiper

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

2.x版本中文網址：http://2.swiper.com.cn/
3.x版本中文網地址：http://www.swiper.com.cn/

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使用參數：

1、initialSlide：初始索引值，從0開始
2、direction：滑動方向 horizontal | vertical
3、speed：滑動速度，單位ms
4、autoplay：設置自動播放及播放時間
5、autoplayDisableOnInteraction：用戶操作swipe后是否還自動播放，默認是true，不再自動播放
6、pagination：分頁圓點
7、paginationClickable：分頁圓點是否點擊
8、prevButton：上一頁箭頭
9、nextButton：下一頁箭頭
10、loop：是否首尾銜接
11、onSlideChangeEnd：回調函數，滑動結束時執行

swiper制作實例：
1、swiper制作移動端焦點圖實例
2、swiper制作整頁滾動效果

zeptojs的簡單使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/zepto.min.js"></script>
    <script type="text/javascript">
        $(function () {
            alert($('#div1').html());
        })
    </script>
</head>
<body>
<div id="div1">這是一個div元素</div>
</body>
</html>

zeptojs的簡單使用示例

使用swiper示例-移動端首頁幻燈片示例

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="js/set_root.js"></script>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/swiper.jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                prevButton: '.swiper-button-prev',
                nextButton: '.swiper-button-next',
                // 初始的幻燈片是第幾張
                initialSlide: 0,

                // 小圓點是否可點擊
                paginationClickable: false,

                //是否連續播放(設置false會在最后一張返回)
                loop: true,

                // 設置多長時間間隔播放一張
                autoplay: 3000,

                // 用戶操作后還是否自動播放
                autoplayDisableOnInteraction: true
            })
        });
    </script>
    <title>天天生鮮-首頁</title>
</head>

<div class="slide">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻燈片"></a></div>
            <div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻燈片"></a></div>
            <div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻燈片"></a></div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</div>

使用swiper示例-移動端首頁幻燈片示例

swiper參數設置-自定義
swiper參數設置

swiper自定義
在網頁檢查要修改的內容樣式，在min.css中找到對應樣式，復制到main.css中，進行修改，注意，不應該直接在swiper.min.css中進行修改；
main.css下

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 22px;
    margin-top: -11px;
    z-index: 10;
    cursor: pointer;
    -moz-background-size: 27px 44px;
    -webkit-background-size: 27px 44px;
    background-size: 14px 22px;
    background-position: center;
    background-repeat: no-repeat
}


.swiper-pagination-bullet-active {
    opacity: 1;
    background: #ff8800;
}

.swiper-pagination {
    text-align: right;
}

.swiper-container-horizontal > .swiper-pagination-bullets span:last-child {
    margin-right: 20px;
}

View Code

Bootstrap

bootstrap介紹

簡單、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。來自Twitter，是目前很受歡迎的前端框架之一。 Bootrstrap是基於HTML、CSS、JavaScript的，讓書寫代碼更容易。移動優先，響應式布局開發。
bootstrap中文網址：http://www.bootcss.com/

bootstrap 容器

container-fluid 流體

container

1170
970
750
100%

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

bootstrap響應式查詢區間

1、大於等於768
2、大於等於992
3、大於等於1200

bootstrap 柵格系統

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

1、col-lg- 大於1200排成一行，小於1200分別占一行
2、col-md- 大於992排成一行，小於992分別占一行
3、col-sm- 大於768排成一行，小於768分別占一行
4、col-xs- 始終排列成一行

列偏移

1、col-lg-offset-
2、col-md-offset-
3、col-sm-offset-
4、col-xs-offset-

bootstrap 表單

1、form 聲明一個表單域
2、form-inline 內聯表單域
3、form-horizontal 水平排列表單域
4、form-group 表單組、包括表單文字和表單控件
5、form-control 文本輸入框、下拉列表控件樣式
6、checkbox checkbox-inline 多選框樣式
7、radio radio-inline 單選框樣式
8、input-group 表單控件組
9、input-group-addon 表單控件組物件樣式 10、input-group-btn 表單控件組物件為按鈕的樣式
10、form-group-lg 大尺寸表單
11、form-group-sm 小尺寸表單

bootstrap 按鈕

1、btn 聲明按鈕
2、btn-default 默認按鈕樣式
3、btn-primay
4、btn-success
5、btn-info
6、btn-warning
7、btn-danger
8、btn-link
9、btn-lg
10、btn-md
11、btn-xs
12、btn-block 寬度是父級寬100%的按鈕
13、active
14、disabled
15、btn-group 定義按鈕組

bootstrap 圖片

img-responsive 聲明響應式圖片

bootstrap 隱藏類

1、hidden-xs
2、hidden-sm
3、hidden-md
4、hidden-lg

bootstrap 字體圖標

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

bootstrap 下拉菜單

1、dropdown-toggle
2、dropdown-menu

bootstrap 選項卡

1、nav
2、nav-tabs
3、nav-pills
4、tab-content

bootstrap 導航條

1、navbar 聲明導航條
2、navbar-default 聲明默認的導航條樣式
3、navbar-inverse 聲明反白的導航條樣式
4、navbar-static-top 去掉導航條的圓角
5、navbar-fixed-top 固定到頂部的導航條
6、navbar-fixed-bottom 固定到底部的導航條
7、navbar-header 申明logo的容器
8、navbar-brand 針對logo等固定內容的樣式
11、nav navbar-nav 定義導航條中的菜單
12、navbar-form 定義導航條中的表單
13、navbar-btn 定義導航條中的按鈕
14、navbar-text 定義導航條中的文本
9、navbar-left 菜單靠左
10、navbar-right 菜單靠右

bootstrap 模態框

1、modal 聲明一個模態框
2、modal-dialog 定義模態框尺寸
3、modal-lg 定義大尺寸模態框
4、modal-sm 定義小尺寸模態框
5、modal-header
6、modal-body
7、modal-footer

容器示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>bootstrap文檔</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
        .container-fluid,.container{
            height:50px;
            border:1px solid #000;
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="container-fluid">流體容器</div>
    <br>
    <br>
    <br>
    <div class="container">響應式容器</div>
</body>
</html>

容器示例

柵格系統的瀏覽器縮放影響示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>bootstrap文檔</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
        div[class*='col-'] {
            height: 50px;
            background-color: gold;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <h2>柵格系統</h2>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-lg-3">col-lg-3</div>
        <div class="col-lg-4">col-lg-4</div>
        <div class="col-lg-2">col-lg-2</div>
        <div class="col-lg-3">col-lg-3</div>
    </div>
    <br>
    <br>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</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-5">col-xs-5</div>
        <div class="col-xs-3">col-xs-3</div>
        <div class="col-xs-2">col-xs-2</div>
        <div class="col-xs-2">col-xs-2</div>
    </div>
</div>


</body>
</html>

柵格系統的瀏覽器縮放影響示例

柵格響應式原理
當我們使用柵格時，如果希望當窗口縮小到一定程度后，還保持一行多個，可以給該內容的class設置多個柵格屬性，這樣，當縮小到一定程度后，后面的柵格屬性就會覆蓋前面的柵格屬性了；

柵格響應式布局示例
實現效果：縮小到一定程度后，仍然保持一行四個，再縮小，一行四個，再縮小，一行兩個；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>bootstrap文檔</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
        /* div[class*='col-']{
            background-color:gold;
            border:1px solid #000;
        } */
        .box {
            height: 200px;
            max-width: 240px;
            background-color: cyan;
            border: 1px solid #000;
            margin: 20px auto;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <h2>柵格系統響應式</h2>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6">
            <div class="box"></div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6">
            <div class="box"></div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6">
            <div class="box"></div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6">
            <div class="box"></div>
        </div>
    </div>
</div>
</body>
</html>

柵格響應式布局示例

柵格偏移-柵格隱藏
柵格偏移示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>bootstrap文檔</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
        div[class*='col-'] {
            background-color: gold;
            border: 1px solid #000;
            height: 50px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <h2>柵格偏移</h2>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1">col-lg-5 col-lg-offset-1</div>
        <div class="col-lg-5 col-md-5">col-lg-5</div>
    </div>
    <br>
    <br>
    <br>
    <div class="row">
        <div class="col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1">col-lg-4</div>
        <div class="col-lg-4 col-lg-offset-2  col-md-4 col-md-offset-2">col-lg-4</div>
    </div>
</div>

<div class="container">
    <div class="row">
        <table class="table table-striped">
            <caption>Optional table caption.</caption>
            <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            </tbody>
        </table>
    </div>

</div>

</body>
</html>

柵格偏移示例

柵格隱藏示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>bootstrap文檔</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
        div[class*='col-'] {
            background-color: gold;
            border: 1px solid #000;
            height: 50px;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <h2>柵格隱藏</h2>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6">1</div>
        <div class="col-lg-3 col-md-4 col-sm-6">2</div>
        <div class="col-lg-3 col-md-4 col-sm-6">3</div>
        <div class="col-lg-3 col-md-4 hidden-md col-sm-6 hidden-xs">4</div>
    </div>
</div>
</body>
</html>

柵格隱藏示例

按鈕的創建示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>bootstrap文檔</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div class="row">
        <h2>按鈕</h2>
    </div>
</div>

<div class="container">
    <div class="row">
        <input type="button" name="" value="按鈕" class="btn btn-primary">

        <a href="#" class="btn btn-success">a標簽按鈕</a>
        <a href="#" class="btn btn-info">a標簽按鈕</a>
        <a href="#" class="btn btn-warning">a標簽按鈕</a>
        <a href="#" class="btn btn-danger">a標簽按鈕</a>
        <a href="#" class="btn btn-link">a標簽按鈕</a>

        <a href="#" class="btn btn-danger active">a標簽按鈕</a>

        <a href="#" class="btn btn-danger disabled">a標簽按鈕</a>

    </div>
    <br>
    <br>
    <div class="row">
        <a href="#" class="btn btn-success btn-lg">大按鈕</a>
        <a href="#" class="btn btn-info btn-md">中等按鈕</a>
        <a href="#" class="btn btn-warning btn-xs">小按鈕</a>
        <a href="#" class="btn btn-danger">一般的按鈕</a>
    </div>

    <br>
    <br>
    <div class="row">
        <a href="#" class="btn btn-primary btn-block">寬度是100%的按鈕</a>
    </div>

    <br>
    <br>
    <div class="row">
        <div class="btn-group">
            <a href="#" class="btn btn-primary">步驟一</a>
            <a href="#" class="btn btn-primary">步驟二</a>
            <a href="#" class="btn btn-default">步驟三</a>
        </div>
    </div>
    <br>
    <br>
    <div class="row">
        <div class="btn-group btn-group-justified">
            <a href="#" class="btn btn-primary">步驟一</a>
            <a href="#" class="btn btn-primary">步驟二</a>
            <a href="#" class="btn btn-default">步驟三</a>
        </div>
    </div>

    <br>
    <br>
    <div class="row">
        <!-- 在使用input和btn-group-justified組合使用時，會出現bug，a標簽組合使用不會，解決方式如下 -->
        <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-primary">
            </div>
            <div class="btn-group">
                <input type="button" name="" value="步驟三" class="btn btn-default">
            </div>
        </div>
    </div>

</div>
</body>
</html>

按鈕的創建示例

表單-字體圖標

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <style type="text/css">
        .glyphicon-heart {
            font-size: 16px;
            color: gold;
        }

        .glyphicon-user {
            font-size: 20px;
            color: pink;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <h2>表單</h2>
    </div>
</div>


<div class="container">
    <div class="row">
        <form>
            <div class="form-group">
                <label for="input01"><span class="glyphicon glyphicon-user"></span></label>
                <input type="text" name="" class="form-control" id="input01">
            </div>

            <div class="form-group">
                <label for="pwd">密碼:</label>
                <input type="password" name="" class="form-control" id="pwd">
            </div>
        </form>

        <br>
        <br>

        <form class="form-inline">
            <div class="form-group form-group-lg">
                <label for="input02">用戶名:</label>
                <input type="text" name="" class="form-control" id="input02">
            </div>

            <div class="form-group">
                <label for="pwd02">密碼:</label>
                <input type="password" name="" class="form-control" id="pwd02">
            </div>
        </form>


        <br>
        <br>

        <form class="form-horizontal">
            <div class="form-group form-group-lg">
                <label for="input03" class="col-xs-2">用戶名:</label>
                <div class="col-xs-10">
                    <input type="text" name="" class="form-control" id="input03">
                </div>
            </div>

            <div class="form-group form-group-sm">
                <label for="input03" class="col-xs-2">通信地址:</label>
                <div class="col-xs-10">
                    <input type="text" name="" class="form-control" id="input03">
                </div>
            </div>

            <div class="form-group">
                <label for="pwd03" class="col-xs-2">密碼:</label>
                <div class="col-xs-10">
                    <input type="password" name="" class="form-control" id="pwd03">
                </div>
            </div>
        </form>
        
        <br>
        <br>
        <br>
        
        <form>
            <div class="input-group">
                <span class="input-group-addon">@</span>
                <input type="text" class="form-control">
            </div>
            <br>
            <br>

            <div class="input-group">

                <input type="text" class="form-control">
                <span class="input-group-btn">
                      <!-- <input type="button" name="" value="搜索" class="btn btn-default"> -->

                      <button class="btn btn-primary">搜索</button>
                  </span>
            </div>

            <br>
            <br>

            <div class="input-group">

                <input type="text" class="form-control">
                <span class="input-group-btn">
                      <!-- <input type="button" name="" value="搜索" class="btn btn-default"> -->

                      <button class="btn btn-primary"><span class="glyphicon glyphicon-heart"></span></button>
                  </span>
            </div>
            <br>
            <br>
        </form>
    </div>
</div>
</body>
</html>

表單-字體圖標示例

Bootstrap菜單、對話框、布局實例

菜單-導航條示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
    <div class="container">

        <!-- 定義logo和切換小圖標   -->
        <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" name="" class="form-control">
                        <span class="input-group-btn">
                                <button class="btn btn-default"><span
                                        class="glyphicon glyphicon-search"></span></button>
                            </span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


</body>
</html>

菜單-導航條示例

模態框/丐版
模態框/丐版示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn01').click(function () {
                //$('#modal04').modal('show');
                $('#modal04').modal({
                    show: true,
                    backdrop: 'static'
                });

            });

            $('#shutoff').click(function () {
                $('#modal04').modal('hide');
            })
        })
    </script>
</head>
<body>
<div class="container">
    <div class="row">
        <button class="btn btn-primary" data-toggle="modal" data-target="#modal01">彈出大模態框</button>
        <button class="btn btn-primary" data-toggle="modal" data-target="#modal02">彈出中等模態框</button>
        <button class="btn btn-primary" data-toggle="modal" data-target="#modal03">彈出小的模態框</button>
        <button class="btn btn-primary" id="btn01">js控制的彈框</button>
    </div>
</div>

<!-- .modal>.modal-dialog>.modal-content>.modal-header+.modal-body+.modal-footer -->

<div class="modal fade" id="modal01">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                提示彈框
            </div>

            <div class="modal-body">
                <p>文字內容</p>
            </div>

            <div class="modal-footer">
                <button class="btn btn-primary">確定</button>
                <button class="btn btn-default" data-dismiss="modal">取消</button>
            </div>

        </div>
    </div>
</div>

<div class="modal fade" id="modal02">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                提示彈框
            </div>

            <div class="modal-body">
                <p>文字內容</p>
            </div>

            <div class="modal-footer">
                <button class="btn btn-primary">確定</button>
                <button class="btn btn-default" data-dismiss="modal">取消</button>
            </div>

        </div>
    </div>
</div>

<div class="modal fade" id="modal03">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">

            <div class="modal-header">
                提示彈框
            </div>

            <div class="modal-body">
                <p>文字內容</p>
            </div>

            <div class="modal-footer">
                <button class="btn btn-primary">確定</button>
                <button class="btn btn-default" data-dismiss="modal">取消</button>
            </div>

        </div>
    </div>
</div>


<div class="modal fade" id="modal04">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                提示彈框
            </div>

            <div class="modal-body">
                <p>js控制的彈框</p>
            </div>

            <div class="modal-footer">
                <button class="btn btn-primary">確定</button>
                <button class="btn btn-default" id="shutoff">取消</button>
            </div>

        </div>
    </div>
</div>
</body>
</html>

模態框/丐版示例

布局實例01
路徑導航和下拉菜單示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <ol class="breadcrumb">
            <li><a href="#">首頁</a></li>
            <li><a href="#">產品列表</a></li>
            <li class="active">水果</li>
        </ol>
    </div>

    <br>
    <br>

    <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>
</div>
</body>
</html>

路徑導航和下拉菜單示例

柵格中的row示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <style type="text/css">

        .container {
            height: 50px;
            background-color: gold;
        }

        /*  用負邊距去掉容器左右15px的間距   */
        .row {
            height: 50px;
            background-color: green;
        }

        .col-lg-5 {
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-5">col-lg-5</div>
    </div>
</div>
</body>
</html>

柵格中的row示例

布局實例02
天天生鮮水果節節日活動布局實例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <title>天天生鮮-水果節</title>
</head>
<body>
    <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"><img src="images/logo.png" alt="天天生鮮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>
                    <li><a href="#">抽獎</a></li>                           
                </ul>
                <form class="navbar-form navbar-right">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" name="" class="form-control" placeholder="請輸入搜索內容">
                            <span class="input-group-btn">
                                <button class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
                            </span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div class="jumbotron">
      <div class="container">
        <div class="row">
            <div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1">
                <img src="images/banner_title.png" alt="banner標題" class="banner_pic_title img-responsive">
                <h2 class="banner_title">水果節介紹</h2>
                <p class="banner_detail">天天生鮮將在北京、天津、上海、南京、蘇州、杭州、成都、武漢8座核心城市同期推出北京水果專場，借助天天生鮮產地端到用戶端的渠道，果品流轉效率得以大大提高。依托天天生鮮的渠道優勢，首屆果節做到了高質低價。</p>
            </div>

            <div class="col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 hidden-sm hidden-xs">
                <img src="images/basket.png" alt="水果籃" class="img-responsive">
            </div>
        </div>
      </div>
    </div>


    <div class="container">
        <h3 class="active_title text-center">活動圖片</h3>
        <p class="active_detail text-center">天天生鮮產地直采的果品甚至可以追溯到種植者和生產的地塊兒。確定具體采摘地塊兒后，在適合的時間將水果采摘下來后，直接在地頭包裝成箱，根據訂單分裝運到各個分倉，然后由配送員送到用戶手中。以下是本次活動相關的圖片</p>
    </div>


    <div class="container pic_list">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-6">
                <div class="thumbnail">
                <img src="images/active01.jpg" alt="活動圖片" class="img-responsive">
                <h4>活動的標題</h4>
                </div>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-6">
                <div class="thumbnail">
                <img src="images/active02.jpg" alt="活動圖片" class="img-responsive">
                <h4>活動的標題</h4>
                </div>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-6">
                <div class="thumbnail">
                <img src="images/active03.jpg" alt="活動圖片" class="img-responsive">
                <h4>活動的標題</h4>
                </div>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-6">
                <div class="thumbnail">
                <img src="images/active04.jpg" alt="活動圖片" class="img-responsive">
                <h4>活動的標題</h4>
                </div>
            </div>
        </div>
    </div>
    

    <div class="container">
        <div class="row common_title">
            <h3 class="pull-left">推薦商品</h3>
            <a href="#" class="pull-right">更多 &gt;&gt;</a>
        </div>
    </div>


    <div class="container goods_list">
        <div class="row">
            <div class="col-lg-2">
                <div class="thumbnail">
                    <a href="#"><img src="images/goods.jpg" alt="商品圖片"></a>
                    <h4>進口草莓</h4>
                    <p>¥ <em>25.00</em>/500g</p>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="thumbnail">
                    <a href="#"><img src="images/goods.jpg" alt="商品圖片"></a>
                    <h4>進口草莓</h4>
                    <p>¥ <em>25.00</em>/500g</p>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="thumbnail">
                    <a href="#"><img src="images/goods.jpg" alt="商品圖片"></a>
                    <h4>進口草莓</h4>
                    <p>¥ <em>25.00</em>/500g</p>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="thumbnail">
                    <a href="#"><img src="images/goods.jpg" alt="商品圖片"></a>
                    <h4>進口草莓</h4>
                    <p>¥ <em>25.00</em>/500g</p>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="thumbnail">
                    <a href="#"><img src="images/goods.jpg" alt="商品圖片"></a>
                    <h4>進口草莓</h4>
                    <p>¥ <em>25.00</em>/500g</p>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="thumbnail">
                    <a href="#"><img src="images/goods.jpg" alt="商品圖片"></a>
                    <h4>進口草莓</h4>
                    <p>¥ <em>25.00</em>/500g</p>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="thumbnail">
                    <a href="#"><img src="images/goods.jpg" alt="商品圖片"></a>
                    <h4>進口草莓</h4>
                    <p>¥ <em>25.00</em>/500g</p>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="thumbnail">
                    <a href="#"><img src="images/goods.jpg" alt="商品圖片"></a>
                    <h4>進口草莓</h4>
                    <p>¥ <em>25.00</em>/500g</p>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="thumbnail">
                    <a href="#"><img src="images/goods.jpg" alt="商品圖片"></a>
                    <h4>進口草莓</h4>
                    <p>¥ <em>25.00</em>/500g</p>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="thumbnail">
                    <a href="#"><img src="images/goods.jpg" alt="商品圖片"></a>
                    <h4>進口草莓</h4>
                    <p>¥ <em>25.00</em>/500g</p>
                </div>
            </div>


        </div>
    </div>


    <div class="container-fluid footer">
        <div class="links">
        <a href="#">關於我們</a>
        <span>|</span>  
        <a href="#">聯系我們</a> 
        <span>|</span> 
        <a href="#">招聘人才</a>  
        <span>|</span> 
        <a href="#">友情鏈接</a></div>
<p>CopyRight © 2016 北京天天生鮮信息技術有限公司 All Rights Reserved</p>
<p>電話：010-****888    京ICP備*******8號</p>
</div>
</body>
</html>

index.html

index.css

.navbar-brand {
    padding: 5px 15px;
}

.navbar-inverse {
    background-color: #ff722b;
    border-color: #ff722b;
}

.navbar-inverse .navbar-nav > li > a {
    color: #fff;
}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: #db6226;
}

.navbar-inverse .navbar-toggle {
    border-color: #fff;
}

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
    background-color: #db6226
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: #fff
}

.navbar {
    margin-bottom: 0;
}

.jumbotron {
    background: url(../images/banner_bg.jpg) center center no-repeat;
    padding: 24px 0;
    margin-bottom: 0;
}


.banner_title {
    font-size: 18px;
    color: #ffff00;
}

.jumbotron .banner_detail {
    font-size: 14px;
    color: #fff;
    line-height: 28px;
}

.banner_pic_title {
    margin-top: 46px;
}


@media (max-width: 1200px) {
    .banner_pic_title {
        margin-top: 20px;
    }

}


@media (max-width: 992px) {
    .banner_pic_title {
        margin-top: 10px;
    }

}

.active_title {
    margin-top: 30px;
    font-size: 30px;
    color: #333;
}

.active_detail {
    font-size: 14px;
    color: #333;
    line-height: 21px;
    margin-top: 20px;
}

.pic_list {
    margin-top: 10px;
}

.pic_list h4 {
    font-size: 15px;
    color: #333;
    text-align: center;
}

.pic_list .thumbnail {
    max-width: 260px;
    margin: 0 auto 20px;
}

.common_title {
    background-color: #ff722b;
    margin: 0;
    height: 40px;
}

.common_title h3 {
    font-size: 16px;
    color: #fff;
    line-height: 40px;
    margin: 0;
    text-indent: 10px;
}

.common_title a {
    font-size: 12px;
    color: #fff;
    margin: 20px 10px 0 0;
}

.goods_list {
    margin-top: 20px;
}

.goods_list .col-lg-2 {
    width: 20%;
}

.goods_list h4 {
    text-align: center;
    font-size: 14px;
    color: #666;
}

.goods_list p {
    text-align: center;
    color: #ff0000;
    font-size: 16px;
}

.goods_list p em {
    font-size: 22px;
    font-style: normal;
}

.goods_list .thumbnail {
    max-width: 260px;
    margin: 0 auto 20px;
}


@media (max-width: 1200px) {

    .goods_list .col-lg-2 {
        width: 25%;
        float: left;
    }

}


@media (max-width: 992px) {

    .goods_list .col-lg-2 {
        width: 50%;
        float: left;
    }

}

@media (max-width: 768px) {

    .goods_list .col-lg-2 {
        width: 100%;
        float: left;
    }

}


.footer {
    background-color: #ff722b;
    padding-bottom: 20px;
}

.footer .links {
    text-align: center;
    margin-top: 35px;
}

.footer .links a {
    color: #fff;
}

.footer .links span {
    color: #fff;
    padding: 0 10px;
}

.footer p {
    text-align: center;
    margin: 10px 0;
    color: #fff;
}

index.css

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 移動端庫和框架移動端前端UI框架 python前端學習之移動端和bootstrap 推薦幾個移動端前端UI框架幾個移動端前端UI框架根據bootstrap框架實現移動端觸摸滑動的方法前端之移動端響應式: 響應式介紹移動端位以及 Bootstrap相關內容 bootstrap適配移動端 Mint-ui 移動端前端框架 vue 前端框架Bootstrap