SlideShare a Scribd company logo

Bootstrap - Basics

•Download as PPTX, PDF•
•
F
FirosK2

Let's get started with the basics of bootstrap. This presentation contain the common components used in bootstrap.

1 of 55
Presented by, FIROS. K
Contents o INTRODUCTION o HISTORY o WHY BOOTSTRAP ? o IT INCLUDES ! o HOW TO USE IT ? o CONTAINERS o GRID o WORKING WITH BOOTSTRAP ! o BOOTSTRAP 5 IS COMING ! o CONCLUSION o REFERENCE
INTRODUCTION  Bootstrap is a free, open-source, and one of the most popular front-end framework.  Developed by twitter for creating responsive web applications.  It is a collection of CSS and JavaScript.  Bootstrap is the 6th most starred project on Github, with more than 135,000 stars.
HISTORY  Developed by Mark Otto and Jacob Thornton at twitter.  It was renamed from Twitter Blueprint to Bootstrap.  Released as an open-source product on August 19, 2011 in Github.  It consist of 3 major versions, Bootstrap 2, 3 & 4.
HISTORY  Bootstrap v2.0  Released on January 31, 2012.  Built-in support for Glyphicons.  Supports responsive web designing.  Bootstrap v3.0  Released on August 19, 2013.  Redesigned components to use flat design and a mobile first approach.
HISTORY  Bootstrap v4.0  The first alpha version of Bootstrap 4 was released on August 19, 2015.  The first beta version was released on August 10, 2017.  Mark Otto suspended work on Bootstrap 3 to free-up time to work on Bootstrap 4.  V4.0 was finalized January 18, 2018.
WHY BOOTSTRAP ?  Mobile first approach.  Browser support. Etc.
WHY BOOTSTRAP ?  Easy to get started.  Responsive design.
IT INCLUDES !  It includes 3 files,  bootstrap.min.css  jquery.min.js  Bootstrap.min.js
How to use it ?  We can include it either by using CDN or downloaded files.  Syntax for using CDN (Content Distribution Network)  Syntax for using downloaded files <script type = “text/javascript” src = “jquery.min.js”></script> <script type = “text/javascript” src = “bootstrap.min.js”></script> <link rel = “stylesheet” type = “text/css” href = “bootstrap.min.css”>
Containers  It has a concept of containing elements to wrap site contents.  There are two types of containers  .container Class used for a responsive fixed width.  .container-fluid Class used for a full-width container.
Containers  Syntax for using .container <div class = “container”> … </div>  Syntax for using .container-fluid <div class = “container-fluid”> … </div>
Grid  It is a structure (Usually 2D) made up of series of intersecting straight (Vertical/Horizontal) lines.  It is used to structure the contents.  It is a very effective method to create a consistent layout rapidly & effectively using Html & CSS.  Makes the website easy to scan & reduces the load on users.
Grid Structure
Grid Example  It allows up to 12 columns across the page.  We can divide the containers in rows and each row in columns with space multiple of 12.
Grid Working  We can use any combination that the sum be equal to 12.  Responsive Bootstraps' grid system with 3 columns
Grid Classes
Grid Options
Working with Bootstrap !
Bootstrap Tables  There are 4 main classes for tables  table  table-striped  table-bordered  table-hover table Basic table style with just some light padding and horizontal dividers. <table class = “table”> … </table>
Bootstrap Tables table-striped Used to get zebra-striping to any rows with in the <tbody> <table class = “table table-striped”> … </table> table-bordered Used to get borders surrounding every element and rounded corners around the entire table. <table class = “table table-bordered”> … </table>
Bootstrap Tables table-hover Used to get a light grey background to rows while the mouse cursor come over it. <table class = “table table-hover”> … </table> table-condensed Used to make tables more compact by cutting cell padding in half. <table class = “table table-condensed”> … </table>
Table – Contextual Classes  It is used to color table rows / individual cells.  There are 5 contextual-classes  active  success  info  warning  danger
Table - Responsive  By wrapping any <table> in table-responsive class we can make a responsive table. <div class = “table-responsive”> <table class = “table”> …. </table> </div>
Bootstrap Images  It consist of 3 main classes  img-rounded  img-circle  img-thumbnail
Bootstrap Images
Image - Responsive  We can also make responsive images by using img-fluid class. <img src = “…” class = “img-fluid” alt = “Responsive_Image” />
Carousel  It is a slideshow for cycling through elements.  We can use the carousel slide class to create slideshow.  Syntax is, <div id="demo" class="carousel slide" data-ride="carousel">
Carousel
Carousel
Bootstrap alerts  It provides an easy way to create predefined alert messages.  They are created with the alert class followed by the one of the 4 contextual classes. alert-success alert-info alert-warning alert-danger
Alert - Example
Alert - Example
Bootstrap Buttons  Bootstrap provides 7 styles of buttons. We can use the btn class to obtain it. btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link
Buttons - Example
Spinners  It is used to create a spinner/loader.  We can use the spinner-border class to create it.  Syntax is, <div class="spinner-border"></div>  By using contextual class we can change the color of the spinner accordingly.
Spinners
Bootstrap - Glyphicons  Bootstrap provides 260 glyphicons from Glyphicon Halflings set.
Glyphicons - Example
Glyphicons - Example
Bootstrap - Labels  Used to provide information about something.  We can create labels with colorful backgrounds to highlight the text.  Use the label class followed by one of the six contextual classes. label-default label-primary label-success label-info label-warning label-danger
Labels - Example
Bootstrap - Panels  It is a bordered box with some padding around it’s content that can be used to highlight or separated from information.  Like other classes it is also used with contextual classes. panel-default panel-primary panel-success panel-info panel-warning panel-danger
Panels - Example
Bootstrap - Forms  Form controls automatically receive some global styling with Bootstrap.  All elements with class form-control have a width of 100%.  It provides following types of layout,  Vertical form (default)  Horizontal form  Inline form
Vertical Forms  It is the default form layout.  Wrap labels and controls in a <div> with a class form-group, which is used for optimum spacing.  Add the class form-control to all the elements
Vertical Forms
Horizontal Forms  Add the class form-horizontal in the <form> tag.  Add the class control-label to all labels in form.
Inline Forms  It is used align all the elements of form in a line and left aligned.  Add the class form-inline in <form> tag.  This only applies to form within viewports that are at least 768px wide.
Bootstrap - Themes & Templates  We can find and download several themes & templates.  A theme consist of customized CSS.  A template consist of one or more predesigned Html pages, which often make use of theme.  Both are collection of bootstrap elements (Grid, buttons, panels, etc.).
Bootstrap 5 is coming ! ► Dropped jQuery ► Responsive containers ► Using as module ► Refreshed website
Conclusion  Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.  It makes the responsive web designing more easy and effective.  It contains CSS, jQuery / Javascript that makes the designing more easier.
Reference  Otto Mark (November 28, 2019) – “Bootstrap 4.4.1” https://github.com/twbs/bootstrap  Jake Spurlock (May, 2013) – “Bootstrap”  W3Schools (2018) – “Bootstrap 4 - Tutorials” https://www.w3schools.com/bootstrap4/
Do you have any doubts ?
Thank You !

More Related Content

Bootstrap - Basics

  • 2. Contents o INTRODUCTION o HISTORY o WHY BOOTSTRAP ? o IT INCLUDES ! o HOW TO USE IT ? o CONTAINERS o GRID o WORKING WITH BOOTSTRAP ! o BOOTSTRAP 5 IS COMING ! o CONCLUSION o REFERENCE
  • 3. INTRODUCTION  Bootstrap is a free, open-source, and one of the most popular front-end framework.  Developed by twitter for creating responsive web applications.  It is a collection of CSS and JavaScript.  Bootstrap is the 6th most starred project on Github, with more than 135,000 stars.
  • 4. HISTORY  Developed by Mark Otto and Jacob Thornton at twitter.  It was renamed from Twitter Blueprint to Bootstrap.  Released as an open-source product on August 19, 2011 in Github.  It consist of 3 major versions, Bootstrap 2, 3 & 4.
  • 5. HISTORY  Bootstrap v2.0  Released on January 31, 2012.  Built-in support for Glyphicons.  Supports responsive web designing.  Bootstrap v3.0  Released on August 19, 2013.  Redesigned components to use flat design and a mobile first approach.
  • 6. HISTORY  Bootstrap v4.0  The first alpha version of Bootstrap 4 was released on August 19, 2015.  The first beta version was released on August 10, 2017.  Mark Otto suspended work on Bootstrap 3 to free-up time to work on Bootstrap 4.  V4.0 was finalized January 18, 2018.
  • 7. WHY BOOTSTRAP ?  Mobile first approach.  Browser support. Etc.
  • 8. WHY BOOTSTRAP ?  Easy to get started.  Responsive design.
  • 9. IT INCLUDES !  It includes 3 files,  bootstrap.min.css  jquery.min.js  Bootstrap.min.js
  • 10. How to use it ?  We can include it either by using CDN or downloaded files.  Syntax for using CDN (Content Distribution Network)  Syntax for using downloaded files <script type = “text/javascript” src = “jquery.min.js”></script> <script type = “text/javascript” src = “bootstrap.min.js”></script> <link rel = “stylesheet” type = “text/css” href = “bootstrap.min.css”>
  • 11. Containers  It has a concept of containing elements to wrap site contents.  There are two types of containers  .container Class used for a responsive fixed width.  .container-fluid Class used for a full-width container.
  • 12. Containers  Syntax for using .container <div class = “container”> … </div>  Syntax for using .container-fluid <div class = “container-fluid”> … </div>
  • 13. Grid  It is a structure (Usually 2D) made up of series of intersecting straight (Vertical/Horizontal) lines.  It is used to structure the contents.  It is a very effective method to create a consistent layout rapidly & effectively using Html & CSS.  Makes the website easy to scan & reduces the load on users.
  • 15. Grid Example  It allows up to 12 columns across the page.  We can divide the containers in rows and each row in columns with space multiple of 12.
  • 16. Grid Working  We can use any combination that the sum be equal to 12.  Responsive Bootstraps' grid system with 3 columns
  • 20. Bootstrap Tables  There are 4 main classes for tables  table  table-striped  table-bordered  table-hover table Basic table style with just some light padding and horizontal dividers. <table class = “table”> … </table>
  • 21. Bootstrap Tables table-striped Used to get zebra-striping to any rows with in the <tbody> <table class = “table table-striped”> … </table> table-bordered Used to get borders surrounding every element and rounded corners around the entire table. <table class = “table table-bordered”> … </table>
  • 22. Bootstrap Tables table-hover Used to get a light grey background to rows while the mouse cursor come over it. <table class = “table table-hover”> … </table> table-condensed Used to make tables more compact by cutting cell padding in half. <table class = “table table-condensed”> … </table>
  • 23. Table – Contextual Classes  It is used to color table rows / individual cells.  There are 5 contextual-classes  active  success  info  warning  danger
  • 24. Table - Responsive  By wrapping any <table> in table-responsive class we can make a responsive table. <div class = “table-responsive”> <table class = “table”> …. </table> </div>
  • 25. Bootstrap Images  It consist of 3 main classes  img-rounded  img-circle  img-thumbnail
  • 27. Image - Responsive  We can also make responsive images by using img-fluid class. <img src = “…” class = “img-fluid” alt = “Responsive_Image” />
  • 28. Carousel  It is a slideshow for cycling through elements.  We can use the carousel slide class to create slideshow.  Syntax is, <div id="demo" class="carousel slide" data-ride="carousel">
  • 31. Bootstrap alerts  It provides an easy way to create predefined alert messages.  They are created with the alert class followed by the one of the 4 contextual classes. alert-success alert-info alert-warning alert-danger
  • 34. Bootstrap Buttons  Bootstrap provides 7 styles of buttons. We can use the btn class to obtain it. btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link
  • 36. Spinners  It is used to create a spinner/loader.  We can use the spinner-border class to create it.  Syntax is, <div class="spinner-border"></div>  By using contextual class we can change the color of the spinner accordingly.
  • 38. Bootstrap - Glyphicons  Bootstrap provides 260 glyphicons from Glyphicon Halflings set.
  • 41. Bootstrap - Labels  Used to provide information about something.  We can create labels with colorful backgrounds to highlight the text.  Use the label class followed by one of the six contextual classes. label-default label-primary label-success label-info label-warning label-danger
  • 43. Bootstrap - Panels  It is a bordered box with some padding around it’s content that can be used to highlight or separated from information.  Like other classes it is also used with contextual classes. panel-default panel-primary panel-success panel-info panel-warning panel-danger
  • 45. Bootstrap - Forms  Form controls automatically receive some global styling with Bootstrap.  All elements with class form-control have a width of 100%.  It provides following types of layout,  Vertical form (default)  Horizontal form  Inline form
  • 46. Vertical Forms  It is the default form layout.  Wrap labels and controls in a <div> with a class form-group, which is used for optimum spacing.  Add the class form-control to all the elements
  • 48. Horizontal Forms  Add the class form-horizontal in the <form> tag.  Add the class control-label to all labels in form.
  • 49. Inline Forms  It is used align all the elements of form in a line and left aligned.  Add the class form-inline in <form> tag.  This only applies to form within viewports that are at least 768px wide.
  • 50. Bootstrap - Themes & Templates  We can find and download several themes & templates.  A theme consist of customized CSS.  A template consist of one or more predesigned Html pages, which often make use of theme.  Both are collection of bootstrap elements (Grid, buttons, panels, etc.).
  • 51. Bootstrap 5 is coming ! ► Dropped jQuery ► Responsive containers ► Using as module ► Refreshed website
  • 52. Conclusion  Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.  It makes the responsive web designing more easy and effective.  It contains CSS, jQuery / Javascript that makes the designing more easier.
  • 53. Reference  Otto Mark (November 28, 2019) – “Bootstrap 4.4.1” https://github.com/twbs/bootstrap  Jake Spurlock (May, 2013) – “Bootstrap”  W3Schools (2018) – “Bootstrap 4 - Tutorials” https://www.w3schools.com/bootstrap4/
  • 54. Do you have any doubts ?