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.
Bootstrap
Web Development Framework
What is Bootstrap?
• A Web development framework
• Originally created by people at Twitter, branched off to its
own projec...
Bootstrap Features
• Dominant images and image carousels
• Grid system
• Features for responsive design
• Special design e...
Getting Started
• Download Bootstrap from getbootstrap.com
• Start with basic template, include links to
bootstrap css and...
Navigation
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<butto...
Jumbotron
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple market...
Grid
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce ...
Grid
Table Options
• Use special classes to control look of tables
Images
• Special classes for display of images
– img-rounded
– img-circle
– img-thumbnail
– img-responsive
Parallax Scrolling
<section id="intro" data-speed="6" data-type="background">
• Can use fixed backgrounds
• Use of differe...
Other Features
• Image carousel – use the code in the Carousel template to
include your own images. Key is creating images...
Final Tips
• You know everything you need to know to work
with Bootstrap
• Get comfortable with the grid system first
• It...
Upcoming SlideShare
Loading in …5
×

Bootstrap Web Development Framework

2,277 views

Published on

Bootstrap Web Development Framework - 2017

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Bootstrap Web Development Framework

  1. 1. Bootstrap Web Development Framework
  2. 2. What is Bootstrap? • A Web development framework • Originally created by people at Twitter, branched off to its own project • HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components • Now in version 3; version 4 in development
  3. 3. Bootstrap Features • Dominant images and image carousels • Grid system • Features for responsive design • Special design elements for navigation, tables, forms, buttons • Parallax scrolling – backgrounds and foregrounds move at different speeds, providing a 3D effect.
  4. 4. Getting Started • Download Bootstrap from getbootstrap.com • Start with basic template, include links to bootstrap css and js files and jquery.
  5. 5. Navigation <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data- target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> • Can be fixed at the top • Can include dropdowns
  6. 6. Jumbotron <div class="jumbotron"> <div class="container"> <h1>Hello, world!</h1> <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p> </div> </div>
  7. 7. Grid <div class="row"> <div class="col-md-4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> </div> <div class="col-md-4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> </div> <div class="col-md-4"> <h2>Heading</h2> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> </div> </div>
  8. 8. Grid
  9. 9. Table Options • Use special classes to control look of tables
  10. 10. Images • Special classes for display of images – img-rounded – img-circle – img-thumbnail – img-responsive
  11. 11. Parallax Scrolling <section id="intro" data-speed="6" data-type="background"> • Can use fixed backgrounds • Use of different data speeds for background sections. Various parallax scripts online. $(document).ready(function(){ // cache the window object $window = $(window); $('section[data-type="background"]').each(function(){ // declare the variable to affect the defined data-type var $scroll = $(this); $(window).scroll(function() { // HTML5 proves useful for helping with creating JS functions! // also, negative value because we're scrolling upwards var yPos = -($window.scrollTop() / $scroll.data('speed')); // background position var coords = '50% '+ yPos + 'px'; // move the background $scroll.css({ backgroundPosition: coords }); }); // end window scroll }); // end section function }); // close out script
  12. 12. Other Features • Image carousel – use the code in the Carousel template to include your own images. Key is creating images large enough to cover browser window and are the same size. Save images where they can be accessed by the html page. • Scroll to anchor (site is on one page) – use special JQuery
  13. 13. Final Tips • You know everything you need to know to work with Bootstrap • Get comfortable with the grid system first • It seems intimidating at first, but makes sense as you start to use it • Allows you to get up and running quickly; makes certain functions easier to implement • Look at code samples on the Bootstrap GitHub under docs, examples. https://github.com/twbs/bootstrap

×