darwin

AngularJS directives for Boostrap fast protoyping
Homepage:
0 people use it

darwin

AngularJS directives for Boostrap fast protoyping

Installation

  • Git: git clone https://github.com/donaldmorton/darwin.js

Requirements

  • AngularJS
  • Bootstrap

Setup

First, include the main JavaScript file in the <head> of your HTML document:

Next, add the module:

Usage

Container

Instead of <div class="container"></div>

Container Fluid

Instead of <div class="container-fluid"></div>

Row

Instead of <div class="row"></div>

Columns

  • @type
  • @size
  • @offset (optional) <cl type="md" size="2"></cl> Instead of <div class="col-md-2"></div> ---------- offset <cl type="md" size="2" offset="2"></cl> Instead of <div class="col-md-2 col-md-offset-2"></div>

Panel

  • @title (optional)
  • @footer (optional)
  • @type (optional)

Instead of ``` Content

```

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

Instead of <div class="jumbotron"></div>

Well

Instead of <div class="well"></div>

Label

  • @type <lbl type="primary"></lbl> Instead of <span class="label label-primary"></span>

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

Instead of <span class="glyphicon glyphicon-star"></span>

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 Button

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

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

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

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

Instead of <div class="alert alert-success">Content</div>

comments powered by Disqus
This page was last updated about 3 years ago.