I'm trying to make dropdown using Bootstrap framework. This is how I did:
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div>
</div>
Just like in example. And this is how I include .js in xsl:
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.js"> </script>
So the menu doesn't work. I see few buttons, but no dropdown effect.
You must also include jQuery and bootstrap css:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
Don't forget to include jQuery BEFORE bootstrap js.
Related
i am designing searchBox wich has a select(dropdown ) at the right side but when i press on dropdown nothing happens means that i don't see dropdown list items ,i don't know why is not listening to onclick. please help me.
i want to do sothing like this but combo box does not work :
My code:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data- toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data- toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
</body>
</html>
Hello You are not identifying the class at the first place by writing
<button type="button" class="btn btn-default ></button>
refer the the class name first it will work something like this
<button class="btn btn-default type="button"></button>
use this dropdown code
<div class="dropdown">
<button class="btn btn btn-default dropdown-toggle" type="button" data-
toggle="dropdown">Action
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
and for the Whole Work details Check the below Fiddle I updated Your Work
DropDown Fiddle Demo
I can't clearly under stand your problem but as i understood
if you want to make drop down list you should use
<select class="dropdown-menu">
<option>Action</option>
<option>Another action</option>
<option>Something else here</option>
<option role="separator" class="divider"></option>
<option>Separated link</option>
</select>
The Result will be This :
like this http://www.w3schools.com/TagS/tryit.asp?filename=tryhtml_option_selected
and if you want to Selects a subset of items from array use Filters
like this https://docs.angularjs.org/api/ng/filter/filter
I hope to be useful
I'm trying to make the values of my two bootstrap dropdown menus selectable. The site can be viewed here.
As you can see I have customised the dropdown menu's slightly within the CSS.
HTML:
<!-- City Dropdown -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select City <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
<li>All</li>
<li class="dropdown-header">City</li>
<li>Manchester</li>
<li>Liverpool</li>
<li>London</li>
<li>Newcastle</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Town</li>
<li>Wigan</li>
<li>St Helens</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Other</li>
<li>Warwick</li>
<li>Oxford</li>
<li>Cambridge</li>
</ul>
</div>
<!-- Version Dropdown -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Version <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
<li>All</li>
<li>V1</li>
<li>V2</li>
<li>V3</li>
<li>V4</li>
<li>V5</li>
<li>V6</li>
<li>V7</li>
<li>V8</li>
</ul>
</div>
</div>
</div>
</div>
Thanks!
I used the answer posted by "GL.awog" - Consider silviomoreto.github.io/bootstrap-select, the standard bs dropdown menu is simply for navigation, not working as a select.
The site was easy to follow and I had this working in minutes :)
So I have just started playing around with bootstrap, and when I try to fallow the example per Getbootstrap's component page the button doesn't want to work as advertised. I have seen and now tried a number of different solutions to this problem which has me thinking that I maybe over thinking what is wrong here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rubish</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="maindev1.0.0.css" />
<link rel="stylesheet" type="text/css" href="navbardev1.0.0.css" />
</head>
<body>
<div class="navbar-header pull-right">
<button id="menubutton" class="btn btn-default btn-md dropdown-toggle" data-toggle="dropdown"
type="button" aria-expanded="false"><span class="glyphicon glyphicon-list"></span> </button>
</div>
<ul class="dropdown-menu" role="menu">
<li>yadayada
</li>
<li class="divider"></li>
<li>yadayada
</li>
<li class="divider"></li>
<li>yadayada
</li>
<li class="divider"></li>
<li>yadayada
</li>
<li class="divider"></li>
<li>yadayada
</li>
</ul>
</body>
</html>
I can get the button to show up and it looks like its active when I click it but it can not get the drop down to appear. I have tried it with Safari, Chrome, and Firefox with the same result in all three. Is there something that I am forgetting?
You don't say if it is in a navbar or just a normal one. From your code it looks like you are trying top do it in a navbar. I also included a normal dropdown button.
fiddle: https://jsfiddle.net/DTcHh/8607/
<!-- Normal Single Dropdown button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
select {background-color: blue; color: white; border: 2px solid; border-radius: 6px;}
<select name="yada">
<option value="yada">yada</option>
<option value="yada">yada</option>
<option value="yada">yada</option>
<option value="yada">yada</option>
</select>
Why not just replace the button with a dropdown like this and then style it to look like a button?
I have included twitter bootstrap css and js files, and then using the following Javascript code, I want to applyn drop down effect to the the HTML markup. But it does not work, neither does show any error in console. Please helpe me.
I have included:
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/game/public/css/bootstrap-responsive.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/game/public/css/bootstrap.min.css">
<script src="http://localhost/game/public/js/bootstrap.min.js"></script>
<script src="http://localhost/game/public/js/bootstrap-datepicker.js"></script>
And this is the Javascript:
<script type="text/javascript">
$(document).ready(function(){
$('.nav').dropdown();
});
</script>
And this is the Markup:
<ul class='nav nav-pills pullright'>
<li class="btn btn-navbar">خانه کاربری</li>
<li class="btn btn-navbar"><a class="dropdown-toggle" href="#">سفارش جدید</a>
<ul class="dropdown-menu nav-collapse">
<li class="btn btn-navbar">سفارش بازی
<ul>
<li class="btn btn-navbar">Counter Strike
</ul>
<li>
</ul>
</li>
<li class="btn btn-navbar">سفارش بازی</li>
<li class="btn btn-navbar">فهرست سفارش ها</li>
<li class="btn btn-navbar" >فهرست پرداخت ها</li>
<li class="btn btn-navbar">ثبت فیش پرداختی</li>
<li class="btn btn-navbar">حساب کاربری</li>
<li class="btn btn-navbar">تغییر رمز عبور</li>
<li class="btn btn-navbar">خروج</li>
</ul>
You don't need any javascript, just include the bootstrap css and js files in your pages.
You can see an example of the dropdown component here :
http://getbootstrap.com/components/#btn-dropdowns
I created one dropdown list using bootstrap css
I want to change the color of label when item in dropdown menu selected. But here i dont know why the dropdown items are not visible
CODEPEN DEMO
<label> Test color </label>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li>yellow</li>
<li>green</li>
<li>black</li>
<li class="divider"></li>
<li>red</li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
How can I change the color of label when color is selected from the menu?
UPDATED CODE:
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="sticky-footer-navbar.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<label>Test color</label>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn btn-default">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li>yellow
</li>
<li>green
</li>
<li>black
</li>
<li class="divider"></li>
<li>red
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
</body>
</html>
It looks like something is wrong with the way you've included Bootstrap 3 on your codepen.
The dropdown shows fine on Bootply using Bootstrap 3.0.3: http://bootply.com/103458
You can change the label text color with something like this:
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$('label').css('color',selText);
});