Sign Up Page Design using HTML and Bulma Style Sheet
Description:
Bulma Style Sheet:
Bulma style sheet is the advanced version of bootstrap. Bulma css is very simple and easy to understand.
Create web pages using bulma stylesheet because bulma css is very advanced and it covers all the remianing things of bootstrap. Bulma flexbox is very good and highly recommended to all web designers and developers. Bulma classes are easy to understand and use. for example you want to add a textbox its class will be class="input" its very unique name. Another example if you want to add abutton its class will be class="button is-info" common class of button is 'button' is-info is its color propery,Bulma uses some other color properties like is-primary,is-danger,is-warning.
First of all create a folder in local disk c ->xamp->htdocs with the name as you want but now it called tutorials. It’s a php root directory in this directory apache server looed when we open our browser and display a web page. So you must have to follow the rules. In the tutorials folder add bulma stylesheet and save it into folder style. You can jquery files in a separet folder under the tutorials folder give it a name scripts and add jquery files into this scripts folder.
Now create a register.php page under the folder tutorials and add the below code into it.
In this code above is a config.php file included into the page. config file has base url of the site.Also config.php file has
information of database connection. You can See that file code into video. Bulma style sheet is a advanced level of stylesheet as compared to bootstrap. We can say Bulma is an advanced version of bootstrap.
If you will add more these two class filed and control under the filed is-horizontal and field-body it creates more columns for every textbox.In this create other firstname,lastname,email,phone number and password textboxes and at the last create a button. Now you will see a responsive web form created in front of you. Run this file into broswer and check the result.
No comments:
Post a Comment