学习移动端场景下的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="data:images/slide.jpg" alt="幻灯片"></a></div>

            <div class="swiper-slide"><a href="#"><img src="data:images/slide.jpg" alt="幻灯片"></a></div>

            <div class="swiper-slide"><a href="#"><img src="data: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;

}

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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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:;

}

.jumbotron {

    background: url(../images/banner_bg.jpg) center center no-repeat;

    padding: 24px 0;

    margin-bottom:;

}

.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:;

    height: 40px;

}

.common_title h3 {

    font-size: 16px;

    color: #fff;

    line-height: 40px;

    margin:;

    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

前端之移动端库和框架bootstrap的更多相关文章

  1. Web—08-移动端库和框架

    移动端js事件 移动端的操作方式和PC端是不同的,移动端主要用手指操作,所以有特殊的touch事件,touch事件包括如下几个事件: 1.touchstart: //手指放到屏幕上时触发 2.touc ...

  2. 前端框架Bootstrap

    前端框架Bootstrap http://www.bootcss.com/ Bootstrap 编码规范 http://codeguide.bootcss.com/

  3. 如何使用前端分页框架bootstrap paginator

    前端分页框架bootstrap paginator用于web前端页面快速实现美观大方的翻页功能.在实现交互良好的页面翻页功能时,往往还需要配合使用后端分页框架pagehelper.pagehelper ...

  4. 前端框架 bootstrap 的使用

    内容概要 前端框架 bootstrap 简介 引入方式 布局容器 栅格系统 图标 内容详细 简介 网址:https://v3.bootcss.com/ 版本: 2.X 3.X 4.X 推荐使用3.X版 ...

  5. 【转】H5+css布局+js+前端和移动端ui+其他汇总

    无意间发现一个博客比较好,由于内容比较多,就把链接转过来,先保存着方便看的时候看. 感谢博主“张果” +++++++++++++++++++++++++++++++++++++++++++++++++ ...

  6. javascript，从库到框架再到平台

    对于库,框架,平台,从事过后端开发的人并不陌生,一直基于.net平台做开发,本人懒惰,面对庞大的体系,基本只掌握一点开发上用得着的技术,到是在程序结构,业务过程等方面花了点精力. 随着VS开发工具的成 ...

  7. Erlang的Web库和框架

    ChicagoBoss,Nitrogen ,Zotontic,BeepBeep,ErlyWeb,Erlang Boss. 转自:http://bbs.chinaunix.net/thread-3764 ...

  8. atitit。html css框架Bootstrap  Foundation的比较与不同 attilax大总结

    atitit.html css框架Bootstrap  Foundation的比较与不同 attilax大总结 1. Bootstrap  Foundation的比较与不同1 2. Bootstrap ...

  9. Nodejs WEB开发常用库和框架

    我在Nodejs的体系里也算泡了很久了,的确非常喜欢javascript和Nodejs. 在我看来,用nodejs做web开发有以下几个优点: Javascript作为一个语法异常简单的脚本语言,约束 ...

随机推荐

  1. 【搬了一套别人的cf】

    自己打了一堆没保存瞬间全没了.... 没有继续写的欲望 https://www.cnblogs.com/tea-egg/p/11664350.html

  2. Goland安装

    Goland安装 http://c.biancheng.net/view/6124.html

  3. [译]Vulkan教程(03)开发环境

    [译]Vulkan教程(03)开发环境 这是我翻译(https://vulkan-tutorial.com)上的Vulkan教程的第3篇. In this chapter we'll set up y ...

  4. Java的BIO和NIO很难懂？用代码实践给你看，再不懂我转行！

    本文原题“从实践角度重新理解BIO和NIO”,原文由Object分享,为了更好的内容表现力,收录时有改动. 1.引言 这段时间自己在看一些Java中BIO和NIO之类的东西,也看了很多博客,发现各种关 ...

  5. go语言之if语句和switch语句和循环语句

    1.if语句 package main import ( "fmt" "io/ioutil" ) func main() { //流程控制 //使用常量定义一个 ...

  6. C++笔记——快读快写

    直接开始吧 额m~,这里就没什么好说的了,无非就是用getchar加快cin或printf的读入速度. 代码: inline int read() { int X=0; bool flag = 1; ...

  7. 一起学Android之Xml与Json解析

    概述 在网络中,数据交互通常是以XML和Json的格式进行,所以对这两种格式的数据进行解析,是Android开发中的必备功能,本文以一个简单的小例子,简述Android开发中Xml和Json解析的常用 ...

  8. InnoSetup跨脚本传参数

    需求:在a.iss脚本传递参数给b.iss 举例: a.iss:传程序安装路径给b.iss Parameters: /Path={app} b.iss:接收a.iss传过来的安装路径 DefaultD ...

  9. vue-cli 引用elementUI打包后文件过大

    解决方案:使用externals引用第三方资源,防止element资源被打包到自己项目中,(总共修改3个页面index.html.webpack.base.conf.js.main.js) 1.修改i ...

  10. SQL实用技巧：如何将表中某一列的部分数据合并到一行中

    select *,stuff(select ‘,’ + fieldname from table1 for xml path(”)),1,1,”)  as  field from table2 for ...