<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
Skip to content
Features Business Explore Marketplace Pricing
This repository
Search
Sign in or Sign up
Watch 69 Star 1,090 Fork 168 bootcards/bootcards
Code Issues 20 Pull requests 0 Projects 0 Insights
Branch: master Find file Copy pathbootcards/samples/starter-template.html
bb3d514 on Aug 5, 2015
@markleusink markleusink added missing navbar-left class to the navbar buttons
1 contributor
RawBlameHistory
591 lines (503 sloc) 23.7 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="google" value="notranslate">
<title>Starter Template for Bootcards</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootcards CSS files for desktop, iOS and Android -->
<!-- You'll only need to load one of these (depending on the device you're using) in production -->
<link href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.1.1/css/bootcards-ios.min.css" rel="stylesheet">
<!-- <link href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.1.1/css/bootcards-desktop.min.css" rel="stylesheet">-->
<!--<link href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.1.1/css/bootcards-android.min.css" rel="stylesheet">-->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
</head>
<body>
<!-- fixed top navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<button type="button" class="btn btn-default btn-back navbar-left pull-left hidden" onclick="history.back()">
<i class="fa fa-lg fa-chevron-left"></i>
<span>Back</span>
</button>
<!-- menu button to show/ hide the off canvas menu -->
<button type="button" class="btn btn-default btn-menu navbar-left pull-left" data-toggle="offcanvas">
<i class="fa fa-lg fa-bars"></i><span>Menu</span>
</button>
<a class="navbar-brand" title="Bootcards Starter" href="/">Bootcards Starter</a>
<!--right aligned button-->
<button type="button" class="btn btn-warning navbar-right hidden-sm">
<i class="fa fa-lg fa-refresh"></i><span>Refresh</span>
</button>
<!--navbar menu options: shown on desktop only -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="#">
<i class="fa fa-dashboard"></i> Dashboard
</a>
</li>
<li>
<a href="#">
<i class="fa fa-building-o"></i> Companies
</a>
</li>
<li class="active">
<a href="#">
<i class="fa fa-font"></i> Contacts
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- slide in off canvas menu (mobile only) -->
<nav class="navmenu offcanvas offcanvas-left">
<ul class="nav">
<li>
<a href="#">
<i class="fa fa-fw fa-dashboard"></i>Dashboard
</a>
</li>
<li class="active">
<a href="starter-template.html">
<i class="fa fa-fw fa-users"></i>Contacts
</a>
</li>
<li>
<a href="az-picker.html">
<i class="fa fa-fw fa-font"></i>AZ Picker (Android)
</a>
</li>
<li>
<a href="double-navbar.html">
<i class="fa fa-lg fa-bars"></i>Navbar (desktop)
</a>
</li>
<!--option with submenu-->
<li class="collapse litop4">
<a href="#otherControls" class="bootcards-parent" data-toggle="collapse" data-parent=".collapse">
<i class="fa fa-lg fa-fw fa-chevron-circle-right"></i> Settings
</a>
<div id="otherControls" class="collapse in">
<ul class="nav navmenu-nav"><li >
<a href="#" ><i class="fa fa-lg fa-fw fa-cog"></i> General</a></li>
<li>
<a href="#"><i class="fa fa-lg fa-fw fa-user"></i> Account</a>
</li>
<li>
<a href="#"><i class="fa fa-lg fa-fw fa-refresh"></i> Sync</a>
</li>
</ul>
</div>
</li>
</ul>
</nav><!--nav-->
<div class="container bootcards-container push-right">
<!-- This is where you come in... -->
<!-- I've added some sample data below so you can get a feel for the required markup -->
<div class="row">
<!-- left list column -->
<div class="col-sm-5 bootcards-list" id="list" data-title="Contacts">
<div class="panel panel-default">
<div class="panel-body">
<div class="search-form">
<div class="row">
<div class="col-xs-9">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search Contacts...">
<i class="fa fa-search"></i>
</div>
</div>
<div class="col-xs-3">
<a class="btn btn-primary btn-block" href="#" onclick="bootcards.hideOffCanvasMenu()" >
<i class="fa fa-plus"></i>
<span>Add</span>
</a>
</div>
</div>
</div>
</div><!--panel body-->
<div class="list-group">
<!-- list of sample data -->
<a class="list-group-item" href="#">
<img src="img/Joseph Barish.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Barish, Joseph</h4>
<p class="list-group-item-text">Masung Corp.</p>
</a>
<a class="list-group-item active" href="#">
<img src="img/Sofia Acey.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Acey, Sofia</h4>
<p class="list-group-item-text">Masung Corp.</p>
</a>
<a class="list-group-item " href="#">
<img src="img/Jerry Bess.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Bess, Jerry</h4>
<p class="list-group-item-text">ZetaComm</p>
</a>
<a class="list-group-item " href="#">
<img src="img/Jamie Biddy.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Biddy, Jamie</h4>
<p class="list-group-item-text">Masung Corp.</p>
</a>
<a class="list-group-item " href="#">
<img src="img/Mark Booth.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Booth, Mark</h4>
<p class="list-group-item-text">Burning Core</p>
</a>
<a class="list-group-item" href="#">
<img src="img/Sofia Acey.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Acey, Sofia</h4>
<p class="list-group-item-text">Masung Corp.</p>
</a>
<a class="list-group-item " href="#">
<img src="img/Joseph Barish.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Barish, Joseph</h4>
<p class="list-group-item-text">Masung Corp.</p>
</a>
<a class="list-group-item " href="#">
<img src="img/Jerry Bess.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Bess, Jerry</h4>
<p class="list-group-item-text">ZetaComm</p>
</a>
<a class="list-group-item " href="#">
<img src="img/Jamie Biddy.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Biddy, Jamie</h4>
<p class="list-group-item-text">Masung Corp.</p>
</a>
<a class="list-group-item " href="#">
<img src="img/Mark Booth.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Booth, Mark</h4>
<p class="list-group-item-text">Burning Core</p>
</a>
<a class="list-group-item " href="#">
<img src="img/Sofia Acey.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Acey, Sofia</h4>
<p class="list-group-item-text">Masung Corp.</p>
</a>
<a class="list-group-item " href="#">
<img src="img/Joseph Barish.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Barish, Joseph</h4>
<p class="list-group-item-text">Masung Corp.</p>
</a>
<a class="list-group-item " href="#">
<img src="img/Jerry Bess.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Bess, Jerry</h4>
<p class="list-group-item-text">ZetaComm</p>
</a>
<a class="list-group-item " href="#">
<img src="img/Jamie Biddy.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Biddy, Jamie</h4>
<p class="list-group-item-text">Masung Corp.</p>
</a>
<a class="list-group-item " href="#">
<img src="img/Mark Booth.jpg" class="img-rounded pull-left">
<h4 class="list-group-item-heading">Booth, Mark</h4>
<p class="list-group-item-text">Burning Core</p>
</a>
</div><!--list-group-->
<div class="panel-footer">
<small class="pull-left">Built with Bootcards - List</small>
<a class="btn btn-link btn-xs pull-right" href="#">
Footer link</a>
</div>
</div><!--panel-->
</div><!--list-->
<!--list details column-->
<div class="col-sm-7 bootcards-cards hidden-xs">
<div class="panel panel-default bootcards-richtext">
<div class="panel-heading">
<h3 class="panel-title">About this page</h3>
</div>
<div class="panel-body">
<p>This page shows you how to create a master/detail view using Bootcards. Main features:</p>
<ul>
<li>Markup based on <a href="http://getbootstrap.com" target="_blank">Bootstrap 3+</a>.</li>
<li>Near-native iOS and Android look (there's one for Desktop too).</li>
<li>Fixed header and footer.</li>
<li>Independent scrolling columns.</li>
<li>Automatic single pane portrait mode (similar to the iOS Mail app): make sure you also view this page using a tablet and rotate to portrait.</li>
<li>Off-canvas menu. On this page it is configured to push the main content away, it can also be configured as an overlay.</li>
</ul>
<p>
This is only a sample page: it is not meant to be fully functional. We've used <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome</a> for the icons and have include FTLabs' <a href="https://github.com/ftlabs/fastclick" target="_blank">FastClick</a> library to make tapping links on iOS faster.
</p>
</div>
</div><!--end rich text card-->
<div class="panel panel-default bootcards-richtext">
<div class="panel-heading">
<h3 class="panel-title">Theme Switcher</h3>
</div>
<div class="panel-body">
<!--theme switcher-->
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="themeSwitcher" value="ios" autocomplete="off" checked> iOS
</label>
<label class="btn btn-primary">
<input type="radio" name="themeSwitcher" value="android" autocomplete="off"> Android
</label>
<label class="btn btn-primary">
<input type="radio" name="themeSwitcher" value="desktop" autocomplete="off"> Desktop
</label>
</div>
</div>
</div>
<!--contact details -->
<div id="contactCard">
<div class="panel panel-default">
<div class="panel-heading clearfix">
<h3 class="panel-title pull-left">Contact Details</h3>
<div class="btn-group pull-right visible-xs">
<a class="btn btn-primary" href="#" data-toggle="modal" data-target="#editModal">
<i class="fa fa-pencil"></i><span>Edit</span>
</a>
</div>
<a class="btn btn-primary pull-right hidden-xs" href="#" data-toggle="modal" data-target="#editModal">
<i class="fa fa-pencil"></i><span>Edit</span>
</a>
</div>
<div class="list-group">
<div class="list-group-item">
<img src="img/Sofia Acey.jpg" class="img-rounded pull-left">
<label>Name</label>
<h4 class="list-group-item-heading">Acey, Sofia</h4>
</div>
<div class="list-group-item">
<label>Company</label>
<h4 class="list-group-item-heading">Masung Corp.</h4>
</div>
<div class="list-group-item">
<label>Job Title</label>
<h4 class="list-group-item-heading">Finance Director (ZCT)</h4>
</div>
<div class="list-group-item">
<label>Department</label>
<h4 class="list-group-item-heading">Finance</h4>
</div>
<a class="list-group-item" href="tel://+1 650-555-0055">
<label>Phone</label>
<h4 class="list-group-item-heading">+1 650-555-0055</h4>
</a>
<a class="list-group-item" href="mailto:Sofia.Acey@masung.com">
<label>Email</label>
<h4 class="list-group-item-heading">Sofia.Acey@masung.com</h4>
</a>
</div>
<div class="panel-footer">
<small class="pull-left">Built with Bootcards - Base Card</small>
<a class="btn btn-link btn-xs pull-right" href="#">
Card footer link</a>
</div>
</div>
</div><!--contact card-->
<!--rich text card sample-->
<div class="panel panel-default bootcards-richtext">
<div class="panel-heading">
<h3 class="panel-title">Rich Text Card Heading</h3>
</div>
<div class="panel-body">
<p class="lead">Lead body copy vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis pretium nisl. Etiam at vestibulum purus, sit amet blandit mi. Duis enim lectus, tempus nec varius sed, sollicitudin quis velit. Fusce quis sem porttitor, euismod ante vitae, ultricies erat.</p>
<ul>
<li>Duis cursus dui et turpis gravida sollicitudin.</li>
<li>Donec eget mauris feugiat, euismod purus nec, feugiat neque.</li>
<li>Nunc erat est, molestie eget magna in, consectetur euismod lorem.</li>
</ul>
<ol>
<li>Sed luctus congue orci quis tempus.</li>
<li>Praesent in viverra lorem.</li>
<li>Suspendisse augue lacus, porta quis imperdiet at, posuere vel nulla.</li>
</ol>
<div>
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
<button type="button" class="btn btn-primary" disabled="disabled">Disabled</button>
</div>
</div>
<div class="panel-footer">
<small>Built with Bootcards - Rich Text Card</small>
</div>
</div><!--end rich text card-->
</div><!--list-details-->
</div><!--row-->
</div><!--container-->
<!-- fixed tabbed footer -->
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<div class="bootcards-desktop-footer clearfix">
<p class="pull-left">Bootcards</p>
</div>
<div class="btn-group">
<a href="#" class="btn btn-default">
<i class="fa fa-2x fa-dashboard"></i>Dashboard
</a>
<a href="starter-template.html" class="btn btn-default active">
<i class="fa fa-2x fa-users"></i>Contacts
</a>
<a href="az-picker.html" class="btn btn-default">
<i class="fa fa-2x fa-font"></i>AZ Picker
</a>
</div>
</div>
</div><!--footer-->
<!--edit contact modal-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" method="POST" action="/contacts/{{contact.id}}" data-pjax="#main">
<div class="modal-header">
<div class="btn-group pull-left">
<button class="btn btn-danger" data-dismiss="modal">
Cancel
</button>
</div>
<div class="btn-group pull-right">
<button class="btn btn-success" data-dismiss="modal">
<i class="fa fa-check"></i>Save
</button>
</div>
<h4 class="modal-title">
Edit Contact
</h4>
</div>
<div class="modal-body">
<input type="hidden" name="companyId" value="{{contact.companyId}}">
<input type="hidden" name="_method" value="put">
<div class="form-group">
<label class="col-xs-4 control-label">First Name</label>
<div class="col-xs-8">
<input type="text" name="firstName" class="form-control" placeholder="First Name"
value="Sofia">
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">Last Name</label>
<div class="col-xs-8">
<input type="text" name="lastName" class="form-control" placeholder="Last Name"
value="Acey">
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">Company</label>
<div class="col-xs-8">
<input type="text" name="department" class="form-control" placeholder="Department"
value="Masung Corp.">
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">Phone</label>
<div class="col-xs-8">
<input type="text" name="phone" class="form-control"
placeholder="Phone"
value="+1 650-555-0055">
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">Email</label>
<div class="col-xs-8">
<input type="email" name="email" class="form-control" placeholder="Email"
value="Sofia.Acey@masung.com">
</div>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-block"
onclick="bootcards.confirmDelete('contact'); return false;">
<i class="fa fa-trash-o"></i>
Delete Contact
</button>
</div>
</div><!--modal-content-->
</div>
</div><!--modal-->
<!-- Bootstrap & jQuery core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Bootcards JS -->
<script src="../src/js/bootcards.js"></script>
<!--recommended: FTLabs FastClick library-->
<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.3/fastclick.min.js"></script>
<script type="text/javascript">
/*
* Initialize Bootcards.
*
* Parameters:
* - offCanvasBackdrop (boolean): show a backdrop when the offcanvas is shown
* - offCanvasHideOnMainClick (boolean): hide the offcanvas menu on clicking outside the off canvas
* - enableTabletPortraitMode (boolean): enable single pane mode for tablets in portraitmode
* - disableRubberBanding (boolean): disable the iOS rubber banding effect
* - disableBreakoutSelector (string) : for iOS apps that are added to the home screen:
jQuery selector to target links for which a fix should be added to not
allow those links to break out of fullscreen mode.
*/
bootcards.init( {
offCanvasBackdrop : true,
offCanvasHideOnMainClick : true,
enableTabletPortraitMode : true,
disableRubberBanding : true,
disableBreakoutSelector : 'a.no-break-out'
});
//enable FastClick
window.addEventListener('load', function() {
FastClick.attach(document.body);
}, false);
//activate the sub-menu options in the offcanvas menu
$('.collapse').collapse();
//theme switcher: only needed for this sample page to set the active CSS
$('input[name=themeSwitcher]').on('change', function(ev) {
var theme = $(ev.target).val();
var themeCSSLoaded = false;
$.each( document.styleSheets, function(idx, css) {
var href = css.href;
if (href.indexOf('bootcards')>-1) {
if (href.indexOf(theme)>-1) {
themeCSSLoaded = true;
css.disabled = false;
} else {
css.disabled = true;
}
}
});
if (!themeCSSLoaded) {
$("<link/>", {
rel: "stylesheet",
type: "text/css",
href: "//cdnjs.cloudflare.com/ajax/libs/bootcards/1.1.1/css/bootcards-" + theme + ".min.css"
}).appendTo("head");
}
});
</script>
</body>
</html>
Contact GitHub API Training Shop Blog About
© 2017 GitHub, Inc. Terms Privacy Security Status Help
