You're about to create your best presentation ever

Product Presentation Bootstrap Template

Create your presentation by reusing one of our great community templates.

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 presentation

Transcript: To make use of the Grid System you'd need a container element, with a class "container", and inside a second container with a class "row" <div class="container"> <div class="row"> <div class="col-xs-6">col-xs-6</div> <div class="col-xs-6">col-xs-6</div> </div> </div> For a fluid layout use class "container-fluid" Some people would argue that: Start with basic Bootstrap code, customize and add on your built as you go MOBILE FIRST APPROACH EXPLAINED... Pull/Push/Offset columns (eg ovoenergy.com) flip where columns are positioned http://www.helloerik.com/column-examples/example4.html http://WWW.ovoenergy.com Nest columns if you are viewing the site on your mobile, then you are only using what you need, no bloat. Thinking about your mobile experience and styles first, not starting with desktop and pairing down to mobile. Row structure Make the most of Bootstrap's component library Mixed Width Columns <div class="col-md-6 col-lg-4">I’m on the left</div> <div class="col-md-6 col-lg-8">I’m on the right</div> http://www.helloerik.com/column-examples/example2.html Uses "less" and it’s not compatible with "Sass" Most of the cons have to do with the design aspects of Bootstrap. The easy answer to all that is that Twitter Bootstrap is not meant to be a design solution. It’s a development solution. (At least for us) Messy markup Non-supported HTML attributes Uses of PX instead of EMs Make up your mind The grid.. explained Use Bootstrap only as a responsive grid (no more styles) Lets get it starteeeed customize Bootstrap package http://getbootstrap.com/customize/ MAKE SURE YOU SAVE THE CUSTOM URL include Bootstrap css and js files Take care of IE by doing the following: -Add boxsizing behavior:url(/css/boxsizing.htc); (required polyfil to make the "box model" work on ie7-) - Add respond.js (polyfill for min/max-width CSS3 Media Queries) - Add htmlshiv html5 polyfil Compiled source for Bootstrap Different uses of the Grid SOURCE CODE "front-end framework for developing responsive, mobile first projects on the web." TO USE OR NOT TO USE? There are four Grid Systems in Bootstrap v3, with the width of the viewport being the parameter that differentiates them. The widths that set the frontiers between one and another are as follows: Extra small devices ~ Phones (< 768px) Small devices ~ Tablets (>= 768px) Medium devices ~ Desktops (>= 992px) Large devices ~ Desktops (>= 1200px) There 4 different grid classes you can use to address each of the different supported viewports: col-xs-* Extra small devices col-sm-* Small devices col-md-* Medium devices col-lg-* Large devices *number of columns In Bootstrap the grid is controlled by the viewport size via the media queries and that as the browser width gets wider, the different column class will overwrite the previous. When a responsive solution is required speeds up development customizable responsive + mobile first approach unifies naming conventions among teams allows for rapid prototyping contains a grid system contains an extensive list of components includes javascript functionality workarounds offered to make it compatible to IE7+ it is well documented and supported How to choose between frameworks Minimum requirements: Precompiled source Features +mobile/responsive support Number and quality of components Majority How old is the framework Cleanliness and clear concept Spread/Activity How well known and supported the framework is Customizability Underlying CSS precompiler Framework internal configuration parameters Mixin <div class="left-and-right"> <div class="left">I'm on the left</div> <div class="right">I'm on the right</div> </div> .left-and-right { .make-row(); .left { .make-md-column(6); } .right { .make-md-column(6); } } you don’t have to include any markup in the HTML. http://www.helloerik.com/column-examples/example3.html Install Bootstrap <div class="row"> <div class="col-md-9"> Level 1: .col-md-9 <div class="row"> <div class="col-md-6"> Level 2: .col-md-6 </div> <div class="col-md-6"> Level 2: .col-md-6 </div> </div> </div> </div> When IE6 support is not required bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff On tight timescales - Bootstrap can save you time bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/ When design follows a grid strictly Markup structure All of the default styles are designed for mobile As your device or browser width increases, additional styles are being loaded via media queries. http://getbootstrap.com/css/#grid-nesting Basic Single Columns <div class="col-md-6">I'm on the left</div> <div class="col-md-6">I'm on the right</div> http://www.helloerik.com/column-examples/example1.html When is it worth using

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

Now you can make any subject more engaging and memorable