Module 4 Notes

Nagarjuna College of Engineering and Technology,
Bengaluru
Autonomous College Under VTU
Department of CSE (Data Science)
WEB PROGRAMMING (IC)

20CSI43
MODULE 4
Bootstrap
By
Prof. Likhith S R
Assistant. Professor
Dept. of CSE(DS), NCET
Module - IV
Bootstrap: Bootstrap Scaffolding, Bootstrap CSS, Bootstrap Layout Components, Bootstrap
JavaScript Plugins, Using Bootstrap, Web services
Bootstrap Scaffolding
What Is Bootstrap?
Bootstrap is the most popular HTML, CSS and JavaScript framework for developing a
responsive and mobile friendly website. It is a front-end framework used for easier and faster
web development. It includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many others. It can also use
JavaScript plug-ins. It facilitates you to create responsive designs. It is absolutely free to
download and use.
Bootstrap is an open source product from Mark Otto and Jacob Thornton who, when it was initially
released, were both employees at Twitter. There was a need to standardize the frontend toolsets of
engineers across the company. In the launch blog post, Mark Otto introduced the project like this:
Since Bootstrap launched in August 2011, it has taken off in popularity. It has evolved from being
an entirely CSS-driven project to include a host of JavaScript plugins and icons that go hand in
hand with forms and buttons. At its base, it allows for responsive web design and features a robust
12-column, 940px-wide grid. One of the highlights is the build tool on Bootstrap’s website, where
you can customize the build to suit your needs, choosing which CSS and JavaScript features you
want to include on your site. All of this allows frontend web development to be catapulted forward,
building on a stable foundation of forward-looking design and development. Getting started with
Bootstrap is as simple as dropping some CSS and JavaScript into the root of your site.
For someone starting a new project, Bootstrap comes with a handful of useful elements. Normally,
when I start a project, I start with tools like Eric Meyer’s Reset CSS and get going on my web
project. With Bootstrap, you just need to include the bootstrap.css CSS
file and, optionally, the bootstrap.js JavaScript file into your website and you are ready to go.
Bootstrap File Structure

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
├── img/
│ ├── glyphicons-halflings.png
│ ├── glyphicons-halflings-white.png
└── README.md
The Bootstrap download includes three folders: css, js, and img. For simplicity, add these to the
root of your project. Minified versions of the CSS and JavaScript are also included. It is not
necessary to include both the uncompressed and the minified versions. For the sake of brevity, I
use the uncompressed version during development and then switch to the compressed version in
production.
Default Grid System

The default Bootstrap grid (see Figure 1-1) system utilizes 12 columns, making for a 940px-
wide container without responsive features enabled. With the responsive CSS file added, the
grid adapts to be 724px or 1170px wide, depending on your viewport. Below 767px
viewports, such as the ones on tablets and smaller devices, the columns become fluid and stack
vertically. At the default width, each column is 60 pixels wide and offset 20 pixels to the left.
An example of the 12 possible columns is in Figure 1-1.
Figure 1-1. Default grid
The Bootstrap grid system has four classes:
• xs (for phones - screens less than 768px wide)
• sm (for tablets - screens equal to or greater than 768px wide)
• md (for small laptops - screens equal to or greater than 992px wide)
• lg (for laptops and desktops - screens equal to or greater than 1200px wide)
The classes above can be combined to create more dynamic and flexible layouts.
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
</div>
<div class="row">
</div>
• First; 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.
Three Equal Columns
.col-sm-4 .col-sm-4 .col-sm-4
• The following example shows how to get a three equal-width columns starting at tablets and
scaling to large desktops. On mobile phones or screens that are less than 768px wide, the
columns will automatically stack:
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
</div>
• The columns will automatically stack on top of each other when the screen is less than
768px wide.
Two Unequal Columns
.col-sm-4 .col-sm-8
<div class="row">
</div>
Basic Grid HTML

To create a simple layout, create a container with a <div> that has a class of .row and add the
appropriate amount of .span* columns. Since we have a 12-column grid, we just need the
amount of .span* columns to equal 12. We could use a 3-6-3 layout, 4-8, 3-5-4, 2-8-2… we could
go on and on, but I think you get the gist.
The following code shows .span8 and .span4, which adds up to 12:
<div class="row">
<div class="span8">...</div>
<div class="span4">...</div>
</div>
Nesting Columns
To nest your content with the default grid, inside of a .span*, simply add a new .row with
enough .span* that it equals the number of spans of the parent container (see Figure 1-3):
<div class="row">
<div class="span9"> Level 1 of
column
<div class="row">
<div class="span6">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</div>
Figure 1-3. Nesting grid

What is a responsive website and Why use Bootstrap?
A website is called responsive website which can automatically adjust itself to look good on all
devices, from smart phones to desktops etc.
Scaffolding − Bootstrap provides a basic structure with Grid System, link styles, and background.
CSS − Bootstrap comes with the feature of global CSS settings, fundamental HTML elements
styled and enhanced with extensible classes, and an advanced grid system.
Components − Bootstrap contains over a dozen reusable components built to provide iconography,
dropdowns, navigation, alerts, pop-overs, and much more.
JavaScript Plugins − Bootstrap contains over a dozen custom jQuery plugins. You can easily
include them all, or one by one.
Customize − You can customize Bootstrap's components, LESS variables, and jQuery plugins to
get your very own version.
.
Using Bootstrap
There are two ways to start using Bootstrap on your own web site.
 Download Bootstrap from getbootstrap.com
 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.
Bootstrap CDN
If you don't want to download and host Bootstrap yourself, you can include it from a CDN (Content
Delivery Network).
MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include
jQuery:
MaxCDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css
">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
Containers
Bootstrap also requires a containing element to wrap site contents.
There are two container classes to choose from:
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
The following example shows the code for a basic Bootstrap page (with a responsive fixed width
container):
<!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.4.1/css/bootstrap.min.cs
s">
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body></html>
The following example shows the code for a basic Bootstrap page (with a full width container):
<!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.4.1/css/bootstrap.min.cs
s">
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body></html>
Bootstrap CSS
Headings
All six standard heading levels have been styled in Bootstrap with the <h1> at 36 pixels tall, and the
<h6> down to 12 pixels (for reference, default body text is 14 pixels tall). In addition, to add an inline
subheading to any of the headings, simply add <small> around any of the elements and you will get
smaller text in a lighter color. In the case of the <h1>, the small text is 24 pixels tall, normal font weight
(i.e., not bold), and gray instead of black:
h1 small {
font-size:24px;
font-weight:normal;line-height:1;
color:#999;
}
Emphasis
In addition to using the <small> tag within headings, as discussed above, you can also use it with
body copy. When <small> is applied to body text, the font shrinks to 85% of its original size.
Bold
To add emphasis to text, simply wrap it in a <strong> tag. This will add font- weight:bold; to
the selected text.
Italics
For italics, wrap your content in the <em> tag. The term “em” derives from the word “emphasis”
and is meant to add stress to your text.
Emphasis Classes
Along with <strong> and <em>, Bootstrap offers a few other classes that can be used to provide
emphasis. These could be applied to paragraphs or spans:
<p class="muted">This content is muted</p>

<p class="text-warning">This content carries a warning class</p>
<p class="text-error">This content carries an error class</p>
<p class="text-info">This content carries an info class</p>
<p class="text-success">This content carries a success class</p>
<p>This content has <em>emphasis</em>, and can be <strong>bold</strong></p>
Abbreviations
The HTML <abbr> element provides markup for abbreviations or acronyms, like WWW or
HTTP. By marking up abbreviations, you can give useful information to browsers, spell
checkers, translation systems, or search engines. Boot‐ strap styles <abbr> elements with a light
dotted border along the bottom and reveals the full text on hover (as long as you add that text to
the <abbr> title attribute):
<abbr title="Real Simple Syndication">RSS</abbr>
Blockquotes
To add blocks of quoted text to your document—or for any quotation that you want to set apart
from the main text flow—add the <blockquote> tag around the text. For best results, and for line
breaks, wrap each subsection in a <p> tag. Bootstrap’s default styling indents the text and adds a
thick gray border along the left side. To identify the source
of the quote, add the <small> tag, then add the source’s name wrapped in a <cite> tag before closing
the </small>tag:
<blockquote>
<p>That this is needed, desperately needed, is indicated by the incredible
uptake of Bootstrap. I use it in all the server software I'm working on. And it
shows through in the templating language I'm developing, so everyone who
uses it will find it's "just there" and works, any time you want to do a Bootstrap
technique. Nothing to do, no libraries to include. It's as if it were part of the
hardware.
Same approach that Apple took with the Mac OS in 1984.</p>
<small>Developer of RSS, <cite title="Source Title">Dave Winer</cite>
</small>
</blockquote>
Code
There are two different key ways to display code with Bootstrap. The first is the <code> tag and
the second is the <pre> tag. Generally, if you are going to be displaying code inline, you should
use the <code> tag. But if the code needs to be displayed as a stand- alone block element or if it
has multiple lines, then you should use the <pre> tag:
<p>Instead of always using divs, in HTML5, you can use new elements like
<code><section></code>, <code><header></code>, and
<code><footer></code>. The html should look something like this:</p>
<pre>
<article>
<h1>Article Heading</h1>
</article>
</pre>
Tables
One of the favorite parts of Bootstrap is the nice way that tables are handled. I do a lot of work
looking at and building tables, and the clean layout is a great feature that’s included in
Bootstrap right off the bat. Table 2-1 lists the various elements supported by Bootstrap.
Tag Description
Table 2-1. Table elements supported by Bootstrap

<table> Wrapping element for displaying data in a tabular format
<thead> Container element for table header rows (<tr>) to label table columns
<tbody> Container element for table rows (<tr>) in the body of the table
<tr> Container element for a set of table cells (<td> or <th>) that appears on a single row
<td> Default table cell
<th> Special table cell for column (or row, depending on scope and placement) labels. Must be used within a <thead>
<caption> Description or summary of what the table holds, especially useful for screen readers
If you want a nice, basic table style with just some light padding and horizontal dividers, add the
base class of .table to any table (see Figure 2-13). The basic layout has a top border on all of the
<td> elements:
<table class="table">
<caption>...</caption>
<thead>
<tr>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
Figure 2-13. Basic table class
Optional Table Classes

Along with the base table markup and the .tableclass, there are a few additional classes that you can
use to style the markup. These four classes are: .table-striped, .table- bordered, .table-hover, and
.table-condensed.
Striped table
By adding the .table-striped class, you will get stripes on rows within the <tbody> (see Figure
2-14). This is done via the CSS :nth-child selector, which is not available on Internet Explorer
7–8.
Figure 2-14. Striped table class

Bordered table
If you add the .table-bordered class, you will get borders surrounding every element and rounded
corners around the entire table, as shown in Figure 2-15.
Figure 2-15. Bordered table class
Hover table
Figure 2-16 shows the .table-hover class. A light gray background will be added to rows while
the cursor hovers over them.
Figure 2-16. Hover table class
Condensed table
If you add the .table-condensed class, as shown in Figure 2-17, row padding is cut in half to
condense the table. This is useful if you want denser information.
Figure 2-17. Condensed table class
Table Row Classes

The classes shown in Table 2-2 will allow you to change the background color of your rows
(see Figure 2-18).
Table 2-2. Optional table row classes
Class Description Background color
.success Indicates a successful or positive action. Green
.error Indicates a dangerous or potentially negative action. Red
.warning Indicates a warning that might need attention. Yellow
.info Used as an alternative to the default styles. Blue
Figure 2-18. Table row classes
Forms
Another one of the highlights of using Bootstrap is the ability to create forms with ease. As a web
developer, styling forms is one of my least favorite tasks. Bootstrap makes it easy with the
simple HTML markup and extended classes for different styles of forms.
The basic form structure comes with Bootstrap; there is no need to add any extra helper classes (see
Figure 2-19). If you use the placeholder, keep in mind that it is only supported in newer browsers. In
older browsers, no placeholder text will be displayed:
<form>
<fieldset>
<legend>Legend</legend>
<label for="name">Label name</label>
<input type="text" id="name"
placeholder="Type something…">
<span class="help-block">Example block-level helptext
here.</span>
<label class="checkbox" for="checkbox">
<input type="checkbox" id="checkbox">
Web Programming(20CSI43) Module-4
</form>
Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
Optional Form Layouts

With a few helper classes, you can dynamically update the layout of your form. Bootstrap comes
with a few preset styles to choose from.
Inline form
To create a form where all of the elements are inline and labels are alongside, add the class
.form-inline to the <form> tag (see Figure 2-21). To have the label and the input on the
same line, use this inline form code:
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</form>
Dept. of CSE(Data Science), NCET 15 2021-22

Figure 2-21. Inline form
Horizontal form
Bootstrap also comes with a prebaked horizontal form; this one stands apart from the
others not only in the amount of markup, but also in the presentation of the form.
Traditionally you’d use a table to get a form layout like the one shown in Figure 2-22,
but Bootstrap manages to do it without using tables. Even better, if you’re using the
responsive CSS, the horizontal form will automatically adapt to smaller layouts by
stacking the controls vertically.
To create a form that uses the horizontal layout, do the following:
• Add a class of .form-horizontal to the parent <form> element.
• Wrap labels and controls in a <div> with class .control-group.
• Add a class of .control-label to the labels.
• Wrap any associated controls in a <div> with class .controls for proper alignment.
Figure 2-22. Horizontal form

<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<label class="control-label" for="inputPassword">Password</label>
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
Buttons
One of the favorite features of Bootstrap is the way that buttons are styled. Dave Winer,
inventor of RSS and big fan of Bootstrap, has this to say about it:
I like to think that Bootstrap is unifying the Web and allowing a unified experience of
what an interface can look like across the Web. With the advent of Bootstrap, you can
usually spot the sites that have adopted it by the buttons that they use. A grid layout and
many of the other features fade into the background, but buttons, forms, and other

unifying elements are a key part of Bootstrap. When I come across a site that is using
Bootstrap, I want to give a high five to the webmaster at that domain, since he probably
“just gets it.” I felt the same way a few years ago whenever I saw wp-contentin the HTML of
sites that I visited.
Now, buttons and links can all look alike with Bootstrap. Anything that is given a class
of .btn will inherit the default look of a gray button with rounded corners. However, you
can add color to the buttons by adding extra classes (see Table 2-3).
Buttons Class Description
Table 2-3. Button color examples

btn Standard gray button with gradient
btn btn-primary Provides extra visual weight and identifies the primary action in a set of
buttons (blue)
btn btn-info Used as an alternative to the default styles (light blue)
btn-success Indicates a successful or positive action (green)
btn btn-warning Indicates caution should be taken with this action (orange)
btn btn-danger Indicates a dangerous or potentially negative action (red)

btn btn-inverse Alternate dark-gray button, not tied to a semantic action or use
btn btn-link De-emphasizes a button by making it look like a link while maintaining
button behavior
Button Sizes
If you need larger or smaller buttons, simply add .btn-large, .btn-small, or .btn-mini to
links or buttons (see Figure 2-43):
<p>

<button class="btn btn-large btn-primary" type="button">Large button</button>
<button class="btn btn-large" type="button">Large button</button>
</p>
<p>
<button class="btn btn-primary" type="button">Default button</button>
<button class="btn" type="button">Default button</button>
</p>
<p>
<button class="btn btn-small btn-primary" type="button">Small button</button>
<button class="btn btn-small" type="button">Small button</button>

</p>
<p>
<button class="btn btn-mini btn-primary" type="button">Mini button</button>
<button class="btn btn-mini" type="button">Mini button</button>
</p>
Figure 2-43. Different button sizes
Disabled Button Styling
For anchor elements, simply add the class of .disabled to the tag and the link will fade in
color, and lose the gradient (see Figure 2-45):
<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>

<a href="#" class="btn btn-large disabled">Link</a>

Figure 2-45. Disabled link
For a button, simply add the disabled attribute to the button (see Figure 2-46). This will
actually disable the button, so JavaScript is not directly needed:
<button type="button" class="btn btn-large btn-primary disabled"

disabled="disabled">Primary button</button>
<button type="button" class="btn btn-large" disabled>Button</button>
Figure 2-46. Disabled button
Images
Images have three classes (see Figure 2-47) that can be used to apply some simple
styles: .img-rounded adds border-radius:6px to give the image rounded corners,
.img-circle makes the entire image round by adding border-radius:500px, and .img-
polaroid adds a bit of padding and a gray border:
<img src="..." class="img-rounded">

<img src="..." class="img-circle">
<img src="..." class="img-polaroid">

Icons
Bootstrap bundles 140 icons into one sprite that can be used with buttons, links, navi‐
gation, and form fields. The icons are provided by GLYPHICONS; see Figure 2-48.
Figure 2-48. Icons by GLYPHICONS
GLYPHICONS Attribution
Users of Bootstrap are fortunate to use the GLYPHICONS for free on Bootstrap projects.
The developers have asked that you link back to GLYPHICONS when practical.
Button groups
By using button groups combined with icons, you can create nice interface elements
with minimal markup (see Figure 2-49):

<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#"><i class="icon-align-left"></i></a>
<a class="btn" href="#"><i class="icon-align-center"></i></a>
<a class="btn" href="#"><i class="icon-align-right"></i></a>
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
</div>
</div>
Figure 2-49. Button groups
Navigation
When you are using icons next to a string of text, make sure to add a space to provide
the proper alignment of the image (see Figure 2-50). Navigation code will be covered
further in the next chapter.
<ul class="nav nav-list">

<li class="active"><a href="#"><i class="icon-home icon-white"></i>
Home</a></li>
<li><a href="#"><i class="icon-book"></i> Library</a></li>
<li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
<li><a href="#"><i class="i"></i> Misc</a></li>
</ul>

Figure 2-50. Basic navigation list
Bootstrap Layout Components

Dropdown Menus
Dropdown menus are toggleable, contextual menus for displaying links in a list format.
The dropdowns can be used on a variety of different elements, navs, buttons, and more.
You can have a single dropdown or extend the dropdown into another submenu. You
can see a basic dropdown menu in Figure 3-1.
Figure 3-1. Basic dropdown menu
The following code creates a basic dropdown menu:
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">

<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
Options
Right-align
Add .pull-right to a .dropdown-menu to right-align the dropdown menu to the parent
object:
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">

...
</ul>
Submenu
If you would like to add a second layer of dropdowns (see Figure 3-2), simply add
.dropdown-submenu to any <li> in an existing dropdown menu for automatic styling:
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">

...
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>

Figure 3-2. Dropdown menu and submenu
Button Groups
Button groups allow multiple buttons to be stacked together (see Figure 3-3). This is
useful when you want to place items like alignment buttons together. To create a button
group, simply wrap a series of anchors or buttons in a <div> that has .btn-group as a
class:
<button class="btn">1</button>
</div>
Figure 3-3. Left, middle, and right button group
Buttons with Dropdowns

To add a dropdown to a button (see Figure 3-6), simply wrap the button and dropdown

menu in a .btn-group. You can also use <span class="caret"></span> to act as an indicator
that the button is a dropdown:
<button class="btn btn-danger">Danger</button>
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Figure 3-6. Button with a dropdown
You can use the dropdowns with any button size: .btn-large, .btn, .btn-small, or
.btn-mini. Figure 3-7 shows several examples of different button sizes.
Figure 3-7. Button dropdown sizes

Split Button Dropdowns

Split button dropdowns (see Figure 3-8) use the same general style as the dropdown
button but add a primary action along with the dropdown. Split buttons have the pri‐
mary action on the left and a toggle on the right that displays the dropdown.
Figure 3-8. Split button dropdown
Here’s the code for a split button dropdown:
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">

</button>

</ul>
</div>
Dropup Menus
Menus can also be built to drop up rather than down (see Figure 3-9). To make this
change, simply add .dropup to the .btn-group container. To have the button pull up from

the righthand side, add .pull-right to the .dropdown-menu (take note: the caret is now
pointed up because the menu will be going up instead of down):
<div class="btn-group dropup">

<button class="btn">Dropup</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
</button>

</ul>
</div>
Figure 3-9. Dropup menu
Navigation Elements
Bootstrap provides a few different options for styling navigation elements. All of them
share the same markup and base class, .nav.
Bootstrap also provides a helper class, .active. In principle, it generally adds distinction to
the current element and sets it apart from the rest of the navigation elements. You can
add this class to the home page links or to the links of the page that the user is
currently on.

Tabular Navigation
To create a tabbed navigation menu (see Figure 3-10), start with a basic unordered list
with the base class of .nav and add .nav-tabs:
<ul class="nav nav-tabs">

<li class="active">
<a href="#">Home</a>
</li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
Figure 3-10. Tabbed navigation
Basic Pills Navigation
To turn the tabs into pills (see Figure 3-11), use .nav-pills instead of .nav-tabs:
<ul class="nav nav-pills">

<li class="active">
<a href="#">Home</a>
</li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
Figure 3-11. Tabbed navigation

Disabled class
For each of the .nav classes, if you add the .disabled class, it will create a gray link that also
disables the :hover state (see Figure 3-12):
<ul class="nav nav-pills">

...
<li class="disabled"><a href="#">Home</a></li>
...
</ul>
Figure 3-12. Disabled navigation
The link is still clickable unless the href is removed with JavaScript or some other method.
Stackable Navigation
Both tabs and pills are horizontal by default. To make them appear vertically stacked,
just add the .nav-stacked class. See Figures 3-13 and 3-14 for examples of verticaly
stacked tabs and pills.
Here’s the code for stacked tabs:
<ul class="nav nav-tabs nav-stacked">

...
</ul>

Figure 3-13. Stacked tabs
Here’s the code for stacked pills:
<ul class="nav nav-pills nav-stacked">

...
</ul>
Figure 3-14. Stacked pills
Dropdowns
Navigation menus share a similar syntax with dropdown menus (see Figure 3-15). By
default, you have a list item that has an anchor working in conjunction with some data-
attributes to trigger an unordered list with a .dropdown-menu class:
<ul class="nav nav-tabs">

<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
href="#">
Dropdown
<b class="caret"></b>
</a>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
Figure 3-15. Tabbed navigation with a dropdown menu
Pagination
Bootstrap handles pagination like a lot of other interface elements, an unordered list,
with wrapper a <div> that has a specific class that identifies the element. In the basic form,
adding .pagination to the parent <div> creates a row of bordered links. Each of the list
items can be additionally styled by using the .disabled or .active class. See Figures 3-29
and 3-30 for examples of this.
Here’s the code for basic pagination:
<div class="pagination">
<ul>
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
Figure 3-29. Basic pagination
And here’s the code for pagination using helper classes:
<div class="pagination pagination-centered">

<ul>
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
Figure 3-30. Pagination with helper classes
Pager
If you need to create simple pagination links that go beyond text, the pager can work

quite well. Like the pagination links, the markup is an unordered list that sheds the
wrapper <div>. By default, the links are centered (see Figure 3-32).
Figure 3-32. Basic pager
The following is the code for a basic pager:
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
To left- or right-align the links, you just need to add the .previous and .next class as to
the list items (see Figure 3-33). Also, like .pagination in Figure 3-31, you can add the
.disabled class for a muted look.
The following is the code for aligning page links:
<ul class="pager">
<li class="previous">
<a href="#">← Older</a>
</li>
<li class="next">
<a href="#">Newer →</a>
</li>
</ul>

Labels
Labels are great for offering counts, tips, or other markup for pages. They’re another of
my favorite little Bootstrap touches. Figure 3-34 shows some labels that can be used.
Figure 3-34. Labels
Here’s the code to use these labels:
<span class="label">Default</span>
<span class="label label-success">Success</span>
<span class="label label-warning">Warning</span>
<span class="label label-important">Important</span>
<span class="label label-info">Info</span>
<span class="label label-inverse">Inverse</span>
Badges
Badges are similar to labels; the primary difference is that the corners are more rounded.
The colors of badges reflect the same classes as labels (see Figure 3-35).
Figure 3-35. Badges

The following code shows how to use badges:
<span class="badge">1</span>
<span class="badge badge-success">2</span>
<span class="badge badge-warning">4</span>
<span class="badge badge-important">6</span>
<span class="badge badge-info">8</span>
<span class="badge badge-inverse">10</span>
Bootstrap JavaScript Plugins
Modal
A modal is a child window that is layered over its parent window (see Figure 4-1).
Typically, the purpose is to display content from a separate source that can have some
interaction without leaving the parent window. Child windows can provide informa‐
tion, interaction, or more. I use them as a window for holding slideshows and login/
registration information. The modal plugin is probably one of my favorite Bootstrap
features.
To create a static modal window, use this code:
<div class="modal hide fade">

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true"> ×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>

Figure 4-1. Static modal window
To invoke the modal window, you need to have some kind of a trigger. Normally I use a
button or a link. If you look in the code below, you will see that in the <a> tag, the
href="myModal" is the target of the modal that you want to load on the page. This code
allows you to create multiple modals on the page and then have different triggers for
each of them. Now, to be clear, you don’t load multiple modals at the same time, but you
can create many on the page to be loaded at different times.
There are three classes to take note of in the modal. The first is .modal, which is simply
identifying the content of the <div> as a modal. The second is .hide, which tells the
browser to hide the content of the <div> until we are ready to invoke it. And last, the
.fade class. When the modal is toggled, it will cause the content to fade in and out.

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch
demomodal</a>


<div id="myModal" class="modal hide fade" tabindex="-1"
role="dialog"aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal"
aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
Collapse
The collapse plugin makes it easy to make collapsing divisions of the page (see
Figure 4-12). Whether you use it to build accordion navigation or content boxes, it
allows for a lot of content options.
Figure 4-12. Accordion

The following code creates collapsible groups:
<div class="accordion" id="accordion2">

<div class="accordion-group">
<div class="accordion-heading">

<a class="accordion-toggle" data-toggle="collapse" data-
parent="#accordion2"href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner"> Anim
pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-
parent="#accordion2"href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner"> Anim
pariatur cliche...
</div>
</div>
</div>
</div>
...
You can also use the data attributes to make all content collapsible:
<button type="button" class="btn btn-danger" data-toggle="collapse"

data-target="#demo">

simple collapsible
</button>
<div id="demo" class="collapse in"> … </div>
What are Web Services?

The Internet is the worldwide connectivity of hundreds of thousands of computers of
various types that belong to multiple networks. On the World Wide Web, a web service is
a standardized method for propagating messages between client and server applications. A
web service is a software module that is intended to carry out a specific set of functions.
Web services in cloud computing can be found and invoked over the network.
The web service would be able to deliver functionality to the client that invoked the web
service.
A web service is a set of open protocols and standards that allow data to be exchanged
between different applications or systems. Web services can be used by software programs
written in a variety of programming languages and running on a variety of platforms to
exchange data via computer networks such as the Internet in a similar way to inter-process
communication on a single computer.
Functions of Web Services

 It’s possible to access it via the internet or intranet networks.
 XML messaging protocol that is standardized.
 Operating system or programming language independent.
 Using the XML standard, it is self-describing.
 A simple location approach can be used to locate it.
Components of Web Service
XML and HTTP is the most fundamental web services platform. The following
components are used by all typical web services:
SOAP (Simple Object Access Protocol)

SOAP stands for “Simple Object Access Protocol.” It is a transport-independent
messaging protocol. SOAP is built on sending XML data in the form of SOAP Messages.
A document known as an XML document is attached to each message. Only the structure
of the XML document, not the content, follows a pattern. The best thing about Web
services and SOAP is that everything is sent through HTTP, the standard web protocol.
A root element known as the element is required in every SOAP document. In an XML
document, the root element is the first element. The “envelope” is separated into two
halves. The header comes first, followed by the body. The routing data, or information
that directs the XML document to which client it should be sent to, is contained in the
header. The real message will be in the body.
UDDI (Universal Description, Discovery, and Integration)

UDDI is a standard for specifying, publishing and discovering a service provider’s online
services. It provides a specification that aids in the hosting of data via web services. UDDI
provides a repository where WSDL files can be hosted so that a client application can
discover a WSDL file to learn about the various actions that a web service offers. As a
result, the client application will have full access to the UDDI, which serves as a database
for all WSDL files.
The UDDI registry will hold the required information for the online service, just like a
telephone directory has the name, address, and phone number of a certain individual. So
that a client application may figure out where it is.
WSDL (Web Services Description Language)

If a web service can’t be found, it can’t be used. The client invoking the web service
should be aware of the location of the web service. Second, the client application must
understand what the web service does in order to invoke the correct web service. The
WSDL, or Web services description language, is used to accomplish this. The WSDL file
is another XML-based file that explains what the web service does to the client
application. The client application will be able to understand where the web service is
located and how to use it by using the WSDL document.

Module 4 Notes

Uploaded by

Copyright:

Available Formats

Module 4 Notes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Module 4 Notes

Uploaded by

Copyright:

Available Formats

Nagarjuna College of Engineering and Technology,

WEB PROGRAMMING (IC)

Bootstrap File Structure

Default Grid System

Figure 1-1. Default grid

The Bootstrap grid system has four classes:

• xs (for phones - screens less than 768px wide)

• sm (for tablets - screens equal to or greater than 768px wide)

• md (for small laptops - screens equal to or greater than 992px wide)

Three Equal Columns

.col-sm-4 .col-sm-4 .col-sm-4

Two Unequal Columns

Basic Grid HTML

Figure 1-3. Nesting grid

<p class="muted">This content is muted</p>

Table 2-1. Table elements supported by Bootstrap

<td> Default table cell

Figure 2-13. Basic table class

Optional Table Classes

Figure 2-14. Striped table class

Figure 2-16. Hover table class

Figure 2-17. Condensed table class

Table Row Classes

.error Indicates a dangerous or potentially negative action. Red

.warning Indicates a warning that might need attention. Yellow

.info Used as an alternative to the default styles. Blue

Figure 2-18. Table row classes

Optional Form Layouts

Dept. of CSE(Data Science), NCET 15 2021-22

Figure 2-21. Inline form

To create a form that uses the horizontal layout, do the following:

• Add a class of .form-horizontal to the parent <form> element.

• Wrap labels and controls in a <div> with class .control-group.

• Add a class of .control-label to the labels.

Figure 2-22. Horizontal form

Dept. of CSE(Data Science), NCET 16 2021-22

Dept. of CSE(Data Science), NCET 17 2021-22

Buttons Class Description

Table 2-3. Button color examples

btn btn-info Used as an alternative to the default styles (light blue)

btn-success Indicates a successful or positive action (green)

btn btn-danger Indicates a dangerous or potentially negative action (red)

Dept. of CSE(Data Science), NCET 18 2021-22

<button class="btn btn-small" type="button">Small button</button>

Figure 2-43. Different button sizes

Disabled Button Styling

<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>

Dept. of CSE(Data Science), NCET 19 2021-22

Figure 2-45. Disabled link

<button type="button" class="btn btn-large btn-primary disabled"

Figure 2-46. Disabled button

<img src="..." class="img-rounded">

Dept. of CSE(Data Science), NCET 20 2021-22

Figure 2-48. Icons by GLYPHICONS

Dept. of CSE(Data Science), NCET 21 2021-22

Figure 2-49. Button groups

<ul class="nav nav-list">