bootstrap - imran

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


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/

http://www.awwwards.com/web-design-awards/rokivo

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.


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


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.


http://getbootstrap.com/

https://jquery.com/download/

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>


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)


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>


Fluid Grids

12 column responsive layout.


<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


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 .


Responsive Grid System – Cont…


• For more info refer this : http://getbootstrap.com/examples/grid/

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


<nav class="navbar navbar-default">.

Jumbotron

• A block that is present at the top of the page which describes information about the website.


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


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.


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.


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


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


<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


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


<form> <div class="form-group">

<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">……..

……………………….

Forms (Cont.)


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:


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.


<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


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


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


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


<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://www.w3schools.com/bootstrap/default.asp

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/


https://coders-guide.com/course.php?c=bootstrap-3


http://www.w3schools.com/bootstrap/default.asp

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/


bootstrap - imran

Documents