flatlogic/awesome-bootstrap-checkbox
Fork: 435 Star: 2042 (更新于 1970-01-01 00:00:00)
license: MIT
Language: CSS .
✔️Font Awesome Bootstrap Checkboxes & Radios. Pure css way to make inputs look prettier
最后发布版本: v2.0 ( 2022-06-21 16:47:16)
🤘 Awesome Bootstrap Checkbox
View Demo | Download | More templates | Support forum
Font Awesome Bootstrap Checkboxes & Radios plugin. Pure CSS way to make inputs look prettier. No Javascript!
For Bootstrap 4 version please checkout bump-to-bootstrap4 branch
For Bootstrap 5 version please checkout bump-to-bootstrap5 branch
Check out our React/Vue/Angular/Node.js boilerplates
Flatlogic Templates - 💥Free and open-source application boilerplates built with Bootstrap 5, React, Vue, Angular, Node.js
Use
To install latest version via NPM simply run:
$ npm install awesome-bootstrap-checkbox # for Bootstrap 4 version
$ npm install awesome-bootstrap-checkbox@0.3.7 # for Bootstrap 3 version
There is a separate README.md file for Bootstrap 4 version.
Then just include awesome-bootstrap-checkbox.css somewhere in your HTML, or add the equivalent files to your Sass / Less configuration. Next, everything is based on code convention. Here is checkbox markup from Bootstrap site:
<form role="form">
...
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
...
</form>
We have to alter it a bit:
<form role="form">
...
<div class="checkbox">
<input type="checkbox" id="checkbox1">
<label for="checkbox1">
Check me out
</label>
</div>
...
</form>
That's it. It will work. But it will not work if you nest input inside label or put label before input.
If you want to enable Opera 12 and earlier support just add class styled
to input
element:
...
<input type="checkbox" id="checkbox1" class="styled">
...
Browser support
- Firefox (3.6+)
- Chrome (14+)
- IE (9+)
- Opera (11.6+)
- Safari (6+)
Radios
It's the same for radios. Markup has to be the following:
<form role="form">
...
<div class="radio">
<input type="radio" name="radio2" id="radio3" value="option1">
<label for="radio3">
One
</label>
</div>
<div class="radio">
<input type="radio" name="radio2" id="radio4" value="option2" checked>
<label for="radio4">
Two
</label>
</div>
...
</form>
Brand Colors and other features
You may use checkbox-primary
, checkbox-danger
, radio-info
, etc to style checkboxes and radios with brand bootstrap colors.
checkbox-circle
is for rounded checkboxes.
Inputs without label text:
<div class="checkbox">
<input type="checkbox" class="styled" id="singleCheckbox1" value="option1" aria-label="Single checkbox One">
<label></label>
</div>
Using Sass
As per example in the demo
folder, to use Font Awesome you'll have to @import
the following library parts:
@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables";
@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/mixins";
@import "../bower_components/Font-Awesome/scss/variables";
@import "../awesome-bootstrap-checkbox";
Adjust this to the path where your bootstrap and font-awesome files are located.
Using Less
Just like the Sass setup, you'll have to @import
the following library parts:
@import "../bower_components/bootstrap/less/variables";
@import "../bower_components/bootstrap/less/mixins";
@import "../awesome-bootstrap-checkbox";
@import "../bower_components/Font-Awesome/less/variables";
Custom icon font
If you want to use another icon font instead of Font Awesome, such as Glyphicons, override the default variables:
$font-family-icon: 'Glyphicons Halflings';
$check-icon: "\e013";
.checkbox label:after {
padding-left: 4px;
padding-top: 2px;
font-size: 9px;
}
or for Less:
@font-family-icon: 'Glyphicons Halflings';
@check-icon: "\e013";
// Same styles as the Sass example...
Or for plain CSS, override the .checkbox
class (and .styled
class for Opera):
input[type="checkbox"].styled:checked + label:after,
input[type="radio"].styled:checked + label:after,
.checkbox input[type=checkbox]:checked + label:after {
font-family: 'Glyphicons Halflings';
content: "\e013";
}
input[type="checkbox"].styled:checked label:after,
input[type="radio"].styled:checked label:after,
.checkbox label:after {
padding-left: 4px;
padding-top: 2px;
font-size: 9px;
}
How can I support developers?
- Star our GitHub repo :star:
- Create pull requests, submit bugs, suggest new features or documentation updates :wrench:
- Follow us on Twitter :feet:
- Like our page on Facebook :thumbsup:
Support
For any additional information please go to our support forum and raise your questions or feedback provide there. We highly appreciate your participation!
More from Flatlogic
- React Native Starter - 🚀 A powerful react native starter template that bootstraps development of your mobile application
- Sing App Dashboard - 💥 Free and open-source admin dashboard template built with Bootstrap 4
- React Material Admin - ⚡ Admin boilerplate made with React 17 and Material-UI 5
Credits
Based on the Official Bootstrap Sass port and the awesome Font Awesome.
最近版本更新:(数据更新于 1970-01-01 00:00:00)
2022-06-21 16:47:16 v2.0
2019-08-06 19:08:44 v1.0.2
2018-03-07 00:46:28 v1.0.1
2017-02-27 21:52:07 v1.0.0-alpha.5
2016-05-04 22:47:49 v1.0.0-alpha.4
2016-03-23 21:56:58 v1.0.0-alpha.3
主题(topics):
bootstrap, bootstrap4, checkbox, font-awesome, nojs
flatlogic/awesome-bootstrap-checkbox同语言 CSS最近更新仓库
2024-11-14 08:39:22 primefaces/primeng
2024-10-08 06:03:05 ParisNeo/lollms-webui
2024-09-11 20:01:02 Achuan-2/siyuan-themes-tsundoku
2024-09-03 23:15:18 Zuoqiu-Yingyi/siyuan-theme-dark-plus
2024-07-25 23:02:20 jgthms/bulma
2024-05-31 23:14:02 timpaul/form-extractor-prototype