jQuery UI Bootstrap - 结合Bootstrap的jQuery UI插件
为了使用jQuery UI Bootstrap，你需要先引入jQuery UI库和Bootstrap库，然后引入jQuery UI Bootstrap插件。以下是一个基本的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery UI Bootstrap Example</title>
<!-- 引入Bootstrap样式 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- 引入jQuery UI样式 -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- 引入jQuery UI -->
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- 引入Bootstrap JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- 引入jQuery UI Bootstrap插件 -->
<script src="jquery-ui.bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div id="draggable" class="ui-widget-content">
拖动我！
</div>
</div>
</div>
</div>
<script>
$(function() {
$("#draggable").draggable();
});
</script>
</body>
</html>在这个例子中，我们引入了Bootstrap和jQuery UI所需的CSS和JavaScript文件。然后，我们引入了jQuery UI Bootstrap插件，这样就可以将Bootstrap的样式应用到jQuery UI的部件上。最后，我们使用jQuery初始化了一个可拖动的部件。这个示例展示了如何将Bootstrap与jQuery UI结合使用，为用户提供友好的界面元素。
评论已关闭