File size: 22.83Kb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flat UI Free</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Loading Bootstrap -->
<link href="../../dist/css/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Loading Flat UI -->
<link href="../../dist/css/flat-ui.css" rel="stylesheet">
<link rel="shortcut icon" href="../../dist/img/favicon.ico">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="../../dist/js/vendor/html5shiv.js"></script>
<script src="../../dist/js/vendor/respond.min.js"></script>
<![endif]-->
</head>
<body>
<style>
body {
padding-bottom: 200px;
}
</style>
<div class="container">
<h4>Buttons</h4>
<div class="row">
<div class="col-md-12">
<p>
<!-- Standard gray button with gradient -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
<button type="button" class="btn btn-primary btn-hg">Huge button</button>
<button type="button" class="btn btn-default btn-hg">Huge button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
<a class="btn btn-default" href="#">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
</p>
</div>
</div>
<h4>Button Groups</h4>
<div class="row">
<div class="col-md-12">
<p>
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default" type="button">1</button>
<button class="btn btn-default" type="button">2</button>
<button class="btn btn-default" type="button">3</button>
<button class="btn btn-default" type="button">4</button>
</div>
<div class="btn-group">
<button class="btn btn-default" type="button">5</button>
<button class="btn btn-default" type="button">6</button>
<button class="btn btn-default" type="button">7</button>
</div>
<div class="btn-group">
<button class="btn btn-default" type="button">8</button>
</div>
</div>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
<div class="btn-toolbar">
<div class="btn-group btn-group-lg">
<button class="btn btn-default" type="button">Left</button>
<button class="btn btn-default" type="button">Middle</button>
<button class="btn btn-default" type="button">Right</button>
</div>
</div>
</p>
<p>
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default" type="button">Left</button>
<button class="btn btn-default" type="button">Middle</button>
<button class="btn btn-default" type="button">Right</button>
</div>
</div>
</p>
<p>
<div class="btn-toolbar">
<div class="btn-group btn-group-sm">
<button class="btn btn-default" type="button">Left</button>
<button class="btn btn-default" type="button">Middle</button>
<button class="btn btn-default" type="button">Right</button>
</div>
</div>
</p>
<p>
<div class="btn-toolbar">
<div class="btn-group btn-group-xs">
<button class="btn btn-default" type="button">Left</button>
<button class="btn btn-default" type="button">Middle</button>
<button class="btn btn-default" type="button">Right</button>
</div>
</div>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
<div class="btn-group">
<button class="btn btn-default" type="button">1</button>
<button class="btn btn-default" type="button">2</button>
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" id="btnGroupDrop1">
Dropdown
<span class="caret"></span>
</button>
<ul aria-labelledby="btnGroupDrop1" role="menu" class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
<div class="btn-group-vertical">
<button class="btn btn-default" type="button">Button</button>
<button class="btn btn-default" type="button">Button</button>
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" id="btnGroupVerticalDrop1">
Dropdown
<span class="caret"></span>
</button>
<ul aria-labelledby="btnGroupVerticalDrop1" role="menu" class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<button class="btn btn-default" type="button">Button</button>
<button class="btn btn-default" type="button">Button</button>
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" id="btnGroupVerticalDrop2">
Dropdown
<span class="caret"></span>
</button>
<ul aria-labelledby="btnGroupVerticalDrop2" role="menu" class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" id="btnGroupVerticalDrop3">
Dropdown
<span class="caret"></span>
</button>
<ul aria-labelledby="btnGroupVerticalDrop3" role="menu" class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" id="btnGroupVerticalDrop4">
Dropdown
<span class="caret"></span>
</button>
<ul aria-labelledby="btnGroupVerticalDrop4" role="menu" class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
<div class="btn-group btn-group-justified">
<a class="btn btn-default" href="#">Left</a>
<a class="btn btn-default" href="#">Middle</a>
<a class="btn btn-default" href="#">Right</a>
</div>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
<div class="btn-toolbar">
<div class="btn-group">
<a href="#fakelink" class="btn btn-primary"><i class="fui-list-columned"></i></a>
<a href="#fakelink" class="btn btn-primary"><i class="fui-list-numbered"></i></a>
<a href="#fakelink" class="btn btn-primary active"><i class="fui-list-thumbnailed"></i></a>
<a href="#fakelink" class="btn btn-primary"><i class="fui-list-small-thumbnails"></i></a>
</div>
</div>
</p>
</div>
</div>
<h4>Button dropdowns</h4>
<div class="row">
<div class="col-md-12">
<p>
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">Default <span class="caret"></span></button>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button">Primary <span class="caret"></span></button>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-success dropdown-toggle" type="button">Success <span class="caret"></span></button>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-info dropdown-toggle" type="button">Info <span class="caret"></span></button>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-warning dropdown-toggle" type="button">Warning <span class="caret"></span></button>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-danger dropdown-toggle" type="button">Danger <span class="caret"></span></button>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
<div class="btn-group">
<button class="btn btn-default" type="button">Default</button>
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button"><span class="caret"></span></button>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-primary" type="button">Primary</button>
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button"><span class="caret"></span></button>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-success" type="button">Success</button>
<button data-toggle="dropdown" class="btn btn-success dropdown-toggle" type="button"><span class="caret"></span></button>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-info" type="button">Info</button>
<button data-toggle="dropdown" class="btn btn-info dropdown-toggle" type="button"><span class="caret"></span></button>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-warning" type="button">Warning</button>
<button data-toggle="dropdown" class="btn btn-warning dropdown-toggle" type="button"><span class="caret"></span></button>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-danger" type="button">Danger</button>
<button data-toggle="dropdown" class="btn btn-danger dropdown-toggle" type="button"><span class="caret"></span></button>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
<div class="btn-toolbar">
<div class="btn-group">
<button data-toggle="dropdown" type="button" class="btn btn-default btn-hg dropdown-toggle">
Huge button <span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</p>
<p>
<div class="btn-toolbar">
<div class="btn-group">
<button data-toggle="dropdown" type="button" class="btn btn-default btn-lg dropdown-toggle">
Large button <span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</p>
<p>
<div class="btn-toolbar">
<div class="btn-group">
<button data-toggle="dropdown" type="button" class="btn btn-default btn-sm dropdown-toggle">
Small button <span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</p>
<p>
<div class="btn-toolbar">
<div class="btn-group">
<button data-toggle="dropdown" type="button" class="btn btn-default btn-xs dropdown-toggle">
Extra small button <span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
<div class="btn-toolbar">
<div class="btn-group dropup">
<button class="btn btn-default" type="button">Dropup</button>
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button"><span class="caret"></span></button>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button class="btn btn-primary" type="button">Right dropup</button>
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button"><span class="caret"></span></button>
<ul role="menu" class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div>
</p>
</div>
</div>
</div>
<!-- /.container -->
</body>
</html>