Boot Strap 3 - Lecture 1
3
Boot Strap 3 – Lecture 1 1) Add HTML 5 doctype and two attributes “lang” and “charset” <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8” </head> </html> 2) Because we want to make responsive website so we use another meta tag to make our website responsive <meta name=”viewport” content=”width=device-width, initial-scale=1”> 3) Include container which hold the content of your website. It has two classes, use only one class that you want container and container-fluid. Boot strap grid system You can divide your whole website into 12 sections. If you do not want to divide your website into 12 sections you use another combination of 12 as some examples you will see in above picture. Now grid system has four types of classes. 1) Xs(for phones) 2) Sm(for tables) 3) Md(for desktops) 4) Lg(for large destops) Now consider you have a div. Always start div and assign it a class named row and in this row you define the columns of size upto 12. <div class=”row”> <div class=”col-sm-4”></div> <div class=”col-sm-4”></div> <div class=”col-sm-4”></div> </div>
-
Upload
salman-mushtaq -
Category
Documents
-
view
199 -
download
0
Transcript of Boot Strap 3 - Lecture 1
Boot Strap 3 – Lecture 1
1) Add HTML 5 doctype and two attributes “lang” and “charset”
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8”
</head>
</html>
2) Because we want to make responsive website so we use another meta tag to make our website
responsive
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
3) Include container which hold the content of your website. It has two classes, use only one class
that you want container and container-fluid.
Boot strap grid system
You can divide your whole website into 12 sections. If you do not want to divide your website into
12 sections you use another combination of 12 as some examples you will see in above picture.
Now grid system has four types of classes.
1) Xs(for phones)
2) Sm(for tables)
3) Md(for desktops)
4) Lg(for large destops)
Now consider you have a div.
Always start div and assign it a class named row and in this row you define the columns of size upto
12.
<div class=”row”>
<div class=”col-sm-4”></div>
<div class=”col-sm-4”></div>
<div class=”col-sm-4”></div>
</div>
It divides your row in 2 sections of size 4 each.
You may make your row as
Okay. Let moves.
Some point you may remember about boot strap text/typography
1) Default font size is 14px with a line height 1.428
2) Above is applied on “<body>” and all paragraphs “<p>”
3) For heading boot strap uses
4) “<small>” tag is used with heading for secondary text
5) “<mark>” tag is use for highlight the text
6) “<abbr>” is used for abbreviation
7) For colors of texts
8) For back ground colors use
For more text/typography please visit This Link.
Also see This.
Reference: W3Schools
Thanks.
Salman Mushtaq
Email: [email protected]
