Question

我遇到了bootstrap和ASP.NET的问题。今天我尝试为我的webform中的按钮添加一些样式但是效果不好。例如，如果我只使用输入或简单的按钮引导工作惊人，但如果我在asp按钮与表单使用bootstrap（因为所有控件需要一个表单runat服务器工作）引导程序加载不起作用。我想在此页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>

Ladda按钮引导程序

1 个答案: