务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。

• Home
• Profile
• Messages
• Settings

• 列表标题
• 首页
• 库
• 应用
• 功能列表
• 资料
• 设置
• 帮助

• .glyphicon .glyphicon-adjust
• .glyphicon .glyphicon-align-center
• .glyphicon .glyphicon-align-justify
• .glyphicon .glyphicon-align-left
• .glyphicon .glyphicon-align-right
• .glyphicon .glyphicon-arrow-down
• .glyphicon .glyphicon-arrow-left
• .glyphicon .glyphicon-arrow-right
• .glyphicon .glyphicon-arrow-up
• .glyphicon .glyphicon-asterisk
• .glyphicon .glyphicon-backward
• .glyphicon .glyphicon-ban-circle
• .glyphicon .glyphicon-barcode
• .glyphicon .glyphicon-bell
• .glyphicon .glyphicon-bold
• .glyphicon .glyphicon-book
• .glyphicon .glyphicon-bookmark
• .glyphicon .glyphicon-briefcase
• .glyphicon .glyphicon-bullhorn
• .glyphicon .glyphicon-calendar
• .glyphicon .glyphicon-camera
• .glyphicon .glyphicon-certificate
• .glyphicon .glyphicon-check
• .glyphicon .glyphicon-chevron-down
• .glyphicon .glyphicon-chevron-left
• .glyphicon .glyphicon-chevron-right
• .glyphicon .glyphicon-chevron-up
• .glyphicon .glyphicon-circle-arrow-down
• .glyphicon .glyphicon-circle-arrow-left
• .glyphicon .glyphicon-circle-arrow-right
• .glyphicon .glyphicon-circle-arrow-up
• .glyphicon .glyphicon-cloud
• .glyphicon .glyphicon-cloud-download
• .glyphicon .glyphicon-cloud-upload
• .glyphicon .glyphicon-cog
• .glyphicon .glyphicon-collapse-down
• .glyphicon .glyphicon-collapse-up
• .glyphicon .glyphicon-comment
• .glyphicon .glyphicon-compressed
• .glyphicon .glyphicon-copyright-mark
• .glyphicon .glyphicon-credit-card
• .glyphicon .glyphicon-cutlery
• .glyphicon .glyphicon-dashboard
• .glyphicon .glyphicon-download
• .glyphicon .glyphicon-download-alt
• .glyphicon .glyphicon-earphone
• .glyphicon .glyphicon-edit
• .glyphicon .glyphicon-eject
• .glyphicon .glyphicon-envelope
• .glyphicon .glyphicon-euro
• .glyphicon .glyphicon-exclamation-sign
• .glyphicon .glyphicon-expand
• .glyphicon .glyphicon-export
• .glyphicon .glyphicon-eye-close
• .glyphicon .glyphicon-eye-open
• .glyphicon .glyphicon-facetime-video
• .glyphicon .glyphicon-fast-backward
• .glyphicon .glyphicon-fast-forward
• .glyphicon .glyphicon-file
• .glyphicon .glyphicon-film
• .glyphicon .glyphicon-filter
• .glyphicon .glyphicon-fire
• .glyphicon .glyphicon-flag
• .glyphicon .glyphicon-flash
• .glyphicon .glyphicon-floppy-disk
• .glyphicon .glyphicon-floppy-open
• .glyphicon .glyphicon-floppy-remove
• .glyphicon .glyphicon-floppy-save
• .glyphicon .glyphicon-floppy-saved
• .glyphicon .glyphicon-folder-close
• .glyphicon .glyphicon-folder-open
• .glyphicon .glyphicon-font
• .glyphicon .glyphicon-forward
• .glyphicon .glyphicon-fullscreen
• .glyphicon .glyphicon-gbp
• .glyphicon .glyphicon-gift
• .glyphicon .glyphicon-glass
• .glyphicon .glyphicon-globe
• .glyphicon .glyphicon-hand-down
• .glyphicon .glyphicon-hand-left
• .glyphicon .glyphicon-hand-right
• .glyphicon .glyphicon-hand-up
• .glyphicon .glyphicon-hd-video
• .glyphicon .glyphicon-hdd
• .glyphicon .glyphicon-header
• .glyphicon .glyphicon-headphones
• .glyphicon .glyphicon-heart
• .glyphicon .glyphicon-heart-empty
• .glyphicon .glyphicon-home
• .glyphicon .glyphicon-import
• .glyphicon .glyphicon-inbox
• .glyphicon .glyphicon-indent-left
• .glyphicon .glyphicon-indent-right
• .glyphicon .glyphicon-info-sign
• .glyphicon .glyphicon-italic
• .glyphicon .glyphicon-leaf
• .glyphicon .glyphicon-link
• .glyphicon .glyphicon-list
• .glyphicon .glyphicon-list-alt
• .glyphicon .glyphicon-lock
• .glyphicon .glyphicon-log-in
• .glyphicon .glyphicon-log-out
• .glyphicon .glyphicon-magnet
• .glyphicon .glyphicon-map-marker
• .glyphicon .glyphicon-minus
• .glyphicon .glyphicon-minus-sign
• .glyphicon .glyphicon-move
• .glyphicon .glyphicon-music
• .glyphicon .glyphicon-new-window
• .glyphicon .glyphicon-off
• .glyphicon .glyphicon-ok
• .glyphicon .glyphicon-ok-circle
• .glyphicon .glyphicon-ok-sign
• .glyphicon .glyphicon-open
• .glyphicon .glyphicon-paperclip
• .glyphicon .glyphicon-pause
• .glyphicon .glyphicon-pencil
• .glyphicon .glyphicon-phone
• .glyphicon .glyphicon-phone-alt
• .glyphicon .glyphicon-picture
• .glyphicon .glyphicon-plane
• .glyphicon .glyphicon-play
• .glyphicon .glyphicon-play-circle
• .glyphicon .glyphicon-plus
• .glyphicon .glyphicon-plus-sign
• .glyphicon .glyphicon-print
• .glyphicon .glyphicon-pushpin
• .glyphicon .glyphicon-qrcode
• .glyphicon .glyphicon-question-sign
• .glyphicon .glyphicon-random
• .glyphicon .glyphicon-record
• .glyphicon .glyphicon-refresh
• .glyphicon .glyphicon-registration-mark
• .glyphicon .glyphicon-remove
• .glyphicon .glyphicon-remove-circle
• .glyphicon .glyphicon-remove-sign
• .glyphicon .glyphicon-repeat
• .glyphicon .glyphicon-resize-full
• .glyphicon .glyphicon-resize-horizontal
• .glyphicon .glyphicon-resize-small
• .glyphicon .glyphicon-resize-vertical
• .glyphicon .glyphicon-retweet
• .glyphicon .glyphicon-road
• .glyphicon .glyphicon-save
• .glyphicon .glyphicon-saved
• .glyphicon .glyphicon-screenshot
• .glyphicon .glyphicon-sd-video
• .glyphicon .glyphicon-search
• .glyphicon .glyphicon-send
• .glyphicon .glyphicon-share
• .glyphicon .glyphicon-share-alt
• .glyphicon .glyphicon-shopping-cart
• .glyphicon .glyphicon-signal
• .glyphicon .glyphicon-sort
• .glyphicon .glyphicon-sort-by-alphabet
• .glyphicon .glyphicon-sort-by-alphabet-alt
• .glyphicon .glyphicon-sort-by-attributes
• .glyphicon .glyphicon-sort-by-attributes-alt
• .glyphicon .glyphicon-sort-by-order
• .glyphicon .glyphicon-sort-by-order-alt
• .glyphicon .glyphicon-sound-5-1
• .glyphicon .glyphicon-sound-6-1
• .glyphicon .glyphicon-sound-7-1
• .glyphicon .glyphicon-sound-dolby
• .glyphicon .glyphicon-sound-stereo
• .glyphicon .glyphicon-star
• .glyphicon .glyphicon-star-empty
• .glyphicon .glyphicon-stats
• .glyphicon .glyphicon-step-backward
• .glyphicon .glyphicon-step-forward
• .glyphicon .glyphicon-stop
• .glyphicon .glyphicon-subtitles
• .glyphicon .glyphicon-tag
• .glyphicon .glyphicon-tags
• .glyphicon .glyphicon-tasks
• .glyphicon .glyphicon-text-height
• .glyphicon .glyphicon-text-width
• .glyphicon .glyphicon-th
• .glyphicon .glyphicon-th-large
• .glyphicon .glyphicon-th-list
• .glyphicon .glyphicon-thumbs-down
• .glyphicon .glyphicon-thumbs-up
• .glyphicon .glyphicon-time
• .glyphicon .glyphicon-tint
• .glyphicon .glyphicon-tower
• .glyphicon .glyphicon-transfer
• .glyphicon .glyphicon-trash
• .glyphicon .glyphicon-tree-conifer
• .glyphicon .glyphicon-tree-deciduous
• .glyphicon .glyphicon-unchecked
• .glyphicon .glyphicon-upload
• .glyphicon .glyphicon-usd
• .glyphicon .glyphicon-user
• .glyphicon .glyphicon-volume-down
• .glyphicon .glyphicon-volume-off
• .glyphicon .glyphicon-volume-up
• .glyphicon .glyphicon-warning-sign
• .glyphicon .glyphicon-wrench
• .glyphicon .glyphicon-zoom-in
• .glyphicon .glyphicon-zoom-out

进度条必须包含在类为 .progress 的 div 层内

• 

  商城版本说明(中部对齐)

  系统默认(单店版,当前商城的数据完全为本公众号自有，与其他平台无关联；前台仅展现当前公众平台对应商城的信息，后台仅能管理当前公众平台对应商城的信息)
  

  • 

    分店版

    (当前商城为某个公众平台的分店，自身任何产品库;前台仅展现上级店所在公众平台对应商城的信息；后台仅能管理当前公众平台对应商城的基础信息及订单等数据)
    

    • 

      总店版

      (当前商城为总店，管理下辖全部分店的信息；前台仅展现当前公众号的信息，各分店继承调用总店自有产品库；后台允许管理所含各分店对应商城的信息)
      
  • 

    多店版

    (当前商城包含多个供应商店铺的内容，并允许本公众平台有自己的产品库，但无下级分店。 前台允许展现多店信息；后台允许管理所自有商城信息、读取供应商商城相应信息)
    
• 

  商城版本说明(顶部对齐)

  平台版(当前商城既有多供应商、同时也有多分销商，上级店铺允许是下级店铺允许是多店/总店/单店版本，下级店铺允许是多店/总店/分店版本。前台调用展现平台内各店可用产品库，后台允许管理平台内全部供应商、分销商商城的信息)
• 

  商城版本说明(底部对齐)

  系统默认(单店版,当前商城的数据完全为本公众号自有，与其他平台无关联；前台仅展现当前公众平台对应商城的信息，后台仅能管理当前公众平台对应商城的信息)
  分店版(当前商城为某个公众平台的分店，自身任何产品库;前台仅展现上级店所在公众平台对应商城的信息；后台仅能管理当前公众平台对应商城的基础信息及订单等数据)
  总店版(当前商城为总店，管理下辖全部分店的信息；前台仅展现当前公众号的信息，各分店继承调用总店自有产品库；后台允许管理所含各分店对应商城的信息)
  多店版(当前商城包含多个供应商店铺的内容，并允许本公众平台有自己的产品库，但无下级分店。 前台允许展现多店信息；后台允许管理所自有商城信息、读取供应商商城相应信息)
  平台版(当前商城既有多供应商、同时也有多分销商，上级店铺允许是下级店铺允许是多店/总店/单店版本，下级店铺允许是多店/总店/分店版本。前台调用展现平台内各店可用产品库，后台允许管理平台内全部供应商、分销商商城的信息)

  <!-- 演示Modal -->

<div class="modal fade" id="myModalContainer-453" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" aria-describedby="演示模态框">

  <div class="modal-dialog" aria-hidden="true" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">模态框标题</h4>

      </div>

      <div class="modal-body">

        <form>

          <div class="form-group">

            <label for="recipient-name" class="control-label">Recipient:</label>

            <input type="text" class="form-control" id="recipient-name">

          </div>

          <div class="form-group">

            <label for="message-text" class="control-label">Message:</label>

            <textarea class="form-control" id="message-text"></textarea>

          </div>

        </form>

      </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-dialog -->

</div><!-- /.modal -->

<script type="text/javascript">

$("#myModalContainer-453").on("show.bs.modal", function (event) {

  var button = $(event.relatedTarget); // Button that triggered the modal

  var recipient = button.data("changetitle"); // Extract info from data-* attributes

  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).

  // Update the modal"s content. We"ll use jQuery here, but you could use a data binding library or other methods instead.

  var modal = $(this);

  modal.find(".modal-title").text("New message to " + recipient);

  modal.find(".modal-body input").val(recipient);

});

</script>

  

模态框必须尽量保存在body的下一级，不被其他元素包含

		$(this).function () {
  $('[data-toggle="tooltip"]').tooltip();
  $('.carousel').carousel({
  	interval: 2000
  });
  $('#myTab a').click(function (e) {
		e.preventDefault();//阻止a链接的跳转行为
		$(this).tab('show');//显示当前选中的链接及关联的content,使用该功能前提是a链接中加上data-toggle="tab"
	});
});