Converting jQuery Mobile to Bootstrap 4
jQuery Mobile hasn’t been updated in years - since 2014. From a technical and design viewpoint, it's obsolete. From a security view, it's also a problem. It relies on jQuery 2.2, which is considered a security risk.
The Framework Converter can be used to convert the jQuery Mobile controls in your project to their equivalents in Bootstrap 4.
In most cases, the converter will update your controls properly, especially the most commonly used ones. However, there are some fix ups you will need to do to your controls and code.
Here are hints for each of the controls. Feel free to edit this document and add tips for others!
General
- Sizing of controls will have to be checked. You may need to adjust bounds.
Button
- Icon names are different between jQM and Bootstrap. In most cases, you will need to look up the new icon name and fill it in.
Checkbox
- setValue and getValue: jQM starts with an index of 1, while BS starts with 0. You will need to modify your getValue and setValue statements.
Collapsible
- No equivalent in BS. The conversion will put up a Container with the same dimensions. The rest is up to you.
Fliptoggle
- This control is called Switch in BS4.
- In jQuery Mobile, use FlipToggle1.value() to get the value. In BS, it is simply FlipToggle1.value.
- In jQuery Mobile, you set the value to the text of the FlipToggle. In BS, it is true or false.
HeaderBar
List
Panel
- No equivalent in BS. The conversion will put up a Container with the same dimensions. The rest is up to you.
PopUp
- No equivalent in BS. The conversion will put up a Container with the same dimensions. The rest is up to you.