Name: select2-bootstrap-theme
Owner: Select2
Description: A Select2 v4 Theme for Bootstrap 3
Created: 2015-04-02 03:18:09.0
Updated: 2018-05-22 08:40:51.0
Pushed: 2018-05-22 07:48:21.0
Homepage: https://select2.github.io/select2-bootstrap-theme/
Size: 522
Language: CSS
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
A Select2 v4 Theme for Bootstrap 3
Demonstrations available at select2.github.io/select2-bootstrap-theme
Built and tested with Bootstrap v3.3.7 and Select2 v4.0.3 in latest Chrome, Firefox and Safari (Mac) and Internet Explorer 11, 10 and 9 (should work in IE8).
You can download select2-bootstrap-theme from this GitHub repo, install it using Bower or npm ? required if you want to integrate the Sass or Less sources in your build process ? or source the compiled CSS directly from CDNJS or jsDelivr.
You may install select2-bootstrap-theme with Bower, npm or Yarn:
ower
r install select2-bootstrap-theme
pm
install select2-bootstrap-theme
arn
add select2-bootstrap-theme
select2-bootstrap-theme is also available on CDNJS and jsDelivr.
select2-bootstrap-theme only works with Select2 v4.x. Applying the theme requires select2-bootstrap.css
referenced after the default select2.css
that comes with Select2:
k rel="stylesheet" href="select2.css">
k rel="stylesheet" href="select2-bootstrap.css">
To apply the theme, tell Select2 to do so by passing bootstrap
to the theme
option when initializing Select2:
#dropdown" ).select2({
theme: "bootstrap"
You may also set it as the default theme for all Select2 widgets like so:
.select2.defaults.set( "theme", "bootstrap" );
:first-child/:not(:first-child)/:last-child
for .select2-container--bootstrap
won?t play nice in our case; we have to take the original <select>
element (with .select2-hidden-accessible
applied) into account): Select2?s border-radii now are correctly styled in Bootstrap?s ?Input Groups? without the need for helper classes (.select2-bootstrap-append
, .select2-bootstrap-prepend
).display: block
when resizing window to 'extra small'”$s2bs-btn-default-color
/@s2bs-btn-default-color
? defaults to Bootstrap?s $btn-default-color
/@btn-default-color
.meta name="viewport" content="width=device-width, initial-scale=1"
).license
-related npm 2.x ?SPDX? warning: for npm 2.x and according to https://docs.npmjs.com/files/package.json#license.bugs
.s2bs
to avoid conflicts and improve customizability as select2-bootstrap-theme does not “force” you to use (specific) Bootstrap Sass/Less variables anymore; a nice side effect is that we now also provide (a raw) documentation for the inherited Bootstrap variables in one place.font-size
, color
and vertical padding
for .select2-results__group
. [#19].select2-selection__clear
, .select2-selection__choice__remove
and .select2-selection__choice
..select2-results__option
? fixes alignment of .select2-results__message
and .select2-results__option--load-more
. [#28]font-family
definition for .select2-container--bootstrap .select2-selection
. [#50]bower.json
? fingers crossed, low hopes. [#52]bower.json
.<optgroup>
) options to the “State” Select2.<option>
from the “Select2 multi append Radiobutton” demo (which resulted in problems tracked in 11).$form-control-default-box-shadow
, $form-control-focus-box-shadow
, and $form-control-transition
Sass variables if they are already assigned. [#45]containerCssClass
option available with the full Select2 build. [#34].select2-container--focus
. [#18].form-inline
. [#13].select2-selection__clear
in .select2-selection--multiple
. [#11].form-control.select2-hidden-accessible
.The project offers Less and Sass sources for building select2-bootstrap.css
; both make use of variables from either Bootstrap (Less) or Bootstrap for Sass. The demo pages are built using Jekyll and there are a bunch of Grunt tasks to ease development.
With Jekyll, node.js and Less installed, run
install
to install all necessary development dependencies (Sass is compiled vLibSass/node-sass).
grunt build
builds docs
grunt serve
builds docs
and serves them via Jekyll's --watch
flag on http://localhost:3000Develop in src/select2-bootstrap.scss
and test your changes using grunt serve
. Ideally, port your changes to lib/select2-bootstrap.less
and make sure tests are passing to verify that both Less and Sass compile down to the target CSS via npm test
.
grunt scss2less
helps in converting the Sass source to its Less counterpart (and overwrites the existing src/select2-bootstrap.less
), but doesn't do the full job ? please review the changes to the Less source file and make the necessary adjustments.
The license is available within the repository in the LICENSE file.