sdsdsd - WordPress.com€¦ · that ultimate user experience to your site. We will be using...
17
sdsdsd
Transcript of sdsdsd - WordPress.com€¦ · that ultimate user experience to your site. We will be using...
sdsdsd
Hey, Do you want to learn the quick concept behind Bootstrap? Do you want a quick cheat sheet that you can use to make your websites look super friendly & responsive? If you want it all, Then, you have picked the right cheat sheet.
Why? In this 3 minute cheat sheet, you will learn Bootstrap Grid System completely, and not only will you be able to code beautiful websites, but you will also be able to bring that ultimate user experience to your site. We will be using Bootstrap 3 for our guide. It is impossible to learn complete bootstrap in 3 minutes; you can learn the essential concept behind bootstrap to help you master it. This cheat sheet does not cover the UI Components since they are pretty straight forward, you can refer to the original documentation for that here. Remember, if you master the core concept, the rest will be a cakewalk for you.(and this cheat sheet is to teach the core concept and not the rest)
What are we waiting for,
Let’s get started,
1
Introduction:-
Bootstrap is an open-source CSS framework, which mainly target’s mobile devices, and improves the responsiveness and user-experience for the site. Wikipedia’s take on bootstrap is here.
Summary:- Author’s:- Mark Otto, Jacob Thornton License: MIT License Platform: Web Initial release date: 19 August 2011 Written in: HTML, CSS, Less (v3), Sass(v4)
Installation: You can install bootstrap in 2 ways:- My preferable way to get started is through CDN. But, you can choose any method.. Download & Setup Files
● Download the Bootstrap zip from here. ● Add Links to files in the web page.
2
Here’s a sample template:- <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Sample Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
Use Bootstrap CDN (Simple way) Add these three lines to your HTML page, and you are done with installation.
3
Bootstrap CSS <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> Bootstrap JS <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
JQuery <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Here’s a sample template:- <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Sample Template</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]>
4
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</body> </html>
The Grid System:- The Grid System is the core of the bootstrap library, it decides
● How is each element in a web page to be placed? ● What should be the size of each element? ● What is the overall layout/structure?
Once you have mastered the Grid System, You can do miracles with it. Let’s dive into it, Each Bootstrap “row” has “12” columns in it. If you exceed the limit, content falls on the next “row”. Below, we have created 4 columns (of each size 3) in a row.
5
Here’s the code:-
Now, I want to split THIRD Column into 2 more columns, i.e. (6 sized columns each). (Remember every row has 12 columns).
6
Let’s do that too,
7
Here’s the code,
Similarly, you can split each column into further more columns, and structure the layout of the entire page in rows & columns.
8
(Remember, just add a “row”, and split it into “columns”, repeat the process to structure the content) Congratulations you have just learned THE GRID SYSTEM, It was that simple, isn’t it?. Let’s proceed further, Okay, now we have learned how to design an entire page in the form of rows and columns. But, What if I want some space between 2 columns?. Like below:-
Notice the space, between SECOND & THIRD column, How do we do that?
9
Here's the code:-
In the code, we have used offset class, to add some space between columns, offset-x (x specifies numbers of columns you want to move in right direction) With these, You have successfully mastered how we can structure content on the web page using Bootstrap grid system. Let’s have a quick overview,
10
Suppose, we want to build a web page design for our blog.
11
We can think of it as,
Here, We have split the entire page into 3 containers:-
Container Header <div class=”container”> <div class=”row”> <div class=”col-md-12”> <!-- ADD NAVIGATION HERE -->
</div> </div>
</div>
12
Container Article <div class=”container”> <div class=”row”> <div class=”col-md-12”> <div class=”row”> <div class=”col-md-6”> ARTICLE ONE
</div> <div class=”col-md-6”> ARTICLE TWO </div>
</div> </div>
</div> </div>
Container Menu
<div class=”container”> <div class=”row”> <div class=”col-md-12”> <div class=”row”> <!-- FIRST ROW -->
</div> <div class=”row”>
<!-- SECOND ROW --> </div> <div class=”row”>
<!-- THIRD ROW --> </div> <div class=”row”> </div> . . .
</div> </div>
</div>
13
Final Page Layout <html> <head> </head> <body> <! -- ADD CONTAINER HEADER HERE → <br/> <div class=”container”> <div class=”row”> <div class=”col-md-12”> <div class=”row”> <div class=”col-md-3”> <!-- ADD CONTAINER MENU HERE -->
</div> <div class=”col-md-6”>
<!-- ADD CONTAINER ARTICLE HERE --> </div>
</div> </div>
</div> </div> </body> </html> Isn’t that so simple?
Screen Sizes:- Bootstrap allows Four screen sizes:- ● xs (for phones - screens less than 768px wide) ● sm (for tablets - screens equal to or greater than 768px wide) ● md (for small laptops - screens equal to or greater than 992px wide) ● lg (for laptops and desktops - screens equal to or greater than 1200px
wide)
14
UI Components
(Refer https://getbootstrap.com/docs/3.3/components/ for complete UI Components)
I don’t feel that it is worth mentioning all the components together, since it is very easy to refer to the documentation.
That’s it guys!
Share these eBook among others, if you found it helpful. Do let me know about suggestions & improvements.
Thanks for reading,
Shriniket Deshmukh,
Blog | LinkedIn | Email
15
