加载按钮 bootstrap

Question

我对 bootstrap 和 ASP.NET 有疑问。今天我尝试为我的网络表单中的按钮添加一些样式，但效果不佳。例如，如果我只使用输入或简单按钮，bootstrap 效果惊人，但如果我在 asp 按钮中使用 bootstrap 和表单（因为所有控件都需要表单运行服务器才能工作） bootstrap 加载无效。我想使用此页面中的相同示例 Ladda for Bootstrap

如果有人遇到这个问题并有解决方案请发表评论。

Answer 1

<html lang="en">

 <head>
  <meta charset="utf-8">

  <title>Ladda for Bootstrap 3 UI</title>

  <meta name="description" content="Bootstrap 3 loading state for buttons">
  <meta name="author" content="Maks Surguy">

  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

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

  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

  <link rel="stylesheet" href="dist/ladda-themeless.min.css">

  <link rel="stylesheet" href="css/prism.css">
  
 </head>

 <body>
        <form id="form1" runat="server">
  <div class="container">   
   
   
   <div class="row">
    <div class="col-md-6 col-md-offset-3 text-center progress-demo">
     <p>Built-in progress bar</p>
     <p>
      <asp:Button ID="btnRegistrar" runat="server" Text="Registrar" CssClass="btn btn-danger ladda-button" data-style="expand-left"></asp:Button>
     </p>
    </div>
   </div>
   

  </div>

  <script src="dist/spin.min.js"></script>
  <script src="dist/ladda.min.js"></script>

  <script>

      // Bind normal buttons
      Ladda.bind('div:not(.progress-demo) button', { timeout: 2000 });
      Ladda.bind('input[type=submit]');
      // Bind progress buttons and simulate loading progress
      Ladda.bind('.progress-demo button', {
          callback: function (instance) {
              var progress = 0;
              var interval = setInterval(function () {
                  progress = Math.min(progress + Math.random() * 0.1, 1);
                  instance.setProgress(progress);

                  if (progress === 1) {
                      instance.stop();
                      clearInterval(interval);
                  }
              }, 200);
          }
      });

      // You can control loading explicitly using the JavaScript API
      // as outlined below:

      // var l = Ladda.create( document.querySelector( 'button' ) );
      // l.start();
      // l.stop();
      // l.toggle();
      // l.isLoading();
      // l.setProgress( 0-1 );

  </script>

  <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
  <script type="text/javascript" src="js/prism.js"></script>
</form>
 </body>
</html>

加载按钮 bootstrap

Ladda button bootstrap

asp.net

webforms

twitter-bootstrap