the Bootstrap
advertisement
Explain responsive
Explain frameworks
jQuery
AngularJS
BootStrap
Zorg
getBootstrap.com site
1% of web
o Nicholas Gallagher
o Jonathan Neal
2011
o Fluid grids
o Responsive
o typography
o Cross browser
o Js iteration
o Css preprocessors
o Css reset
o Css themes
Get started
o CDN
Css
Components
Javascript
Customize!
Start webmatrix
New from asp.net template
Extensions
NuGet extension
Add bootstrap
Inspect folders
o App_data\packages
o content
o fonts
o scripts
Default.cshtml
Show viewers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>philly.NET</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link src="content/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div>
<header>
<ul>
<li>
<a href="#">Meetings</a>
</li>
<li>
<a href="#">Labs</a>
</li>
<li>
<a href="#">Camps</a>
</li>
</ul>
<h3>philly.NET</h3>
</header>
<div>
<h1>Code Camp 2014 – Refactored!</h1>
<p>20th Code Camp over 8 years expanding to two days for more learning</p>
</div>
<div>
<p>&copy; 2014 phillydotnet.org., Inc.</p>
</div>
</div>
</body>
</html>
Shows default fonts, css reset, max-width
<body>
<div class="container">
<header>
<ul>
Style header for line, spacing
<body>
<div class="container">
<header class="page-header">
<ul>
Style nav for bar with hover
<body>
<div class="container">
<header class="page-header">
<ul class="nav">
Nav-tabs for horizontal, corners
<ul class="nav nav-tabs">
Nav-pills
<ul class="nav nav-pills">
Pull-right is a helper class
<ul class="nav nav-pills pull-right">
Active to set current item
<li class="active">
Jumbotron showcases important content
</header>
<div class="jumbotron">
<h1>Code Camp 2014 – Refactored!</h1>
Lead adds more spacing so it stands out, changes size in viewports, increases margin
<p class="lead">20th Code Camp
Btn styles a button
<p>
<a class="btn" href="#">Agenda</a>
</p>
Btn-success adds color and shape, matches nav
<a class="btn btn-success" href="#">Agenda</a>
Btn-lg sets size
<a class="btn btn-success btn-lg" href="#">Agenda</a>
Btn-default has white background
<a class="btn btn-default btn-lg" href="#">Session Grid</a>
Btn-group joins them together
<p class="btn-group">
Bootstrap media queries
o Phones
o Tablets
o Desktop
o Large desktop
Start using comments
<!--End Carousel-->
<!--Grid-->
<!--End Grid-->
Grid System
Add content to show grid system
<div>
<div>
<h2>Sharing Code and UI between iOS and Android</h2>
<p>You want to develop on Android and iOS, but rather not have to recreate
your app or UI for each platform. This session shows you how to reuse up to 100% of your code and
user interface to create native iOS and Android apps using Appmethod and C++. This isn’t your
daddy’s C++ either; it has ARC, enhanced RTTI, visual designer, components and no pointer
arithmetic (unless you are really into that).</p>
</div>
<div>
<h2>Node.js</h2>
<p>You have played with Node.js and created a basic server and maybe a simple
application, but now where do you go? This presentation will look at what you need to have the
complete toolkit with node from testing frameworks to task automation and IDE to essential
packages and overall architecture of an app and what should production look like. Microsoft has
good support for Node.js in Visual Studio and with Azure and this session will give you a toolset
to set up a complete Node.js workflow using some of the tools you are familiar with.</p>
</div>
<div>
<h2>JavaScript for Devices</h2>
<p>A recently released device has brought JavaScript to a perhaps unexpected
place…embedded devices. The Espruino board, created as part of a Kickstarter campaign, combines
embedded hardware with a JavaScript interpreter to provide real-time, interactive programming of
hardware devices. If you’re a JavaScript fan, and want to learn how to do something pretty unusual
with this great language, this is the session for you. We’ll look at powering LED strips, reading
data from sensors, driving motors and servos, and more.</p>
</div>
</div>
Make a grid row
<div class="row">
<div>
Make 3 columns, not good on mobile, use for since 12/3 = 4
<div class="col-xs-4">
Switch to sm for responsive
<div class="col-sm-4">
Add another row with only 2 columns
<div class="row">
<div class="col-sm-4">
<h2>Taking control of your data with Entity Framework</h2>
<p>We are dealing with more data, faster than ever before. Make sure your code
is ready for it!! Whether you are developing Windows apps, Web apps, SOA or Cloud apps, Entity
Framework out performs every other form of data access out there. Entity Framework has evolved
from a concept into a fully functional ORM that has proven superiority over other ORMs. In this
course we will visit everything from Async to Repository Patterns, from Code First to Database
First and from stored procedures to LINQ expressions.</p>
</div>
<div class="col-sm-8">
<h2>Building Speech-enabled Mobile Apps with Cortana</h2>
<p>Can you hear me now? Move over Siri, Cortana is the new star in town and
with her comes an army of speech-enabled mobile applications on Windows Phone. Mobile applications
are not always easy to work with due to the small screen and small on-screen keyboard. Using our
voice is a natural form of communication amongst humans, and ever since 2001’s HAL9000 and Star
Trek, we’ve been dreaming of computers who can converse with us. Or maybe you’re part of the new
generation of Halo geeks dreaming of Cortana? Thanks to the new Microsoft SDKs for speech
recognition and speech synthesis (aka text-to-speech), we are now several steps closer to this
reality. This session explores the development techniques you can use to add speech recognition to
your Windows Phone applications, including in-app commands, standard & custom grammars, and voice
commands usable outside your app with Cortana. We’ll also see how your apps can respond to the
user via speech synthesis, opening-up a new world of hands-free scenarios. This reality is here,
you’ll see actual live demos with speech and you can now learn how to do it. Most of the demos
target Windows Phone, but we’ll also cover some content for Windows Store, iOS and Android.</p>
</div>
</div>
Get creative with offset
<div class="col-sm-offset-4">
Make even with 6
<div class="col-sm-6">
Add a nested grid, only covers 6 spaces total
<div class="row">
<div class="col-sm-4">
<img class="img-responsive" src="http://phillydotnet.org/wpcontent/uploads/2012/08/KenLovely1-e1403236574428.jpg" alt="Data"></img>
</div>
<div class="col-sm-8">
<h3>Ken Lovely</h3>
<p>Saturday, June 21st, 2014 at 12:00 pm on 1 PA</p>
</div>
</div>
Use push and pull to swap display order
<div class="col-sm-6 col-sm-push-6">
Hide a cell on mobile with hidden-xs
<div class="col-sm-6 col-sm-push-6 hidden-xs">
<div class="col-sm-6 col-sm-push-6 visible-xs">
<h3>Ken has left the building!</h3>
</div>
Stylesheet for Overrides, JS for Interactivity
Create a style file for overrides, add after bootstrap
<link href="content/stylesheet.css" rel="stylesheet" media="screen">
Add jQuery and bootstrap js for collapse and dropdown
<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="scripts/bootstrap.min.js" type="text/javascript"></script>
Move navbar outside of container for full width background, then a container to limit nav width
<!--Navbar-->
<div class="navbar navbar-default">
<div class="container">
</div>
</div>
<!--End Navbar-->
Add a brand on the upper left
<a class="navbar-brand text-muted" href="#">philly.NET</a>
Add a div for collapsing
<div class="collapse navbar-collapse">
Paste in links from below and delete the old header, remove the nav-pills and pull-right
<div class="collapse navbar-collapse">
<ul class="nav">
<li class="active">
<a href="#">Meetings</a>
</li>
<li>
<a href="#">Labs</a>
</li>
<li>
<a href="#">Camps</a>
</li>
</ul>
</div>
Add the navbar-nav class
<ul class="nav navbar-nav">
Push the links to the right
<ul class="nav navbar-nav navbar-right">
Make it darker
<div class="navbar navbar-inverse">
Fix to the top of the page
<div class="navbar navbar-inverse navbar-fixed-top">
Edit some custom styles to improve spacing
/* Layout */
body {
padding-top: 70px;
}
/* Jumbotron */
.jumbotron {
text-align: center;
}
Burger Menu
Add a burger toggle button, classes automatically position, data- attributes are used by javascript
<button type="button" class="navbar-toggle" data-toggle="collapse" datatarget=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Make our page less wide
.container {
max-width: 1000px;
}
Build a dropdown for code camp
<li class="dropdown">
<a data-toggle="dropdown" data-target="#">Camps
<b class="caret"></b>
</a>
</li>
Add an unordered list for the dropdown
<ul>
<li>
<a href="#">Agenda</a>
</li>
<li>
<a href="#">Session Grid</a>
</li>
<li>
<a href="#">Sponsors</a>
</li>
</ul>
Add a class to style the dropdown
<ul class="dropdown-menu">
Add a divider and more links
<li class="divider">
</li>
<li>
<a href="#">Register</a>
</li>
Test for responsiveness
Glyphs
Add glyphs to the three content columns
<b class="glyphicon glyphicon-phone"></b>
<b class="glyphicon glyphicon-user"></b>
<b class="glyphicon glyphicon-cloud"></b>
Style the icons
/* Glyphicons */
.glyphicon {
font-size: 3em;
display: block;
margin: auto;
color: #242090;
}
Carousel
Start a carousel
<div class="carousel" id="myCarousel">
</div>
Add sliding and jumbotron styling
<div class="carousel slide jumbotron" id="myCarousel">
Container sets the max width, carousel-inner is a wrapper for items
<div class="container">
<div class="carousel-inner">
<div class="item">
</div>
</div>
</div>
Cut and paste content, delete jumbotron
Set one to active to see it
<div class="item active">
Relax padding at top
body {
padding-top: 50px;
}
Add 2 items
<div class="item">
<h1>Monthly Meetings</h1>
<p class="lead">Our popular 15 minutes of fame format</p>
<p class="btn-group">
<a class="btn btn-success btn-lg" href="#">Details</a>
<a class="btn btn-primary btn-lg" href="#">Register</a>
</p>
</div>
<div class="item">
<h1>Hands-on Labs</h1>
<p class="lead">8 month series on JavaScript</p>
<p class="btn-group">
<a class="btn btn-success btn-lg" href="#">Details</a>
<a class="btn btn-primary btn-lg" href="#">Register</a>
</p>
</div>
Add a control arrow
<a class="left carousel-control" href="#myCarousel"><span></span></a>
Set the data-target for javascript, style the span
<a class="left carousel-control" href="#myCarousel" data-target="prev"><span
class="icon-prev"></span></a>
Add a matching right arrow
<a class="right carousel-control" href="#myCarousel" data-target="next"><span
class="icon-next"></span></a>
Add ol indicators and data attributes on the items
<ol class="carousel-indicators">
<li class="active" data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!--Controls-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span
class="icon-prev"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span
class="icon-next"></span></a>
<!--End Controls-->
Style the indicator
.carousel-indicators {
bottom: 0;
}
.carousel-indicators .active {
background-color: #222;
}
.carousel-indicators .li {
background-color: #222;
}
Modal Forms
Add sign-up link to nav
<li>
<a href="#">Sign Up</a>
</li>
Create the div wrapper
<!--Modal-->
<div class="modal fade" id="textModal">
</div>
<!--End Modal-->
Modal-dialog centers on the page, modal-content sets background color, borders, shadow, and rounded corners
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
Complete the layout with a header and body
<div class="modal-header">
</div>
<div class="modal-body">
</div>
Add a close button and title to the header, data-dismiss is used by javascript to close the modal window
<button type="button" class="close" data-dismiss="modal" ariahidden="true">&times;</button>
<h4 class="modal-title">Join philly.NET</h4>
Make the navbar link activate the modal, test on devices
<a href="#textModal" data-toggle="modal" data-target="#textModal">Sign Up</a>
Add a form to the body
<form class="form">
<div class="form-group">
<label for="Email">Email Address</label>
<input type="email" class="form-control" id="Email"
placeholder="Enter email">
</div>
</form>
Add a footer with buttons, data-dismiss will close the form
<div class="modal-footer">
<button type="button" class="btn btn-default" datadimiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send</button>
</div>
Add a second form group
<div class="form-group">
<label for="Password">Password</label>
<input type="password" class="form-control" id="Password"
placeholder="Password">
</div>
