Advanced Web Technologies Laboratory (Elective-I)


Advanced Web Technologies Laboratory (Elective-I) 

1. To install and setup the HTML5 based Bootstrap framework and to deploy basic HTML elements using Bootstrap CSS. 
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.
What is Bootstrap?        
  • Bootstrap is a free front-end framework for faster and easier web development Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
  • 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
Bootstrap History
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source product in August 2011 on GitHub.
Why Use Bootstrap?
Advantages of Bootstrap:
  • Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
  • Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
  • Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
  • Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)
Where to Get Bootstrap?
There are two ways to start using Bootstrap on your own web site.
You can:
  1. Download Bootstrap from getbootstrap.com
  2. Include Bootstrap from a CDN
Downloading Bootstrap
If you want to download and host Bootstrap yourself, go to getbootstrap.com, and follow the instructions there. 
Standard Install
The first thing you need to do is access the getting started page on getBootstrap. Here you will notice three different download options depending on your level and skill set.
If you’re completely new to Bootstrap, you’ll want to stick with the basic Bootstrap download. This contains compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.
If you’re experienced using CSS pre-processors to extend the CSS language, there are two additional options available. The Source Code installation contains Source Less, JavaScript and font files. The SASS installation is Bootstrap ported from Less to Sass for easy inclusion in Rails, Compass, or Sass-only projects.
Bootstrap Download
Once you’ve downloaded and unpacked the compiled version of Bootstrap, you should see the following structure in the downloaded folder.
bootstrap/
├── css/
   ├── bootstrap.css
   ├── bootstrap.min.css
   ├── bootstrap-theme.css
   └── bootstrap-theme.min.css
├── js/
   ├── bootstrap.js
   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff
This is the most basic form of Bootstrap designed for quick drop-in usage to get you started in nearly any web project. The standard template will reference the .min CSS and JS files. We recommend creating additional style sheets if you want to add modifications to the CSS.
Source Code Download
If you downloaded and unpacked the Bootstrap source code version, it will contain precompiled CSS, JavaScript, and font assets, along with source Less, JavaScript, and documentation. In addition to the files included in the basic download, it also includes the following:
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
   └── fonts/
└── docs/
    └── examples/

Creating the HTML Template
After you’ve downloaded Bootstrap, open up your favorite text editor. Marc is using Notepad++(Windows, free) and I’m using Coda (Mac OS X). Here are some additional suggestions.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1> 1. To install and setup the HTML5 based Bootstrap framework and to deploy basic HTML elements using Bootstrap CSS.</h1>
<pre>
Bootstrap is a free front-end framework for faster and easier web development Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
</pre>
  <p>Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.</p>
  <p>Why Use Bootstrap?</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">Easy to use</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">Responsive features</div>
    <div class="col-sm-4" style="background-color:lavender;">Mobile-first approach:</div>
  </div>
  </div>
</body>
</html>

Save the file as “index.html” in the same folder where you unpacked Bootstrap. Open the index.html in your favorite web browser and you should see “your web” styled.

index.html (large size web browser) 
index.html (small size web browser) 





2. To understand and deploy the multicolumn grid layout of Bootstrap. 
Bootstrap Grid System
Bootstrap's grid system allows up to 12 columns across the page.
If you do not want to use all 12 column individually, you can group the columns together to create wider columns: 
Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organised in three columns, but on a small screen it would be better if the content items were stacked on top of each other.

Grid Classes
The Bootstrap grid system has four classes:
  1. xs (for phones)
  2. sm (for tablets)
  3. md (for desktops)
  4. lg (for larger desktops)
The classes above can be combined to create more dynamic and flexible layouts.

Grid System Rules
Some Bootstrap grid system rules:
  • Rows must be placed within a .container (fixed-width) or .container-fluid(full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
  • Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4





Basic Structure of a Bootstrap Grid
The following is a basic structure of a Bootstrap grid:
<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>
So, to create the layout you want, create a container (<div class="container">). Next, create a row (<div class="row">). Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.

Examples of basic Bootstrap grid layouts.
Mixed: Mobile, Tablet And Desktop
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-xs-7 col-sm-6 col-lg-8" style="background-color:red;">.col-xs-7 .col-sm-6 .col-lg-8</div>
    <div class="col-xs-5 col-sm-6 col-lg-4" style="background-color:lavender;">.col-xs-5 .col-sm-6 .col-lg-4</div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-8 col-lg-10" style="background-color:lavenderblush;">.col-xs-6 .col-sm-8 .col-lg-10</div>
    <div class="col-xs-6 col-sm-4 col-lg-2" style="background-color:lightgrey;">.col-xs-6 .col-sm-4 .col-lg-2</div>
  </div>
  <div class="row" style="background-color:lightcyan;">
    <div class="col-xs-6">.col-xs-6</div>
    <div class="col-xs-6">.col-xs-6</div>
  </div>
</div>
</body>
</html>

lg (for larger desktops) 
sm (for tablets) 
xs (for phones) 




3. To deploy different types of buttons, progress bars, modals and navigation bars using Bootstrap. 
Bootstrap Buttons
Button Styles
Bootstrap provides different styles of buttons: 

To achieve the button styles above, Bootstrap has the following classes:
.btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
The following example shows the code for the different button styles:
Example
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link”>Link</button>
</div>
</body>
</html>
The button classes can be used on an <a><button>, or <input> element:

Bootstrap Progress Bars
Basic Progress Bar
A progress bar can be used to show a user how far along he/she is in a process.
Bootstrap provides several types of progress bars.
A default progress bar in Bootstrap looks like this: 
To create a default progress bar, add a .progress class to a <div> element:
Example
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>

Colored Progress Bars
Contextual classes are used to provide "meaning through colors".
The contextual classes that can be used with progress bars are:
.progress-bar-success
.progress-bar-info
.progress-bar-warning
.progress-bar-danger 
The following example shows how to create progress bars with the different contextual classes:

Example
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
  aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (warning)
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>

Bootstrap Modal
The Modal Plugin
The Modal plugin is a dialog box/popup window that is displayed on top of the current page:
How To Create a Modal
The following example shows how to create a basic modal:
Example
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>  


Bootstrap Navigation Bar
Navigation Bars
A navigation bar is a navigation header that is placed at the top of the page.
Supported content
Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:
.navbar-brand for your company, product, or project name.
.navbar-nav for a full-height and lightweight navigation (including support for dropdowns).
.navbar-toggler for use with our collapse plugin and other navigation toggling behaviors.
.form-inline for any form controls and actions.
.navbar-text for adding vertically centered strings of text.
.collapse.navbar-collapse for grouping and hiding navbar contents by a parent breakpoint.
Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the md (medium) breakpoint.



<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Comments

Popular posts from this blog

Database Management Systems Laboratory

Social and Professional Aspects of Information Technology