bootstrap: the full overview
TRANSCRIPT
Bootstrap: The Full OverviewGill Cleeren - @gillcleeren
Hi, I’m Gill!
Gill CleerenMVP and Regional Director.NET Practice Manager @ OrdinaTrainer & speaker
@gillcleeren
I’m a Pluralsight author!
• Courses on Windows 8, social and HTML5• http://gicl.me/mypscourses
AgendaHello Bootstrap – the 30.000 feet overview
The Grid system
Bootstrap basics
Components
Bootstrap and Forms
Bootstrap and Visual Studio
A little bit of JavaScript
Hello BootstrapThe 30.000 feet overview
A word about design
• Developers aren’t designers• Often, we don’t have a designer in the project team
• This can be the result…
Looking at sites…
Header
Content
Footer
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…
What is Bootstrap?
• Open source• Composed of CSS• And some JavaScript
• Most of the common needs are covered
DemoGetBootstrap.com
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
Responsive Layout
Responsive Layout
Visual Studio – Class IntelliSense
Visual Studio – Missing Class Detection
DemoVisual Studio & Bootstrap
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
DemoGetting themes in Bootstrap
The Bootstrap Grid System
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>
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)
Available grids in Bootstrap
Extra Small
Small
Large
Medium
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>
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
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>
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
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>
DemoThe Grid system
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)
Grid offsets
col-lg-6 col-lg-6
col-xx-4 col-xx-offset-4
col-md-8 col-md-4
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>
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>
DemoWorking with offsets, push & pull
Playing with visibility
• 2 options• Hidden
• Visible by default• Visible
• Hidden by default
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>
DemoPlaying with visibility
Bootstrap basics
Bootstrap basics
• Support for • Typography• Code formatting• Tables• Images• Buttons
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>
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>
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>
DemoTypography
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>
Tables
<table class="table"> ...</table>
Alternative row colouring
<table class="table table-striped"> ...</table>
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>
DEMOWorking with tables
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">
Buttons
• More options exist
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-primary">Primary</button>
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>
Demo
ButtonsDEMO
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">
DemoImages
Bootstrap components
Why would we use Bootstrap components?• Looking good by default• They are “themeable”• Can be replacement for many server-controls
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
Glyphicons
• Over 250 glyphs in font format• Resolution-independent
<span class="glyphicon glyphicon-search" ></span>
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>
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>
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>
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>
Pagination <nav> <ul class="pagination"> <li class="disabled"> <a href="#"> <span>«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> ... <li> <a href="#" > <span>»</span> </a> </li> </ul></nav>
Jumbotron
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>
Panels
<div class="panel panel-default"> <div class="panel-heading">Your shopping basket</div> <div class="panel-body"> Basket content goes here </div></div>
DEMO: Bootstrap components
Bootstrap and Forms
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
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>
Result: vertical form
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>
Result: horizontal form
Available controls in a form
• Regular input types• Text area• Checkboxes• Radio buttons• Selects
• Support for validation statesand icons
DemoBootstrap and forms
Bootstrap and Visual Studio
Bootstrap comes with every web project• WebForms and MVC• CSS• Glyphicons• JavaScript files• Referenced from layout/master files
DemoTemplates in Visual Studio
VS <3 Bootstrap
• IntelliSense on classes• Missing class detection: enabled via Web Essentials plugin• Bootstrap Snippet pack: extension• Bootstrap bundle (template pack): extension
DemoPlugins and extensions in Visual Studio
A little bit of JavaScript
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
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"
Alerts
• Subtle information• Background task completed• Operation on prior page completed
• Added with classes• alert• alert-type
• Success• Info• Warning• Danger
DemoModal dialogs
Let’s write JavaScript!
Yes!
Are you out of your mind?
DemoAlerts
DEMOCarousel
Summary
• Easy to learn• Great results• The way to responsive sites!
Thanks!
Q&A
Bootstrap: The Full OverviewGill Cleeren - @gillcleeren
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.