Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
65 views

Javascript&CSS-Bootstrap A Front-End Framework

This document provides an overview of Bootstrap responsive utilities, typography, tables, images, glyphicons, alerts and buttons. It describes classes for showing and hiding elements on different screen sizes, styling text, creating tables with different styles, styling images and using glyphicons. It also discusses alert types and button styles in Bootstrap.

Uploaded by

Jeevan Sai Maddi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
65 views

Javascript&CSS-Bootstrap A Front-End Framework

This document provides an overview of Bootstrap responsive utilities, typography, tables, images, glyphicons, alerts and buttons. It describes classes for showing and hiding elements on different screen sizes, styling text, creating tables with different styles, styling images and using glyphicons. It also discusses alert types and button styles in Bootstrap.

Uploaded by

Jeevan Sai Maddi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Bootstrap

A front-end framework

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 1


Bootstrap Responsive Utilities Classes
 There are few helper classes available in Bootstrap for showing and hiding content by device
 If you want to enable the visibility of elements based on the devices when screen size is within a
specific range, then you can use the below classes:
.visible-xs-* .visible-sm-* .visible-md-* .visible-lg-*
 Makes the element visible only on devices having screen width less than the limit for that particular
device.(<768px,<992px,<1200, >=1200)
 Similarly you have hidden utility classes to hide the elements on certain devices.
.hidden-xs .hidden-sm .hidden-md .hidden-lg
 Makes the element hidden only on the appr. devices having the screen width appr. for that device.

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 2


Visibility Demo
<!DOCTYPE html>
<html>
<head>
<title>Example of Bootstrap 3 Visible Responsive Classes</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
Copy the necessary files from the Bootstrap downloaded folder
to your project folder
**Note: All javascript plugins require jQuery to be included
Download the jquery jar file and copy it to the js folder

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 3


Visibility Demo
<div class="bs-example">
<p class="visible-xs">This paragraph is visible only on <strong>Extra Small
Devices</strong> that has screen width less than <code>768px</code></p>
<p class="visible-lg">This paragraph is visible only on <strong>Large
Devices</strong> that has screen width greater than or equal to
<code>1200px</code>.</p>
<p class="visible-lg visible-md visible-sm visible-xs">This paragraph is visible
on all screen sizes <strong>Large,Medium,Small,Xtra Small Devices</strong> that
has screen of any width </p>
</div>
</body>
</html>
Note the first paragraph is not visible
Reduce the browser and check the output

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 4


Bootstrap Typography

 Bootstrap Typography provides styling and formatting of text contents like headings, paragraphs etc.
 Classes for headings: Similar to <h1> to <h6> tags, we have classes like .h1 to .h6
 Classes for secondary text of any heading: Similar to <small> , we have class called .small
 Classes for text alignment: text-left, text-center, text-right,text-justify, text-nowrap
 Classes for text transformation: text-lowercase, text-uppercase, text-capitalize.

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 5


Bootstrap Typography -Demo
<body>
<h1>H1 heading</h1>
<p class="h1">H1..H6 font size(36 px,30 px,24 px,18 px,14 px,12 px)</p>
Normal font<br>
<p class="small">Small font</p>
<p class="text-lowercase">LOWERCASE</p>
<p class="text-uppercase">uppercase</p>
<p class="text-capitalize">this will be displayed in capitalized font</p>
</body>

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 6


Bootstrap Tables
 Bootstrap provides you several classes using which you can create stylish tables.

 Classes:
 .table : for basic table with horizontal dividers
 .table-bordered (used with .table class) : for a table border
 .table-striped (used with .table class) : for a zebra striped table
 .active, .info , .success, .warning, .danger etc : for emphasizing the row/cell through appropriate
colouring.

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 7


Bootstrap Tables - Demo

<div class="container">
<table class="table">
<tr><th>Empid</th><th>EmpName</th></tr>
<tr><td>1001</td><td>Steve</td></tr>
<tr><td>1002</td><td>Roger</td></tr>
<tr><td>1003</td><td>Peter</td></tr>
<tr><td>1004</td><td>Alex</td></tr>
</table>
</div>

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 8


Bootstrap Tables - Demo
<div class="container">
<table class="table table-striped table-bordered">
<tr class="active"><th>Msg ID</th><th>Remarks</th></tr>
<tr class="info"><td>M01</td><td>System Running..</td></tr>
<tr class="success"><td>M02</td><td>File Successfully
Downloaded</td></tr>
<tr class="warning"><td>M03</td><td>30 GB more to
go</td></tr>
<tr class="danger"><td>M04</td><td>Fire!!! Evacaute</td></tr>
</table>
</div>

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 9


Bootstrap Images
 Images play a very important role in web design.

 Styling images and placing them properly on the pages enhances the look and feel of the web pages

 Bootstrap classes for image related styling:


 img-rounded, img-circle, img-thumbnail

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 10


Bootstrap Images - Demo
<img src="images/Penguins.jpg" class="img-rounded" height="150" width="150">
<img src="images/Penguins.jpg" class="img-circle" height="150" width="150">
<img src="images/Penguins.jpg" class="img-thumbnail" height="150" width="150">

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 11


Bootstrap Glyphicons
 Bootstrap 3.3.2 allows around 259 glyphicons.

 Few icon classes


 glyphicon
 glyphicon-heart
 glyphicon-asterisk
 glyphicon-search
 glyphicon-home
 glyphicon-envelope

 You can use the bootstrap icons along with the <span> tag with the base class “glyphicon” and
individual icon class glyphicon-*

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 12


Bootstrap Icons - Demo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Visible Responsive Classes</title>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<button><span class="glyphicon glyphicon-search"></span>Search</button>
<button><span class="glyphicon glyphicon-envelope"></span>Mail</button>
<button><span class="glyphicon glyphicon-heart"></span>Compassion</button>
<button><span class="glyphicon glyphicon-asterisk"></span>Miscellaneous</button>
</body>
</html>

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 13


Bootstrap Alert
 Bootstrap provides 4 different types of alerts
 Alert related bootstrap classes:
 alert-success
 alert-warning
 alert-info
 alert-danger

Example :

<div class="alert alert-success">


<strong>Success!</strong>
</div>

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 14


Bootstrap Buttons
 Using Bootstrap we can enhance the views of normal HTML Butttons
 The following are some of the button styles available
 Button Styles
 .btn-default
 .btn-primary
 .btn-success
 .btn-info
 .btn-warning
 .btn-danger
 .btn-link
 Button Sizes
 .btn-lg
Example :
 .btn-md
 .btn-sm <button type="button" class="btn btn-default">Default</button>

 .btn-xs
Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 15
Quiz
1. Which of the following is used to add images to text,buttons etc?
a. icons
b. glyphicons
c. emoticons
d. None of the above

2. Which of the following bootstrap class should we use to display an image in a circular format?
a. img-rounded
b. img-circle
c. img-thumbnail
d. None of the above

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 16


Thank You

Sensitivity: Internal & Restricted © 2017 Wipro wipro.com confidential 17

You might also like