Updated checkboxes and radios to match bootstrap 5

[Nickno95]

🤔Type of Request

• Bug fix
• New feature
• Improvement
• Documentation
• Other

🔗Resolves an issue?
N/A

📝Changelog

Updated checkboxes and radios to match Bootstrap 5 styling (see https://getbootstrap.com/docs/5.3/forms/checks-radios/).
This allows for other features like the color of the checkboxes/radios to match the bootstrap primary color when customized

• Core
• Extensions

💡Example(s)?
Before: https://live.bootstrap-table.com/code/Nickno95/14139
After: https://live.bootstrap-table.com/code/Nickno95/14140

☑️Self Check before Merge

⚠️ Please check all items below before reviewing. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• Changelog is provided or not needed

[UtechtDustin]

This PR would add the class form-check-input for every theme e.g. semanticui.
Please adjust it, so the class will only be used for BT5.

[Nickno95]

This PR would add the class form-check-input for every theme e.g. semanticui.

Please adjust it, so the class will only be used for BT5.

Any suggestion on best way for checking what the theme is set to in the javascript, maybe an example in the code that's already doing this?
Another part of the issue in Bootstrap 5 is with needing an extra wrapping element that was not needed in Bootstrap 4, and I assume other frameworks don't need that either.

[UtechtDustin]

We already do that quite often, a few hints:

bootstrap-table/src/constants/index.js

Lines 8 to 109 in ff06f54

	const CONSTANTS = {
	3: {
	classes: {
	buttonsPrefix: 'btn',
	buttons: 'default',
	buttonsGroup: 'btn-group',
	buttonsDropdown: 'btn-group',
	pull: 'pull',
	inputGroup: 'input-group',
	inputPrefix: 'input-',
	input: 'form-control',
	select: 'form-control',
	paginationDropdown: 'btn-group dropdown',
	dropup: 'dropup',
	dropdownActive: 'active',
	paginationActive: 'active',
	buttonActive: 'active'
	},
	html: {
	toolbarDropdown: ['<ul class="dropdown-menu" role="menu">', '</ul>'],
	toolbarDropdownItem: '<li class="dropdown-item-marker" role="menuitem"><label>%s</label></li>',
	toolbarDropdownSeparator: '<li class="divider"></li>',
	pageDropdown: ['<ul class="dropdown-menu" role="menu">', '</ul>'],
	pageDropdownItem: '<li role="menuitem" class="%s"><a href="#">%s</a></li>',
	dropdownCaret: '<span class="caret"></span>',
	pagination: ['<ul class="pagination%s">', '</ul>'],
	paginationItem: '<li class="page-item%s"><a class="page-link" aria-label="%s" href="javascript:void(0)">%s</a></li>',
	icon: '<i class="%s %s"></i>',
	inputGroup: '<div class="input-group">%s<span class="input-group-btn">%s</span></div>',
	searchInput: '<input class="%s%s" type="text" placeholder="%s">',
	searchButton: '<button class="%s" type="button" name="search" title="%s">%s %s</button>',
	searchClearButton: '<button class="%s" type="button" name="clearSearch" title="%s">%s %s</button>'
	}
	},
	4: {
	classes: {
	buttonsPrefix: 'btn',
	buttons: 'secondary',
	buttonsGroup: 'btn-group',
	buttonsDropdown: 'btn-group',
	pull: 'float',
	inputGroup: 'btn-group',
	inputPrefix: 'form-control-',
	input: 'form-control',
	select: 'form-control',
	paginationDropdown: 'btn-group dropdown',
	dropup: 'dropup',
	dropdownActive: 'active',
	paginationActive: 'active',
	buttonActive: 'active'
	},
	html: {
	toolbarDropdown: ['<div class="dropdown-menu dropdown-menu-right">', '</div>'],
	toolbarDropdownItem: '<label class="dropdown-item dropdown-item-marker">%s</label>',
	pageDropdown: ['<div class="dropdown-menu">', '</div>'],
	pageDropdownItem: '<a class="dropdown-item %s" href="#">%s</a>',
	toolbarDropdownSeparator: '<div class="dropdown-divider"></div>',
	dropdownCaret: '<span class="caret"></span>',
	pagination: ['<ul class="pagination%s">', '</ul>'],
	paginationItem: '<li class="page-item%s"><a class="page-link" aria-label="%s" href="javascript:void(0)">%s</a></li>',
	icon: '<i class="%s %s"></i>',
	inputGroup: '<div class="input-group">%s<div class="input-group-append">%s</div></div>',
	searchInput: '<input class="%s%s" type="text" placeholder="%s">',
	searchButton: '<button class="%s" type="button" name="search" title="%s">%s %s</button>',
	searchClearButton: '<button class="%s" type="button" name="clearSearch" title="%s">%s %s</button>'
	}
	},
	5: {
	classes: {
	buttonsPrefix: 'btn',
	buttons: 'secondary',
	buttonsGroup: 'btn-group',
	buttonsDropdown: 'btn-group',
	pull: 'float',
	inputGroup: 'btn-group',
	inputPrefix: 'form-control-',
	input: 'form-control',
	select: 'form-select',
	paginationDropdown: 'btn-group dropdown',
	dropup: 'dropup',
	dropdownActive: 'active',
	paginationActive: 'active',
	buttonActive: 'active'
	},
	html: {
	dataToggle: 'data-bs-toggle',
	toolbarDropdown: ['<div class="dropdown-menu dropdown-menu-right">', '</div>'],
	toolbarDropdownItem: '<label class="dropdown-item dropdown-item-marker">%s</label>',
	pageDropdown: ['<div class="dropdown-menu">', '</div>'],
	pageDropdownItem: '<a class="dropdown-item %s" href="#">%s</a>',
	toolbarDropdownSeparator: '<div class="dropdown-divider"></div>',
	dropdownCaret: '<span class="caret"></span>',
	pagination: ['<ul class="pagination%s">', '</ul>'],
	paginationItem: '<li class="page-item%s"><a class="page-link" aria-label="%s" href="javascript:void(0)">%s</a></li>',
	icon: '<i class="%s %s"></i>',
	inputGroup: '<div class="input-group">%s%s</div>',
	searchInput: '<input class="%s%s" type="text" placeholder="%s">',
	searchButton: '<button class="%s" type="button" name="search" title="%s">%s %s</button>',
	searchClearButton: '<button class="%s" type="button" name="clearSearch" title="%s">%s %s</button>'
	}
	}
	}[bootstrapVersion]

https://github.com/wenzhixin/bootstrap-table/blob/develop/src/themes/foundation/bootstrap-table-foundation.js#L21-L37

bootstrap-table/src/bootstrap-table.js

Line 1248 in 1a1c5cd

pageNumber.push(Utils.sprintf(this.constants.html.pageDropdownItem, active, page))

[marceloverdijk]

Actually I noticed this my self today using the Columns toolbar dropdown.
The checkboxes generated in the dropdown to toggle the column visibility are generated like:

<label class="dropdown-item dropdown-item-marker">
    <input type="checkbox" data-field="name" value="0" checked="checked">
    <span>Name</span>
</label>

and indeed does not use the BS theme (if using BS).

It would be great to have a way to have it generated as:

<label class="dropdown-item dropdown-item-marker">
    <input class="form-check-input" type="checkbox" data-field="name" value="0" checked="checked">
    <span>Name</span>
</label>

@UtechtDustin are you working on this yourself?

[marceloverdijk]

Just for reference if someone wants a quick but hack'ish solution.

$.BootstrapTable = class extends $.BootstrapTable {

  initToolbar() {
    super.initToolbar()
    $(`${this.options.buttonsToolbar} input[type='checkbox']`).addClass('form-check-input me-2')
  }
}

[UtechtDustin]

@marceloverdijk No, i'm not working on this issue right now.