Difference between revisions of "Web front-end libraries"

From Computer Science Wiki
Jump to navigation Jump to search
Line 72: Line 72:
 
<syntaxhighlight lang="html">
 
<syntaxhighlight lang="html">
 
     <div class="row">
 
     <div class="row">
         <div class="col-lg-12">
+
         <div class="col-12">
 
             <div class="alert alert-info" role="alert">
 
             <div class="alert alert-info" role="alert">
 
                 I'm 12 columns wide :-)
 
                 I'm 12 columns wide :-)
Line 80: Line 80:
  
 
     <div class="row">
 
     <div class="row">
         <div class="col-lg-6">
+
         <div class="col-6">
 
             <div class="alert alert-info" role="alert">
 
             <div class="alert alert-info" role="alert">
 
                 I'm 6 columns wide :-)
 
                 I'm 6 columns wide :-)
Line 86: Line 86:
 
         </div>
 
         </div>
  
         <div class="col-lg-6">
+
         <div class="col-6">
 
             <div class="alert alert-info" role="alert">
 
             <div class="alert alert-info" role="alert">
 
                 I'm 6 columns wide :-)
 
                 I'm 6 columns wide :-)
Line 94: Line 94:
  
 
     <div class="row">
 
     <div class="row">
         <div class="col-lg-4">
+
         <div class="col-4">
 
             <div class="alert alert-info" role="alert">
 
             <div class="alert alert-info" role="alert">
 
                 I'm 4 columns wide :-)
 
                 I'm 4 columns wide :-)
Line 100: Line 100:
 
         </div>
 
         </div>
  
         <div class="col-lg-4">
+
         <div class="col-4">
 
             <div class="alert alert-info" role="alert">
 
             <div class="alert alert-info" role="alert">
 
                 I'm 4 columns wide :-)
 
                 I'm 4 columns wide :-)
Line 106: Line 106:
 
         </div>
 
         </div>
  
         <div class="col-lg-4">
+
         <div class="col-4">
 
             <div class="alert alert-info" role="alert">
 
             <div class="alert alert-info" role="alert">
 
                 I'm 4 columns wide :-)
 
                 I'm 4 columns wide :-)
Line 115: Line 115:
  
 
     <div class="row">
 
     <div class="row">
         <div class="col-lg-3">
+
         <div class="col-3">
 
             <div class="alert alert-info" role="alert">
 
             <div class="alert alert-info" role="alert">
 
                 I'm 3 columns wide :-)
 
                 I'm 3 columns wide :-)
Line 121: Line 121:
 
         </div>
 
         </div>
  
         <div class="col-lg-3">
+
         <div class="col-3">
 
             <div class="alert alert-info" role="alert">
 
             <div class="alert alert-info" role="alert">
 
                 I'm 3 columns wide :-)
 
                 I'm 3 columns wide :-)
Line 127: Line 127:
 
         </div>
 
         </div>
  
         <div class="col-lg-3">
+
         <div class="col-3">
 
             <div class="alert alert-info" role="alert">
 
             <div class="alert alert-info" role="alert">
 
                 I'm 3 columns wide :-)
 
                 I'm 3 columns wide :-)
Line 133: Line 133:
 
         </div>
 
         </div>
  
         <div class="col-lg-3">
+
         <div class="col-3">
 
             <div class="alert alert-info" role="alert">
 
             <div class="alert alert-info" role="alert">
 
                 I'm 3 columns wide :-)
 
                 I'm 3 columns wide :-)
Line 141: Line 141:
  
 
     <div class="row">
 
     <div class="row">
         <div class="col-lg-2">
+
         <div class="col-2">
 
             <div class="alert alert-info" role="alert">
 
             <div class="alert alert-info" role="alert">
 
                 I'm 2 columns wide :-)
 
                 I'm 2 columns wide :-)
Line 147: Line 147:
 
         </div>
 
         </div>
  
         <div class="col-lg-2">
+
         <div class="col-2">
 
             <div class="alert alert-info" role="alert">
 
             <div class="alert alert-info" role="alert">
 
                 I'm 2 columns wide :-)
 
                 I'm 2 columns wide :-)
Line 153: Line 153:
 
         </div>
 
         </div>
  
         <div class="col-lg-2">
+
         <div class="col-2">
 
             <div class="alert alert-info" role="alert">
 
             <div class="alert alert-info" role="alert">
 
                 I'm 2 columns wide :-)
 
                 I'm 2 columns wide :-)
Line 159: Line 159:
 
         </div>
 
         </div>
  
         <div class="col-lg-2">
+
         <div class="col-2">
 
             <div class="alert alert-info" role="alert">
 
             <div class="alert alert-info" role="alert">
 
                 I'm 2 columns wide :-)
 
                 I'm 2 columns wide :-)
 
             </div>
 
             </div>
 
         </div>
 
         </div>
         <div class="col-lg-2">
+
         <div class="col-2">
 
             <div class="alert alert-info" role="alert">
 
             <div class="alert alert-info" role="alert">
 
                 I'm 2 columns wide :-)
 
                 I'm 2 columns wide :-)
 
             </div>
 
             </div>
 
         </div>
 
         </div>
         <div class="col-lg-2">
+
         <div class="col-2">
 
             <div class="alert alert-info" role="alert">
 
             <div class="alert alert-info" role="alert">
 
                 I'm 2 columns wide :-)
 
                 I'm 2 columns wide :-)
Line 176: Line 176:
 
     </div>
 
     </div>
 
</syntaxhighlight>
 
</syntaxhighlight>
 
 
 
  
 
== Standards ==
 
== Standards ==

Revision as of 09:21, 20 September 2019

Web Science[1]

Web framework[edit]

A web framework (WF) or web application framework (WAF) is a software framework that is designed to support the development of web applications.


Web frameworks aim to automate the overhead associated with common activities performed in web development. For example, many web frameworks provide libraries for database access, templating frameworks, and session management, and they often promote code reuse. Although they often target development of dynamic web sites, they are also applicable to static websites.[2]

Bootstrap[edit]

Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only.[3]

Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was also programmed to support both HTML5 and CSS3.

Also it is called Front-end-framework.

I found another excellent description of bootstrap[4]. Bootstrap is a free collection of tools for creating a websites and web applications.

It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

Some reasons programmers prefer Bootstrap Framework

  • Easy to get started
  • Great grid system
  • Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons)
  • Extensive list of components
  • Bundled Javascript plugins
  • Pre Styled Components

Some of the components pre-styled are:

  • Dropdowns
  • Button Groups
  • Navigation Bar
  • Breadcrumbs
  • Labels & Badges
  • Alerts
  • Progress Bar

Getting started template[edit]

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

A simple example of grids[edit]

    <div class="row">
        <div class="col-12">
            <div class="alert alert-info" role="alert">
                 I'm 12 columns wide :-)
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-6">
            <div class="alert alert-info" role="alert">
                I'm 6 columns wide :-)
            </div>
        </div>

        <div class="col-6">
            <div class="alert alert-info" role="alert">
                I'm 6 columns wide :-)
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-4">
            <div class="alert alert-info" role="alert">
                I'm 4 columns wide :-)
            </div>
        </div>

        <div class="col-4">
            <div class="alert alert-info" role="alert">
                I'm 4 columns wide :-)
            </div>
        </div>

        <div class="col-4">
            <div class="alert alert-info" role="alert">
                I'm 4 columns wide :-)
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-3">
            <div class="alert alert-info" role="alert">
                I'm 3 columns wide :-)
            </div>
        </div>

        <div class="col-3">
            <div class="alert alert-info" role="alert">
                I'm 3 columns wide :-)
            </div>
        </div>

        <div class="col-3">
            <div class="alert alert-info" role="alert">
                I'm 3 columns wide :-)
            </div>
        </div>

        <div class="col-3">
            <div class="alert alert-info" role="alert">
                I'm 3 columns wide :-)
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-2">
            <div class="alert alert-info" role="alert">
                I'm 2 columns wide :-)
            </div>
        </div>

        <div class="col-2">
            <div class="alert alert-info" role="alert">
                I'm 2 columns wide :-)
            </div>
        </div>

        <div class="col-2">
            <div class="alert alert-info" role="alert">
                I'm 2 columns wide :-)
            </div>
        </div>

        <div class="col-2">
            <div class="alert alert-info" role="alert">
                I'm 2 columns wide :-)
            </div>
        </div>
        <div class="col-2">
            <div class="alert alert-info" role="alert">
                I'm 2 columns wide :-)
            </div>
        </div>
        <div class="col-2">
            <div class="alert alert-info" role="alert">
                I'm 2 columns wide :-)
            </div>
        </div>
    </div>

Standards[edit]

  • This topic doesn't cover a specific standard, but it is something you should you know.

References[edit]

Produce a plan, simulation or model.

Give a sequence of brief answers with no explanation.