Scribd
Upload
15 views37 pages

Boot 1

Uploaded by

madhimullai
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views37 pages

Boot 1

Uploaded by

madhimullai
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 37

UNIT -3

FRONT-END FRAMEWORK
BOOTSTRAP
RESPONSIVE WEB DESIGN
Responsive web design is about creating websites which automatically adjust themselves to look good on all devices, from small
phones to large desktops.

• Mobiles
• Tablets
• Desktops
• Big displays

Bootstrap
Bootstrap is a front-end CSS Framework used to build beautiful responsive User interfaces.
1. Mobile-first design (Responsive grid system)
2. Reusable classes to help style our content.
3. Inbuilt UI elements such as buttons, cards, modals etc
History
Features
Bootstrap Packages

Boostrap Containers:
HTML( WITHOUT USING BOOTSTRAP CONTAINER)
USING BOOTSTRAP CONTAINER

Container
Use .container for a responsive fixed width container.
<div class="container">
...
</div>

Container fluid
Use .container-fluid for a full-width container, spanning the entire width of your viewport
<div class="container-fluid">
...
</div>

Bootstrap Grid System


Bootstrap's grid system allows up to 12 columns across the page.

If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:
Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen
size.

Grid Classes
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)
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.
<div class="row">
<div class="col-*-*"></div>
<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>

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.

Example:
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
</body>
</html>
OUTPUT
Container:
<body>
<div class="container">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">WELCOME TO</div>
<div class="col-sm-4" style="background-color:lavenderblush;">WEB TECHNOLOGY</div>
<div class="col-sm-4" style="background-color:lavender;">BOOSTRAP</div>
</div>
</div>
</body>
</html>
Output

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:
Example

Two Unequal Columns


Bootstrap's Default Settings
Bootstrap's global default font-size is 14px, with a line-height of 1.428.

Bootstrap vs. Browser Defaults <h1> - <h6>


By default, Bootstrap will style the HTML headings (<h1> to <h6>) in the following way:

OUTPUT
<small>
In Bootstrap the HTML <small> element is used to create a lighter, secondary text in any heading:

OUTPUT
<mark>
Bootstrap will style the HTML <mark> element in the following way:
<div class="container">
<h1>Highlight Text</h1>
<p>Use the mark element to <mark>highlight</mark> text.</p>
</div>
</body>
</html>
OUTPUT
<abbr>
Bootstrap will style the HTML <abbr> element in the following way:

<dl>
Bootstrap will style the HTML <dl> element in the following way:
<code>
Bootstrap will style the HTML <code> element in the following way:
<kbd>
Bootstrap will style the HTML <kbd> element in the following way:
Contextual Colors and Backgrounds
Bootstrap also has some contextual classes that can be used to provide "meaning through colors".

The classes for text colors are:.text-muted, .text-primary, .text-success, .text-info, .text-warning, and
.text-danger:
The classes for background colors are:.bg-primary, .bg-success, .bg-info, .bg-warning, and .bg-danger:
Text Alignment

CHANGING TEXT FONT SIZE


* lead
* small
Making changes in the text

LIST CONCEPT IN BOOTSTRAP


list-inline Places all list items on a single line

<div class="container">
<h2>Typography</h2>
<p>The class .list-inline places all list items on a single line:</p>
<ul class="list-inline">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>

OUTPUT

.listunstyled

Removes the default list-style and left margin on list items (works on both <ul> and
<ol>). This class only applies to immediate children list items (to remove the default list-
style from any nested lists, apply this class to any nested lists as well)
Bootstrap Basic Table
A basic Bootstrap table has a light padding and only horizontal dividers.

The .table class adds basic styling to a table:

<body>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
OUTPUT

Striped Rows
The .table-striped class adds zebra-stripes to a table:
<table class="table table-striped">

Bordered Table
The .table-bordered class adds borders on all sides of the table and cells:

<table class="table table-bordered">

Hover Rows
The .table-hover class adds a hover effect (grey background color) on table rows:

<table class="table table-hover">


Bootstrap Images

Rounded Corners
The .img-rounded class adds rounded corners to an image (IE8 does not support rounded corners):
Circle
The .img-circle class shapes the image to a circle (IE8 does not support rounded corners):

<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre">

Thumbnail
The .img-thumbnail class shapes the image to a thumbnail:

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">


Responsive Images
Images come in all sizes. So do screens. Responsive images automatically adjust to fit the size of the screen.

Create responsive images by adding an .img-responsive class to the <img> tag. The image will then scale
nicely to the parent element.

The .img-responsive class applies display: block; and max-width: 100%; and height: auto; to the image:

BUTTONS AND BUTTON GROUPS

Button Styles
The button classes can be used on an <a>, <button>, or <input> element:
BUTTON SIZE
Bootstrap provides four button sizes:

The classes that define the different sizes are:

• .btn-lg
• .btn-sm
• .btn-xs
Block Level Buttons
A block level button spans the entire width of the parent element.

Add class .btn-block to create a block level button:

<div class="container">
<h2>Block Level Buttons</h2>
<button type="button" class="btn btn-primary btn-block">Button 1</button>
<button type="button" class="btn btn-default btn-block">Button 2</button> <h2>Large Block Level Buttons</h2>
<button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button>
<button type="button" class="btn btn-default btn-lg btn-block">Button 2</button>

<h2>Small Block Level Buttons</h2>


<button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button>
<button type="button" class="btn btn-default btn-sm btn-block">Button 2</button>
</div>

OUTPUT

Active/Disabled Buttons
A button can be set to an active (appear pressed) or a disabled (unclickable) state:
Button Groups
Bootstrap allows you to group a series of buttons together (on a single line) in a button group:

Use a <div> element with class .btn-group to create a button group:


Instead of applying button sizes to every button in a group, use class .btn-group-lg|sm|xs to size all buttons
in the group:
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Vertical Button Groups
Bootstrap also supports vertical button groups:

Use the class .btn-group-vertical to create a vertical button group:

Justified Button Groups


To span the entire width of the screen, use the .btn-group-justified class:
Example with <a> elements:
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
Example with <button> elements

For <button> elements, you must wrap each button in a .btn-group class:
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
Output

Nesting Button Groups & Dropdown Menus


Nest button groups to create dropdown menus:
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
output

Split Button Dropdowns


<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>

Output

You might also like