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"

Now you can make any subject more engaging and memorable