Nothing Special   »   [go: up one dir, main page]
Scribd Logo
Upload

Welcome to Scribd!

  • 3 views

    Bootstrap 5 Report

    Uploaded by

    shane ocampo

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Bootstrap 5 Report

    Uploaded by

    shane ocampo
    3 views21 pages

    Original Title

    7.-Bootstrap-5-report

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    3 views21 pages

    Bootstrap 5 Report

    Uploaded by

    shane ocampo

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 21

    CHAPTER 01: Lesson 5

    BOOTSTRAP

    Darwin Alvin I. Sunga


    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

    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.
    https://www.w3schools.com/bootstrap5/bootstrap_get_started.php
    Bootstrap History
    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.

    In June 2014 Bootstrap was the No.1 project on GitHub!

    Why use Bootstrap?


    Advantages of 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)

    https://www.w3schools.com/bootstrap5/bootstrap_get_started.php
    Where to Get Bootstrap?
    There are two ways to start using Bootstrap on your own web site.
    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.

    https://www.w3schools.com/bootstrap5/bootstrap_get_started.php
    Difference between Bootstrap 3, 4 and 5

    The main differences between Bootstrap 5 and Bootstrap 3 & 4, is that Bootstrap 5 has switched
    to JavaScript instead of jQuery.

    https://tutorial.techaltum.com/bootstrap.html
    Bootstrap 5
    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.

    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.

    https://www.w3schools.com/bootstrap5/bootstrap_get_started.php
    Create First Web Page With Bootstrap 5
    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.

    https://www.w3schools.com/bootstrap5/bootstrap_get_started.php
    Create First Web Page With Bootstrap 5
    2. Bootstrap 5 is mobile-first
    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:

    ✓ 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.

    https://www.w3schools.com/bootstrap5/bootstrap_get_started.php
    Let’s start!
    Bootstrap5
    Bootstrap 5 Containers
    Containers are used to pad the content inside of them, and there are two container classes available:
    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":

    https://www.w3schools.com/bootstrap5/bootstrap_containers.php
    Bootstrap 5 Containers
    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:

    https://www.w3schools.com/bootstrap5/bootstrap_containers.php
    Bootstrap 5 Grid System
    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:

    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).

    https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php
    Grid Classes
    The Bootstrap 5 grid system has six classes: (The classes above can be combined to create more
    dynamic and flexible layouts)

    Three Equal Columns


    Responsive Columns
    Unequal Responsive

    https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp
    Bootstrap 5 Tables
    A basic Bootstrap 5 table has a light padding and horizontal dividers.

    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)

    https://www.w3schools.com/bootstrap5/bootstrap_tables.php
    Table Contextual Classes
    Contextual classes can be used to color the whole table (<table>), the table rows (<tr>) or table cells (<td>).

    Table Head Colors/ (Table Row)


    You can also use any of the contextual classes to only add a background color to the table header:

    https://www.w3schools.com/bootstrap5/bootstrap_tables.php
    Bootstrap 5 Alerts
    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:)

    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).

    https://www.w3schools.com/bootstrap5/bootstrap_alerts.php
    Advance Lesson :

    1. JavaScript

    You might also like