The document provides an extensive overview of Bootstrap, highlighting its features such as responsive design, a built-in grid system, and various components that enhance web development. It covers Bootstrap basics like typography, tables, buttons, and forms, along with integration into Visual Studio for streamlined development. The presentation emphasizes the importance of using Bootstrap to simplify design and improve functionality in web projects.

2. Bootstrap: The Full Overview
Gill Cleeren - @gillcleeren

3. Hi, I’m Gill!
Gill Cleeren
MVP and Regional Director
.NET Practice Manager @ Ordina
Trainer & speaker
@gillcleeren
gill@snowball.be

4. I’m a Pluralsight author!
• Courses on Windows 8, social and HTML5
• http://gicl.me/mypscourses

5. Agenda
Hello Bootstrap – the 30.000 feet overview
The Grid system
Bootstrap basics
Components
Bootstrap and Forms
Bootstrap and Visual Studio
A little bit of JavaScript

6. Hello Bootstrap
The 30.000 feet overview

7. A word about design
• Developers aren’t designers
• Often, we don’t have a designer in the project team
• This can be the result…

10. Looking at sites…
Header
Content
Footer

13. However…
• Writing CSS isn’t always easy
• Cross-browser can be a challenge
• Developers want to focus on the non-visual part
• Developers loved tables…

15. What is Bootstrap?
• Open source
• Composed of CSS
• And some JavaScript
• Most of the common needs are covered

16. Demo
GetBootstrap.com

17. What can Bootstrap do for you?
• Responsive design
• Built-in grid system
• Supported (and included) in Visual Studio
• Can be themed easily
• Create your own
• Download a pre-baked theme
• Components
• Buttons
• Pagination

18. Responsive Layout

19. Responsive Layout

20. Visual Studio – Class IntelliSense

21. Visual Studio – Missing Class Detection

22. Demo
Visual Studio & Bootstrap

23. Themes
• Many themes available
• Very easy to switch themes
• Build a couple of pages
• Apply a theme
• Easy to switch to another one
• Free and paid

26. Demo
Getting themes in Bootstrap

27. The Bootstrap Grid System

28. It all starts with a container…
• Bootstrap requires a containing element to contain site contents
• Grid system will be built from there
• Can be .container or .container-fluid
<div class="container">
...
</div>

29. The Bootstrap Grid system
• Bootstrap does its layout based on a Grid
• Grid always has 12 columns – always
• In fact, you can change it… But why would you?
• Bootstrap comes with 4 grids
• Each grid targets a different screen size
• Available grids
• Extra small (less than 768px)
• Small (768px-991px)
• Medium (991px-1200px)
• Large (1200px and higher)

30. Available grids in Bootstrap
Extra Small
Small
Large
Medium

31. Grid concepts
• Row & col
• Row
• Horizontal container (of 12 cols)
• Columns are named
• col-<grid size>-<content size>
• Example:
• col-lg-8: large, use 8 columns
• col-sm-4: small, use 4 columns
• Different classes can be combined
• Rows can be nested
<div class="row">
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-lg-4">
</div>
</div>
<div class="row">
<div class="col-xs-6">
</div>
</div>
<div class="row">
<div class="col-sm-6">
</div>
</div>

32. The Grid in action
col-xx-6 col-xx-6
col-xx-4 col-xx-4 col-xx-4
col-xx-3 col-xx-3 col-xx-6
col-xx-2 col-xx-2 col-xx-2 col-xx-2 col-xx-2 col-xx-2
col-xx-10 col-xx-2

33. Defining columns for 1 grid
<div class="row">
<div class="col-md-8">
<h2>Hello, I want 8 columns please!</h2>
</div>
<div class="col-md-4">
<h2>I'll take 4 if that's OK...</h2>
</div>
</div>

34. Combining grids
col-lg-6 col-lg-6
col-lg-4 col-md-4 col-sm-4 col-lg-4 col-md-4 col-sm-4 col-lg-4 col-md-4 col-sm-4
col-md-8 col-md-4

35. Combining grids
<div class="row">
<div class="col-md-8 col-xs-8">
<h2>Hello, I want 8 columns please!</h2>
</div>
<div class="col-md-4 col-xs-4">
<h2>I'll take 4 if that's OK...</h2>
</div>
</div>

36. Demo
The Grid system

37. Offsets in rows
• Offset
• Used to leave some cells blank
• Pull
• Allows to move an item to the left (pull to left)
• Push
• Allows to move an item to the right (push to right)

38. Grid offsets
col-lg-6 col-lg-6
col-xx-4 col-xx-offset-4
col-md-8 col-md-4

39. Grid offsets
<div class="row">
<div class="col-md-4 col-xs-8 col-md-offset-4">
<h2>Hello, I want 8 columns please!</h2>
</div>
<div class="col-md-4 col-xs-4">
<h2>
I'll take 4 if that's OK...
</h2>
</div>
</div>

40. Push and pull
<div class="row">
<div class="col-md-8 col-xs-8 col-md-push-4">
<h2>Hello, I'm on the left but want to go to the right!</h2>
</div>
<div class="col-md-4 col-xs-4 col-md-pull-8">
<h2>I'm on the right but would like to go to the left</h2>
</div>
</div>

41. Demo
Working with offsets, push & pull

42. Playing with visibility
• 2 options
• Hidden
• Visible by default
• Visible
• Hidden by default

43. Visible and hidden
<div class="row">
<div class="col-md-4 hidden-xs">
<h2>Hello, you can see me!</h2>
</div>
<div class="col-md-4 col-xs-4 col-md-offset-4">
<h2>I'll always be here...</h2>
</div>
</div>

44. Demo
Playing with visibility

45. Bootstrap basics

46. Bootstrap basics
• Support for
• Typography
• Code formatting
• Tables
• Images
• Buttons

47. Typography
• Bootstrap uses built-in font
• Can be customized
• Headings are supported via <h1>  <h6> (or .h1 classes)
<h1>h1. A heading</h1>
<h2>h2. A smaller heading</h2>

48. Typography
• Also supported
• Marked text
• Deleted text
• Strikethrough text
• Inserted text
• Underlined text
• Alignment of text
• text-left
• text-center
• text-right
Hi I’m <mark>Mark</mark>.
<del>I’m sadly deleted</del>
<s>Strike!!!</s>
<u>Look, there’s a line below me!</u>
<p class="text-left">Left text.</p>
<p class="text-center">Center text.</p>
<p class="text-right">Right text.</p>

49. Typography
• Casing
• text-lowercase
• text-capitalize
• Lists (ul and ol)
• And more…
<p class="text-lowercase">lower.</p>
<p class="text-uppercase">Upper.</p>
<p class="text-capitalize">Caps!!!!!.</p>

50. Demo
Typography

51. Tables
• Table support (data, not layout)
• Available through the .table class
• Typically used for calendars, data tables
• List of actors in a movie
• Multiple rows and columns
<table class="table">...</table>

52. Tables
<table class="table">
...
</table>

53. Alternative row colouring
<table class="table table-striped">
...
</table>

54. Other options on table
• Hover (table-hover)
• Bordered (table-bordered)
• Condensed (table-condensed)
• Contextual classes (success, danger…)
• Tables can be made responsive
• Horizontal scrollbar on xs
• Works through the .table-responsive
<div class="table-responsive">
<table class="table">
...
</table>
</div>

55. DEMO
Working with tables

56. Buttons
• Classes can be used on a, button and input
• Requires btn and type
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

57. Buttons
• More options exist
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-primary">Primary</button>

58. Buttons
• Can be sized as well
<button type="button" class="btn btn-default btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>

59. Demo
Buttons
DEMO

60. Responsive images
• Images can be made responsive using .img-responsive
• Applies max-width: 100%;, height: auto; and display: block; to the image
• Images can also be shaped
<img src="..." class="img-responsive" alt="Responsive image">
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

61. Demo
Images

62. Bootstrap components

63. Why would we use Bootstrap components?
• Looking good by default
• They are “themeable”
• Can be replacement for many server-controls

64. Available components
• Glyphicons
• Dropdowns
• Button groups
• Button dropdowns
• Input groups
• Navs
• Tabs
• Pills
• Navbar
• Breadcrumbs
• Pagination
• Labels
• Badges
• Jumbotron
• Page header
• Thumbnails
• Alerts
• Progress bars
• List group
• Panels
• And a couple more

65. Glyphicons
• Over 250 glyphs in font
format
• Resolution-independent
<span
class="glyphicon glyphicon-search" >
</span>

66. Glyphicons
<button type="button" class="btn btn-default" >
<span class="glyphicon glyphicon-align-right" ></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-bell"></span> Bell
</button>

67. Dropdowns
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
data-toggle="dropdown">
Select a value
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
...
</ul>
</div>

68. Button groups
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Option 1</button>
<button type="button" class="btn btn-default">Option 2</button>
<button type="button" class="btn btn-default">Option 3</button>
</div>

69. Nav
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>

70. Pagination <nav>
<ul class="pagination">
<li class="disabled">
<a href="#">
<span>&laquo;</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
...
<li>
<a href="#" >
<span>&raquo;</span>
</a>
</li>
</ul>
</nav>

71. Jumbotron

72. Jumbotron
<div class="jumbotron">
<h1>Welcome to Joe's Coffee Store</h1>
<p><a class="btn btn-primary btn-lg"
href="#" role="button">See all our coffees</a></p>
</div>

73. Panels
<div class="panel panel-default">
<div class="panel-heading">Your shopping basket</div>
<div class="panel-body">
Basket content goes here
</div>
</div>

74. DEMO: Bootstrap components

75. Bootstrap and Forms

76. Working with forms in Bootstrap
• HTML5 has added more functionality
• Many new inputs
• Placeholders
• Extra arguments
• Bootstrap can be used to enhance functionality
• Display forms vertically
• Main classes
• form-group
• form-control

77. Form example
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" ></div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" >
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">All files should be less than 1Mb.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Public image
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

78. Result: vertical form

79. Horizontal forms
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" >
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>

80. Result: horizontal form

81. Available controls in a form
• Regular input types
• Text area
• Checkboxes
• Radio buttons
• Selects
• Support for validation states
and icons

82. Demo
Bootstrap and forms

83. Bootstrap and Visual Studio

84. Bootstrap comes with every web project
• WebForms and MVC
• CSS
• Glyphicons
• JavaScript files
• Referenced from layout/master files

85. Demo
Templates in Visual Studio

86. VS <3 Bootstrap
• IntelliSense on classes
• Missing class detection: enabled via Web Essentials plugin
• Bootstrap Snippet pack: extension
• Bootstrap bundle (template pack): extension

87. Demo
Plugins and extensions in Visual Studio

88. A little bit of JavaScript

89. Bootstrap and JavaScript
• Bootstrap can be enhanced by custom jQuery plugins
• Individual JavaScript file per functionality
• All at once via bootstrap.js (or bootstrap.min.js)
• jQuery is required
• Most functionality is enabled by adding attributes and classes!!
• Available extensions
• Modal dialogs
• Alerts
• Dropdowns
• Tab

90. Modal dialogs
• Configure dialog using classes
• Structure:
• Container: modal
• Configure dialog: modal-dialog
• Content: modal-content
• Header: modal-header
• Content: modal-body
• Footer: modal-footer
• Configure launcher using classes
• data-toggle="modal"
• data-target="<id>"
• Configure closer
• data-dismiss="modal"

91. Alerts
• Subtle information
• Background task completed
• Operation on prior page completed
• Added with classes
• alert
• alert-type
• Success
• Info
• Warning
• Danger

92. Demo
Modal dialogs
Let’s write JavaScript!
Yes!
Are you out of your
mind?

93. Demo
Alerts

94. DEMO
Carousel

95. Summary
• Easy to learn
• Great results
• The way to responsive sites!

96. Thanks!

97. Q&A

98. Bootstrap: The Full Overview
Gill Cleeren - @gillcleeren

99. Your feedback is important!
Scan the QR Code and let us know via the TechDays App.
Laat ons weten wat u van de sessie vindt via de TechDays App!
Scan de QR Code.
Bent u al lid van de Microsoft Virtual Academy?! Op MVA kunt u altijd iets
nieuws leren over de laatste technologie van Microsoft. Meld u vandaag aan
op de MVA Stand. MVA biedt 7/24 gratis online training on-demand voor IT-
Professionals en Ontwikkelaars.