AngularJS directives for Boostrap fast protoyping
- Git:
git clone https://github.com/donaldmorton/darwin.js
- AngularJS
- Bootstrap
First, include the main JavaScript file in the <head> of your HTML document:
<script src="darwin.js"></script>
Next, add the module:
var myAppModule = angular.module('MyApp', ['darwin']);
<container></container>
Instead of
<div class="container"></div>
<container-fluid></container-fluid>
Instead of
<div class="container-fluid"></div>
<row></row>
Instead of
<div class="row"></div>
- @xs
- @sm
- @md
- @lg
- @xs-of
- @sm-of
- @md-of
- @lg-of
<cl sx="6" md="4"></cl>
Instead of
<div class="col-xs-6 col-md-4"></div>
offset
<cl xs="6" xs-of="1" md="4" md-of="2"></cl>
Instead of
<div class="col-xs-6 col-xs-offset-1 col-md-4 col-md-offset-2"></div>
- @title (optional)
- @footer (optional)
- @type (optional)
<panel>Content</panel>
Instead of
<div class="panel"><div class="panel-body">Content</div></div>
With title and footer
<panel title="Heading" footer="foo" type="primary">Content</panel>
Instead of
<div class="panel panel-primary">
<div class="panel-heading"><h3 class="panel-title">Heading</h3></div>
<div class="panel-body">Content</div>
<div class="panel-footer">foo</div>
</div>
<jumbotron></jumbotron>
Instead of
<div class="jumbotron"></div>
<well></well>
Instead of
<div class="well"></div>
- @type
<lbl type="primary"></lbl>
Instead of
<span class="label label-primary"></span>
<list-group>
<li>Cras justo odio</li>
<li class="active">Dapibus ac facilisis in</li>
<li>Morbi leo risus</li>
</list-group>
Instead of
<ul class="list-group">
<li class="list-group-item">Cras justo odio </li>
<li class="list-group-item active">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
</ul>
<icon name="star"></icon>
Instead of
<span class="glyphicon glyphicon-star"></span>
<input-group>
<addon>@</addon>
<input type="text" class="form-control">
</input-group>
Instead of
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control">
</div>
<input-group>
<input type="text" class="form-control">
<addon-button>
<button class="btn btn-default" type="button">Go!</button>
</addon-button>
</input-group>
Instead of
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<button-group>
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Rigth</button>
</button-group>
Instead of
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Rigth</button>
</div>
<button-group-vertical>
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Left</button>
</button-group/vertical>
Instead of
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Left</button>
</div>
<button-group-vertical>
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Left</button>
</button-group/vertical>
Instead of
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Left</button>
</div>
<alert type="success">Content</alert>
Instead of
<div class="alert alert-success">Content</div>