前端之移动端库和框架bootstrap
学习移动端场景下的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>
使用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自定义
在网页检查要修改的内容样式,在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>
布局实例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">更多 >></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.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; }