Я работаю над Django проектом с Materialize css design - Например, построил страницу с плавающей кнопкой.
Почему не работает?
Я начал использовать именно шаблон с веб-сайта: https://materializecss.com/getting-started.html и обновленный из части CDN на странице:
<!--Import materialize.css--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> And added at the bottom: <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
Большое спасибо!
Полный HTML:
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!--Import materialize.css--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <div class="fixed-action-btn"> <a href="#" class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a> <ul> <li><a href="#" class="btn-floating btn-large blue"> <i class="large material-icons">filter_drama</i></a></li> <li><a href="#" class="btn-floating btn-large green"> <i class="large material-icons">insert_chart</i></a></li> </li> </ul> </div> <!--JavaScript at end of body for optimized loading--> <script type="text/javascript" src="js/materialize.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </body> </html>
Прочитав несколько сообщений, я предлагаю добавить следующее, и это сработало:
<!--JavaScript at end of body for optimized loading--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
Если кто-то знает, как объяснить нижеприведенное, это будет здорово:
Полный HTML с 'ДОБАВЛЕННОЙ ЧАСТЬЮ, КОТОРОЙ Заставьте это работать ':
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!--Import materialize.css--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <div class="fixed-action-btn"> <a href="#" class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a> <ul> <li><a href="#" class="btn-floating btn-large blue"> <i class="large material-icons">filter_drama</i></a></li> <li><a href="#" class="btn-floating btn-large green"> <i class="large material-icons">insert_chart</i></a></li> </li> </ul> </div> <!--JavaScript at end of body for optimized loading--> <script type="text/javascript" src="js/materialize.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> ADDED PART THAT MAKE IT WORK: <!--JavaScript at end of body for optimized loading--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> </body> </html>