2bj / bootstrap-select

A custom select for Twitter Bootstrap using button dropdown

Twitter Bootstrap Select

A custom select / multiselect for Twitter bootstrap using button dropdown, designed to behave like regular Bootstrap selects;

Demo and Documentation

See an example here.

Required

• Twitter Bootstrap 3.0+
• jQuery 1.8+

Installation

Download jQuery

• Download the latest release
• Clone in Windows
• Clone the repo: git clone git://github.com/jquery/jquery.git.

Download Bootstrap

• Download the latest release.
• Clone in Windows
• Clone the repo: git clone git://github.com/twitter/bootstrap.git.
• Install with Twitter's Bower: bower install bootstrap.

Download this plugin.

• Download the latest release
• Clone in Windows
• Clone the repo: git clone git://github.com/biggora/bootstrap-select.git
• Install with Bower: bower install bs-select

Include files in your HTML. The minimum required for this plugin are:

<link href="/path/to/bootstrap.css" rel="stylesheet">
<link href="/path/to/bootstrap-select.css" rel="stylesheet">
<script src="/path/to/jquery.js" type="text/javascript"></script>
<script src="/path/to/bootstrap-select.js" type="text/javascript"></script>

Usage

Create your <select> with the .selectpicker class.

    <select class="selectpicker">
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Barbecue</option>
    </select>

Enable Bootstrap-Select via JavaScript:

    $('.selectpicker').selectpicker();

Or just

    $('select').selectpicker();

Checkout the documentation for further information.

Compiling CSS and JavaScript

Bootstrap Select uses Grunt with convenient methods. It's how we compile our code, run tests, and more. To use it, install the required dependencies as directed and then run some Grunt commands.

Install Grunt

From the command line:

1. Install grunt-cli globally with npm install -g grunt-cli.
2. Navigate to the root /bootstrap-select directory, then run npm install. npm will look at package.json and automatically install the necessary local dependencies listed there.

When completed, you'll be able to run the various Grunt commands provided from the command line.

Unfamiliar with npm? Don't have node installed? That's a-okay. npm stands for node packaged modules and is a way to manage development dependencies through node.js. Download and install node.js before proceeding.

Install Bower

From the command line:

1. Install bower globally with npm install -g bower.
2. Navigate to the root /bootstrap-select directory, then run bower install. bower will look at package.json and automatically install the necessary local dependencies listed there.

Available Grunt commands

Build - grunt

Run grunt to run tests locally and compile the CSS and JavaScript into /js and /css. Uses Less and UglifyJS.

Compile all CSS and JavaScript - grunt build

grunt build creates the /js and /css directories with compiled files. Uses Less and UglifyJS.

Only compile CSS - grunt build-css

grunt build-css creates the /css directory with compiled files. Uses Less.

Only compile JavaScript - grunt build-js

grunt build-js creates the /js directory with compiled files. Uses UglifyJS.

Authors

Silvio Moreto, Ana Carolina, caseyjhol, Matt Bryson, and Alexey Gordeyev.

Recommend extensions

• Bootstrap Ajax Typeahead Plugin
• Bootstrap Fancy File Plugin
• Bootstrap Slider Plugin
• TrinteJS - Javascrpt MVC Framework for Node.JS
• CaminteJS - Cross-db ORM for NodeJS
• MongoDB Session Storage for ExpressJS
• Middleware exposing user-agent for NodeJS
• 2CO NodeJS adapter for 2checkout API payment gateway

Copyright and license

(The MIT License)

Copyright (C) 2013-2014 Silvio Moreto

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Resources

• Visit the author website.
• Follow @biggora on Twitter for updates.
• Report issues on the github issues page.