Difference between revisions of "Bootstrap/C2/Introduction-to-Bootstrap/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title of the script: '''Introduction to Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhijit Bonik '''Keywords: '''Bo...")
 
Line 218: Line 218:
  
 
<nowiki><h1 class="text-warning"> Bharat Mart </h1></nowiki>
 
<nowiki><h1 class="text-warning"> Bharat Mart </h1></nowiki>
−
|  | Inside the '''<h1>''' tag, add the '''class''' as shown here.
+
|  | Inside the '''<nowiki><h1></nowiki>''' tag, add the '''class''' as shown here.
 
|-
 
|-
 
|  | [gedit - Mypage.html]
 
|  | [gedit - Mypage.html]
Line 320: Line 320:
 
Update:
 
Update:
  
−
<h1 class="text-primary"> Bharat Mart </h1>
+
<nowiki><h1 class="text-primary"> Bharat Mart </h1></nowiki>
  
 
Highlight:
 
Highlight:
  
 
class="text-primary"
 
class="text-primary"
−
|  | Inside the '''<h1>''' tag, update the '''class''' as “'''text-primary'''”
+
|  | Inside the '''<nowiki><h1></nowiki>''' tag, update the '''class''' as “'''text-primary'''”
  
 
This '''class''' changes the color of the text to blue.
 
This '''class''' changes the color of the text to blue.

Revision as of 18:35, 18 February 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:
  • Download and use Bootstrap version 4.6.0 and
  • Include Bootstrap version 4.6.0 from CDN link
Slide 3:

System Requirements

This tutorial is recorded using,
  • Ubuntu Linux OS v 18.04
  • Bootstrap 4.6.0
  • HTML5
  • CSS3
  • gedit Text Editor
  • Firefox web browser and
  • A working Internet connection

However you may use any other editor or browser of your choice.

Slide 4: Prerequisite

https://spoken-tutorial.org

  • To follow this tutorial, you should be familiar with HTML and CSS
  • If not, please go through the HTML and CSS tutorials on this website.
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 webpage 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
  • The file used in this tutorial is available in the Code Files link on this tutorial page.
  • Please download and extract it.
  • Make a copy and then use it while practising.
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,
initial-scale=1, shrink-to-fit=no">

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"
href="bootstrap-4.6.0-dist/css/bootstrap.css">

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 color 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
  • 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 reduces the loading time.
  • Webpages with CDN link always require internet connection
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"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPE
zvF6L/Z6nronJ3oU
OFUFpCjEUQouq2+l" crossorigin="anonymous">

<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09R
mUpJ8jgGtD7zP9
yug3goQfGII0yAns" crossorigin="anonymous"></script>

Copy these two links.
Switch to Mypage.html Switch to the Mypage.html file.
[gedit - Mypage.html]

Delete:

<link rel="stylesheet" href="bootstrap-4.6.0-dist/css/bootstrap.css">

First delete this line which we have added earlier.
[gedit - Mypage.html]

Paste:

<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPE
zvF6L/Z6nronJ3oU
OFUFpCjEUQouq2+l" crossorigin="anonymous">

<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09R
mUpJ8jgGtD7zP9
yug3goQfGII0yAns" crossorigin="anonymous"></script>

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 color 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 color 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:
  • Download and use Bootstrap version 4.6.0 and
  • Include Bootstrap version 4.6.0 from CDN link
Slide : Assignment As an assignment-
  • Open the Mypage.html file and change the class to text-danger.
  • Save the file.
  • Observe the output on the web browser.
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.

Contributors and Content Editors

Nancyvarkey, Nehasolanki

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Bootstrap/C2/Introduction-to-Bootstrap/English&oldid=54863"