Removed redundant pages
This commit is contained in:
piratefinn
parent
d119034f5b
commit
47e50e65d6
|
|
@ -1,231 +0,0 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Options</strong>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-link">Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>With Icons</strong>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-primary"><i class="fa fa-star"></i> Primary</button>
|
||||
<button type="button" class="btn btn-secondary"><i class="fa fa-lightbulb-o"></i> Secondary</button>
|
||||
<button type="button" class="btn btn-success"><i class="fa fa-magic"></i> Success</button>
|
||||
<button type="button" class="btn btn-warning"><i class="fa fa-map-marker"></i> Warning</button>
|
||||
<button type="button" class="btn btn-danger"><i class="fa fa-rss"></i> Danger</button>
|
||||
<button type="button" class="btn btn-link"><i class="fa fa-link"></i> Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Size Large</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-lg</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-primary btn-lg">Primary</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg">Secondary</button>
|
||||
<button type="button" class="btn btn-success btn-lg">Success</button>
|
||||
<button type="button" class="btn btn-info btn-lg">Info</button>
|
||||
<button type="button" class="btn btn-warning btn-lg">Warning</button>
|
||||
<button type="button" class="btn btn-danger btn-lg">Danger</button>
|
||||
<button type="button" class="btn btn-link btn-lg">Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Size Small</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-sm</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-primary btn-sm">Primary</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm">Secondary</button>
|
||||
<button type="button" class="btn btn-success btn-sm">Success</button>
|
||||
<button type="button" class="btn btn-info btn-sm">Info</button>
|
||||
<button type="button" class="btn btn-warning btn-sm">Warning</button>
|
||||
<button type="button" class="btn btn-danger btn-sm">Danger</button>
|
||||
<button type="button" class="btn btn-link btn-sm">Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Disabled state</strong>
|
||||
<small>Add this
|
||||
<code>disabled="disabled"</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-primary" disabled="disabled">Primary</button>
|
||||
<button type="button" class="btn btn-secondary" disabled="disabled">Secondary</button>
|
||||
<button type="button" class="btn btn-success" disabled="disabled">Success</button>
|
||||
<button type="button" class="btn btn-info" disabled="disabled">Info</button>
|
||||
<button type="button" class="btn btn-warning" disabled="disabled">Warning</button>
|
||||
<button type="button" class="btn btn-danger" disabled="disabled">Danger</button>
|
||||
<button type="button" class="btn btn-link" disabled="disabled">Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Active state</strong>
|
||||
<small>Add this class
|
||||
<code>.active</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-primary active">Primary</button>
|
||||
<button type="button" class="btn btn-secondary active">Secondary</button>
|
||||
<button type="button" class="btn btn-success active">Success</button>
|
||||
<button type="button" class="btn btn-info active">Info</button>
|
||||
<button type="button" class="btn btn-warning active">Warning</button>
|
||||
<button type="button" class="btn btn-danger active">Danger</button>
|
||||
<button type="button" class="btn btn-link active">Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Block Level Buttons</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-block</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-success btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-info btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-warning btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-danger btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-link btn-lg btn-block">Block level button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Options</strong>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
|
||||
<button type="button" class="btn btn-outline-primary">Primary</button>
|
||||
<!-- Secondary, outline button -->
|
||||
<button type="button" class="btn btn-outline-secondary">Secondary</button>
|
||||
<!-- Indicates a successful or positive action -->
|
||||
<button type="button" class="btn btn-outline-success">Success</button>
|
||||
<!-- Indicates caution should be taken with this action -->
|
||||
<button type="button" class="btn btn-outline-warning">Warning</button>
|
||||
<!-- Indicates a dangerous or potentially negative action -->
|
||||
<button type="button" class="btn btn-outline-danger">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>With Icons</strong>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-outline-primary"><i class="fa fa-star"></i> Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary"><i class="fa fa-lightbulb-o"></i> Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success"><i class="fa fa-magic"></i> Success</button>
|
||||
<button type="button" class="btn btn-outline-warning"><i class="fa fa-map-marker"></i> Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger"><i class="fa fa-rss"></i> Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Size Large</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-lg</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-outline-primary btn-lg">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-lg">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success btn-lg">Success</button>
|
||||
<button type="button" class="btn btn-outline-info btn-lg">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning btn-lg">Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger btn-lg">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Size Small</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-sm</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-outline-primary btn-sm">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success btn-sm">Success</button>
|
||||
<button type="button" class="btn btn-outline-info btn-sm">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning btn-sm">Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger btn-sm">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Disabled state</strong>
|
||||
<small>Add this
|
||||
<code>disabled="disabled"</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-outline-primary" disabled="disabled">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary" disabled="disabled">Secondary</button>
|
||||
<button type="button" class="btn btn-success" disabled="disabled">Success</button>
|
||||
<button type="button" class="btn btn-outline-info" disabled="disabled">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning" disabled="disabled">Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger" disabled="disabled">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Active state</strong>
|
||||
<small>Add this class
|
||||
<code>.active</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-outline-primary active">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary active">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success active">Success</button>
|
||||
<button type="button" class="btn btn-outline-info active">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning active">Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger active">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Block Level Buttons</strong>
|
||||
<small>Add this class
|
||||
<code>.btn-block</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<button type="button" class="btn btn-outline-secondary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-outline-primary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-outline-success btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-outline-info btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-outline-warning btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-outline-danger btn-lg btn-block">Block level button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'buttons.component.html'
|
||||
})
|
||||
export class ButtonsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
|
|
@ -1,320 +0,0 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
<div class="card-footer">Card footer</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-check"></i>Card with icon
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Card with switch
|
||||
<label class="switch switch-sm switch-text switch-info float-right mb-0">
|
||||
<input type="checkbox" class="switch-input">
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Card with label
|
||||
<span class="badge badge-success float-right">Success</span>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Card with label
|
||||
<span class="badge badge-pill badge-danger float-right">42</span>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-outline-primary">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-outline-secondary">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-outline-success">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-outline-info">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-outline-warning">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-outline-danger">
|
||||
<div class="card-header">
|
||||
Card outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-primary">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-secondary">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-success">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-info">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-warning">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-accent-danger">
|
||||
<div class="card-header">
|
||||
Card with accent
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-primary text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-success text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-info text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-warning text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-danger text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-primary text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-primary">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-success">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-info">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-warning">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="card card-inverse card-danger">
|
||||
<div class="card-header">
|
||||
Card title
|
||||
</div>
|
||||
<div class="card-block">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'cards.component.html'
|
||||
})
|
||||
export class CardsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
|
|
@ -4,14 +4,6 @@ import { Routes, RouterModule } from '@angular/router';
|
|||
import { LeaderboardsComponent } from './leaderboards.component';
|
||||
import { AccountEditComponent } from './account-edit.component';
|
||||
import { AddDataComponent } from './add-data.component';
|
||||
import { ButtonsComponent } from './buttons.component';
|
||||
import { CardsComponent } from './cards.component';
|
||||
import { FormsComponent } from './forms.component';
|
||||
import { ModalsComponent } from './modals.component';
|
||||
import { SocialButtonsComponent } from './social-buttons.component';
|
||||
import { SwitchesComponent } from './switches.component';
|
||||
import { TablesComponent } from './tables.component';
|
||||
import { TabsComponent } from './tabs.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
|
|
@ -40,63 +32,6 @@ const routes: Routes = [
|
|||
data: {
|
||||
title: 'Add Data'
|
||||
}
|
||||
},
|
||||
// Template example pages
|
||||
{
|
||||
path: 'buttons',
|
||||
component: ButtonsComponent,
|
||||
data: {
|
||||
title: 'Buttons'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'cards',
|
||||
component: CardsComponent,
|
||||
data: {
|
||||
title: 'Cards'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'forms',
|
||||
component: FormsComponent,
|
||||
data: {
|
||||
title: 'Forms'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'modals',
|
||||
component: ModalsComponent,
|
||||
data: {
|
||||
title: 'Modals'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'social-buttons',
|
||||
component: SocialButtonsComponent,
|
||||
data: {
|
||||
title: 'Social buttons'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'switches',
|
||||
component: SwitchesComponent,
|
||||
data: {
|
||||
title: 'Switches'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'tables',
|
||||
component: TablesComponent,
|
||||
data: {
|
||||
title: 'Tables'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'tabs',
|
||||
component: TabsComponent,
|
||||
data: {
|
||||
title: 'Tabs'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,26 +7,6 @@ import { LeaderboardsComponent } from './leaderboards.component';
|
|||
import { AddDataComponent } from './add-data.component';
|
||||
import { AccountEditComponent } from './account-edit.component';
|
||||
|
||||
// Buttons Component
|
||||
import { ButtonsComponent } from './buttons.component';
|
||||
import { CardsComponent } from './cards.component';
|
||||
|
||||
// Forms Component
|
||||
import { FormsComponent } from './forms.component';
|
||||
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
||||
|
||||
import { SocialButtonsComponent } from './social-buttons.component';
|
||||
import { SwitchesComponent } from './switches.component';
|
||||
import { TablesComponent } from './tables.component';
|
||||
|
||||
// Modal Component
|
||||
import { ModalModule } from 'ngx-bootstrap/modal';
|
||||
import { ModalsComponent } from './modals.component';
|
||||
|
||||
// Tabs Component
|
||||
import { TabsModule } from 'ngx-bootstrap/tabs';
|
||||
import { TabsComponent } from './tabs.component';
|
||||
|
||||
// Components Routing
|
||||
import { ComponentsRoutingModule } from './components-routing.module';
|
||||
|
||||
|
|
@ -34,24 +14,13 @@ import { ComponentsRoutingModule } from './components-routing.module';
|
|||
imports: [
|
||||
CommonModule,
|
||||
ComponentsRoutingModule,
|
||||
BsDropdownModule.forRoot(),
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
ModalModule.forRoot(),
|
||||
TabsModule
|
||||
ReactiveFormsModule
|
||||
],
|
||||
declarations: [
|
||||
LeaderboardsComponent,
|
||||
AccountEditComponent,
|
||||
AddDataComponent,
|
||||
ButtonsComponent,
|
||||
CardsComponent,
|
||||
FormsComponent,
|
||||
ModalsComponent,
|
||||
SocialButtonsComponent,
|
||||
SwitchesComponent,
|
||||
TablesComponent,
|
||||
TabsComponent
|
||||
AddDataComponent
|
||||
]
|
||||
})
|
||||
export class ComponentsModule { }
|
||||
|
|
|
|||
|
|
@ -1,998 +0,0 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Credit Card</strong>
|
||||
<small>Form</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" class="form-control" id="name" placeholder="Enter your name">
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="form-group">
|
||||
<label for="ccnumber">Credit Card Number</label>
|
||||
<input type="text" class="form-control" id="ccnumber" placeholder="0000 0000 0000 0000">
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="form-group col-sm-4">
|
||||
<label for="ccmonth">Month</label>
|
||||
<select class="form-control" id="ccmonth">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
<option>6</option>
|
||||
<option>7</option>
|
||||
<option>8</option>
|
||||
<option>9</option>
|
||||
<option>10</option>
|
||||
<option>11</option>
|
||||
<option>12</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-sm-4">
|
||||
<label for="ccyear">Year</label>
|
||||
<select class="form-control" id="ccyear">
|
||||
<option>2014</option>
|
||||
<option>2015</option>
|
||||
<option>2016</option>
|
||||
<option>2017</option>
|
||||
<option>2018</option>
|
||||
<option>2019</option>
|
||||
<option>2020</option>
|
||||
<option>2021</option>
|
||||
<option>2022</option>
|
||||
<option>2023</option>
|
||||
<option>2024</option>
|
||||
<option>2025</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="form-group">
|
||||
<label for="cvv">CVV/CVC</label>
|
||||
<input type="text" class="form-control" id="cvv" placeholder="123">
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Company</strong>
|
||||
<small>Form</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="form-group">
|
||||
<label for="company">Company</label>
|
||||
<input type="text" class="form-control" id="company" placeholder="Enter your company name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="vat">VAT</label>
|
||||
<input type="text" class="form-control" id="vat" placeholder="PL1234567890">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="street">Street</label>
|
||||
<input type="text" class="form-control" id="street" placeholder="Enter street name">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-sm-8">
|
||||
<label for="city">City</label>
|
||||
<input type="text" class="form-control" id="city" placeholder="Enter your city">
|
||||
</div>
|
||||
<div class="form-group col-sm-4">
|
||||
<label for="postal-code">Postal Code</label>
|
||||
<input type="text" class="form-control" id="postal-code" placeholder="Postal Code">
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
<div class="form-group">
|
||||
<label for="country">Country</label>
|
||||
<input type="text" class="form-control" id="country" placeholder="Country name">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Basic Form</strong> Elements
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">Static</label>
|
||||
<div class="col-md-9">
|
||||
<p class="form-control-static">Username</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="text-input">Text Input</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="text-input" name="text-input" class="form-control" placeholder="Text">
|
||||
<span class="help-block">This is a help text</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="email-input">Email Input</label>
|
||||
<div class="col-md-9">
|
||||
<input type="email" id="email-input" name="email-input" class="form-control" placeholder="Enter Email">
|
||||
<span class="help-block">Please enter your email</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="password-input">Password</label>
|
||||
<div class="col-md-9">
|
||||
<input type="password" id="password-input" name="password-input" class="form-control" placeholder="Password">
|
||||
<span class="help-block">Please enter a complex password</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="disabled-input">Disabled Input</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="disabled-input" name="disabled-input" class="form-control" placeholder="Disabled" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="textarea-input">Textarea</label>
|
||||
<div class="col-md-9">
|
||||
<textarea id="textarea-input" name="textarea-input" rows="9" class="form-control" placeholder="Content.."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="select">Select</label>
|
||||
<div class="col-md-9">
|
||||
<select id="select" name="select" class="form-control">
|
||||
<option value="0">Please select</option>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="select">Select Large</label>
|
||||
<div class="col-md-9">
|
||||
<select id="select" name="select" class="form-control form-control-lg">
|
||||
<option value="0">Please select</option>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="select">Select Small</label>
|
||||
<div class="col-md-9">
|
||||
<select id="select" name="select" class="form-control form-control-sm">
|
||||
<option value="0">Please select</option>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="select">Disabled Select</label>
|
||||
<div class="col-md-9">
|
||||
<select id="disabledSelect" class="form-control" disabled>
|
||||
<option value="0">Please select</option>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="multiple-select">Multiple select</label>
|
||||
<div class="col-md-9">
|
||||
<select id="multiple-select" name="multiple-select" class="form-control" size="5" multiple>
|
||||
<option value="1">Option #1</option>
|
||||
<option value="2">Option #2</option>
|
||||
<option value="3">Option #3</option>
|
||||
<option value="4">Option #4</option>
|
||||
<option value="5">Option #5</option>
|
||||
<option value="6">Option #6</option>
|
||||
<option value="7">Option #7</option>
|
||||
<option value="8">Option #8</option>
|
||||
<option value="9">Option #9</option>
|
||||
<option value="10">Option #10</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">Radios</label>
|
||||
<div class="col-md-9">
|
||||
<div class="radio">
|
||||
<label for="radio1">
|
||||
<input type="radio" id="radio1" name="radios" value="option1"> Option 1
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label for="radio2">
|
||||
<input type="radio" id="radio2" name="radios" value="option2"> Option 2
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label for="radio3">
|
||||
<input type="radio" id="radio3" name="radios" value="option3"> Option 3
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">Inline Radios</label>
|
||||
<div class="col-md-9">
|
||||
<label class="radio-inline" for="inline-radio1">
|
||||
<input type="radio" id="inline-radio1" name="inline-radios" value="option1"> One
|
||||
</label>
|
||||
<label class="radio-inline" for="inline-radio2">
|
||||
<input type="radio" id="inline-radio2" name="inline-radios" value="option2"> Two
|
||||
</label>
|
||||
<label class="radio-inline" for="inline-radio3">
|
||||
<input type="radio" id="inline-radio3" name="inline-radios" value="option3"> Three
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">Checkboxes</label>
|
||||
<div class="col-md-9">
|
||||
<div class="checkbox">
|
||||
<label for="checkbox1">
|
||||
<input type="checkbox" id="checkbox1" name="checkbox1" value="option1"> Option 1
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label for="checkbox2">
|
||||
<input type="checkbox" id="checkbox2" name="checkbox2" value="option2"> Option 2
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label for="checkbox3">
|
||||
<input type="checkbox" id="checkbox3" name="checkbox3" value="option3"> Option 3
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label">Inline Checkboxes</label>
|
||||
<div class="col-md-9">
|
||||
<label class="checkbox-inline" for="inline-checkbox1">
|
||||
<input type="checkbox" id="inline-checkbox1" name="inline-checkbox1" value="option1">One
|
||||
</label>
|
||||
<label class="checkbox-inline" for="inline-checkbox2">
|
||||
<input type="checkbox" id="inline-checkbox2" name="inline-checkbox2" value="option2">Two
|
||||
</label>
|
||||
<label class="checkbox-inline" for="inline-checkbox3">
|
||||
<input type="checkbox" id="inline-checkbox3" name="inline-checkbox3" value="option3">Three
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="file-input">File input</label>
|
||||
<div class="col-md-9">
|
||||
<input type="file" id="file-input" name="file-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="file-multiple-input">Multiple File input</label>
|
||||
<div class="col-md-9">
|
||||
<input type="file" id="file-multiple-input" name="file-multiple-input" multiple>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Inline</strong> Form
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-inline">
|
||||
<div class="form-group">
|
||||
<label class="sr-only" for="if-email">Email</label>
|
||||
<input type="email" id="if-email" name="if-email" class="form-control" placeholder="Enter Email..">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="sr-only" for="if-password">Password</label>
|
||||
<input type="password" id="if-password" name="if-password" class="form-control" placeholder="Enter Password..">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Horizontal</strong> Form
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="hf-email">Email</label>
|
||||
<div class="col-md-9">
|
||||
<input type="email" id="hf-email" name="hf-email" class="form-control" placeholder="Enter Email..">
|
||||
<span class="help-block">Please enter your email</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="hf-password">Password</label>
|
||||
<div class="col-md-9">
|
||||
<input type="password" id="hf-password" name="hf-password" class="form-control" placeholder="Enter Password..">
|
||||
<span class="help-block">Please enter your password</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Normal</strong> Form
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post">
|
||||
<div class="form-group">
|
||||
<label for="nf-email">Email</label>
|
||||
<input type="email" id="nf-email" name="nf-email" class="form-control" placeholder="Enter Email..">
|
||||
<span class="help-block">Please enter your email</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="nf-password">Password</label>
|
||||
<input type="password" id="nf-password" name="nf-password" class="form-control" placeholder="Enter Password..">
|
||||
<span class="help-block">Please enter your password</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Input
|
||||
<strong>Grid</strong>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-3">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-4">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-4">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-5">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-5">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-6">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-7">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-7">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-8">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-9">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-10">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-11">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-11">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-12">
|
||||
<input type="text" class="form-control" placeholder=".col-sm-12">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-user"></i> Login</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Input
|
||||
<strong>Sizes</strong>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-5 form-control-label" for="input-small">Small Input</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" id="input-small" name="input-small" class="form-control form-control-sm" placeholder=".form-control-sm">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-5 form-control-label" for="input-normal">Normal Input</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" id="input-normal" name="input-normal" class="form-control" placeholder="Normal">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-5 form-control-label" for="input-large">Large Input</label>
|
||||
<div class="col-sm-6">
|
||||
<input type="text" id="input-large" name="input-large" class="form-control form-control-lg" placeholder=".form-control-lg">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Validation states</strong> Form
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="form-group has-success">
|
||||
<label class="form-form-control-label" for="inputSuccess1">Input with success</label>
|
||||
<input type="text" class="form-control" id="inputSuccess1">
|
||||
</div>
|
||||
<div class="form-group has-warning">
|
||||
<label class="form-form-control-label" for="inputWarning1">Input with warning</label>
|
||||
<input type="text" class="form-control" id="inputWarning1">
|
||||
</div>
|
||||
<div class="form-group has-danger">
|
||||
<label class="form-form-control-label" for="inputError1">Input with error</label>
|
||||
<input type="text" class="form-control" id="inputError1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Validation states</strong> with optional icons
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="form-group has-success">
|
||||
<label class="form-form-control-label" for="inputSuccess2">Input with success</label>
|
||||
<input type="text" class="form-control form-control-success" id="inputSuccess2">
|
||||
</div>
|
||||
<div class="form-group has-warning">
|
||||
<label class="form-form-control-label" for="inputWarning2">Input with warning</label>
|
||||
<input type="text" class="form-control form-control-warning" id="inputWarning2">
|
||||
</div>
|
||||
<div class="form-group has-danger has-feedback">
|
||||
<label class="form-form-control-label" for="inputError2">Input with error</label>
|
||||
<input type="text" class="form-control form-control-danger" id="inputError2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Icon/Text</strong> Groups
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-user"></i></span>
|
||||
<input type="text" id="input1-group1" name="input1-group1" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<input type="email" id="input2-group1" name="input2-group1" class="form-control" placeholder="Email">
|
||||
<span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-euro"></i></span>
|
||||
<input type="text" id="input3-group1" name="input3-group1" class="form-control" placeholder="..">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Buttons</strong> Groups
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
|
||||
</span>
|
||||
<input type="text" id="input1-group2" name="input1-group2" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<input type="email" id="input2-group2" name="input2-group2" class="form-control" placeholder="Email">
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-primary">Submit</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-primary"><i class="fa fa-facebook"></i></button>
|
||||
</span>
|
||||
<input type="text" id="input3-group2" name="input3-group2" class="form-control" placeholder="Search">
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-primary"><i class="fa fa-twitter"></i></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Dropdowns</strong> Groups
|
||||
</div>
|
||||
<div class="card-block">
|
||||
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn" dropdown>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" dropdownToggle>Action
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<div class="dropdown-menu" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" id="input1-group3" name="input1-group3" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<input type="email" id="input2-group3" name="input2-group3" class="form-control" placeholder="Email">
|
||||
<div class="input-group-btn" dropdown>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" dropdownToggle>Action
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<div class="dropdown-menu" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn" dropdown>
|
||||
<button type="button" class="btn btn-primary">Action</button>
|
||||
<button type="button" dropdownToggle class="btn btn-primary dropdown-toggle dropdown-toggle-split">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Split button!</span>
|
||||
</button>
|
||||
<div class="dropdown-menu" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" id="input3-group3" name="input3-group3" class="form-control" placeholder="..">
|
||||
<div class="input-group-btn" dropdown>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" dropdownToggle>Action
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<div class="dropdown-menu" *dropdownMenu>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Use the grid for big devices!
|
||||
<small>
|
||||
<code>.col-lg-*</code>
|
||||
<code>.col-md-*</code>
|
||||
<code>.col-sm-*</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-md-8">
|
||||
<input type="text" class="form-control" placeholder=".col-md-8">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="text" class="form-control" placeholder=".col-md-4">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-7">
|
||||
<input type="text" class="form-control" placeholder=".col-md-7">
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<input type="text" class="form-control" placeholder=".col-md-5">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-6">
|
||||
<input type="text" class="form-control" placeholder=".col-md-6">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<input type="text" class="form-control" placeholder=".col-md-6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-5">
|
||||
<input type="text" class="form-control" placeholder=".col-md-5">
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<input type="text" class="form-control" placeholder=".col-md-7">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-4">
|
||||
<input type="text" class="form-control" placeholder=".col-md-4">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<input type="text" class="form-control" placeholder=".col-md-8">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-danger">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-warning">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-info">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-success">Action</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Input Grid for small devices!
|
||||
<small>
|
||||
<code>.col-*</code>
|
||||
</small>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post" class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<div class="col-4">
|
||||
<input type="text" class="form-control" placeholder=".col-4">
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<input type="text" class="form-control" placeholder=".col-8">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-5">
|
||||
<input type="text" class="form-control" placeholder=".col-5">
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<input type="text" class="form-control" placeholder=".col-7">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-6">
|
||||
<input type="text" class="form-control" placeholder=".col-6">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<input type="text" class="form-control" placeholder=".col-6">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-7">
|
||||
<input type="text" class="form-control" placeholder=".col-5">
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<input type="text" class="form-control" placeholder=".col-5">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-8">
|
||||
<input type="text" class="form-control" placeholder=".col-8">
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<input type="text" class="form-control" placeholder=".col-4">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-sm btn-primary">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-danger">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-warning">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-info">Action</button>
|
||||
<button type="button" class="btn btn-sm btn-success">Action</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Example Form
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">Username</span>
|
||||
<input type="text" id="username3" name="username3" class="form-control">
|
||||
<span class="input-group-addon"><i class="fa fa-user"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">Email</span>
|
||||
<input type="email" id="email3" name="email3" class="form-control">
|
||||
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">Password</span>
|
||||
<input type="password" id="password3" name="password3" class="form-control">
|
||||
<span class="input-group-addon"><i class="fa fa-asterisk"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group form-actions">
|
||||
<button type="submit" class="btn btn-sm btn-primary">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Example Form
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input type="text" id="username2" name="username2" class="form-control" placeholder="Username">
|
||||
<span class="input-group-addon"><i class="fa fa-user"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input type="email" id="email2" name="email2" class="form-control" placeholder="Email">
|
||||
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input type="password" id="password2" name="password2" class="form-control" placeholder="Password">
|
||||
<span class="input-group-addon"><i class="fa fa-asterisk"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group form-actions">
|
||||
<button type="submit" class="btn btn-sm btn-default">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Example Form
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form action="" method="post">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-user"></i></span>
|
||||
<input type="text" id="username" name="username" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
|
||||
<input type="email" id="email" name="email" class="form-control" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-asterisk"></i></span>
|
||||
<input type="password" id="password" name="password" class="form-control" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group form-actions">
|
||||
<button type="submit" class="btn btn-sm btn-success">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-edit"></i>Form Elements
|
||||
<div class="card-actions">
|
||||
<a href="#" class="btn-setting"><i class="icon-settings"></i></a>
|
||||
<a href="#" class="btn-minimize"><i class="icon-arrow-up"></i></a>
|
||||
<a href="#" class="btn-close"><i class="icon-close"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<form class="form-2orizontal">
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="prependedInput">Prepended text</label>
|
||||
<div class="controls">
|
||||
<div class="input-prepend input-group">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input id="prependedInput" class="form-control" size="16" type="text">
|
||||
</div>
|
||||
<p class="help-block">Here's some help text</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="appendedInput">Appended text</label>
|
||||
<div class="controls">
|
||||
<div class="input-group">
|
||||
<input id="appendedInput" class="form-control" size="16" type="text">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
<span class="help-block">Here's more help text</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="appendedPrependedInput">Append and prepend</label>
|
||||
<div class="controls">
|
||||
<div class="input-prepend input-group">
|
||||
<span class="input-group-addon">$</span>
|
||||
<input id="appendedPrependedInput" class="form-control" size="16" type="text">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="appendedInputButton">Append with button</label>
|
||||
<div class="controls">
|
||||
<div class="input-group">
|
||||
<input id="appendedInputButton" class="form-control" size="16" type="text">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">Go!</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label" for="appendedInputButtons">Two-button append</label>
|
||||
<div class="controls">
|
||||
<div class="input-group">
|
||||
<input id="appendedInputButtons" size="16" class="form-control" type="text">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">Search</button>
|
||||
<button class="btn btn-default" type="button">Options</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save changes</button>
|
||||
<button class="btn btn-default" type="button">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'forms.component.html'
|
||||
})
|
||||
export class FormsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
|
|
@ -1,202 +0,0 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Bootstrap Modals
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-secondary" data-toggle="modal" (click)="myModal.show()">
|
||||
Launch demo modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="modal" (click)="largeModal.show()">
|
||||
Launch large modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="modal" (click)="smallModal.show()">
|
||||
Launch small modal
|
||||
</button>
|
||||
<hr>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" (click)="primaryModal.show()">
|
||||
Primary modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-success" data-toggle="modal" (click)="successModal.show()">
|
||||
Success modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning" data-toggle="modal" (click)="warningModal.show()">
|
||||
Warning modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger" data-toggle="modal" (click)="dangerModal.show()">
|
||||
Danger modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-info" data-toggle="modal" (click)="infoModal.show()">
|
||||
Info modal
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
|
||||
<div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="myModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="myModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
<div bsModal #largeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="largeModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="largeModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
<div bsModal #smallModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="smallModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="smallModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
|
||||
<div bsModal #primaryModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-primary" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="primaryModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="primaryModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
|
||||
<div bsModal #successModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-success" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="successModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="successModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
|
||||
<div bsModal #warningModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-warning" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="warningModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="warningModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
<div bsModal #dangerModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-danger" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="dangerModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="dangerModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
<div bsModal #infoModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-info" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
<button type="button" class="close" (click)="infoModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" (click)="infoModal.hide()">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import { Component, ViewChild } from '@angular/core';
|
||||
import { ModalDirective } from 'ngx-bootstrap/modal/modal.component';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'modals.component.html'
|
||||
})
|
||||
export class ModalsComponent {
|
||||
public myModal;
|
||||
public largeModal;
|
||||
public smallModal;
|
||||
public primaryModal;
|
||||
public successModal;
|
||||
public warningModal;
|
||||
public dangerModal;
|
||||
public infoModal;
|
||||
}
|
||||
|
|
@ -1,788 +0,0 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Social Media Button</strong>
|
||||
<small>Usage ex.</small>
|
||||
<code style="text-transform:lowercase"><button class="btn btn-facebook" type="button"><span>Facebook</span></button></code>
|
||||
<div class="card-actions">
|
||||
<a href="#" class="btn-setting"><i class="icon-settings"></i></a>
|
||||
<button class="btn-minimize" type="button" data-toggle="collapse" data-target="" aria-expanded="false" aria-controls="collapseExample">
|
||||
<i class="icon-arrow-up"></i>
|
||||
</button>
|
||||
<a href="#" class="btn-close"><i class="icon-close"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<h6>Size Small
|
||||
<small>Add this class
|
||||
<code>.btn-sm</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-facebook" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-twitter" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-linkedin" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-flickr" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-tumblr" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-xing" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-github" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-html5" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-openid" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-stack-overflow" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-css3" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-youtube" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dribbble" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-google-plus" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-instagram" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-pinterest" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vk" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-yahoo" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-behance" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dropbox" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-reddit" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-spotify" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vine" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-foursquare" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vimeo" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-facebook" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-twitter" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-linkedin" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-flickr" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-tumblr" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-xing" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-github" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-html5" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-openid" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-stack-overflow" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-css3" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-youtube" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dribbble" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-google-plus" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-instagram" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-pinterest" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vk" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-yahoo" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-behance" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dropbox" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-reddit" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-spotify" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vine" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-foursquare" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vimeo" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Large
|
||||
<small>Add this class
|
||||
<code>.btn-lg</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-facebook" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-twitter" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-linkedin" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-flickr" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-tumblr" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-xing" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-github" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-html5" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-openid" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-stack-overflow" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-css3" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-youtube" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dribbble" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-google-plus" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-instagram" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-pinterest" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vk" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-yahoo" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-behance" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dropbox" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-reddit" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-spotify" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vine" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-foursquare" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vimeo" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Social Media Button</strong>
|
||||
<small>Only icons. Usage ex.</small>
|
||||
<code style="text-transform:lowercase"><button class="btn btn-facebook icon" type="button"><span>Facebook</span></button></code>
|
||||
<div class="card-actions">
|
||||
<a href="#" class="btn-setting"><i class="icon-settings"></i></a>
|
||||
<button class="btn-minimize" type="button" data-toggle="collapse" data-target="" aria-expanded="false" aria-controls="collapseExample">
|
||||
<i class="icon-arrow-up"></i>
|
||||
</button>
|
||||
<a href="#" class="btn-close"><i class="icon-close"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<h6>Size Small
|
||||
<small>Add this class
|
||||
<code>.btn-sm</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-facebook icon" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-twitter icon" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-linkedin icon" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-flickr icon" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-tumblr icon" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-xing icon" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-github icon" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-html5 icon" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-openid icon" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-stack-overflow icon" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-css3 icon" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-youtube icon" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dribbble icon" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-google-plus icon" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-instagram icon" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-pinterest icon" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vk icon" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-yahoo icon" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-behance icon" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dropbox icon" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-reddit icon" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-spotify icon" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vine icon" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-foursquare icon" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vimeo icon" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-facebook icon" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-twitter icon" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-linkedin icon" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-flickr icon" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-tumblr icon" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-xing icon" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-github icon" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-html5 icon" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-openid icon" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-stack-overflow icon" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-css3 icon" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-youtube icon" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dribbble icon" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-google-plus icon" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-instagram icon" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-pinterest icon" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vk icon" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-yahoo icon" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-behance icon" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dropbox icon" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-reddit icon" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-spotify icon" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vine icon" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-foursquare icon" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vimeo icon" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Large
|
||||
<small>Add this class
|
||||
<code>.btn-lg</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-facebook icon" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-twitter icon" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-linkedin icon" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-flickr icon" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-tumblr icon" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-xing icon" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-github icon" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-html5 icon" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-openid icon" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-stack-overflow icon" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-css3 icon" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-youtube icon" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dribbble icon" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-google-plus icon" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-instagram icon" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-pinterest icon" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vk icon" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-yahoo icon" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-behance icon" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dropbox icon" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-reddit icon" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-spotify icon" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vine icon" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-foursquare icon" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vimeo icon" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<strong>Social Media Button</strong>
|
||||
<small>Only text. Usage ex.</small>
|
||||
<code style="text-transform:lowercase"><button class="btn btn-facebook text" type="button"><span>Facebook</span></button></code>
|
||||
<div class="card-actions">
|
||||
<a href="#" class="btn-setting"><i class="icon-settings"></i></a>
|
||||
<button class="btn-minimize" type="button" data-toggle="collapse" data-target="" aria-expanded="false" aria-controls="collapseExample">
|
||||
<i class="icon-arrow-up"></i>
|
||||
</button>
|
||||
<a href="#" class="btn-close"><i class="icon-close"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<h6>Size Small
|
||||
<small>Add this class
|
||||
<code>.btn-sm</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-facebook text" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-twitter text" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-linkedin text" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-flickr text" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-tumblr text" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-xing text" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-github text" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-html5 text" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-openid text" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-stack-overflow text" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-css3 text" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-youtube text" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dribbble text" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-google-plus text" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-instagram text" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-pinterest text" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vk text" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-yahoo text" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-behance text" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-dropbox text" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-reddit text" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-spotify text" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vine text" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-foursquare text" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-sm btn-vimeo text" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-facebook text" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-twitter text" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-linkedin text" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-flickr text" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-tumblr text" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-xing text" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-github text" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-html5 text" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-openid text" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-stack-overflow text" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-css3 text" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-youtube text" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dribbble text" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-google-plus text" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-instagram text" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-pinterest text" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vk text" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-yahoo text" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-behance text" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-dropbox text" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-reddit text" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-spotify text" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vine text" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-foursquare text" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-vimeo text" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
<h6>Size Large
|
||||
<small>Add this class
|
||||
<code>.btn-lg</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-facebook text" type="button">
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-twitter text" type="button">
|
||||
<span>Twitter</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-linkedin text" type="button">
|
||||
<span>LinkedIn</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-flickr text" type="button">
|
||||
<span>Flickr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-tumblr text" type="button">
|
||||
<span>Tumblr</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-xing text" type="button">
|
||||
<span>Xing</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-github text" type="button">
|
||||
<span>Github</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-html5 text" type="button">
|
||||
<span>HTML5</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-openid text" type="button">
|
||||
<span>OpenID</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-stack-overflow text" type="button">
|
||||
<span>StackOverflow</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-css3 text" type="button">
|
||||
<span>CSS3</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-youtube text" type="button">
|
||||
<span>YouTube</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dribbble text" type="button">
|
||||
<span>Dribbble</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-google-plus text" type="button">
|
||||
<span>Google+</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-instagram text" type="button">
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-pinterest text" type="button">
|
||||
<span>Pinterest</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vk text" type="button">
|
||||
<span>VK</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-yahoo text" type="button">
|
||||
<span>Yahoo</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-behance text" type="button">
|
||||
<span>Behance</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-dropbox text" type="button">
|
||||
<span>Dropbox</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-reddit text" type="button">
|
||||
<span>Reddit</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-spotify text" type="button">
|
||||
<span>Spotify</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vine text" type="button">
|
||||
<span>Vine</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-foursquare text" type="button">
|
||||
<span>Forsquare</span>
|
||||
</button>
|
||||
<button style="margin-bottom: 4px" class="btn btn-lg btn-vimeo text" type="button">
|
||||
<span>Vimeo</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'social-buttons.component.html'
|
||||
})
|
||||
export class SocialButtonsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
|
|
@ -1,942 +0,0 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
3d Switch
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-3d switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch default
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch default - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-pill switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch outline - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-pill switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch outline alternative
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch outline alternative - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-default switch-pill switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-default switch-pill switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-pill switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text outline - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-pill switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text outline alternative
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with text outline alternative - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-text switch-pill switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-text switch-pill switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-pill switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-secondary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-success">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-warning">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-info">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-danger">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon outline
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon outline - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-pill switch-primary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-secondary-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-success-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-warning-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-info-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-danger-outline">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon outline alternative
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Switch with icon outline alternative - pills
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<label class="switch switch-icon switch-pill switch-primary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-secondary-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-success-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-warning-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-info-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
|
||||
<label class="switch switch-icon switch-pill switch-danger-outline-alt">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Sizes
|
||||
</div>
|
||||
<div class="card-block p-0">
|
||||
<table class="table table-hover table-striped table-align-middle mb-0">
|
||||
<thead>
|
||||
<th>Size</th>
|
||||
<th>Example</th>
|
||||
<th>CSS Class</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Large
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch switch-lg switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
Add following class
|
||||
<code>.switch-lg</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Normal
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
-
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Small
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch switch-sm switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
Add following class
|
||||
<code>.switch-sm</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Extra small
|
||||
</td>
|
||||
<td>
|
||||
<label class="switch switch-xs switch-3d switch-primary">
|
||||
<input type="checkbox" class="switch-input" checked>
|
||||
<span class="switch-label"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
Add following class
|
||||
<code>.switch-sm</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'switches.component.html'
|
||||
})
|
||||
export class SwitchesComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
|
|
@ -1,373 +0,0 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Simple Table
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Samppa Nori</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Estavan Lykos</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Chetan Mohamed</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-default">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Derick Maximinus</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Friderik Dávid</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Striped Table
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Yiorgos Avraamu</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Avram Tarasios</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quintin Ed</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-default">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Enéas Kwadwo</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Agapetus Tadeáš</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Condensed Table
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Carwyn Fachtna</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nehemiah Tatius</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebbe Gemariah</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-default">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Eustorgios Amulius</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Leopold Gáspár</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Bordered Table
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Pompeius René</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paĉjo Jadon</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Micheal Mercurius</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-default">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ganesha Dubhghall</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hiroto Šimun</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-align-justify"></i> Combined All Table
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<table class="table table-bordered table-striped table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Vishnu Serghei</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zbyněk Phoibos</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Einar Randall</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-default">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Félix Troels</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Aulus Agmundr</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.col-->
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'tables.component.html'
|
||||
})
|
||||
export class TablesComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<!-- Nav tabs -->
|
||||
<tabset>
|
||||
<tab heading="Home">
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab heading="Profile">
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab heading="Messages">
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
</tabset>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6 mb-4">
|
||||
<!-- Nav tabs -->
|
||||
<tabset>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-calculator"></i></ng-template>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-basket-loaded"></i></ng-template>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-pie-chart"></i></ng-template>
|
||||
4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
</tabset>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6 mb-4">
|
||||
<!-- Nav tabs -->
|
||||
<tabset>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-calculator"></i> Calculator</ng-template>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-basket-loaded"></i> Shoping cart</ng-template>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-pie-chart"></i> Charts</ng-template>
|
||||
4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
</tabset>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6 mb-4">
|
||||
<!-- Nav tabs -->
|
||||
<tabset>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-list"></i> Menu <span class="badge badge-success">New</span></ng-template>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-calculator"></i> Calculator <span class="badge badge-pill badge-danger">29</span></ng-template>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
<tab>
|
||||
<ng-template tabHeading><i class="icon-pie-chart"></i> Charts</ng-template>
|
||||
4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</tab>
|
||||
</tabset>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'tabs.component.html'
|
||||
})
|
||||
export class TabsComponent {
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
|
|
@ -70,30 +70,6 @@
|
|||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/add-data']"><i class="icon-puzzle"></i> Add Data</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/buttons']"><i class="icon-puzzle"></i> Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/social-buttons']"><i class="icon-puzzle"></i> Social Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/cards']"><i class="icon-puzzle"></i> Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/forms']"><i class="icon-puzzle"></i> Forms</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/modals']"><i class="icon-puzzle"></i> Modals</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/switches']"><i class="icon-puzzle"></i> Switches</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/tables']"><i class="icon-puzzle"></i> Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/tabs']"><i class="icon-puzzle"></i> Tabs</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item nav-dropdown" routerLinkActive="open" appNavDropdown>
|
||||
|
|
|
|||
Reference in a new issue