Building beautiful websites with Bootstrap: A case study. by Michael Kennedy michaelckennedy.net

Size: px

Start display at page:

Download "Building beautiful websites with Bootstrap: A case study. by Michael Kennedy michaelckennedy.net"

Rhoda Lambert
6 years ago
Views:

1 Building beautiful websites with Bootstrap: A case study by Michael Kennedy michaelckennedy.net

2 Objectives Learn what Bootstrap has to offer web developers Install and use Bootstrap Learn the major components / features of Bootstrap See a real-world application of these features to a website redesign

3 What is Bootstrap? Why do you need it? Bootstrap is a web front-end framework With bootstrap you start from a beautiful site and add to it Bootstrap is the designer we never had (and who is never late) Bootstrap solves cross browser compat via a reset css Bootstrap is comprised of o CSS (available via LESS) o JavaScript o Fonts (which stand in for images) Open-source on Github Created by two guys who work at Twitter.

4 Invest a little and (really) learn CSS

5 How do you get Bootstrap?

6 A brief tour of Bootstrap CSS: Components: JavaScript: Grid system Typography Code Tables Forms Buttons Images Helper classes Responsive utilities Glyphicons Dropdowns Button groups Button dropdowns Input groups Navs Navbar Breadcrumbs Pagination Labels Badges Jumbotron Page header Thumbnails Alerts Progress bars Media object List group Panels Wells Transitions Modal Dropdown Scrollspy Tab Tooltip Popover Alert Button Collapse Carousel Affix

7 How did we use Bootstrap at develop.com?

8 A brief tour of Bootstrap: What we're covering CSS: Components: JavaScript: Grid system Typography Code Tables Forms Buttons Images Helper classes Responsive utilities Glyphicons Dropdowns Button groups Button dropdowns Input groups Navs Navbar Breadcrumbs Pagination Labels Badges Jumbotron Page header Thumbnails Alerts Progress bars Media object List group Panels Wells Transitions Modal Dropdown Scrollspy Tab Tooltip Popover Alert Button Collapse Carousel Affix

9 Labels <a class="label label- warning" href="/course/ios">ios</a>

10 Buttons <button class="btn btn- danger">subscribe</button> <a class="btn btn- success" href="...">request onsite</a>

11 Images <img class="img- circle" src="/technicalstaff/image/pierre_nallet.jpg">

12 Jumbotrons (AKA hero units)

13 Jumbotrons (AKA hero units) <section class="jumbotron"> <div class="container"> <h2 class="mission- statement"> We develop people<br> who develop software </h2> <div class="visible- sm visible- xs"></div> <img class="jumbotron- image" src="/images/macbook- pro- vs.jpg"> </div> </section>

14 Blockquotes <blockquote> <p>brock Allen was a brilliant instructor...</p> <small>kexin Sun, <cite>carefusion Corporation</cite></small> </blockquote>

15 Forms <form action="/store/register/..." method="post"> <strong>credit Card Details</strong> <div class="form- group"> <div> <label class="form- label" for="creditcardnumber">card Number</label> <input class="form- control" data- val="true" type="text"></div> </div> </div> </form>

16 Tables <table class="table table- striped course- list"> <! > </table>

17 Wells <div class="well"> <h2>full course curriculum at DevelopMentor</h2> <div>...</div> </div>

18 Dialogs

19 Dialogs <div id="upcoming- classes- dialog" class="modal fade" tabindex="- 1" role="dialog"> <div class="modal- dialog"> <div class="modal- content"> <div class="modal- header"> <button type="button" class="close" data- dismiss="modal"> </button> <h4 class="modal- title">...</h4> </div> <div class="modal- body">... </div> <div class="modal- footer"> <button type="button" class="btn btn- success" data- dismiss="modal">close</button> </div> </div><!- - /.modal- content - - > </div><!- - /.modal- dialog </div>

20 Dialogs <a class='btn...' data- toggle='modal' href='#upcoming- classes- dialog'>upcoming classes</a> <div id="upcoming- classes- dialog" class="modal fade" tabindex="- 1" role="dialog">... </div>

21 Navigation <header> <nav class="navbar navbar- inverse navbar- default">... </nav> </header>

22 Navigation <nav class="main navbar navbar- inverse navbar- default"> <div> <a class="navbar- brand" href="/">developmentor...</a> </div> <ul class="nav navbar- nav"> <li><a href="...">classroom</a></li> <li><a href="...">online</a></li> <li><a href="...">courses</a></li>... <li> class="dropdown">... </li> </ul> </nav>

23 Navigation <nav class="main navbar navbar- inverse navbar- default">... <ul class="nav navbar- nav">... <li class="dropdown"> <a class="dropdown- toggle" data- toggle="dropdown" href="#"> More <span class="glyphicon glyphicon- circle- arrow- down"></span> </a> <ul class="dropdown- menu" role="menu"> <li><a href="...">training curriculum</a></li> <li><a href="...">public course schedule</a></li>... </ul> </li> </ul> </nav>

24 Responsive utilities

25 Responsive utilities Using the responsive classes allow us to keep the key navigation on the screen on smaller devices without creating an overly crowded navigation: wide medium small phone

26 Responsive utilities Using the responsive classes allow us to keep the key navigation on the screen on smaller devices without creating an overly crowded navigation: <li class="hidden- sm"><a href="...">classroom</a></li> <li class="hidden- sm"><a href="...">online</a></li> <li><a href="...">courses</a></li> <li class="hidden- sm hidden- md"><a href="...">search</a></li> <img class="img img- responsive".../>

27 Responsive Grids

28 Font Icons

29 Themes

30 Bower Bower is a great way to install and manage bootstrap Install node.js npm install -g bower bower install bootstrap (may require git)

31 Product / App Images Placeit.net is a sweet way to feature your product

32 Regrets I wish I would have: 1. Used LESS for our CSS and built on Bootstrap's LESS foundation. 2. Learned and used the responsive utilities earlier.

33 Summary: Bootstrap, a case study Bootstrap is that designer you always which you had (or were) Installing Bootstrap is easy (getbootstrap.com or NuGet) Bootstrap offers a wide range of features from CSS layouts, to styles, to behaviors driven via data-* attributes. We saw a real-world application of these features to a website redesign

Overview

HTML4 & HTML5 Overview Basic Tags Elements Attributes Formatting Phrase Tags Meta Tags Comments Examples / Demos : Text Examples Headings Examples Links Examples Images Examples Lists Examples Tables Examples