6.Explain fluid grid system with example.

Fluid Grid System

The fluid grid system uses percentages instead of pixels for column
widths. It has the same responsive capabilities as our fixed grid
system, ensuring proper proportions for key screen resolutions and
devices. You can make any row “fluid” by changing.
Row to row-fluid: The column classes stay exactly the same, making
it easy to flip between fixed and fluid grids. To offset, you operate in
the same way as the fixed grid system.
add .offset* to any column to shift by your desired number of
columns:

Nesting a fluid grid is a little different. Since we are using

percentages, each .row resets the column count to 12. For example,
if you were inside a .span8, instead of two .span4 elements to divide
the content in half, you would use two .span6 divs
7. Explain bootstrap and its file structure.
Bootstrap is an open source product from Mark Otto and Jacob
Thornton who, when it was initially released, were both employees
at Twitter.It allows for responsive web design and features a robust
12-column, 940px-wide grid.

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.
8.Develop a form using optional form layouts.
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.
Search form
Add .form-search to the <form> tag, and then add .search-query to
the <input> for an input box with rounded corners and an inline
submit button

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

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.
Ex:
<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>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword"
placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
10. Explain prepended and appended input control with ex.
Prepended and appended inputs
By adding prepended and appended content to an input field, you
can add common elements to the user’s input.

If you combine both of them, you simply need to add both the
.input-prepend and .input-append classes to the parent <div>.
11.Build ex program for creating different types of list.
Unordered list
If you have an ordered list that you would like to remove the bullets
from, add class="unstyled" to the opening <ul> tag

Ordered list
An ordered list is a list that falls in some sort of sequential order and
is prefaced by numbers rather than bullets.
Definition list
The third type of list you get with Bootstrap is the definition list. The
definition list differs from the ordered and unordered list in that
instead of just having a block-level <li> element, each list item can
consist of both the <dt> and the <dd> elements. <dt> stands for
“definition term Subsequently, the <dd> is the definition of the <dt>.
12.Develop a program for demonstrate validation state of
bootstrap
Validation states
Bootstrap includes validation styles for error, warning, info, and
success messages. To use, simply add the appropriate class to the
surrounding .control-group:
<div class="control-group warning">
<label class="control-label" for="inputWarning">Input with
warning</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">Something may have gone wrong</span>
</div>
</div>
<div class="control-group error">
<label class="control-label" for="inputError">Input with
error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">Input with
success</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">Woohoo!</span>
</div>
</div>