Building Responsive UI with Bootstrap
Agenda
• Responsive Design
• Bootstrap (Overview & Need)
• Why Bootstrap ?
• Bootstrap features
• Demo
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
Responsive Design
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
Today we do view same content in different ways…..
PC
TabletLaptop
MobileYou name it…
Good example:
Example : http://www.awwwards.com/web-design-awards/rokivo
Bad example:Example : http://www.amazon.in/
What & Why Responsive Design ?
• Ability of the website to automatically respond to the user’s preferences.
• Website should respond to,– User’s behaviour
– Environment based on screen size
– Platform and orientation
• Avoid the need for a different design and development for each new gadget on the market.
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
A Sleek,
intuitive &powerful front-end framework
for faster & easier web development.
Bootstrap ?
Why should we use bootstrap ?
• Bootstrap development is FAST
• Easy to get started
• Responsiveness
• Great grid system
• Extensive list of components
• Consistency
• Customizable
• Documentation & Support
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
Getting Started – Up and Running
• Get required materials :
– http://getbootstrap.com/
– https://jquery.com/download/
• Create Index file:
– Index.htm @ root.
– Refer bootstrap – css, js, style.cs files.
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
Basic Bootstrap - Template
<!DOCTYPE html><html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-
scale=1"><link rel="stylesheet" type="text/css” href="../css/bootstrap.min.css"><link rel="stylesheet" href="../css/bootstrap-theme.min.css">
</head><body>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script><script src="../js/bootstrap.min.js"></script>
</body></html>
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
Basic components
Container:1. Element to wrap site contents
2. There are two container classes to choose from:
The .container class provides a responsive fixed width container
The .container-fluid class provides a full width container, spanning the entire width of the viewport
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)
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
Things that are common….
Contextual classes to emphasize items:*-default *-info*-primary *-warning*-success *-danger
Classes to emphasize Sizes:*-lg-* *-md-* *-sm-* *-xs-*
Text Transformation classes :*-lowercase *-capitalize*-uppercase *-muted
BS text formatting:<big> <ins><code> <del><small> <strong><mark> <em><blockquote> <cite>
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
Fluid Grids
12 column responsive layout.
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
<div class=“row”> <div class=“col-sm-6”> Test </div>
</div>
BS Grid System ThumbRules
“Never forget this”• 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
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
Responsive Grid System
• Most important feature provided by Bootstrap.
• Helps to dive a page dynamically and as differently we want.
• “Use 12 as you want but never cross it ” is the Mantra.
• Refer next slide for various grid options .
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
Responsive Grid System – Cont…
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
• For more info refer this : http://getbootstrap.com/examples/grid/
Responsive Collapsing - Navbar
• With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.
navbar-inverse, navbar-default
navbar-toggle , navbar-collapse
navbar-static-top, navbar-static-bottom
navbar-brand
navbar-right
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
<nav class="navbar navbar-default">.
Jumbotron
• A block that is present at the top of the page which describes information about the website.
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
<div class = "jumbotron">
Modals (Popup Boxes)
• Modal plugin is a dialog box/popup window that is displayed on top of the current page.
• To trigger the modal window, you need to use a button or a link, then include the two data-* attributes:
data-toggle="modal" opens the modal window
id="myModal" points to the id of the modal
• The .modal class identifies the content of <div> as a modal and brings focus to it.
• The .fade class adds a transition effect which fades the modal in and out. Remove this class if you do not want this effect.
• The .modal-dialog class sets the proper width and margin of the modal.
• The <div> with class="modal-content" styles the modal (border, background-color, etc.). Inside this <div>, add the modal's header, body, and footer.
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
Modals (Popup Boxes) – Cont…
• The .modal-header class is used to define the style for the header of the modal.
• The .modal-footer class is used to define the style for the footer of the modal. Note that this area is right aligned by default.
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
Panels
• Panel in bootstrap is a bordered box with some padding around its content.
• To colour the panel, use contextual classes like .panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, or. Panel-danger.
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
<div class = "page-header"><h3>Aspire Panel Sample</h3>
</div>
<div class = "panel panel-default">
<div class = "panel-body">
<div class="panel panel-default"><div class="panel-body">A Basic Panel</div>
</div>
Alerts
• Used to provide feedback messages for user actions with some predefined, flexible alert messages.
• Alerts are created with the .alert class, followed by one of the four contextual classes .alert-success, .alert-info, .alert-warning or .alert-danger:
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
<div class="alert alert-success" role="alert">...</div><div class="alert alert-info" role="alert">...</div><div class="alert alert-warning" role="alert">...</div> <div class="alert alert-danger" role="alert">...</div>
Breadcrumbs
• Used to indicate the current page's location within a navigational hierarchy..
• Breadcrumbs are created with the breadcrum class, using an unordered list.
• Current page can be defined using active class.
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
<ul class="breadcrumb"><li><a href="index9- Alerts.htm"> Home </a></li><li class="active">Panel Demo</li>
</ul>
Progress bars
• Used to provide up-to-date feedback on the progress of a workflow or action.
• Progress bars are created with the .progress class to a <div> element:.
• Bootstrap provides several types of progress bars like Progress Bar With Label, Colored Progress Bars, Striped Progress Bars, Animated Progress Bar, Stacked Progress Bars
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
With Label
Stacked
Animated
Striped
Plain
<div class="progress"><div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar“
aria-valuenow="40" aria-valuemin="0" ariavaluemax="100“ style="width:40%"></div>
</div>
Forms
• Form controls automatically receive some global styling with Bootstrap.
• Bootstrap provides three types of form layouts:
– Vertical form (this is default)
– Horizontal form
– Inline form
• Standard rules for all three form layouts:
– Always use <form role="form"> (helps improve accessibility for people using screen readers)
– Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing)
– Add class .form-control to all textual <input>, <textarea>, and <select> elements
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
<form> <div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">……..
……………………….
Forms (Cont.)
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
Form with validation states:
Basic form:
Pagination
• Used to provide pagination links for your site or app with the multi-page pagination component.
• A basic pagination in Bootstrap looks like this:
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
Pager Size Variations
<ul class="pagination"><li><a href="#">1</a></li><li><a href="#">2</a></li>
</ul>
<ul class="pager"> <li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li> <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
Wells
• A well is a container in <div> that causes the content to appear sunken or an inset effect on the page.
• To create a well, simply wrap the content that you would like to appear in the well with a <div> containing the class of .well
• Change the size of well using the optional classes such as, well-lg or well-lg.
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
<div class="well">Hi, am in well !!</div>
<div class="well well-lg">Hi, am in large well !!</div> <div class="well well-sm">Hi, am in small well !!</div>
Badges
• Badges are numerical indicators of how many items are associated with a link.
• Badges to provide important notification to the user such as number received or unread messages, number of friend requests etc
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
<ul class="nav nav-pills"><li><a href="#">Home</a></li><li><a href="#">Profile</a></li><li class="active"><a href="#">Messages <span class="badge">24</span></a></li><li><a href="#">Notification <span class="badge">5</span></a></li>
</ul>
Media Objects
• These are abstract object styles for building various types of components (like blog comments, Tweets, etc.) that feature a left-aligned or right-aligned image alongside the textual content.
• goal of media objects (light markup, easy extendibility) is achieved by applying classes to some of the simple markup.
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
<div class="media"><a class="pull-left" href="#"> <img class="media-object"
src="/bootstrap/images/64.jpg" alt="Media Object"> </a> <div class="media-body">
<h4 class="media-heading">Media heading</h4>
Accordion
• Accordion widgets and menus are widely used on the websites to manage the large amount of content and navigation lists.
Elements : • The data-toggle="collapse" is added to the controller element along with
• A attribute data-target (for buttons) or href (for anchors) to automatically assign the control of a collapsible element.
• You can optionally add the class "in" to the collapsible element in addition to the class "collapse" to make it open by default.
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
<div class="panel-group" id="accordion"><div class="panel panel-default">
<div class="panel-heading"><h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
</h4></div>
<div id="collapseOne" class="panel-collapse collapse in"></div>
Glyphicon
• Bootstrap includes more than 250 Glyphicons.
• These icons are available in font format for better usability and scalability.
• Since these Glyphicons are font based now you can create icons of any color just applying the CSS color property on the specific element.
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
<form>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span> Search</button>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-pencil"></span> Edit</button>
</form>
References: https://coders-guide.com/course.php?c=bootstrap-3
http://getbootstrap.com/
http://www.w3schools.com/bootstrap/default.asp
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/
https://jquery.com/download/