frameworks/awesome-bootstrap-checkbox/README.md

   1 Awesome Bootstrap Checkbox
   2 ==========================
   3
   4 [![NPM version](https://img.shields.io/npm/v/awesome-bootstrap-checkbox.svg?style=flat)](https://www.npmjs.com/package/awesome-bootstrap-checkbox)
   5 [![NPM downloads](https://img.shields.io/npm/dm/awesome-bootstrap-checkbox.svg?style=flat)](https://www.npmjs.com/package/awesome-bootstrap-checkbox)
   6 [![Dependency Status](https://img.shields.io/david/dev/flatlogic/awesome-bootstrap-checkbox.svg?branch=master&style=flat)](https://www.npmjs.com/package/awesome-bootstrap-checkbox)
   7 [![Join the chat at https://gitter.im/flatlogic/awesome-bootstrap-checkbox](https://badges.gitter.im/flatlogic/awesome-bootstrap-checkbox.svg)](https://gitter.im/flatlogic/awesome-bootstrap-checkbox?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
   8
   9 [Font Awesome][] [Bootstrap][] Checkboxes & Radios plugin. Pure CSS way to make inputs look prettier. **No Javascript!**
  10
  11 For **[Bootstrap 4][]** checkout [v1.0.0-alpha.1][] tag!
  12
  13 **[Demo][]**
  14
  15 Use
  16 ------------
  17
  18 First just include **awesome-bootstrap-checkbox.css** somewhere in your HTML, or add the equivalent files to your [Sass](#using-sass) / [Less](#using-less) configuration.
  19 Next, everything is based on code convention. Here is checkbox markup from Bootstrap site:
  20
  21 ````html
  22 <form role="form">
  23   ...
  24   <div class="checkbox">
  25     <label>
  26       <input type="checkbox"> Check me out
  27     </label>
  28   </div>
  29   ...
  30 </form>
  31 ````
  32
  33 We have to alter it a bit:
  34 ````html
  35 <form role="form">
  36   ...
  37   <div class="checkbox">
  38     <input type="checkbox" id="checkbox1">
  39     <label for="checkbox1">
  40         Check me out
  41     </label>
  42   </div>
  43   ...
  44 </form>
  45 ````
  46 That's it. It will work. But it **will not** work if you nest input inside label or put label before input.
  47
  48 If you want to enable **Opera 12** and earlier support  just add class `styled` to `input` element:
  49 ````html
  50 ...
  51 <input type="checkbox" id="checkbox1" class="styled">
  52 ...
  53 ````
  54
  55 Browser support
  56 -----------
  57 - Firefox (_3.6+_)
  58 - Chrome  (_14+_)
  59 - IE      (_9+_)
  60 - Opera   (_11.6+_)
  61 - Safari  (_6+_)
  62
  63 Radios
  64 ------------
  65
  66 It's the same for radios. Markup has to be the following:
  67 ````html
  68 <form role="form">
  69   ...
  70   <div class="radio">
  71       <input type="radio" name="radio2" id="radio3" value="option1">
  72       <label for="radio3">
  73           One
  74       </label>
  75   </div>
  76   <div class="radio">
  77       <input type="radio" name="radio2" id="radio4" value="option2" checked>
  78       <label for="radio4">
  79           Two
  80       </label>
  81   </div>
  82   ...
  83 </form>
  84 ````
  85
  86 Brand Colors and other features
  87 ------------
  88
  89 You may use `checkbox-primary`, `checkbox-danger`, `radio-info`, etc to style checkboxes and radios with brand bootstrap colors.
  90
  91 `checkbox-circle` is for rounded checkboxes.
  92
  93 Inputs without label text:
  94
  95 ````html
  96 <div class="checkbox">
  97   <input type="checkbox" class="styled" id="singleCheckbox1" value="option1" aria-label="Single checkbox One">
  98   <label></label>
  99 </div>
 100 ````
 101
 102 Using [Sass][]
 103 ----------
 104
 105 As per example in the `demo` folder, to use Font Awesome you'll have to `@import` the following library parts:
 106
 107 ````scss
 108 @import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables";
 109 @import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/mixins";
 110
 111 @import "../bower_components/Font-Awesome/scss/variables";
 112
 113 @import "../awesome-bootstrap-checkbox";
 114 ````
 115
 116 Adjust this to the path where your bootstrap and font-awesome files are located.
 117
 118 Using [Less][]
 119 ----------
 120
 121 Just like the Sass setup, you'll have to `@import` the following library parts:
 122
 123 ````less
 124 @import "../bower_components/bootstrap/less/variables";
 125 @import "../bower_components/bootstrap/less/mixins";
 126
 127 @import "../awesome-bootstrap-checkbox";
 128
 129 @import "../bower_components/Font-Awesome/less/variables";
 130 ````
 131
 132 Custom icon font
 133 ------------
 134
 135 If you want to use another icon font instead of Font Awesome, such as [Glyphicons][], override the default variables:
 136 ````scss
 137 $font-family-icon: 'Glyphicons Halflings';
 138 $check-icon: "\e013";
 139
 140 .checkbox label:after {
 141     padding-left: 4px;
 142     padding-top: 2px;
 143     font-size: 9px;
 144 }
 145 ````
 146
 147 or for Less:
 148 ````less
 149 @font-family-icon: 'Glyphicons Halflings';
 150 @check-icon: "\e013";
 151
 152 // Same styles as the Sass example...
 153 ````
 154
 155 Or for plain CSS, override the `.checkbox` class (and `.styled` class for Opera):
 156 ````css
 157 input[type="checkbox"].styled:checked + label:after,
 158 input[type="radio"].styled:checked + label:after,
 159 .checkbox input[type=checkbox]:checked + label:after {
 160     font-family: 'Glyphicons Halflings';
 161     content: "\e013";
 162 }
 163
 164 input[type="checkbox"].styled:checked label:after,
 165 input[type="radio"].styled:checked label:after,
 166 .checkbox label:after {
 167     padding-left: 4px;
 168     padding-top: 2px;
 169     font-size: 9px;
 170 }
 171 ````
 172
 173 Credits
 174 ------------
 175
 176 Based on the [Official Bootstrap Sass port][Bootstrap Sass] and the awesome [Font Awesome][].
 177
 178
 179 [Demo]: http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/
 180 [Bootstrap]: http://getbootstrap.com/
 181 [Bootstrap 4]: https://v4-alpha.getbootstrap.com/
 182 [v1.0.0-alpha.1]: https://github.com/flatlogic/awesome-bootstrap-checkbox/releases/tag/v1.0.0-alpha.1
 183 [Bootstrap Sass]: https://github.com/twbs/bootstrap-sass
 184 [Font Awesome]: https://github.com/FortAwesome/Font-Awesome
 185 [Glyphicons]: http://getbootstrap.com/components/#glyphicons
 186 [Sass]: http://sass-lang.com/
 187 [Less]: http://lesscss.org/