Sunday, July 9, 2017

Penyebab menu dropdown bootstrap tidak berfungsi

Tags

bootstrap adalah salah satu framework css yang paling populer saat ini dengan segala kelebihan dan kemudahan yang diberikan bootstrap. salah satu keunggulan bootstrap adalah designe yang otomatis responsive.

kehadiran framework css bootstrap ini sangat membantu bagi front end web developer, saya sendiri baru mengenal dasar dasar css tetapi dengan bootstrap sudah bisa membuat desainge web sederhana yang jika hanya memakai css murni tentu membutuhkan banyak waktu dan tenaga dalam membuatnya.

suatu hari saya membuat sistem informasi sederhana berbasis php dan front end nya dg bantuan bootstrap. saya menemukan masalah, sistem yang saya buat dilocalhost berjalan dengan baik tetapi ketika setelah di upload ke hosting ternyata menu dropdownnya tidak berfungsi.

menu dropdown bootstrap tidak berfungsi


setelah browsing akhirnya menemukan jawaban dari para master di stackoverflow dan kaskus. solusi jika menu dropdown tidak berfungsi di hosting adalah dengan meng"include"kan  atau memanggil semua file yang dibutuhkan.

dan kuncinya adalah file JS di panggil terlebih dahulu, setelah itu baru file css

contoh dari web resmi bootstrap seperti ini :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

contoh ini file js diletakkan setelah css, kalau seperti ini dihosting biasanya tidak jalan. cukup dengan memindahkan js ke atas seperti ini :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    
  </body>
</html>


saya rasa teman teman juga pernah mengalami seperti ini, demikian catatan singkat ini semoga bermanfaat

Berilah komentar sessuai dengan topik, gunakan bahasa yang santun.
dilarang SARA, SPAM dan Iklan
EmoticonEmoticon