Enhancement based on bootstrap 4 for more pretty components
MIT License
,-----. ,--. ,--. ,------. ,--. ,--. ,--. ,--. ,------. ,--------.
| |) /_ | ,'.| | | .-. \ \ `.' / | ,'.| | | .---' '--. .--'
| .-. \ | |' ' | | | \ : '. / | |' ' | | `--, | |
| '--' / | | ` | | '--' / | | .--. | | ` | | `---. | |
`------' `--' `--' `-------' `--' '--' `--' `--' `------' `--'
A set which includes some useful components. Demo
Note: You can use the above components in your project directly. So don't need include them. If you need moment locales support, you should add library to your website.
<link rel="stylesheet" href="https://unpkg.com/@bndynet/bbootstrap/dist/css/bbootstrap.min.css">
<script src="https://unpkg.com/@bndynet/bbootstrap/dist/js/bbootstrap.min.js"></script>
<script>
bb.setup();
</script>
Below are available themes, you can use one of them instead of bbootstrap.min.css.
bb.toggleLeftSide();
bb.toggleRightSide();
bb.alert('');
bb.confirm('', function(){} [, function(){}]);
bb.prompt('', function(val){});
bb.info('');
bb.success('');
bb.error('');
bb.loading();
bb.loading(false);
Default English, you can define your languages as below:
// MUST be before `setup` method
bb.defineLang('zh-CN', {
ok: '',
cancel: '',
yes: '',
no: '',
browse: ''
});
bb.setup({
locale: 'zh-CN',
});
console.log(bb.langs.default); // print default and you can overwrite them using above code
Below are available options, you can override them via bb.setup({})
.
{
locale: 'en-US',
// Moment.js format used
datetimeFormat: 'YYYY-MM-DD H:mm',
timeFormat: 'H:mm',
dateFormat: 'YYYY-MM-DD'
alertify: {
maxNotifications: 2,
closeNotificationOnClick: true,
delay: 5000,
customeClass: '',
notificationPosition: "bottom right",
},
// Below is for enabling page loading progress bar for ajax, document and all events
progressBar: {
theme: 'primary|secondary|success|info|warning|danger|dark|light', // theme in bootstrap, or
color: '#ff0000',
},
}
$('#id').pinTopOnScroll([resolve, reject])
.text-placeholder
to hide real text - Demo
.card-flip
for Card
bb
for bbootstrap
bb.alert
, bb.confirm
, bb.prompt
bb.info
, bb.success
, bb.error
and bb.loading
$('#id').cascadeSelect([], {mappings: []});
.alert
styles.layout-admin-[primary|success|...]
.dropdown-menu-[primary|success|...]
.side-left
to .sidebar-main
.side-right
to .sidebar-assist
.shadow-xs
and .shadow-hover
for existing shadows in bootstrap - Code
.toggle-hover
to toggle .hover-show
and .hover-hidden
- Code
.tags
, .tag
, .tag-theme
styles - Demo
.card
with .card-sm
and .card-theme
- Demo
.workflow
styles - Demo
progressBar.theme
or progressBar.color
pace
to progressBar
closeNotificationOnClick
is true
by defaultNo changes
bbootstrap.setup()
is required for enabling some js componentsbbootstrap.setup({pace: {theme: 'theme in bootstrap'}}}
color
or theme
of pace
alertify.alert('message');
alertify.confirm('message', fnOK [,fnCancel]);
alertify.notify|success|error('message' [, fnCallback]);
bbootstrap.setup({})
for configurating global settings// loading for full screen
$.bloading();
$.bloading(false);
// loading for specific element
$('#id').bloading('bounce-rectangle', 'primary');
$('#id').bloading('circle', 'info');
$('#id').bloading(false);
$('#id').btooltip('title', 'placement'); // show tooltip, placement is optional
$('#id').btooltip(false); // close tooltip
Add pretty Checkbox and Radio
<!-- checkbox -->
<div class="form-check checkbox checkbox-primary">
<input class="form-check-input" id="checkbox1" type="checkbox">
<label class="form-check-label" for="checkbox1">Check me</label>
</div>
<!-- radio -->
<div class="form-check radio radio-primary">
<input class="form-check-input" type="radio" name="radio1" id="radio1" value="option1" checked>
<label class="form-check-label" for="radio1">Option 1</label>
</div>