Commit 89f7b7d1 authored by Eduard Dudar's avatar Eduard Dudar

Added Bootstrap 3.0 files (js + css + fonts); updates: search field to match...

Added Bootstrap 3.0 files (js + css + fonts); updates: search field to match 3.0 markup in JS, LESS template, HTML examples.
parent 2f6bb0fe
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
.multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0}.multiselect-container input[type="text"]{width:70%}.multiselect-container .input-prepend{padding:3px}.multiselect-container>li{padding:0}.multiselect-container>li>label{margin:0;padding:3px 20px 3px 20px;height:100%;cursor:pointer}.multiselect-container>li>label.multiselect-header{margin:0;padding:3px 20px 3px 20px;height:100%}.multiselect-container>li>label>input[type="checkbox"]{margin-bottom:5px}
\ No newline at end of file
.multiselect-container {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
}
.multiselect-container .input-group {
margin: 5px;
}
.multiselect-container > li {
padding: 0;
}
.multiselect-container > li > a.multiselect-all label {
font-weight: bold;
}
.multiselect-container > li > label.multiselect-group {
margin: 0;
padding: 3px 20px 3px 20px;
height: 100%;
}
.multiselect-container > li > a > label {
margin: 0;
height: 100%;
cursor: pointer;
font-weight: normal;
}
.multiselect-container > li > a > label.radio,
.multiselect-container > li > a > label.checkbox {
margin: 0;
}
.multiselect-container > li > a > label > input[type="checkbox"] {
margin-bottom: 5px;
}
.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -353,7 +353,7 @@
// Build and bind filter.
buildFilter: function() {
$('.multiselect-container', this.$container).prepend('<div class="input-prepend"><span class="add-on"><i class="icon-search"></i></span><input class="multiselect-search" type="text" placeholder="' + this.options.filterPlaceholder + '"></div>');
$('.multiselect-container', this.$container).prepend('<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text" placeholder="' + this.options.filterPlaceholder + '"></div>');
$('.multiselect-search', this.$container).val(this.query).on('click', function(event) {
event.stopPropagation();
......
......@@ -6,13 +6,13 @@
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="copyright" content="David Stutz" />
<link rel="stylesheet" href="css/bootstrap-2.3.2.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-3.0.0.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css">
<link rel="stylesheet" href="css/prettify.css" type="text/css">
<script type="text/javascript" src="js/jquery-2.0.1.min.js"></script>
<script type="text/javascript" src="js/knockout-2.3.0.js"></script>
<script type="text/javascript" src="js/bootstrap-2.3.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-3.0.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="js/prettify.js"></script>
<style>
......@@ -23,13 +23,11 @@
</head>
<body>
<a href="https://github.com/davidstutz/bootstrap-multiselect"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<div class="container-fluid" style="background:#F5F5F5;border-bottom:1px solid #DDDDDD;margin-bottom:16px;">
<div style="text-align:center;">
<h1 style="font-size:300%;margin: 26px 0px;">Bootstrap Multiselect</h1>
<p class="lead">
Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.
</p>
</div>
<div class="jumbotron">
<div class="container">
<h1>Bootstrap Multiselect</h1>
<p>Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.</p>
</div>
</div>
<div class="container">
<div class="page-header">
......@@ -71,7 +69,7 @@
</tr>
</table>
</div>
<div class="container-fluid">
<div class="container">
<hr>
<p>
&copy; 2012, 2013
......
......@@ -3,13 +3,9 @@
list-style-type: none;
margin: 0;
padding: 0;
input[type="text"] {
width: 70%;
}
.input-prepend {
padding: 3px;
.input-group {
margin: 5px;
}
> li {
......@@ -19,21 +15,36 @@
font-weight: bold;
}
> label {
> label.multiselect-group {
margin: 0;
padding: 3px 20px 3px 20px;
height: 100%;
cursor: pointer;
font-weight: bold;
}
> a {
&.multiselect-header {
> label {
margin: 0;
padding: 3px 20px 3px 20px;
height: 100%;
}
cursor: pointer;
font-weight: normal;
&.radio, &.checkbox {
margin: 0;
}
> input[type="checkbox"] {
margin-bottom:5px;
}
> input[type="checkbox"] {
margin-bottom:5px;
}
}
}
}
.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment