Difference between revisions of "Bootstrap/C3/Input-Group-and-Button-in-Bootstrap/English"
Nancyvarkey (Talk | contribs) |
|||
Line 293: | Line 293: | ||
|| With this we have come to the end of this tutorial. | || With this we have come to the end of this tutorial. | ||
− | Let us | + | Let us summarize. |
|- | |- | ||
|| Slide 6: Summary | || Slide 6: Summary |
Revision as of 15:09, 30 August 2021
VISUAL CUE | NARRATION |
Slide: Title | Welcome to the Spoken Tutorial on “Input Group and Button in Bootstrap”. |
Slide 2:
Learning Objectives |
In this tutorial, we will learn about:
|
Slide 3:
System Requirements |
This tutorial is recorded using,
|
Slide 4: Prerequisite |
|
[Firefox- Form.html] | In this tutorial, we will design a form layout as shown here, in Bootstrap.
We will create an input group and buttons. We will also learn various Bootstrap classes for designing and styling them. Let’s start with the input group. |
Slide: Input Group
Input.png |
Using Input group classes, we can add text on either side of the input textbox.
In the 1st example, the text is added before the input textbox. In the 2nd example, the text is added after the input textbox. In the 3rd example, the text is added before and after the input textbox. |
Let’s add an input group in our HTML file. | |
Point to Form.html in My-bootstrap folder | Locate the file Form.html in the My-bootstrap folder.
We will use the Form.html file which we saved earlier for this demonstration. |
Slide: Code File |
|
Open Form.html in gedit | Open the file Form.html in a text editor.
I have opened it in the gedit Text Editor. |
[gedit - Form.html]
<label>Set Expenditure Limit (Amount)</label> Rs <input type="text" class="form-control"> .00 |
After file input, type the code as shown.
Here, we have created a label and an Input group. we have used the .input-group-prepend class. This is because we are adding the text Rs before the Input textbox. We have used the .input-group-append class. This will add text .00 after the Input textbox. |
Press Ctrl + S | Save the file. |
Open Form.html in Firefox | Open the file Form.html in a web browser. |
[Firefox] | We have successfully added the input group.
Notice that the text Rs. is added before and the text .00 is added after the Input textbox. |
Slide: Input Group Sizing | We can also change the size of the Input group.
These are the additional classes used with the .input-group class. Let’s try this. |
Switch to Form.html | Switch to the Form.html file. |
[gedit - Form.html]
Update: <label>Set Expenditure Limit (Amount)</label> Rs <input type="text" class="form-control"> .00 |
Add .input-group-lg class as shown here. |
Press Ctrl + S | Now save the file. |
Switch to firefox | Switch to the browser and refresh the page. |
[Firefox] | Observe that, now the size of the Input group has increased. |
Now, let's see how to add buttons. | |
Slide: Button |
|
Slide: Button Classes
button.png |
Let’s use them in our layout. |
Switch to Form.html | Switch to the Form.html file in the editor. |
[gedit - Form.html]
Update: <form> <button type="submit" class="btn btn-success mx-2"> Submit</button> <button type="reset" class="btn btn-secondary mx-2"> Cancel</button> </form> |
In the <body> section, at the end type the code as shown.
Here, we have created two buttons - Submit and Cancel. Here, we have used .btn class to create a basic button design. I have added the .btn-success class for the Submit button. And .btn-secondary class for Cancel button. I have also used the mx-2 class for margin. |
Press Ctrl + S | Save the file. |
Switch to firefox | Switch to the browser and refresh the page. |
[Firefox] | Observe that two buttons are added at the end of the page.
When we move the cursor over these buttons, their colour gets darker. We can also create outline buttons. |
Slide: Outline Button Classes
outline.png |
Outline button classes remove all background images and colors on any button.
Following are the Outline button classes. You can try these on your own later for your own understanding. |
Slide: Disabled State Button | Next is disabled state button.
disabled boolean attribute to any button element is used to make the buttons look inactive. |
Let’s disable the Cancel button. | |
Switch to Form.html | Switch to the Form.html file in the text editor. |
[gedit - Form.html]
Update: <form> <button type="submit" class="btn btn-success mx-2"> Submit</button> <button type="reset" class="btn btn-secondary mx-2" disabled > Cancel</button> </form> |
Add the disabled boolean attribute to the Cancel button, as shown here. |
Press Ctrl + S | Save the file. |
Switch to firefox | Switch to the browser and refresh the page. |
[Firefox] | Notice the change in the Cancel button.
The colour of the Cancel button is lighter now. Also, there is no change when we move the cursor over it. This is because we have disabled the Cancel button. |
Next, let’s learn to change the size of the buttons. | |
Slide: Button Sizes |
These are the additional classes used with the .btn class. You can try these on your own later for your own understanding. |
[Firefox]
Right click >> Inspect Element Click on Responsive Design Mode |
Now let’s see how these pages look with different screen sizes.
The present form layout is used for laptop and desktop devices. Enable the Responsive design mode. I will decrease the screen size. Now all the elements are appearing in a single column. This layout is used for tablets and mobile devices. The size of the Input group and alignment of the buttons gets adjusted as per the screen size. This is because we have used Bootstrap classes. |
Only narration | With this we have come to the end of this tutorial.
Let us summarize. |
Slide 6: Summary | In this tutorial, we have learnt:
|
Slide 8: Assignment | As an assignment-
|
Slide: About Spoken Tutorial project | The video at the following link summarises the Spoken Tutorial project.
Please download and watch it. |
Slide: Spoken Tutorial Workshops | The Spoken Tutorial Project team conducts workshops and gives certificates.
For more details, please write to us. |
Slide: Forum | Please post your timed queries on this forum. |
Slide: Acknowledgement | Spoken Tutorial project is funded by the Ministry of Education (MoE), Govt. of India. |
Slide: Thanks | The script and video for this tutorial was contributed by Neha Solanki.
This is Nancy Varkey from the Spoken Tutorial project team, IIT Bombay signing off. Thanks for watching. |