Bootstrap中的阶段和块类是什么?

恩贡戈

我在任何地方都找不到2类的描述:stageblock在Twitter Bootstrap中。这两个类的作用是什么?

例如:

<div class="stage">
  <div class="block">
    <div class="container">
      <div class="row">
        Hello World!
      </div>
    </div>
  </div>
</div>

编辑以在文件toolkit.js中包含类阶段的定义源。

+function ($) {
  'use strict';


  // STAGE CLASS DEFINITION
  // ======================

  var dataApi = '[data-toggle="stage"]'
  var Stage = function (element, options) {
    this.element = element
    this.options = options
  }

  Stage.VERSION = '3.3.5'

  Stage.TRANSITION_DURATION = 150

  Stage.DEFAULTS = {
    easing         : 'cubic-bezier(.2,.7,.5,1)',
    duration       : 300,
    delay          : 0,
    distance       : 250,
    hiddenElements : '#sidebar'
  }

  Stage.prototype.isOpen = function () {
    return $(this.element).hasClass('stage-open')
  }

  Stage.prototype.toggle = function () {
    if (this.isOpen()) {
      this.close()
    } else {
      this.open()
    }
  }

  Stage.prototype.open = function () {
    var that = this

    $(document.body).css('overflow', 'hidden')

    if ('ontouchstart' in document.documentElement) {
      $(document).on('touchmove.bs.stage', function (e) {
        e.preventDefault()
      })
    }

    $(this.options.hiddenElements).removeClass('hidden')

    $(window).one('keydown.bs.stage', $.proxy(function (e) {
      e.which == 27 && this.close()
    }, this))

    $(this.element)
      .on('click.bs.stage', $.proxy(this.close, this))
      .trigger('open.bs.stage')
      .addClass('stage-open')

    if (!$.support.transition) {
      $(that.element)
        .css({
          'left': this.options.distance + 'px',
          'position': 'relative'
        })
        .trigger('opened.bs.stage')
      return
    }

    $(this.element)
      .css({
        '-webkit-transition': '-webkit-transform ' + this.options.duration + 'ms ' + this.options.easing,
            '-ms-transition': '-ms-transform ' + this.options.duration + 'ms ' + this.options.easing,
                'transition': 'transform ' + this.options.duration + 'ms ' + this.options.easing
      })

    this.element.offsetWidth // force reflow

    $(this.element)
      .css({
        '-webkit-transform': 'translateX(' + this.options.distance + 'px)',
            '-ms-transform': 'translateX(' + this.options.distance + 'px)',
                'transform': 'translateX(' + this.options.distance + 'px)'
      })
      .one('bsTransitionEnd', function () {
        $(that.element).trigger('opened.bs.stage')
      })
      .emulateTransitionEnd(this.options.duration)
  }

  Stage.prototype.close = function () {
    $(window).off('keydown.bs.stage')

    var that = this

    function complete () {
      $(document.body).css('overflow', 'auto')

      if ('ontouchstart' in document.documentElement) {
        $(document).off('touchmove.bs.stage')
      }

      $(that.options.hiddenElements).addClass('hidden')

      $(that.element)
        .removeClass('stage-open')
        .css({
          '-webkit-transition': '',
              '-ms-transition': '',
                  'transition': ''
        })
        .css({
          '-webkit-transform': '',
              '-ms-transform': '',
                  'transform': ''
        })
        .trigger('closed.bs.stage')
    }

    if (!$.support.transition) {

      $(this.element)
        .trigger('close.bs.stage')
        .css({
          'left': '',
          'position': ''
        })
        .off('click.bs.stage')

      return complete()
    }

    $(this.element)
      .trigger('close.bs.stage')
      .off('click.bs.stage')
      .css({
        '-webkit-transform': 'none',
            '-ms-transform': 'none',
                'transform': 'none'
      })
      .one('bsTransitionEnd', complete)
      .emulateTransitionEnd(this.options.duration)
  }


  // STAGE PLUGIN DEFINITION
  // =======================

  function Plugin(option) {
    return this.each(function () {
      var $this   = $(this)
      var data    = $this.data('bs.stage')
      var options = $.extend(
        {},
        Stage.DEFAULTS,
        $this.data(),
        typeof option == 'object' && option
      )

      if (!data) $this.data('bs.stage', (data = new Stage(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }

  var old = $.fn.stage

  $.fn.stage             = Plugin
  $.fn.stage.Constructor = Stage


  // STAGE NO CONFLICT
  // =================

  $.fn.stage.noConflict = function () {
    $.fn.stage = old
    return this
  }


  // STAGE DATA-API
  // ==============

  $(document).on('click', dataApi, function () {
    var options = $(this).data()
    var $target = $(this.getAttribute('data-target'))

    if (!$target.data('bs.stage')) {
      $target.stage(options)
    }

    $target.stage('toggle')
  })

}(jQuery);
恩贡戈

我找到他们了。它们位于Bootstrap主题文档中向下滚动右面板,然后查找New components Block and Plugins Stage

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Bootstrap卡块类是什么?

Scene2D 中事件处理的捕获和正常阶段是什么?

Map Reduce编程中的reducer的改组和排序阶段的目的是什么?

Bootstrap 4中的'.well'等价类是什么

底层区块链节点模板中的当前块和最终块是什么?

通过catch块直接父类和子类处理异常之间的区别是什么

Jenkins管道错误-未知的阶段节“ sh”和阶段中的步骤必须在步骤块中

Python和鼻子:“测试类”中的变量范围是什么?

Android中localTime和localDate的替代类是什么?

ECMAScript 6类中的getter和setter是什么?

TypeScript 中接口和类的命名约定是什么?

GORM:Grails域类映射块中的reference:true是什么?

Oracle 中的热块是什么?

Java中的finally块的要旨是什么?

Webpack中的异步块是什么?

python中的代码块是什么?

UITextView中称为“块”的是什么?

Bootstrap 4中的Bootstrap 3'btn-default'类的等效项是什么?

R中的“ {”类是什么?

if-else块中的“ if(0)”块的用途是什么?

ES6中的函数范围变量(var)和块范围变量是什么?

当我们有函数和 lambdas 时,C++ 中的“块”是什么?

fortran中的INTERFACE块和MODULE过程之间的区别是什么?

Apache Spark的阶段是什么?

在块中添加和删除类的动画

QName和Operator类的用途是什么?

在onPause,onStop和onDestroy方法中调用超类方法的正确顺序是什么?为什么?

Maven的目标和阶段是什么,它们之间有什么区别?

Bootstrap中“ row”类的含义是什么,它与容器的区别,以及它如何与col-***-*堆叠?