jquery-ui可调整大小的问题（无论我尝试什么，都无法让它工作）

Question

我一定要错过一些非常简单的东西，但我不能为我的生活弄明白什么。

基本上在我正在处理的页面上我有6个具有相同类的div，我需要它们可以调整大小。我无法让它工作所以我创建了一个简单的测试页面，只是为了看看它是否可以使用我正在使用的语法。

我试图在document.ready函数内外使用它，但没有一个工作。

以下是加载内容和脚本的代码：

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/oam-white.css" rel="stylesheet">
<link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="js/jquery-ui-1.12.0.custom/jquery-ui-1.12.0.custom/jquery-ui.min.css">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/oam.js"></script>
    <script>
    $(document).ready(function() {
        });
    $(function() {
    $('#test').resizable({
        animate: true
        });
    });
</script>

这是codepen

提前感谢您的帮助。杆