Step 1: Design
PHsPeed contains a form designer to help you design your bootstrap forms fast and easy. As the display of forms is depending on the platform it is displayed upon, we have not tried to create a full WYSIWYG painter, but a conceptual painter. The generation of application code is very fast. Therefore you can always generate code and look at the real deal.
Designing your form need a few steps:
setup the invisible behavior.
When you create a form, then PHsPeed will usually apply a root and a database component. But beside you might need some supporting components to get things going. If you need data-aware components then you need a table component and a data source component. You can put these on the form when you need them, and then apply the correct connection between the components. Other samples of invisible components are the basic pdf component, email component, in components that are important to implement some kind of functionality but do not require some visual interface.
design your layout
Bootstrap uses a grid system to layout forms. To find out more about the Bootstrap Grids we advise you to visit bootstrap.org. Within the IDE you can create panels, apply rows and columns. By applying properties you can define how much space will be occupied and how the form should react if it's being shown on a mobile phone, tablet or desktop.
apply visual components
The components are set onto the form by selecting them from the toolbar and putting them on the form. To design the layout there are some components that are equivalent to bootstrap elements as area, panel, row, and column. All components are supporting the bootstrap grid model of 12 sections per parent. After designing the form you can generate and run code to see your form in 'real life'.