Scribd Logo
Upload

Welcome to Scribd!

  • ELF Tudy Ootstrap

    Uploaded by

    Sandip
    24 views15 pages
    The document provides an overview of Bootstrap, a front-end framework for building responsive mobile-first websites and web apps. It discusses what Bootstrap is, why it should be used, how to include it in a webpage, and some key Bootstrap components like containers, grids, typography, buttons, navigation bars, forms, and modal forms. The document includes code examples and screenshots to demonstrate how these components work.

    Original Description:

    Original Title

    SS2_Bootstrap

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document provides an overview of Bootstrap, a front-end framework for building responsive mobile-first websites and web apps. It discusses what Bootstrap is, why it should be used, how to include it in a webpage, and some key Bootstrap components like containers, grids, typography, buttons, navigation bars, forms, and modal forms. The document includes code examples and screenshots to demonstrate how these components work.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    24 views15 pages

    ELF Tudy Ootstrap

    Uploaded by

    Sandip
    The document provides an overview of Bootstrap, a front-end framework for building responsive mobile-first websites and web apps. It discusses what Bootstrap is, why it should be used, how to include it in a webpage, and some key Bootstrap components like containers, grids, typography, buttons, navigation bars, forms, and modal forms. The document includes code examples and screenshots to demonstrate how these components work.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 15

    Semester 1, 2020

    SELF-STUDY 2 BOOTSTRAP
    The learning activities in this self-study (a.k.a PRIOR to Tutorial) are designed to consolidate and extend your
    understanding of the topics covered in lectures in week 2.

    You should complete all activities and questions until the tutorial in week 3.

    BOOTSTRAP
    One of the problems with basic HTML design is that the webpage may look different in different browser or
    device (such as mobile, laptop or tablet). Therefore, it was required to modify some code according to browser
    or device. Bootstrap can resolve this problem easily.

    WHAT IS BOOTSTRAP
    Bootstrap is a framework which uses HTML, CSS and JavaScript for the web design. All the major browsers e.g.,
    FireFox, Chrome, Safari, etc can support Bootstrap. Bootstrap also has several predefined classes for easy layouts
    including dropdown button, navigation bar and alerts etc. Using Bootstrap, you can easily build responsive
    designs (Responsive web design: creating web sites which automatically adjust and change their layout to look
    good on all devices from small phone to large desktops).

    WHY USE BOOTSTRAP


    1. Extremely popular: Widely used across the different companies and developers
    2. Easy to use: anybody with just basic knowledge of HTML and CSS can start using bootstrap. Additionally,
    it only requires single file of CSS and single file of JavaScript by removing a tone of codes. There are
    predefined classes for format using its lattice framework which are easily adaptable.
    3. Highly responsive: Bootstrap offers 12 column grid system, layouts and components so that it conforms
    itself relying on device resolutions of their customer. Responsive CSS adjusts automatically to phones,
    tablets, and desktops.
    4. Browser compatibility: Bootstrap 4 is compatible with all modern browsers.

    HOW TO USE BOOTSTRAP


    There are two ways using Bootstrap 4 in your webpage by including it from CDN (Content Delivery Network) or
    downloading from getbootstrap.com (https://getbootstrap.com/ )

    DOWNLOAD BOOTSTRAP
    You can download Bootstrap from getbootstrap.com to get the compiled CSS and JavaScript, source code. If you
    want to download and host Bootstrap 4, please go to https://getbootstrap.com/docs/4.4/getting-
    started/download/ and follow the instructions.

    BOOTSTRAP 4 CDN
    You can include the CDN file to use Bootstrap 4. In this method, we do not need to download the files, but
    provide the links to these files(https://getbootstrap.com/docs/4.4/getting-started/introduction/)

    1) Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
    <link rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
    crossorigin="anonymous">

    1
    Semester 1, 2020

    2) Place following <script>s near the end of your pages, right before the closing </body> tags, to enable
    them.

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-


    J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
    crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>

    FIGURE 1. STARTER TEMPLATE

    CONTAINERS
    Containers are the basic layout element in Bootstrap and are required when using the default grid system.
    Container classes are used to wrap the page’s contents.

    There are three different containers:

    • .container – sets a max-width at each responsive breakpoint


    • .container-fluid – sets width: 100% at all breakpoints

    2
    Semester 1, 2020

    • .container-{breakpoint} – set width:100% until the specified breakpoint.

    .container .container-fluid

    Figure 2. part of code - container.html

    FIGURE 3. OUTPUT OF CONTAINER.HTML

    3
    Semester 1, 2020

    The table below illustrates how each container’s max-width compares to the original.

    Extra small Small Medium Large Extra Large


    <576px ≥576px ≥768px ≥ 992px ≥1200px

    .container 100% 540px 720px 960px 1140px

    .container-sm 100% 540px 720px 960px 1140px

    .container-md 100% 100% 720px 960px 1140px

    .container-lg 100% 100% 100% 960px 1140px

    .container-xl 100% 100% 100% 100% 1140px

    .container-fluid 100% 100% 100% 100% 100%

    GRID SYSTEM
    Bootstrap 4 divides each row up to 12 columns across the page. The grid system is responsive, and the
    columns will re-arrange automatically depending on the screen size.

    4
    Semester 1, 2020

    Following is the basic structure of Bootstrap Grid.

    Example of Grid system

    5
    Semester 1, 2020

    Following is an output of above code.

    6
    Semester 1, 2020

    FIGURE 4. OUTPUT OF AN EXAMPLE CODE

    TYPOGRAPHY
    It creates headings, paragraphs, lists and other inline elements. It specifies how text elements should be
    rendered on the web page.

    HEADINGS
    Bootstrap 4 provides HTML headings from h1 to h6 as below

    FIGURE 5. OUTPUT OF HEADINGS.HTML

    7
    Semester 1, 2020

    FIGURE 6. HEADINGS.HTML

    DISPLAY HEADINGS
    The display headings are used to display the text with large front size and font weight than the normal headings
    by using classes of display heading: .display -1, .display -2, .display-3 and .display-4.

    FIGURE 7. OUTPUT OF DISPLAYHEADINGS.HTML

    8
    Semester 1, 2020

    FIGURE 8. DISPLAYHEADINGS.HTML

    TABLE
    Bootstrap 4 has a basic table style with some light padding and horizontal dividers. If you want to use the basic
    table style, add the .table class to the <table> element.

    FIGURE 9. OUTPUT OF BOOTSTRAP_TABLE.HTML

    9
    Semester 1, 2020

    FIGURE 10. CODE FOR BOOTSTRAP TABLE

    For more details about table : https://www.w3schools.com/bootstrap4/bootstrap_tables.asp

    BUTTON
    Bootstrap 4 provides clickable button to put content such as text and images. You can create button by using
    the .btn class flowed by desired style (e.g. btn-success).

    Bootstrap provides some options to style buttons as below:

    10
    Semester 1, 2020

    The size of the button also can be set using ‘lg’, ‘md’ and ‘xs’.

    NAVIGATION BARS
    Navbar provides navigation headers for your application or sites. It can collapse or extend depending on your
    screen size.

    To create a basic nav bar, add the .navbar class with responsive collapsing class .navbar-expand-xl|lg|md|sm
    (provides navbar on extra larg, large, medium or small screen). You also can add links to the navbar by adding
    an unordered list with .navbar-nav class.

    FIGURE 11. OUTPUT OF NAVBAR.HTML

    11
    Semester 1, 2020

    FIGURE 12. A BASIC NAVBAR CODE

    12
    Semester 1, 2020

    FORM
    The form element is used to collect input from users by using field such as text field, checkboxes, or buttons etc.
    You can wrap labels and controls in a <div> element with the class .form-group and add another class of .form-
    control to all textual <input>, <textarea>, and <select> elements.

    FIGURE 13. A BASIC FORM CODE

    FIGURE 14. A BASIC FORM OUTPUT

    13
    Semester 1, 2020

    MODAL FORM
    Modal from appears in the pop-up window as below.

    When you click the button “click me” on the web page, the model-form appears in the pop-up window. The code
    of above output is as below.

    There are more functions with Bootstrap. For more details :


    https://www.w3schools.com/bootstrap4/default.asp

    https://getbootstrap.com/docs/4.3/getting-started/introduction/

    14
    Semester 1, 2020

    15

    You might also like