Difference between revisions of "Bootstrap/C2/Introduction-to-Bootstrap/English"
Nehasolanki (Talk | contribs) |
Nancyvarkey (Talk | contribs) |
||
| Line 25: | Line 25: | ||
* Download and use '''Bootstrap''' version '''4.6.0 '''and | * Download and use '''Bootstrap''' version '''4.6.0 '''and | ||
| − | * Include '''Bootstrap''' version '''4.6.0 '''from '''CDN ''' | + | * Include '''Bootstrap''' version '''4.6.0 '''from '''CDN link''' |
|- | |- | ||
| Line 40: | Line 40: | ||
* '''gedit Text Editor''' | * '''gedit Text Editor''' | ||
* '''Firefox web browser '''and | * '''Firefox web browser '''and | ||
| − | * ''' | + | * A working '''Internet connection ''' |
However you may use any other '''editor''' or '''browser''' of your choice. | However you may use any other '''editor''' or '''browser''' of your choice. | ||
| Line 60: | Line 60: | ||
Click on the '''Download button '''at the top right corner of the page | Click on the '''Download button '''at the top right corner of the page | ||
| − | | | Click on the '''Download '''button | + | | | Click on the '''Download '''button at the top right corner of the page. |
'''Download webpage''' opens. | '''Download webpage''' opens. | ||
| Line 72: | Line 72: | ||
|- | |- | ||
| | '''Introduction''' webpage | | | '''Introduction''' webpage | ||
| − | | | Introduction | + | | | '''Introduction web page''' opens. |
|- | |- | ||
| | [Firefox] | | | [Firefox] | ||
| Line 103: | Line 103: | ||
|- | |- | ||
| | Only Narration | | | Only Narration | ||
| − | | | The download | + | | | The download may take some time depending upon your '''Internet connection'''. |
|- | |- | ||
| | Go to the '''Downloads '''folder >> Point to the downloaded file | | | Go to the '''Downloads '''folder >> Point to the downloaded file | ||
| Line 135: | Line 135: | ||
The files are extracted into the '''bootstrap hyphen 4.6.0 hyphen dist''' folder. | The files are extracted into the '''bootstrap hyphen 4.6.0 hyphen dist''' folder. | ||
| − | '''Bootstrap | + | '''Bootstrap compiled code''' can be downloaded and extracted in the similar manner in '''Windows OS.''' |
|- | |- | ||
| | Bootstrap-4.6.0-dist>>Double-click to open | | | Bootstrap-4.6.0-dist>>Double-click to open | ||
| Line 189: | Line 189: | ||
<meta name="viewport" content="width=device-width, <br>initial-scale=1, shrink-to-fit=no"> | <meta name="viewport" content="width=device-width, <br>initial-scale=1, shrink-to-fit=no"> | ||
| − | | | Inside the <'''head>''' section, always include the '''viewpoint | + | | | Inside the <'''head>''' section, always include the '''viewpoint <meta> tag''' as shown here. |
| − | This helps to ensure proper rendering and touch | + | This helps to ensure proper '''rendering''' and '''touch zoom'''ing on mobile devices. |
|- | |- | ||
| | [gedit - Mypage.html] | | | [gedit - Mypage.html] | ||
| Line 200: | Line 200: | ||
Highlight the code | Highlight the code | ||
| − | | | Next to the '''viewpoint | + | | | Next to the '''viewpoint <meta> tag, '''type the code as shown. |
This will '''link''' the '''bootstrap.css''' file to '''Mypage.html''' file. | This will '''link''' the '''bootstrap.css''' file to '''Mypage.html''' file. | ||
| Line 225: | Line 225: | ||
class="text-warning" | class="text-warning" | ||
| − | | | This '''class''' is defined in '''Bootstrap CSS''' code file and it changes the | + | | | This '''class''' is defined in '''Bootstrap CSS''' code file and it changes the colour of the text to yellow. |
We will learn more about this '''class''' in upcoming tutorials later on. | We will learn more about this '''class''' in upcoming tutorials later on. | ||
| Line 242: | Line 242: | ||
The text has changed to yellow colour. | The text has changed to yellow colour. | ||
| − | The '''font''' is also changed to '''Bootstrap’s''' default font. | + | The '''font''' is also changed to '''Bootstrap’s''' default '''font'''. |
So now, we have successfully created a '''webpage''' with '''Bootstrap.''' | So now, we have successfully created a '''webpage''' with '''Bootstrap.''' | ||
| Line 251: | Line 251: | ||
Highlight the code: Font, text, background | Highlight the code: Font, text, background | ||
| − | | | Let us see the | + | | | Let us see the ready-to-use '''compiled code '''for''' Bootstrap '''files. |
Go to the '''bootstrap-4.6.0-dist''' folder. | Go to the '''bootstrap-4.6.0-dist''' folder. | ||
| Line 270: | Line 270: | ||
| | Slide: Bootstrap from CDN link | | | Slide: Bootstrap from CDN link | ||
| | | | | | ||
| − | * '''Content Delivery Network (CDN)''' | + | * '''Content Delivery Network (CDN) links''' are used to include '''Bootstrap''' in a '''webpage.''' |
* It delivers a '''cached''' version of '''Bootstrap’s compiled CSS''' and '''JS '''to the file. | * It delivers a '''cached''' version of '''Bootstrap’s compiled CSS''' and '''JS '''to the file. | ||
* It reduces the loading time. | * It reduces the loading time. | ||
| − | * '''Webpages''' with '''CDN ''' | + | * '''Webpages''' with '''CDN link''' always require '''internet connection''' |
|- | |- | ||
| Line 313: | Line 313: | ||
<script src=<br>"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" <br>integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09R<br>mUpJ8jgGtD7zP9<br>yug3goQfGII0yAns" crossorigin="anonymous"></script> | <script src=<br>"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" <br>integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09R<br>mUpJ8jgGtD7zP9<br>yug3goQfGII0yAns" crossorigin="anonymous"></script> | ||
| − | | | Now paste these two '''links''' here as we are using '''Bootstrap''' from '''CDN''' | + | | | Now paste these two '''links''' here as we are using '''Bootstrap''' from '''CDN link'''. |
|- | |- | ||
| Line 325: | Line 325: | ||
class="text-primary" | class="text-primary" | ||
| − | | | Inside the '''<nowiki><h1></nowiki>''' | + | | | Inside the '''<nowiki><h1></nowiki> tag''', update the '''class''' as “'''text-primary'''” |
| − | This '''class''' changes the | + | This '''class''' changes the colour of the text to blue. |
|- | |- | ||
| | [gedit - Mypage.html] | | | [gedit - Mypage.html] | ||
| Line 346: | Line 346: | ||
| | Observe the output. | | | Observe the output. | ||
| − | The | + | The colour of the text is changed to blue. |
We have successfully created a '''webpage''' with '''Bootstrap''' using '''CDN link'''. | We have successfully created a '''webpage''' with '''Bootstrap''' using '''CDN link'''. | ||
| Line 360: | Line 360: | ||
* Download and use '''Bootstrap''' version '''4.6.0 '''and | * Download and use '''Bootstrap''' version '''4.6.0 '''and | ||
| − | * Include '''Bootstrap''' version '''4.6.0 '''from '''CDN ''' | + | * Include '''Bootstrap''' version '''4.6.0 '''from '''CDN link''' |
|- | |- | ||
Latest revision as of 14:01, 4 March 2021
Title of the script: Introduction to Bootstrap
Author: Neha Solanki
Domain Reviewer: Ankita Maske
Novice Reviewer: Abhijit Bonik
Keywords: Bootstrap, CSS, HTML, Webpage, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, Download Bootstrap, Compiled CSS and JS, CDN link, bootstrap.css
| Visual Cue | Narration |
| Slide: Title | Welcome to the spoken tutorial on “Introduction to Bootstrap”. |
| Slide 2:
Learning Objectives |
In this tutorial, we will learn how to:
|
| Slide 3:
System Requirements |
This tutorial is recorded using,
However you may use any other editor or browser of your choice. |
| Slide 4: Prerequisite |
|
| Open web browser and type[1]https://getbootstrap.com/ | Open your web browser and type the URL as shown here.
Make sure you’ve an active internet connection. |
| [Firefox]
Click on the Download button at the top right corner of the page |
Click on the Download button at the top right corner of the page.
Download webpage opens. |
| [Firefox]
Select v4.6.x |
At the right corner, we can see the version of Bootstrap.
Click on it to expand the list and select v4.6.x. |
| Introduction webpage | Introduction web page opens. |
| [Firefox]
On the left panel >> click on Download |
On the left panel, click on the Download link. |
| Highlight - Compiled CSS and JS | Let us now download the ready-to-use compiled code for Bootstrap.
Go to the section “Compiled CSS and JS”. |
| Highlight the version Bootstrap v4.6.0 | The latest stable version at the time of recording this tutorial is Bootstrap v4.6.0.
It may vary in future. |
| Click Download button | Click on the Download button. |
|
Narration only |
Please note: Some web browsers may download automatically.
Some may display a Save as dialog box. |
| Click on Save File button | In the Save as dialog box, click on the Save File option and then on the Ok button. |
| Only Narration | The download may take some time depending upon your Internet connection. |
| Go to the Downloads folder >> Point to the downloaded file | Go to the Downloads folder where the ready-to-use compiled code file is saved. |
| Right-click bootstrap zip file>> select Extract to | Right-click this file and select Extract to. |
| Select Desktop | Now choose the desired location on your machine to save this file.
I’ll select Desktop. |
| Create Folder →My-bootstrap | Then create a new folder with the help of the “Create Folder” button.
Name it as My hyphen bootstrap. This folder will help to organize all our Bootstrap files in a single location on our machine. |
| Click on Select | Click on Select.
The file is extracted now. |
| Open Desktop → My-bootstrap folder >> double-click to open | Let us check the extracted file.
Go to the Desktop folder and open the folder My hyphen bootstrap. The files are extracted into the bootstrap hyphen 4.6.0 hyphen dist folder. Bootstrap compiled code can be downloaded and extracted in the similar manner in Windows OS. |
| Bootstrap-4.6.0-dist>>Double-click to open | Open this folder.
Inside it there are two folders: CSS and JS. These folders contain ready-to-use compiled and minified CSS files and JavaScript plugins. |
| Go to the My-bootstrap folder | Go to the My-bootstrap folder. |
| Point to Mypage.html in My-bootstrap folder | I have saved another file named Mypage.html in this folder. |
| Slide 5: Code Files |
|
| Right-click >> Select Open With Firefox
File opens |
Let us open the file Mypage.html in a web browser.
So, right-click on the HTML file and select any web browser of your choice. I will choose Firefox. The HTML file opens in the Firefox web browser. |
| Highlight the background | This is a simple HTML webpage without Bootstrap.
Now let’s include Bootstrap in this HTML webpage and see the change. |
| Let us open the Mypage.html file in any text editor. | |
| Go to My-bootstrap folder | Right-click on the HTML file and select Open With Other Application option. |
| Select Open With gedit | Then choose any text editor that is available.
I will choose gedit. |
| [gedit - Mypage.html]
Highlight: <meta name="viewport" content="width=device-width, |
Inside the <head> section, always include the viewpoint <meta> tag as shown here.
This helps to ensure proper rendering and touch zooming on mobile devices. |
| [gedit - Mypage.html]
Type: <link rel="stylesheet" Highlight the code |
Next to the viewpoint <meta> tag, type the code as shown.
This will link the bootstrap.css file to Mypage.html file. Note that the HTML file and the bootstrap-4.6.0-dist folder should be in the same folder. |
| [gedit - Mypage.html]
Highlight: bootstrap.css |
bootstrap.css is a default code file that is provided by Bootstrap. |
| [gedit - Mypage.html]
Type: <h1 class="text-warning"> Bharat Mart </h1> |
Inside the <h1> tag, add the class as shown here. |
| [gedit - Mypage.html]
Highlight: class="text-warning" |
This class is defined in Bootstrap CSS code file and it changes the colour of the text to yellow.
We will learn more about this class in upcoming tutorials later on. |
| Press Ctrl + S | Save the file. |
| Switch to firefox | Switch to the browser and refresh the page. |
| [Firefox - Grocery Store]
Highlight the output |
Observe the output.
The text has changed to yellow colour. The font is also changed to Bootstrap’s default font. So now, we have successfully created a webpage with Bootstrap. We’ll be using this method i.e Download Bootstrap in this course. |
| Open bootstrap.css in gedit.
Highlight the code: Font, text, background |
Let us see the ready-to-use compiled code for Bootstrap files.
Go to the bootstrap-4.6.0-dist folder. Double-click on the CSS folder and then the bootstrap.css file. All the required classes are defined in this file. For eg. Font classes, text color classes, background color classes, etc. When we link this file in our HTML code, we get access to these inbuilt classes. Let’s close the file. |
| Now let’s learn about the second way to use Bootstrap on a webpage. | |
| Slide: Bootstrap from CDN link |
|
| Open web browser and switch to Bootstrap website tab | Go to the Bootstrap website once again. |
| [Firefox-getbootstrap] | Scroll down and go to the jsDelivr section.
Here you can see two links. These links are for cached versions of Bootstrap’s compiled CSS and JS. |
| [Firefox-getbootstrap]
Copy: <link rel="stylesheet" <script src= |
Copy these two links. |
| Switch to Mypage.html | Switch to the Mypage.html file. |
| [gedit - Mypage.html]
Delete: <link rel="stylesheet" |
First delete this line which we have added earlier. |
| [gedit - Mypage.html]
Paste: <link rel="stylesheet" <script src= |
Now paste these two links here as we are using Bootstrap from CDN link. |
| [gedit - Mypage.html]
Update: <h1 class="text-primary"> Bharat Mart </h1> Highlight: class="text-primary" |
Inside the <h1> tag, update the class as “text-primary”
This class changes the colour of the text to blue. |
| [gedit - Mypage.html] | This class is defined in the cached version of Bootstrap CSS code file. |
| Press Ctrl + Shift + S | Save this file as “Mypage-cdn.html” in the My-bootstrap folder. |
| Go to My-bootstrap folder | Open the “Mypage-cdn.html” file in a web browser.
I will open it in Firefox. |
| [Firefox - Grocery Store]
Highlight the output |
Observe the output.
The colour of the text is changed to blue. We have successfully created a webpage with Bootstrap using CDN link. |
| Only narration | With this we have come to the end of this tutorial.
Let us now summarize. |
| Slide : Summary | In this tutorial, we have learnt:
|
| Slide : 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 :
Answers for THIS Spoken Tutorial |
Do you have questions in THIS Spoken Tutorial?
Please visit this site. Choose the minute and second where you have the question Explain your question briefly The Spoken Tutorial project will ensure an answer You will have to register to ask questions |
| Slide :
Forum for specific questions: |
The Spoken Tutorial forum is for specific questions on this tutorial.
Please do not post unrelated and general questions on them. This will help reduce the clutter. With less clutter, we can use these discussions as instructional material. |
| Slide : Acknowledgement | Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India. |
| Slide : Thanks | This is Neha Solanki from Spoken Tutorial, IIT Bombay signing off.
Thanks for watching. |
