Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Building Responsive UI
with Bootstrap
Agenda
• Responsive Design
• Bootstrap (Overview & Need)
• Why Bootstrap ?
• Bootstrap features
• Demo
US | UK | BENELUX |...
Responsive Design
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
Today we do
view same
content in
different
w...
What & Why Responsive Design ?
• Ability of the website to automatically respond to the user’s preferences.
• Website shou...
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
•...
Getting Started – Up and Running
• Get required materials :
– http://getbootstrap.com/
– https://jquery.com/download/
• Cr...
Basic Bootstrap - Template
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devic...
Basic components
Container:
1. Element to wrap site contents
2. There are two container classes to choose from:
 The .con...
Things that are common….
Contextual classes to emphasize items:
*-default *-info
*-primary *-warning
*-success *-danger
Cl...
Fluid Grids
 12 column responsive layout.
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
<div class=“row”>
<...
BS Grid System ThumbRules
“Never forget this”
• Rows must be placed within a .container (fixed-width) or .container-fluid ...
Responsive Grid System
• Most important feature provided by Bootstrap.
• Helps to dive a page dynamically and as different...
Responsive Grid System – Cont…
US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
• For more info refer this : ht...
Responsive Collapsing - Navbar
• With Bootstrap, a navigation bar can extend or collapse,
depending on the screen size.
 ...
Jumbotron
• A block that is present at the top of the page which describes
information about the website.
US | UK | BENELU...
Modals (Popup Boxes)
• Modal plugin is a dialog box/popup window that is displayed on top of the current page.
• To trigge...
Modals (Popup Boxes) – Cont…
• The .modal-header class is used to define the style for the header of the modal.
• The .mod...
Panels
• Panel in bootstrap is a bordered box with some padding around its content.
• To colour the panel, use contextual ...
Alerts
• Used to provide feedback messages for user actions with some predefined, flexible alert
messages.
• Alerts are cr...
Breadcrumbs
• Used to indicate the current page's location within a navigational hierarchy..
• Breadcrumbs are created wit...
Progress bars
• Used to provide up-to-date feedback on the progress of a workflow or action.
• Progress bars are created w...
Forms
• Form controls automatically receive some global styling with Bootstrap.
• Bootstrap provides three types of form l...
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 pag...
Wells
• A well is a container in <div> that causes the content to appear sunken or an inset effect on the
page.
• To creat...
Badges
• Badges are numerical indicators of how many items are associated with a link.
• Badges to provide important notif...
Media Objects
• These are abstract object styles for building various types of components (like blog comments,
Tweets, etc...
Accordion
• Accordion widgets and menus are widely used on the websites to manage the large amount of
content and navigati...
Glyphicon
• Bootstrap includes more than 250 Glyphicons.
• These icons are available in font format for better usability a...
References:
https://coders-guide.com/course.php?c=bootstrap-3
http://getbootstrap.com/
http://www.w3schools.com/bootstrap/...
Bootstrap - Imran
Bootstrap - Imran
Upcoming SlideShare
Loading in …5
×

Bootstrap - Imran

511 views

Published on

  • Be the first to comment

Bootstrap - Imran

  1. 1. Building Responsive UI with Bootstrap
  2. 2. Agenda • Responsive Design • Bootstrap (Overview & Need) • Why Bootstrap ? • Bootstrap features • Demo US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc.
  3. 3. Responsive Design US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc. Today we do view same content in different ways….. PC Tablet Laptop Mobile You name it… Good example: Example : http://www.awwwards.com/web-design-awards/rokivo Bad example: Example : http://www.amazon.in/
  4. 4. 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.
  5. 5. A Sleek, intuitive & powerful front-end framework for faster & easier web development. Bootstrap ?
  6. 6. 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.
  7. 7. 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.
  8. 8. 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.
  9. 9. 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.
  10. 10. 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.
  11. 11. 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>
  12. 12. 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.
  13. 13. 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.
  14. 14. Responsive Grid System – Cont… US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc. • For more info refer this : http://getbootstrap.com/examples/grid/
  15. 15. 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">.
  16. 16. 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">
  17. 17. 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.
  18. 18. 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.
  19. 19. 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>
  20. 20. 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>
  21. 21. 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>
  22. 22. 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>
  23. 23. 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"> …….. ……………………….
  24. 24. Forms (Cont.) US | UK | BENELUX | ME | IND©1996-2015 Aspire Systems, Inc. Form with validation states: Basic form:
  25. 25. 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">&larr;</span> Older</a></li> <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li> </ul>
  26. 26. 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>
  27. 27. 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>
  28. 28. 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>
  29. 29. 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>
  30. 30. 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>
  31. 31. 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/

×