SlideShare a Scribd company logo

7.-Bootstrap-5-report powerpoint presentation

•
•
J
JohnLagman3

This powerpoint presentation talks about the Bootstrap 5 and other Bootstrap like Bootstrap 3 and 4. And the difference between the 3 bootstrap version.

Related slideshows

Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAP
 
Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrap
 
Bootstrap 5 basic
Bootstrap 5 basicBootstrap 5 basic
Bootstrap 5 basic
 
1 of 21
Download to read offline
CHAPTER 01: Lesson 5 Darwin Alvin I. Sunga BOOTSTRAP
At the end of this chapter, the students should able to : 1. Bootstrap ✓ What is Bootstrap ✓ Why to use Bootstrap (History) ✓ Difference between bootstrap 3, 4, and 5 ✓ Bootstrap Properties
What is a Bootstrap? ▪ Bootstrap is a free front-end framework for faster and easier web development ▪ Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins ▪ Bootstrap also gives you the ability to easily create responsive designs https://www.w3schools.com/bootstrap5/bootstrap_get_started.php What is Responsive Web Design? Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.
Bootstrap was developed by Mark Otto @mdo and Jacob Thornton @fat at Twitter, and released as an open source product in August 2011 on GitHub. Bootstrap History https://www.w3schools.com/bootstrap5/bootstrap_get_started.php In June 2014 Bootstrap was the No.1 project on GitHub! Advantages of Bootstrap: Why use Bootstrap? 1) Easy to use: ✓ Anybody with just basic knowledge of HTML and CSS can start using Bootstrap 2) Responsive features: ✓ Bootstrap's responsive CSS adjusts to phones, tablets, and desktops 3) Mobile-first approach: ✓ In Bootstrap 3, mobile-first styles are part of the core framework 4) Browser compatibility: ✓ Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer/Edge, Safari, and Opera)
There are two ways to start using Bootstrap on your own web site. Where to Get Bootstrap? https://www.w3schools.com/bootstrap5/bootstrap_get_started.php 1. Download Bootstrap from getbootstrap.com (https://getbootstrap.com/) 2. Include Bootstrap from a CDN(Content Delivery Network). One advantage of using the Bootstrap CDN: Many users already have downloaded Bootstrap from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time. JavaScript? Bootstrap 5 use JavaScript for different components (like modals, tooltips, popovers etc). However, if you just use the CSS part of Bootstrap, you don't need them.
Difference between Bootstrap 3, 4 and 5 https://tutorial.techaltum.com/bootstrap.html The main differences between Bootstrap 5 and Bootstrap 3 & 4, is that Bootstrap 5 has switched to JavaScript instead of jQuery.
7.-Bootstrap-5-report powerpoint presentation
Bootstrap 5 (released 2021) is the newest version of Bootstrap (released 2013); with new components, faster stylesheet and more responsiveness. Bootstrap 5 supports the latest, stable releases of all major browsers and platforms. However, Internet Explorer 11 and down is not supported. Bootstrap 5 https://www.w3schools.com/bootstrap5/bootstrap_get_started.php Note : Bootstrap 3 and Bootstrap 4 is still supported for critical bugfixes and documentation changes, and it is perfectly safe to continue to use them. However, new features will NOT be added to them.
Create First Web Page With Bootstrap 5 https://www.w3schools.com/bootstrap5/bootstrap_get_started.php 1. Add the HTML5 doctype Bootstrap 5 uses HTML elements and CSS properties that require the HTML5 doctype. Always include the HTML5 doctype at the beginning of the page, along with the lang attribute and the correct title and character set: What is Meta tag? Metadata is data (information) about data. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
Bootstrap 5 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework. To ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element: Create First Web Page With Bootstrap 5 https://www.w3schools.com/bootstrap5/bootstrap_get_started.php ✓ The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). ✓ The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser. 2. Bootstrap 5 is mobile-first
Let’s start! Bootstrap5
Containers are used to pad the content inside of them, and there are two container classes available: Bootstrap 5 Containers https://www.w3schools.com/bootstrap5/bootstrap_containers.php 1. The .container class provides a responsive fixed width container 2. The .container-fluid class provides a full width container, spanning the entire width of the viewport Container Padding By default, containers have left and right padding, with no top or bottom padding. Therefore, we often use spacing utilities, such as extra padding and margins to make them look even better. For example, .pt-5 means "add a large top padding":
Bootstrap 5 Containers https://www.w3schools.com/bootstrap5/bootstrap_containers.php Responsive Containers You can also use the .container-sm|md|lg|xl classes to create responsive containers. The max-width of the container will change on different screen sizes/viewports:
Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page. If you do not want to use all 12 columns individually, you can group the columns together to create wider columns: Bootstrap 5 Grid System https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php Note: The grid system is responsive, and the columns will re-arrange automatically depending on the screen size. Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns).
The Bootstrap 5 grid system has six classes: (The classes above can be combined to create more dynamic and flexible layouts) Grid Classes https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp Three Equal Columns Responsive Columns Unequal Responsive
A basic Bootstrap 5 table has a light padding and horizontal dividers. Bootstrap 5 Tables https://www.w3schools.com/bootstrap5/bootstrap_tables.php 1. The .table class adds basic styling to a table 2. The .table-striped class adds zebra-stripes to a table 3. The .table-bordered class adds borders on all sides of the table and cells 4. The .table-hover class adds a hover effect (grey background color) on table rows 5. The .table-dark class adds a black background to the table 6. The .table-borderless class removes borders from the table 7. The .table-sm class makes the table smaller by cutting cell padding in half 8. The .table-responsive class adds a scrollbar to the table when needed (when it is too big horizontally): Note : table-responsive-sm (< 576px), md (< 768px), lg (< 992px), xl (< 1200px)
Contextual classes can be used to color the whole table (<table>), the table rows (<tr>) or table cells (<td>). Table Contextual Classes https://www.w3schools.com/bootstrap5/bootstrap_tables.php Table Head Colors/ (Table Row) You can also use any of the contextual classes to only add a background color to the table header:
Bootstrap 5 provides an easy way to create predefined alert messages. Alerts are created with the .alert class, followed by one of the contextual classes (.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark:) Bootstrap 5 Alerts https://www.w3schools.com/bootstrap5/bootstrap_alerts.php Alert Links Add the alert-link class to any links inside the alert box to create "matching colored links": Closing Alerts To close the alert message, add a .alert-dismissible class to the alert container. Then in a button or link element add class="btn-close" and data-bs-dismiss="alert" (when you click on this the alert box will disappear).
7.-Bootstrap-5-report powerpoint presentation
Advance Lesson : 1. JavaScript
7.-Bootstrap-5-report powerpoint presentation

More Related Content

7.-Bootstrap-5-report powerpoint presentation

  • 1. CHAPTER 01: Lesson 5 Darwin Alvin I. Sunga BOOTSTRAP
  • 2. At the end of this chapter, the students should able to : 1. Bootstrap ✓ What is Bootstrap ✓ Why to use Bootstrap (History) ✓ Difference between bootstrap 3, 4, and 5 ✓ Bootstrap Properties
  • 3. What is a Bootstrap? ▪ Bootstrap is a free front-end framework for faster and easier web development ▪ Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins ▪ Bootstrap also gives you the ability to easily create responsive designs https://www.w3schools.com/bootstrap5/bootstrap_get_started.php What is Responsive Web Design? Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.
  • 4. Bootstrap was developed by Mark Otto @mdo and Jacob Thornton @fat at Twitter, and released as an open source product in August 2011 on GitHub. Bootstrap History https://www.w3schools.com/bootstrap5/bootstrap_get_started.php In June 2014 Bootstrap was the No.1 project on GitHub! Advantages of Bootstrap: Why use Bootstrap? 1) Easy to use: ✓ Anybody with just basic knowledge of HTML and CSS can start using Bootstrap 2) Responsive features: ✓ Bootstrap's responsive CSS adjusts to phones, tablets, and desktops 3) Mobile-first approach: ✓ In Bootstrap 3, mobile-first styles are part of the core framework 4) Browser compatibility: ✓ Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer/Edge, Safari, and Opera)
  • 5. There are two ways to start using Bootstrap on your own web site. Where to Get Bootstrap? https://www.w3schools.com/bootstrap5/bootstrap_get_started.php 1. Download Bootstrap from getbootstrap.com (https://getbootstrap.com/) 2. Include Bootstrap from a CDN(Content Delivery Network). One advantage of using the Bootstrap CDN: Many users already have downloaded Bootstrap from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time. JavaScript? Bootstrap 5 use JavaScript for different components (like modals, tooltips, popovers etc). However, if you just use the CSS part of Bootstrap, you don't need them.
  • 6. Difference between Bootstrap 3, 4 and 5 https://tutorial.techaltum.com/bootstrap.html The main differences between Bootstrap 5 and Bootstrap 3 & 4, is that Bootstrap 5 has switched to JavaScript instead of jQuery.
  • 8. Bootstrap 5 (released 2021) is the newest version of Bootstrap (released 2013); with new components, faster stylesheet and more responsiveness. Bootstrap 5 supports the latest, stable releases of all major browsers and platforms. However, Internet Explorer 11 and down is not supported. Bootstrap 5 https://www.w3schools.com/bootstrap5/bootstrap_get_started.php Note : Bootstrap 3 and Bootstrap 4 is still supported for critical bugfixes and documentation changes, and it is perfectly safe to continue to use them. However, new features will NOT be added to them.
  • 9. Create First Web Page With Bootstrap 5 https://www.w3schools.com/bootstrap5/bootstrap_get_started.php 1. Add the HTML5 doctype Bootstrap 5 uses HTML elements and CSS properties that require the HTML5 doctype. Always include the HTML5 doctype at the beginning of the page, along with the lang attribute and the correct title and character set: What is Meta tag? Metadata is data (information) about data. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
  • 10. Bootstrap 5 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework. To ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element: Create First Web Page With Bootstrap 5 https://www.w3schools.com/bootstrap5/bootstrap_get_started.php ✓ The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). ✓ The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser. 2. Bootstrap 5 is mobile-first
  • 12. Containers are used to pad the content inside of them, and there are two container classes available: Bootstrap 5 Containers https://www.w3schools.com/bootstrap5/bootstrap_containers.php 1. The .container class provides a responsive fixed width container 2. The .container-fluid class provides a full width container, spanning the entire width of the viewport Container Padding By default, containers have left and right padding, with no top or bottom padding. Therefore, we often use spacing utilities, such as extra padding and margins to make them look even better. For example, .pt-5 means "add a large top padding":
  • 13. Bootstrap 5 Containers https://www.w3schools.com/bootstrap5/bootstrap_containers.php Responsive Containers You can also use the .container-sm|md|lg|xl classes to create responsive containers. The max-width of the container will change on different screen sizes/viewports:
  • 14. Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page. If you do not want to use all 12 columns individually, you can group the columns together to create wider columns: Bootstrap 5 Grid System https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php Note: The grid system is responsive, and the columns will re-arrange automatically depending on the screen size. Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns).
  • 15. The Bootstrap 5 grid system has six classes: (The classes above can be combined to create more dynamic and flexible layouts) Grid Classes https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp Three Equal Columns Responsive Columns Unequal Responsive
  • 16. A basic Bootstrap 5 table has a light padding and horizontal dividers. Bootstrap 5 Tables https://www.w3schools.com/bootstrap5/bootstrap_tables.php 1. The .table class adds basic styling to a table 2. The .table-striped class adds zebra-stripes to a table 3. The .table-bordered class adds borders on all sides of the table and cells 4. The .table-hover class adds a hover effect (grey background color) on table rows 5. The .table-dark class adds a black background to the table 6. The .table-borderless class removes borders from the table 7. The .table-sm class makes the table smaller by cutting cell padding in half 8. The .table-responsive class adds a scrollbar to the table when needed (when it is too big horizontally): Note : table-responsive-sm (< 576px), md (< 768px), lg (< 992px), xl (< 1200px)
  • 17. Contextual classes can be used to color the whole table (<table>), the table rows (<tr>) or table cells (<td>). Table Contextual Classes https://www.w3schools.com/bootstrap5/bootstrap_tables.php Table Head Colors/ (Table Row) You can also use any of the contextual classes to only add a background color to the table header:
  • 18. Bootstrap 5 provides an easy way to create predefined alert messages. Alerts are created with the .alert class, followed by one of the contextual classes (.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark:) Bootstrap 5 Alerts https://www.w3schools.com/bootstrap5/bootstrap_alerts.php Alert Links Add the alert-link class to any links inside the alert box to create "matching colored links": Closing Alerts To close the alert message, add a .alert-dismissible class to the alert container. Then in a button or link element add class="btn-close" and data-bs-dismiss="alert" (when you click on this the alert box will disappear).
  • 20. Advance Lesson : 1. JavaScript