前端开发工程师-第5章 Bootstrap交互特效

编程语言 2019-06-25 08:53:31 阅读次数: 0

前端开发工程师-第4章 Bootstrap 基础属性

第一阶段B（前端框架）11天 64学时

第5章 Bootstrap交互特效（18）

[学习课时] 本章共需要学习  18  课时

[目的要求] 

  1. 掌握Bootstrap导航元素
  2. 掌握Bootstrap下拉菜单
  3. 掌握Bootstrap提示工具
  4. 掌握Bootstrap弹出框提示
  5. 掌握Bootstrap轮播图效果
  6. 掌握Bootstrap模态框
  7. 掌握Bootstrap分页插件
  8. 掌握Bootstrap文件上传插件

[教学内容]

Bootstrap导航

Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。

  1. 标签页导航【nav-tabs】

.nav-tabs 类依赖 .nav 基类

 

案例：demo01

<!DOCTYPE html>

<html>

 

    <head>

       <meta charset="UTF-8">

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

       <title></title>

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

       <link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css" />

       <script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

       <script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

    </head>

 

    <body>

       <ul class="nav nav-tabs" id="menu">

           <li class="active">

              <a href="#">首页</a>

           </li>

           <li>

              <a href="#">简介</a>

           </li>

           <li>

              <a href="#">消息</a>

           </li>

       </ul>

    </body>

    <script type="text/javascript">

       menus = $('#menu li');

       $(menus).click(function() {

           $(menus).removeClass('active');

           $(this).addClass('active');

       })

    </script>

 

</html>

效果图

  1. 胶囊式导航【nav-pills】

使用 .nav-pills 类

 

案例：demo02

 

<!DOCTYPE html>

<html>

 

    <head>

       <meta charset="UTF-8">

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

       <title></title>

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

       <link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css" />

       <script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

       <script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

    </head>

 

    <body>

       <ul class="nav nav-pills" id="menu">

           <li><a href="#">首页</a></li>

           <li class="active"><a href="#">联系</a></li>

           <li><a href="#">消息</a></li>

       </ul>

    </body>

    <script type="text/javascript">

       menus = $('#menu li');

       $(menus).click(function() {

           $(menus).removeClass('active');

           $(this).addClass('active');

       })

    </script>

 

</html>

效果图

 

胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类。

 

案例：demo03

<!DOCTYPE html>

<html>

 

    <head>

       <meta charset="UTF-8">

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

       <title></title>

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

        <link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css" />

       <script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

       <script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

    </head>

 

    <body>

       <ul class="nav nav-pills nav-stacked" id="menu">

           <li class="active">

              <a href="#">首页</a>

           </li>

           <li>

              <a href="#">简介</a>

           </li>

           <li>

              <a href="#">消息</a>

           </li>

       </ul>

    </body>

    <script type="text/javascript">

       menus = $('#menu li');

       $(menus).click(function() {

           $(menus).removeClass('active');

           $(this).addClass('active');

       })

    </script>

 

</html>

效果图

 

在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。

 

案例：demo04

<!DOCTYPE html>

<html>

 

    <head>

       <meta charset="UTF-8">

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

       <title></title>

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

       <link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css" />

       <script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

       <script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

    </head>

 

    <body>

       <ul class="nav nav-pills nav-stacked nav-justified" id="menu">

           <li class="active">

              <a href="#">首页</a>

           </li>

           <li>

              <a href="#">简介</a>

           </li>

           <li>

              <a href="#">消息</a>

           </li>

       </ul>

 

    </body>

    <script type="text/javascript">

       menus = $('#menu li');

       $(menus).click(function() {

           $(menus).removeClass('active');

           $(this).addClass('active');

       })

    </script>

 

</html>

效果图

 

 

 

  • 对任何导航组件（标签页、胶囊式标签页），都可以添加 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果。

 

Bootstrap下拉菜单

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里

 

案例：demo05

<!DOCTYPE html>

<html>

 

    <head>

       <meta charset="UTF-8">

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

       <title></title>

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

       <link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css" />

       <script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

       <script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

    </head>

 

    <body>

       <div class="dropdown">

           <button class="btn dropdown-toggle" data-toggle="dropdown">

              下拉菜单<span class="caret"></span>

           </button>

           <ul class="dropdown-menu">

              <li>

                  <a role="menuitem" tabindex="-1" href="#">Java</a>

              </li>

              <li>

                  <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>

              </li>

              <li>

                  <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>

              </li>

              <li class="divider"></li>

              <li>

                  <a role="menuitem" tabindex="-1" href="#">分离的链接</a>

              </li>

           </ul>

       </div>

    </body>

</html>

效果图

Bootstrap 导航栏

案例：demo06

<!DOCTYPE html>

<html>

 

    <head>

       <meta charset="UTF-8">

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

       <title></title>

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

       <link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css" />

       <script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

       <script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

    </head>

 

    <body>

       <nav class="navbar navbar-default" role="navigation">

           <div class="container-fluid">

              <div class="navbar-header">

                  <a class="navbar-brand" href="#">LOGO</a>

              </div>

              <div>

                  <ul class="nav navbar-nav">

                     <li class="active">

                         <a href="#">课程</a>

                     </li>

                     <li>

                         <a href="#">教学</a>

                     </li>

                     <li class="dropdown">

                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">

                         专业

                         <b class="caret"></b>

                     </a>

                         <ul class="dropdown-menu">

                            <li>

                                <a href="#">JAVA</a>

                            </li>

                            <li>

                                <a href="#">UI</a>

                            </li>

                            <li class="divider"></li>

                            <li>

                                <a href="#">跨境电商</a>

                            </li>

                         </ul>

                     </li>

                  </ul>

              </div>

           </div>

       </nav>

    </body>

 

</html>

效果图

 

 

  1. 响应式的导航栏

案例：demo07

<!DOCTYPE html>

<html>

 

    <head>

       <meta charset="UTF-8">

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

       <title></title>

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

       <link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css" />

       <script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

       <script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

    </head>

 

    <body>

       <nav class="navbar navbar-default" role="navigation">

           <div class="container-fluid">

              <div class="navbar-header">

                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">

                   <span class="sr-only">切换导航</span>

                   <span class="icon-bar"></span>

                   <span class="icon-bar"></span>

                   <span class="icon-bar"></span>

               </button>

                  <a class="navbar-brand" href="#">LOGO</a>

              </div>

              <div class="collapse navbar-collapse" id="menu">

                  <ul class="nav navbar-nav">

                     <li class="active">

                         <a href="#">课程</a>

                     </li>

                     <li>

                         <a href="#">教学</a>

                     </li>

                     <li class="dropdown">

                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">

                         专业

                         <b class="caret"></b>

                     </a>

                         <ul class="dropdown-menu">

                            <li>

                                <a href="#">JAVA</a>

                            </li>

                            <li>

                                <a href="#">UI</a>

                            </li>

                            <li class="divider"></li>

                            <li>

                                <a href="#">跨境电商</a>

                            </li>

                         </ul>

                     </li>

                  </ul>

              </div>

           </div>

       </nav>

    </body>

 

</html>

效果图

Bootstrap 提示工具

案例：demo08

<!DOCTYPE html>

<html>

 

    <head>

       <meta charset="UTF-8">

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

       <title></title>

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

       <link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css" />

       <script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

       <script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

    </head>

 

    <body>

       <h4>提示工具（Tooltip）插件 - 按钮</h4>

       <button type="button" class="btn btn-default" data-toggle="tooltip" title="默认的 Tooltip">

默认的 Tooltip

</button>

       <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">

左侧的 Tooltip

</button>

       <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">

顶部的 Tooltip

</button>

       <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">

底部的 Tooltip

</button>

       <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">

右侧的 Tooltip

</button>

    </body>

    <script>

       $(function() {

           $("[data-toggle='tooltip']").tooltip();

       });

    </script>

 

</html>

效果图

  1. 选项

选项名称

类型/默认值

Data 属性名称

描述

animation

boolean
默认值：true

data-animation

提示工具使用 CSS 渐变滤镜效果。

html

boolean
默认值：false

data-html

向提示工具插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。

placement

string|function
默认值：top

data-placement

规定如何定位提示工具（即 top|bottom|left|right|auto）。
当指定为 auto 时，会动态调整提示工具。例如，如果 placement 是 "auto left"，提示工具将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。

selector

string
默认值：false

data-selector

如果提供了一个选择器，提示工具对象将被委派到指定的目标。

title

string | function
默认值：''

data-title

如果未指定 title 属性，则 title 选项是默认的 title 值。

trigger

string
默认值：'hover focus'

data-trigger

定义如何触发提示工具： click| hover | focus | manual。您可以传递多个触发器，每个触发器之间用空格分隔。

delay

number | object
默认值：0

data-delay

延迟显示和隐藏提示工具的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示：

delay:

{ show: 500, hide: 100 }

container

string | false
默认值：false

data-container

向指定元素追加提示工具。
实例： container: 'body'
  1. 方法

方法

描述

实例

Options: .tooltip(options)

向元素集合附加提示工具句柄。

$().tooltip(options)

Toggle: .tooltip('toggle')

切换显示/隐藏元素的提示工具。

$('#element').tooltip('toggle')

Show: .tooltip('show')

显示元素的提示工具。

$('#element').tooltip('show')

Hide: .tooltip('hide')

隐藏元素的提示工具。

$('#element').tooltip('hide')

Destroy: .tooltip('destroy')

隐藏并销毁元素的提示工具。

$('#element').tooltip('destroy')
  1. 事件

事件

描述

实例

show.bs.tooltip

当调用 show 实例方法时立即触发该事件。

$('#myTooltip').on('show.bs.tooltip', function () {

  // 执行一些动作...

})

shown.bs.tooltip

当提示工具对用户可见时触发该事件（将等待 CSS 过渡效果完成）。

$('#myTooltip').on('shown.bs.tooltip', function () {

  // 执行一些动作...

})

hide.bs.tooltip

当调用 hide 实例方法时立即触发该事件。

$('#myTooltip').on('hide.bs.tooltip', function () {

  // 执行一些动作...

})

hidden.bs.tooltip

当提示工具对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。

$('#myTooltip').on('hidden.bs.tooltip', function () {

  // 执行一些动作...

})

 

Bootstrap 弹出框

案例：demo09

<!DOCTYPE html>

<html>

 

    <head>

       <meta charset="UTF-8">

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

       <title></title>

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

       <link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css" />

       <script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

       <script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

    </head>

 

    <body>

       <div class="container" style="padding: 100px 50px 10px;">

           <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="左侧的 Popover 中的一些内容">

    左侧的 Popover

</button>

           <button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="top" data-content="顶部的 Popover 中的一些内容">

    顶部的 Popover

</button>

           <button type="button" class="btn btn-success" data-container="body" data-toggle="popover" data-placement="bottom" data-content="底部的 Popover 中的一些内容">

    底部的 Popover

</button>

           <button type="button" class="btn btn-warning" data-container="body" data-toggle="popover" data-placement="right" data-content="右侧的 Popover 中的一些内容">

    右侧的 Popover

</button>

       </div>

    </body>

    <script>

       $(function() {

           $("[data-toggle='popover']").popover();

       });

    </script>

 

</html>

效果图

http://www.runoob.com/wp-content/uploads/2014/07/popoverplugin_demo.jpg

  1. 选项

选项名称

类型/默认值

Data 属性名称

描述

animation

boolean
默认值：true

data-animation

向弹出框应用 CSS 褪色过渡效果。

html

boolean
默认值：false

data-html

向弹出框插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。

placement

string|function
默认值：top

data-placement

规定如何定位弹出框（即 top|bottom|left|right|auto）。
当指定为 auto 时，会动态调整弹出框。例如，如果 placement 是 "auto left"，弹出框将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。

selector

string
默认值：false

data-selector

如果提供了一个选择器，弹出框对象将被委派到指定的目标。

title

string | function
默认值：''

data-title

如果未指定 title 属性，则 title 选项是默认的 title 值。

trigger

string
默认值：'hover focus'

data-trigger

定义如何触发弹出框： click| hover | focus | manual。您可以传递多个触发器，每个触发器之间用空格分隔。

delay

number | object
默认值：0

data-delay

延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示：

delay:

{ show: 500, hide: 100 }

container

string | false
默认值：false

data-container

向指定元素追加弹出框。
实例： container: 'body'
  1. 方法

方法

描述

实例

Options: .popover(options)

向元素集合附加弹出框句柄。

$().popover(options)

Toggle: .popover('toggle')

切换显示/隐藏元素的弹出框。

$('#element').popover('toggle')

Show: .popover('show')

显示元素的弹出框。

$('#element').popover('show')

Hide: .popover('hide')

隐藏元素的弹出框。

$('#element').popover('hide')

Destroy: .popover('destroy')

隐藏并销毁元素的弹出框。

$('#element').popover('destroy')
  1. 事件

事件

描述

实例

show.bs.popover

当调用 show 实例方法时立即触发该事件。

$('#mypopover').on('show.bs.popover', function () {

  // 执行一些动作...

})

shown.bs.popover

当弹出框对用户可见时触发该事件（将等待 CSS 过渡效果完成）。

$('#mypopover').on('shown.bs.popover', function () {

  // 执行一些动作...

})

hide.bs.popover

当调用 hide 实例方法时立即触发该事件。

$('#mypopover').on('hide.bs.popover', function () {

  // 执行一些动作...

})

hidden.bs.popover

当工具提示对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。

$('#mypopover').on('hidden.bs.popover', function () {

  // 执行一些动作...

})

 

Bootstrap 轮播

 

、案例：demo10

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

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

        <title></title>

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

        <link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css" />

        <script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

        <script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

    </head>

 

    <body>

        <div id="myCarousel" class="carousel slide">

            <!-- 轮播（Carousel）指标 -->

            <ol class="carousel-indicators">

                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

                <li data-target="#myCarousel" data-slide-to="1"></li>

                <li data-target="#myCarousel" data-slide-to="2"></li>

            </ol>

            <!-- 轮播（Carousel）项目 -->

            <div class="carousel-inner">

                <div class="item active">

                    <img src="img/Chrysanthemum.jpg" alt="First slide">

                    <div class="carousel-caption">标题 1</div>

                </div>

                <div class="item">

                    <img src="img/Desert.jpg" alt="Second slide">

                    <div class="carousel-caption">标题 2</div>

                </div>

                <div class="item">

                    <img src="img/Chrysanthemum.jpg" alt="Third slide">

                    <div class="carousel-caption">标题 3</div>

                </div>

            </div>

            <!-- 轮播（Carousel）导航 -->

            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

                <span class="sr-only">Previous</span>

            </a>

            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

                <span class="sr-only">Next</span>

            </a>

        </div>

    </body>

 

</html>

  1. 选项

选项名称

类型/默认值

Data 属性名称

描述

interval

number
默认值：5000

data-interval

自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。

pause

string
默认值："hover"

data-pause

鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。

wrap

boolean
默认值：true

data-wrap

轮播是否连续循环。
  1. 方法

方法

描述

实例

.carousel(options)

初始化轮播为可选的 options 对象，并开始循环项目。

$('#identifier').carousel({

    interval: 2000

})

.carousel('cycle')

从左到右循环轮播项目。

$('#identifier').carousel('cycle')

.carousel('pause')

停止轮播循环项目。

$('#identifier').carousel('pause')

.carousel(number)

循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。

$('#identifier').carousel(number)

.carousel('prev')

循环轮播到上一个项目。

$('#identifier').carousel('prev')

.carousel('next')

循环轮播到下一个项目。

$('#identifier').carousel('next')
  1. 事件

事件

描述

实例

slide.bs.carousel

当调用 slide 实例方法时立即触发该事件。

$('#identifier').on('slide.bs.carousel', function () {

    // 执行一些动作...

})

slid.bs.carousel

当轮播完成幻灯片过渡效果时触发该事件。

$('#identifier').on('slid.bs.carousel', function () {

    // 执行一些动作...

})

Bootstrap 模态框

案例：demo11

<!DOCTYPE html>

<html>

 

    <head>

       <meta charset="UTF-8">

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

       <title></title>

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

       <link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css" />

       <script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

       <script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

    </head>

 

    <body>

       <!-- 按钮触发模态框 -->

       <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>

       <!-- 模态框（Modal） -->

       <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

           <div class="modal-dialog">

              <div class="modal-content">

                  <div class="modal-header">

                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                     <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>

                  </div>

                  <div class="modal-body">在这里添加一些文本</div>

                  <div class="modal-footer">

                     <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                     <button type="button" class="btn btn-primary">提交更改</button>

                  </div>

              </div>

              <!-- /.modal-content -->

           </div>

           <!-- /.modal -->

       </div>

    </body>

 

</html>

效果图

  1. 选项

选项名称

类型/默认值

Data 属性名称

描述

backdrop

boolean 或 string 'static'
默认值：true

data-backdrop

指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。

keyboard

boolean
默认值：true

data-keyboard

当按下 escape 键时关闭模态框，设置为 false 时则按键无效。

show

boolean
默认值：true

data-show

当初始化时显示模态框。

remote

path
默认值：false

data-remote

使用 jQuery .load 方法，为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。如下面的实例所示：

<a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a>
  1. 方法

方法

描述

实例

Options: .modal(options)

把内容作为模态框激活。接受一个可选的选项对象。

$('#identifier').modal({

keyboard: false

})

Toggle: .modal('toggle')

手动切换模态框。

$('#identifier').modal('toggle')

Show: .modal('show')

手动打开模态框。

$('#identifier').modal('show')

Hide: .modal('hide')

手动隐藏模态框。

$('#identifier').modal('hide')
  1. 事件

事件

描述

实例

show.bs.modal

在调用 show 方法后触发。

$('#identifier').on('show.bs.modal', function () {

  // 执行一些动作...

})

shown.bs.modal

当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。

$('#identifier').on('shown.bs.modal', function () {

  // 执行一些动作...

})

hide.bs.modal

当调用 hide 实例方法时触发。

$('#identifier').on('hide.bs.modal', function () {

  // 执行一些动作...

})

hidden.bs.modal

当模态框完全对用户隐藏时触发。

$('#identifier').on('hidden.bs.modal', function () {

  // 执行一些动作...

})

 

Bootstrap分页插件

自带分页样式

Class

描述

示例代码

.pagination

添加该 class 来在页面上显示分页。

<ul class="pagination">

  <li><a href="#">&laquo;</a></li>

  <li><a href="#">1</a></li>

</ul>

.disabled, .active

您可以自定义链接，通过使用 .disabled 来定义不可点击的链接，通过使用 .active 来指示当前的页面。

<ul class="pagination">

  <li class="disabled"><a href="#">&laquo;</a></li>

  <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li>

</ul>

.pagination-lg, .pagination-sm

使用这些 class 来获取不同大小的项。

<ul class="pagination pagination-lg"></ul>

<ul class="pagination"></ul>

<ul class="pagination pagination-sm"></ul>

 

Jquery插件：

 

插件地址：https://github.com/lyonlai/bootstrap-paginator

 

案例：demo12

<!DOCTYPE html>

<html>

 

    <head>

       <meta charset="UTF-8">

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

       <title></title>

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

       <link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css" />

       <script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

       <script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

       <script src="../../src/js/bootstrap-paginator.min.js" type="text/javascript" charset="utf-8"></script>

    </head>

 

    <body>

       <ul></ul>

    </body>

 

    <script type="text/javascript">

       $('ul').bootstrapPaginator({

           /*

            * bootstrap版本。版本2：使用div；版本3：使用ul

            */

           bootstrapMajorVersion: 3,

           /*

            * 当前页码

            */

           currentPage: 1,

           /*

            * 总页数

            */

           totalPages: 123,

           /*

            * 一页显示几个按钮

            */

           numberOfPages: 5,

           /*

            * 按钮大小，默认normal。【small, normal,large】

            */

           size: 'normal',

           /**

            * 设置操作按钮是否显示

            * @param {Object} type - 按钮类型【first:首页、prev:上一页、page:普通按钮、next:下一页、last:末页】

            * @param {Object} number - 按钮对应的页的数字编号

            * @param {Object} current - 当前选中的页的数字编号

            */

           shouldShowPage: function(type, num, current) {

              return true;

           },

           /**

            * 设置操作按钮的class属性

            * @param {Object} type - 按钮类型【first:首页、prev:上一页、page:普通按钮、next:下一页、last:末页】

            * @param {Object} number - 按钮对应的页的数字编号

            * @param {Object} current - 当前选中的页的数字编号

            */

           itemContainerClass: function(type, num, current) {

              if (type === 'page') {

                  return (num === current) ? "active" : "";

              }

           },

           /**

            * 控制每个操作按钮的显示文字

            * @param {Object} type - 按钮类型【first:首页、prev:上一页、page:普通按钮、next:下一页、last:末页】

            * @param {Object} number - 按钮对应的页的数字编号

            * @param {Object} current - 当前选中的页的数字编号

            */

           itemTexts: function(type, num, current) {

              switch (type) {

                  case "first":

                     return "首页";

                  case "prev":

                     return "上一页";

                  case "next":

                     return "下一页";

                  case "last":

                     return "末页";

                  case "page":

                     return num;

              }

           },

           /*

            * 是否使用Bootstrap内置的tooltip。默认是不使用。如果使用，则需要引入bootstrap-tooltip.js插件。

            */

           useBootstrapTooltip: true,

           /*

            * 当参数useBootstrapTooltip为true时，会将该对象传给Bootstrap的bootstrap-tooltip.js插件。

            */

           bootstrapTooltipOptions: {

              animation: true,

              html: true,

              /*

               * Tooltip出现的位置【top、bottom、left、right】

               */

              placement: 'bottom',

              selector: false,

              title: "",

              container: false

           },

           /**

            * 设置操作按钮的title属性

            * @param {Object} type - 按钮类型【first:首页、prev:上一页、page:普通按钮、next:下一页、last:末页】

            * @param {Object} number - 按钮对应的页的数字编号

            * @param {Object} current - 当前选中的页的数字编号

            */

           tooltipTitles: function(type, num, current) {

              return '第' + num + '页';

           },

           /**

            * 为每个操作按钮动态设置链接地址

            * @param {Object} type - 按钮类型【first:首页、prev:上一页、page:普通按钮、next:下一页、last:末页】

            * @param {Object} number - 按钮对应的页的数字编号

            * @param {Object} current - 当前选中的页的数字编号

            */

           /*pageUrl: function(type, num, current) {

              return "action/queryPage.php?page="+num+"&count=<?php isset($count)?$count:0;?>";

           },*/

           /**

            * 为操作按钮绑定click事件

            * @param {Object} event - Jquery事件

            * @param {Object} originalEvent -  点击事件句柄

            * @param {Object} type

            * @param {Object} page

            */

           onPageClicked: function(event, originalEvent, type, page) {

              originalEvent.preventDefault(); //阻止超链接的默认事件执行

           },

           /**

            * 为操作按钮绑定页码改变事件

            * @param {Object} event - 点击事件句柄

            * @param {Object} originalEvent - 

            * @param {Object} type

            * @param {Object} page

            */

           onPageChanged: function(event, originalEvent, type, page) {}

       });

    </script>

 

</html>

效果图

Bootstrap文件上传插件

案例：demo13

<!DOCTYPE html>

<html>

 

    <head>

       <meta charset="UTF-8">

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

       <title></title>

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

       <link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css" />

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

       <script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

       <script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

       <script src="../../src/js/bootstrap-paginator.min.js" type="text/javascript" charset="utf-8"></script>

       <script src="../../src/fileinput/js/fileinput.min.js" type="text/javascript" charset="utf-8"></script>

       <script src="../../src/fileinput/themes/fa/theme.min.js" type="text/javascript" charset="utf-8"></script>

       <script src="../../src/fileinput/js/locales/zh.js" type="text/javascript" charset="utf-8"></script>

    </head>

 

    <body>

       <br/>简单使用<br/>

       <input type="file" id="file-1" value="" />

       <br/>拖拽上传<br/>

       <input type="file" id="file-2" value="" />

       <br/>不显示图片，显示缩略图<br/>

       <input type="file" id="file-3" value="" />

      

       <br/>全部参数<br/>

       <input type="file" id="file" value="" multiple/>

    </body>

    <script type="text/javascript">

       $("#file-1").fileinput({

           theme: 'fa',

           language: 'zh',

           uploadUrl: 'index.html', /*上传地址*/

           showPreview: false /*是否显示上方的阅览和拖拽上传的预览窗口，默认true*/

       });

       /*

        * 1、使用awesome字体图标，必须引入theme.min.js

        * 2、使用中文，必须引入zh.js

        * 3、一次上传一张

        */

       $("#file-2").fileinput({

           theme: 'fa',

           language: 'zh',

           uploadUrl: 'index.html' /*上传地址*/

        });

 

       $("#file-3").fileinput({

           theme: 'fa',

           language: 'zh',

           showCaption: true,/*输入框上是否显示文件名*/

           hideThumbnailContent: true,/*隐藏图片阅览，显示缓冲图*/

       });

      

       $("#file").fileinput({

           theme: 'fa',

           language: 'zh',

           uploadUrl: 'index.html', /*上传地址*/

           showCaption: true,/*输入框上是否显示文件名，默认true*/

           showPreview: true, /*是否显示上方的阅览和拖拽上传的预览窗口，默认true*/

           hideThumbnailContent: false,/*隐藏图片阅览，显示缓冲图，默认false*/

           showRemove:true,/*是否显示移除按钮，默认true*/

           showUpload:true,/*是否显示上传按钮，默认true*/

           showCancel:true,/*是否显示异步请求的时候的取消按钮，默认true*/

           showClose:true,/*是否显示右上角清除的叉叉按钮，默认true*/

           showUploadedThumbs:true,/*，默认true*/

           browseOnZoneClick:true,/*是否单机预览窗口弹出选着文件窗口*/

           autoOrientImage:false,/*阅览窗口是否自适应显示图片*/

           maxFileCount: 2, //表示允许同时上传的最大文件个数 

           autoReplace:false,/*多文件上传的时候，如果超出文件限制是否替换前面的文件，默认false*/

           allowedFileTypes:['image', 'html', 'text', 'video', 'audio', 'flash', 'object'],//上传文件限制

       });

    </script>

 

</html>

效果图

[作业实验]

  1. 利用ajax读取本地文件，实现分页显示数据

 

前端开发工程师-第6章 VUE基础

  1. HTML+CSS+JS精细化教程（新）适合学习和巩固基础（必掌握技能）
  2. JAVA语言（面向对象都不是事，重点是多线程、反射、网络编程、界面编程、设计模式、工程架构、文件系统）
  3. JAVA WEB（MySQL、JDBC、JSP、JSTL、EL、Servlet、Spring、Struts、MyBatis、SpringData等）
  4. Spring Boot2（新版2.X、底层原理深入剖析、更有点餐系统、大型博客系统、商铺平台等完整项目开始视频和源码）
  5. Python（小白基础语法、RESTfull API开发、爬虫、Django、Linux系统、制作小工具）
  6. Photoshop（CS5、CS6、CC2018视频教程、海量素材、酷炫特效制作、经典案例几百集）
  7. Unity2D/3D（手游开发、脚本开发、3D人物模型设计、3D动画、3D塔防游戏、第一人称游戏案例视频跟着做）
  8. Android原生开发（大型OA系统、游戏开发、物联网开发、3D模型显示、单机游戏开发）
  9. IOS原生开发（各种收费应用、游戏开发、工具开发、物联网开发）
  10. PHP（HTML+CSS+JS+PHP+MySQL+MVC+ThinkPHP+Linux+Nginx+Redis）

猜你喜欢

转载自blog.csdn.net/starzhangkiss/article/details/83010186
今日推荐
周排行
成为C++高手之宏与枚举
在CAD二次开发中使用进度条
Js插件ECharts，HighCharts学习网址整理
Celery提交任务出错(on windows.)
cephfs内核客户端性能追踪
thinkphp中PHPExcel用法
EntityFramework动态组合多排序字段
汇编语言（八）实验9 根据材料编程
安装ubuntu后必须做的事情（对我而言）
JS函数式编程
每日归档
更多
2024-10-22(0)
2024-10-21(0)
2024-10-20(0)
2024-10-19(0)
2024-10-18(0)
2024-10-17(0)
2024-10-16(0)
2024-10-15(0)
2024-10-14(0)
2024-10-13(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022