Create responsive web page guide in Y[wai] IDE


[ Step 1 ]

1. Choose "Bootstrap" Theme and Download
2. Install (or Upload) on your web server

[ Step 2 ]

1. Open Installed(Uploaded) HTML in "Y[wai] IDE"
2. HTML loaded, a "Confirm dialog" is displayed.
3. click [ OK ] button in Confirm dialog.

[ Step 3 ]

1. Change to "view size" for easy editing.

[ Step 4 ]

1. Edit the objects you want to change to your design.

[ Step 5 ]

1. Add the desired components.

[ Step 6 ]

1. Right-click to activate the "context menu".
2. Select "Fit type" under the "Fit of parent" menu to suit your design.

[ Step 7 ]

1. Repeat the above "Step 5" and "Step 6" to place the required components.

[ Step 8 ]

1. Edit the added components property.

[ Step 9 ]

1. You can also edit other non-component objects.

[ Step 10 ]

1. If you can not add a component in "Design Mode", select the parent object to be added.

[ Step 11 ]

1. In "Code Mode", add the component you want to add or the object you need to add.

[ Step 12 ]

1. Go back to "Design Mode" and select the added component or object.

[ Step 13 ]

1. For example, for the "Grid" component, there is a property that supports "Responsive Web". So, Activate this property.

[ Step 14 ]

1. You can set a specific "Column" to be invisible if the width is reduced.

[ Step 15 ]

1. When editing is complete, save the file.

[ Step 16 ]

1. Position the mouse cursor at the "URL" on the right side of "[Menu]" on the top to display the menu. Select "Preview" from the menu.

[ Step 17 ]

1. Edited HTML is open, you can test by adjusting the screen size.


End of guide.