You're about to create your best presentation ever

Bootstrap Powerpoint Template

Create your presentation by reusing a template from our community or transition your PowerPoint deck into a visually compelling Prezi presentation.

Bootstrap

Transcript: Encourage developer involvement Multiple devices Who is using Bootstrap? 6 Reasons to use Bootstrap Versatile <script src="js/bootstrap.min.js"></script> 5. Customizable Removed older browser support Link Bootstrap’s CSS content into HTML file: Less Stylesheet: Integrated Toolkit and components Continuous updates and community supports Free and open sourced Available on GitHub How to use Bootstrap? (CSS) Popular <link rel="stylesheet" href="css/bootstrap.min.css"> Dynamic grid system Group 16 Powerful: Variable, functions, operators and mixins (nested selectors) 1.0 in 2010 2.0 in 2012: Responsive web design 3.0 in 2013: Mobile first design 4.0 alpha in 2015: Sass & Flexbox Originally created by Mark Otto(@mdo) and Jacob Thornton(@fat) at Twitter in mid-2010. Grid system: default 1170 pixel grid or vairable width grid. Use 12 columns. Same content regardless of browser <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> How to use Bootstrap (JavaScript): Sources Bootstrap 4.0 Alpha Flexible Bootstrap packages 3. Responsiveness 6. Support New JS plugins What is ? 1. Agile Stylesheet Speeds up web development process <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 2. Compatibility Jacob Thornton Licensing Sass Modular New grid system Mark Otto Removal of panels, thumbnails, and wells Questions? Support variety of browsers and screen sizes What are Mixins? Bootstrap Mixins are predefined commands which can speed up production speed. License & copyright notices Demo http://getbootstrap.com https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework) https://bootstrapbay.com/blog/reasons-to-use-bootstrap/ https://www.ostraining.com/blog/coding/bootstrap/ https://bootstrapbay.com/blog/built-with-bootstrap/ https://www.quora.com/What-are-some-famous-websites-using-Twitter-Bootstrap Renamed elements Update frequently Front end only Link Bootstrap's JS content into HTML file: 2nd popular on GitHub. 10,200 stars & 46,000 forks 4. Consistency Personal & Commerical http://www.sfu.ca/~kcngo/cmpt470/demo_website/demo.html Front-end web development framework Structure of Bootstrap Grid system Free to use Must included in bootstrap’s css and js files Contribution program @mixin make-row() Generate a row in a grid It can be used to specify a portion of the page with an appropriate tag.

Bootstrap

Transcript: <ul class="dropdown-menu"> https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/ class="form-group" With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins. large : .col-lg- 3/ Components <input class="form-control" /> 2/ Grid Layout System desktop : .col-md- Bootstrap Media Query <input class="checkbox" /> Bootstrap UI Kit Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version. class="btn-group btn-group-sm" Bootstrap Layout Tool More complex 1/ About Bootstrap Button 3/ Components <a data-toggle="dropdown" href=""> <button class="btn btn-default" /> BOOTSTRAP Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. <label></label> https://bootstrapbay.com/blog/bootstrap-ui-kit/ class="table" http://v4-alpha.getbootstrap.com/getting-started/options/ http://getbootstrap.com/customize/ class="table table-bordered <button class="btn btn-error" /> Full of features Dropdown Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source. <li></li> Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. http://getbootstrap.com/components/ 4/ Responsive 4/ Responsive <li></li> <tbody></tbody> All Bootstrap Component class="btn btn-toolbar" <li></li> tablet : .col-sm- <nav class="navbar navbar-inverse"> https://v4-alpha.getbootstrap.com/layout/overview/ <div class="navbar-header"> <thead></thead> class="btn-group-vertical" <li></li> <ul class="nav navbar-nav navbar-right"> 2/ Grid Layout System 5/ Customize Bootstrap https://v4-alpha.getbootstrap.com/layout/grid/ http://www.layoutit.com/build What is a Media Query? Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true. <div class="btn-group"> <input class="form-control" /> One framework, every device. Table https://www.w3schools.com/css/css_rwd_mediaqueries.asp 1/ About Bootstrap Form mobile : .col-xs- class="table table-striped" http://getbootstrap.com/css/#grid-example-fluid https://www.w3schools.com/bootstrap/default.asp These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes. Preprocessors https://app.moqups.com/ <button class="btn btn-success"></button> 5/ Customize Bootstrap <div class="divider"> <li class="dropdown"> <div class="navbar-collapse collapse"> Simple Responsive breakpoints class="table table-striped table-bordered" class="btn-group btn-group-lg"

BootStrap

Transcript: CONSISTENCY Contextual colors Hover rows UI DEVELOPER in Kaba Project Others <!DOCTYPE html> <html lang="YourLanguage"> ... </html> Condensed table What is Bootstrap Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control. Basic example Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element. Xavier Navarro Note the .nav-tabs class requires the .nav base class. Add .table-condensed to make tables more compact by cutting cell padding in half. Striped Rows Use .table-striped to add zebra-striping to any table row within the <tbody>. Nabs Add .table-hover to enable a hover state on table rows within a <tbody>. xavier.navarro@erni-espana-es What is included ? Basic Template Standard css by default: Set background-color: #fff; on the body Use the @font-family-base, @font-size-base, and @line-height-base attributes as our typographic base Set the global link color via @link-color and apply link underlines only on :hover Open-source Javascript Framework Developed By Twitter Combination: HTML CSS JAVASCRIPT Images HTML 5 !Doctype Bootstrap requires a containing element to wrap site contents and house our grid system Includes 200 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. Cascade Style Sheets Grid System Add .form-inline to your <form> for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide. <img src="..." class="img-responsive" alt="Responsive image"> Introducing Bootstrap Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. Inline Form Add classes to an <img> element to easily style images in any project. Made for everyone. Add .table-bordered for borders on all sides of the table and cells. By nerds, for nerds. Basic Form Use .container-fluid for a full width container, spanning the entire width of your viewport. For basic table styling add the base class .table to any <table>. Responsive images CUSTOMIZABLE Pagination <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> Basic example Forms Use .container for a responsive fixed width container. <div class="container"> ... </div> Tabs SAVE TIME Options Conclusion Buttons Sizes Components Standard Typography and Links Packed with features. Stacked Bootstrap offers you a simple HTML Template to start to use the framework. BootStrap QUESTIONS Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) Use rows to create horizontal groups of columns. Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4. If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well. Tables Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles. Button toolbar Containers Checkboxes and radio addons Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects. Helper classes A 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own. Glyphicons Inputs Groups RESPONSIVENESS Bordered table Wrap the dropdown's trigger and the dropdown menu

BootStrap

Transcript: Usage For this purpose an external extension is going to be added. This extension named as CJS. It Injects custom java scripts to the web page. A Java script is written to check the controls. This will test the HTML structure of the controls. Verify that correct classes are used Same control is used multiple times in a page. The tester has to test the same control for multiple times. It increases the cost and effort of the CR. A tool, that can test the end of most common and uniform controls automatically That will helpful in regard to less the effort and cost of testing. Limitations Any Suggestions? Purpose: Solution Presenter: Saad Khurram, Maria Rafique, Hassan Ahmed Remaining controls will be automated. Better technique of code injection Better technique for hard coded class names. Elements having classes, mb0-N, pb0-N, pt0-N, pr0-N, p10-N, w0-N, are not being catered in the JS file. If there are extra spaces before class names they will shown as a bug. Place holders in span tag in multi-select controls are exempted.  Configure CJS extension from “dcsystems” in your system. After configuration, extension icon can be seen in the toolbar of chrome  Login to CureMD application.  Enable CJS for this host checkbox.  Clicking on the icon of CJS, a window will be shown where, in dropdown you can inject your own external scripts or predefined one. Select jQuery 1.11.0 from options.  You will receive a zip file of CJS code to test the application, Unzip the file and paste code in ‘write your code here’ area. BootStrap Automation Thank You!! CureMD application is converting into BootStrap. New features and controls are going to be added. Updating testing strategy is a requirement. Tester needs to verify all HTML structures of the classes. NEED Future Goals: add logo here

powerpoint template

Transcript: Nobody knows babies like we do! Quality products . Good Customer service. Every Kid really loves this store.. BABYLOU ABOUT US About Us BabyLou was established in 2004. It has been more than a decade since we started, where we have ensured to take care of every need and want of every child and infant under one roof, true to the caption “NO BODY KNOWS BABIES LIKE WE DO”. Our benchmark is to provide 100% customer service and satisfaction and continue to deliver the same with a wide range of toys, garments and Baby Products. Play and Create We Are Best 01 02 03 Block games Building Blocks help Kids to use their brain. PLAY TO LEARN in Crusing Adventures Our Discoveries Enjoy a sunny vacation aboard a luxury yacht with the LEGO® Creator 3in1 31083 Cruising Adventures set. This ship has all the comforts you need, including a well-equipped cabin and a toilet. Sail away to a sunny bay and take the cool water scooter to the beach. Build a sandcastle, enjoy a picnic, go surfing or check out the cute sea creatures before you head back to the yacht for a spot of fishing. Escape into the mountains Disney Little Princes in Also available for your Babies..... Also... Out of The World… Our reponsibility BABYLOU…. Our Responsibility All children have the right to fun, creative and engaging play experiences. Play is essential because when children play, they learn. As a provider of play experiences, we must ensure that our behaviour and actions are responsible towards all children and towards our stakeholders, society and the environment. We are committed to continue earning the trust our stakeholders place in us, and we are always inspired by children to be the best we can be. Innovate for children We aim to inspire children through our unique playful learning experiences and to play an active role in making a global difference on product safety while being dedicated promoters of responsibility towards children.

BOOTSTRAP>>

Transcript: • A modal is a child window that is layered over its parent window. Display content from a separate source without leaving the parent window Include bootstrap.js or bootstrap.min.js. <div id="myCarousel" class="carousel slide"> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item">…</div> <div class="item">…</div> <div class="item">…</div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div> <h2>Example of creating Modals with Twitter Bootstrap</h2> <!-- Button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> ALERTS Azure M-pages Content - Determine what is most important. Layout -Design to smaller widths first. Base CSS address mobile device first;media queries address for tablet,desktops. Progressive Enhancement - Add elements as screen size increases. Layout Popovers What is bootstrap ? To manage large content and navigation lists • Also add optional .alert-dismissable to the above <div> class. <div class="panel panel-default"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> </a> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> .... </div> </div> </div> Provides a clean and uniform solution to everyday interface tasks. Flexible enough to work for many unique design For all Skills - Designer/ Developer Open Source SCROLLSPY Media Queries User friendly Addresses all major device -resolutions Chrome @media screen and (min-width: 768px) and (max-width: 1024px){} Syntax Media Queries Use the .alert-link utility class CAROUSELS Open source framework for developing responsive mobile first projects on web. MODALS Include bootstrap.js or the minified bootstrap.min.js. RWD Syntax A.K.A SLIDE SHOW Allows images, iframes, videos, or just about any type of content that you might want. • They provide contextual feedback messages for typical user actions. Basic Grid Structure Modal Layout Responsive CSS BOOTSTRAP>> Java Script Plug ins So whats the Solution ? Deepthi C BOOTSTRAP >> <div class="alert alert-success"> <a href="#" class="alert-link">Success! </a> </div> <div class="alert alert-info"> <a href="#" class="alert-link">Info! take this info.</a> </div> <!-- Modal --> <div class="modal fade" > <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button> <h4>This Modal title </h4> </div> <div class="modal-body"> Add some text here </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close </button> <button type="button" class="btn btn-primary"> Submit changes </button> </div> </div><!-- /.modal --> Mobile first Making an App ? Mobile First Bundled Javascript plugins Get Started IOS POPOVERS Grid Layout Re sizable Images Carousel <div class="alert alert-success">Success! Well done its submitted.</div> <div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row">...</div> </div> <div class="container">.... • Media Queries in Bootstrap allow you to move, show and hide content based on viewport size. • Media query is a really fancy term for "conditional CSS rule • No java script involved. ACCORDION Windows Included Elements of RWD Accordion <a href="#" data-toggle="popover" title="Example popover"> .... </a> • Via JavaScript: Enable popovers via JavaScript using the following syntax: $('#identifier').popover(options) Fluid grid Fluid Grid You can add an basic alert by creating a wrapper <div> and adding a class of .alert and one of the four contextual classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger). Links in Alerts Develop once Deploy anywhere • Alerts provide a way to style messages to the user. Modals Worlds Best Bootstrap Sites TYPEAHEAD Firefox Opera Working With Alerts Finally!!! How?? BOOTSTRAP Scales up to 12 columns. Predefined Classes for Semantic Layouts Modal Structure Andriod Dismissal Alerts Alerts Fluid Grid Syntax Carousel Layout Healthcare.Gov Prezi Airbnb NewsWeek

Now you can make any subject more engaging and memorable