Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Tidak bisa dropdown navbar gan, solusinya gimana ya?
halo gan saya mau nanya nih, saya punya script navbar dropdown bootstrap, tapi ga bisa di drop. kira kira solusinya ada yang tau? mohon bantuannya gan..
<!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="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- CSS Biasa -->
<link href="websiteharun.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>
<div class="fdg" style="background-color:#dedef8; box-shadow: inset 1px -1px 1px #444; inset -1px 1px 1px #444;">
gsfg</div>
<!-- #######
NAVBAR DROPDOWN#################################################################################################################################################################################################################################################################### -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- ########################################################################################################################################################################################################################################################################### -->
<input type="button" class="btn btn-default">
<input class="btn btn-default" type="button" value="Input">
<input type="button" class="btn btn-default" value="sar">
<button class="btn btn-default" type="submit">sar</button>
<a href="#" class="btn btn-default" type="button" role="button">sara</a>
<button class="btn btn-primary btn-lg" type="button">sasing</button>
<button class="btn btn-primary btn-lg" type="button" disabled="disabled">sasig</button>
<nav class="navbar navbar-default" role="navigation">
<div class="row">
<div class="navbar-header">
<a class="navbar-brand" href="#">TutorialsPoint</a>
</div>
<div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle"> JAVA
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">JMETER</a></li>
<li><a href="#">EJW</a></li>
<li><a href="#">JASPER</a></li>
<li class="divider"></li>
<li><a href="#">SEPARATED</a></li>
<li class="divider"></li>
<li><a href="#"> one mute separated</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"></a>
<ul class="dropdown-menu">
<li><a href="#">sar</a></li>
<li><a href="#">sasdf</a></li>
<li><a href="#">gsrgreh</a></li>
<li class="divider"></li>
<li><a href="#">fsfhd</a></li>
<li class="divider"></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</li>
<nav class="navbar navbar-default">
<div class="navbar-header">
<a href="#" class="navbar-brand">sarwono sibagariang</a>
</div>
<div class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="search">
</div>
<button type="submit"class="btn btn-default" >submit</button>
</div>
</nav>
</div>
<img src="011.jpg" alt="sdgds" class="img-tumbnail">
<div class="hidden">
<div class="clearfix" style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
<div class="pull-left" style="background:#58D3F7;">
Quick Float to left
</div>
<div class="pull-right" style="background: #DA81F5;">
Quick Float to right
</div>
</div></div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="011.jpg" alt="">
<div class="caption">
<h3>sesuatuuuu</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, nemo molestiae sint non qui modi dolor aspernatur expedita asperiores laboriosam voluptatibus odit sunt quia aut cupiditate. Nulla sequi impedit perferendis?</p>
<a href="#" role="buttnon" class="btn btn-primary">sfdgd</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="011.jpg" alt="">
<div class="caption">
<h3>sesuatuuuu</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, nemo molestiae sint non qui modi dolor aspernatur expedita asperiores laboriosam voluptatibus odit sunt quia aut cupiditate. Nulla sequi impedit perferendis?</p>
<a href="#" role="buttnon" class="btn btn-primary">sfdgd</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="011.jpg" alt="">
<div class="caption">
<h3>sesuatuuuu</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, nemo molestiae sint non qui modi dolor aspernatur expedita asperiores laboriosam voluptatibus odit sunt quia aut cupiditate. Nulla sequi impedit perferendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, sunt doloremque consequuntur necessitatibus qui consequatur molestiae eaque rerum. Distinctio, provident praesentium amet sapiente saepe nulla magni tenetur nesciunt nihil placeat!</p>
<a href="#" role="buttnon" class="btn btn-primary">sfdgd</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="011.jpg" alt="">
<div class="caption">
<h3>sesuatuuuu</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, nemo molestiae sint non qui modi dolor aspernatur expedita asperiores laboriosam voluptatibus odit sunt quia aut cupiditate. Nulla sequi impedit perferendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, sunt doloremque consequuntur necessitatibus qui consequatur molestiae eaque rerum. Distinctio, provident praesentium amet sapiente saepe nulla magni tenetur nesciunt nihil placeat!</p>
<a href="#" role="buttnon" class="btn btn-primary">sfdgd</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="011.jpg" alt="">
<div class="caption">
<h3>sesuatuuuu</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, nemo molestiae sint non qui modi dolor aspernatur expedita asperiores laboriosam voluptatibus odit sunt quia aut cupiditate. Nulla sequi impedit perferendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, sunt doloremque consequuntur necessitatibus qui consequatur molestiae eaque rerum. Distinctio, provident praesentium amet sapiente saepe nulla magni tenetur nesciunt nihil placeat!</p>
<a href="#" role="buttnon" class="btn btn-primary">sfdgd</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="011.jpg" alt="">
<div class="caption">
<h3>sesuatuuuu</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, nemo molestiae sint non qui modi dolor aspernatur expedita asperiores laboriosam voluptatibus odit sunt quia aut cupiditate. Nulla sequi impedit perferendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, sunt doloremque consequuntur necessitatibus qui consequatur molestiae eaque rerum. Distinctio, provident praesentium amet sapiente saepe nulla magni tenetur nesciunt nihil placeat!</p>
<a href="#" role="buttnon" class="btn btn-primary">sfdgd</a>
</div>
</div>
</div>
</div>
</div>
<div class="navbar-form navbar-left ">
<div class="form-group"><input type="text" class="form-control" placeholder="hay.">
<input type="button" class="btn btn-default" value="sfsdfs"></div></div>
<!-- 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>
0
5 Jawaban:
Skrip bootstrap.min.js nya diatas tag script jquery.min.js gan.
1
Jawaban Terpilih
semestinya udah bener itu. jquery memang ditaruh sebelum bootstrap js. kalo liat css dan js pathnya mungkin agan salah load path script bootstrapnya. di css pathnya "bootstrap/css/bootstrap.min.css"
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
script js "js/bootstrap.min.js"
<script src="js/bootstrap.min.js"></script>
mungkin harusnya "bootstrap/js/bootstrap.min.js"
1
agan pakenya jquery external, pas dicoba agan ada koneksi internet ngga ? Kalo ngga ada agan pake jquerynya dimasukin aja ke projectnya, jadi ngga usah manggil via internet, agan download dulu trus masukkin ke project agan trus panggil deh.. contohnya file jquery.js ada di folder asset/js/jquery.js maka pemanggilan filenya
<script scr="assets/js/jquery.js" type="text/javascript"></script>
1
wah oke, trimakasih gan @ahmadhanaf , @rachmatsasongko , @rickyrahmanto sekarang sudah bisa,, kesalahan di css pathnya "bootstrap/css/bootstrap.min.css. trimakasih
0