You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1306 lines
60 KiB
1306 lines
60 KiB
<!--内容开始-->
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">
|
|
<i class="fas fa-edit"></i>
|
|
Buttons
|
|
</h3>
|
|
</div>
|
|
<div class="card-body pad table-responsive">
|
|
<p>Various types of buttons. Using the base class <code>.btn</code></p>
|
|
<table class="table table-bordered text-center">
|
|
<tr>
|
|
<th>Normal</th>
|
|
<th>Large <code>.btn-lg</code></th>
|
|
<th>Small <code>.btn-sm</code></th>
|
|
<th>Extra Small <code>.btn-xs</code></th>
|
|
<th>Flat <code>.btn-flat</code></th>
|
|
<th>Disabled <code>.disabled</code></th>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default">Default</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-lg">Default</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm">Default</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-xs">Default</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-flat">Default</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default disabled">Default</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-primary">Primary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-primary btn-lg">Primary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-primary btn-sm">Primary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-primary btn-xs">Primary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-primary btn-flat">Primary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-primary disabled">Primary</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-secondary">Secondary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-secondary btn-lg">Secondary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-secondary btn-sm">Secondary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-secondary btn-xs">Secondary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-secondary btn-flat">Secondary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-secondary disabled">Secondary</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-success">Success</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-success btn-lg">Success</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-success btn-sm">Success</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-success btn-xs">Success</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-success btn-flat">Success</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-success disabled">Success</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-info">Info</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-info btn-lg">Info</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-info btn-sm">Info</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-info btn-xs">Info</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-info btn-flat">Info</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-info disabled">Info</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-danger">Danger</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-danger btn-lg">Danger</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-danger btn-sm">Danger</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-danger btn-xs">Danger</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-danger btn-flat">Danger</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-danger disabled">Danger</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-warning">Warning</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-warning btn-lg">Warning</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-warning btn-sm">Warning</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-warning btn-xs">Warning</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-warning btn-flat">Warning</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-warning disabled">Warning</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
</div>
|
|
<!-- /.col -->
|
|
</div>
|
|
<!-- ./row -->
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">
|
|
<i class="fas fa-edit"></i>
|
|
Outline Buttons
|
|
</h3>
|
|
</div>
|
|
<div class="card-body pad table-responsive">
|
|
<p>Various types of buttons. Using the base class <code>.btn</code></p>
|
|
<table class="table table-bordered text-center">
|
|
<tr>
|
|
<th>Normal</th>
|
|
<th>Large <code>.btn-lg</code></th>
|
|
<th>Small <code>.btn-sm</code></th>
|
|
<th>Extra Small <code>.btn-xs</code></th>
|
|
<th>Flat <code>.btn-flat</code></th>
|
|
<th>Disabled <code>.disabled</code></th>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-primary">Primary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-primary btn-lg">Primary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-primary btn-sm">Primary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-primary btn-xs">Primary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-primary btn-flat">Primary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-primary disabled">Primary</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-secondary">Secondary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-secondary btn-lg">Secondary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-secondary btn-sm">Secondary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-secondary btn-xs">Secondary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-secondary btn-flat">Secondary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-secondary disabled">Secondary</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-success">Success</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-success btn-lg">Success</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-success btn-sm">Success</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-success btn-xs">Success</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-success btn-flat">Success</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-success disabled">Success</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-info">Info</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-info btn-lg">Info</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-info btn-sm">Info</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-info btn-xs">Info</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-info btn-flat">Info</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-info disabled">Info</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-danger">Danger</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-danger btn-lg">Danger</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-danger btn-sm">Danger</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-danger btn-xs">Danger</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-danger btn-flat">Danger</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-danger disabled">Danger</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-warning">Warning</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-warning btn-lg">Warning</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-warning btn-sm">Warning</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-warning btn-xs">Warning</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-warning btn-flat">Warning</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-outline-warning disabled">Warning</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
</div>
|
|
<!-- /.col -->
|
|
</div>
|
|
<!-- ./row -->
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">
|
|
<i class="fas fa-edit"></i>
|
|
Gradient Buttons (bg-gradient-*)
|
|
</h3>
|
|
</div>
|
|
<div class="card-body pad table-responsive">
|
|
<p>Various types of buttons. Using the base class <code>.btn</code></p>
|
|
<table class="table table-bordered text-center">
|
|
<tr>
|
|
<th>Normal</th>
|
|
<th>Large <code>.btn-lg</code></th>
|
|
<th>Small <code>.btn-sm</code></th>
|
|
<th>Extra Small <code>.btn-xs</code></th>
|
|
<th>Flat <code>.btn-flat</code></th>
|
|
<th>Disabled <code>.disabled</code></th>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-primary">Primary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-primary btn-lg">Primary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-primary btn-sm">Primary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-primary btn-xs">Primary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-primary btn-flat">Primary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-primary disabled">Primary</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-secondary">Secondary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-secondary btn-lg">Secondary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-secondary btn-sm">Secondary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-secondary btn-xs">Secondary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-secondary btn-flat">Secondary</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-secondary disabled">Secondary</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-success">Success</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-success btn-lg">Success</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-success btn-sm">Success</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-success btn-xs">Success</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-success btn-flat">Success</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-success disabled">Success</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-info">Info</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-info btn-lg">Info</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-info btn-sm">Info</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-info btn-xs">Info</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-info btn-flat">Info</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-info disabled">Info</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-danger">Danger</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-danger btn-lg">Danger</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-danger btn-sm">Danger</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-danger btn-xs">Danger</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-danger btn-flat">Danger</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-danger disabled">Danger</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-warning">Warning</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-warning btn-lg">Warning</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-warning btn-sm">Warning</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-warning btn-xs">Warning</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-warning btn-flat">Warning</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block bg-gradient-warning disabled">Warning</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
</div>
|
|
<!-- /.col -->
|
|
</div>
|
|
<!-- ./row -->
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<!-- Block buttons -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Block Buttons</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<button type="button" class="btn btn-default btn-block">.btn-block</button>
|
|
<button type="button" class="btn btn-default btn-block btn-flat">.btn-block .btn-flat</button>
|
|
<button type="button" class="btn btn-default btn-block btn-sm">.btn-block .btn-sm</button>
|
|
</div>
|
|
</div>
|
|
<!-- /.card -->
|
|
|
|
<!-- Horizontal grouping -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Horizontal Button Group</h3>
|
|
</div>
|
|
<div class="card-body table-responsive pad">
|
|
<p>
|
|
Horizontal button groups are easy to create with bootstrap. Just add your buttons
|
|
inside <code><div class="btn-group"></div></code>
|
|
</p>
|
|
|
|
<table class="table table-bordered">
|
|
<tr>
|
|
<th>Button</th>
|
|
<th>Icons</th>
|
|
<th>Flat</th>
|
|
<th>Dropdown</th>
|
|
</tr>
|
|
<!-- Default -->
|
|
<tr>
|
|
<td>
|
|
<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>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-default"><i class="fas fa-align-left"></i></button>
|
|
<button type="button" class="btn btn-default"><i class="fas fa-align-center"></i></button>
|
|
<button type="button" class="btn btn-default"><i class="fas fa-align-right"></i></button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-default btn-flat"><i class="fas fa-align-left"></i></button>
|
|
<button type="button" class="btn btn-default btn-flat"><i class="fas fa-align-center"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-default btn-flat"><i class="fas fa-align-right"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-default">1</button>
|
|
<button type="button" class="btn btn-default">2</button>
|
|
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-default dropdown-toggle dropdown-icon" data-toggle="dropdown">
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="#">Dropdown link</a>
|
|
<a class="dropdown-item" href="#">Dropdown link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- ./default -->
|
|
<!-- Info -->
|
|
<tr>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-info">Left</button>
|
|
<button type="button" class="btn btn-info">Middle</button>
|
|
<button type="button" class="btn btn-info">Right</button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-info"><i class="fas fa-align-left"></i></button>
|
|
<button type="button" class="btn btn-info"><i class="fas fa-align-center"></i></button>
|
|
<button type="button" class="btn btn-info"><i class="fas fa-align-right"></i></button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-info btn-flat"><i class="fas fa-align-left"></i></button>
|
|
<button type="button" class="btn btn-info btn-flat"><i class="fas fa-align-center"></i></button>
|
|
<button type="button" class="btn btn-info btn-flat"><i class="fas fa-align-right"></i></button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-info">1</button>
|
|
<button type="button" class="btn btn-info">2</button>
|
|
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-info dropdown-toggle dropdown-icon" data-toggle="dropdown">
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="#">Dropdown link</a>
|
|
<a class="dropdown-item" href="#">Dropdown link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- /. info -->
|
|
<!-- /.danger -->
|
|
<tr>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-danger">Left</button>
|
|
<button type="button" class="btn btn-danger">Middle</button>
|
|
<button type="button" class="btn btn-danger">Right</button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-danger"><i class="fas fa-align-left"></i></button>
|
|
<button type="button" class="btn btn-danger"><i class="fas fa-align-center"></i></button>
|
|
<button type="button" class="btn btn-danger"><i class="fas fa-align-right"></i></button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-danger btn-flat"><i class="fas fa-align-left"></i></button>
|
|
<button type="button" class="btn btn-danger btn-flat"><i class="fas fa-align-center"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-danger btn-flat"><i class="fas fa-align-right"></i></button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-danger">1</button>
|
|
<button type="button" class="btn btn-danger">2</button>
|
|
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-danger dropdown-toggle dropdown-icon" data-toggle="dropdown">
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="#">Dropdown link</a>
|
|
<a class="dropdown-item" href="#">Dropdown link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- /.danger -->
|
|
<!-- warning -->
|
|
<tr>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-warning">Left</button>
|
|
<button type="button" class="btn btn-warning">Middle</button>
|
|
<button type="button" class="btn btn-warning">Right</button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-warning"><i class="fas fa-align-left"></i></button>
|
|
<button type="button" class="btn btn-warning"><i class="fas fa-align-center"></i></button>
|
|
<button type="button" class="btn btn-warning"><i class="fas fa-align-right"></i></button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-warning btn-flat"><i class="fas fa-align-left"></i></button>
|
|
<button type="button" class="btn btn-warning btn-flat"><i class="fas fa-align-center"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-warning btn-flat"><i class="fas fa-align-right"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-warning">1</button>
|
|
<button type="button" class="btn btn-warning">2</button>
|
|
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-warning dropdown-toggle dropdown-icon" data-toggle="dropdown">
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="#">Dropdown link</a>
|
|
<a class="dropdown-item" href="#">Dropdown link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- /.warning -->
|
|
<!-- success -->
|
|
<tr>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-success">Left</button>
|
|
<button type="button" class="btn btn-success">Middle</button>
|
|
<button type="button" class="btn btn-success">Right</button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-success"><i class="fas fa-align-left"></i></button>
|
|
<button type="button" class="btn btn-success"><i class="fas fa-align-center"></i></button>
|
|
<button type="button" class="btn btn-success"><i class="fas fa-align-right"></i></button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-success btn-flat"><i class="fas fa-align-left"></i></button>
|
|
<button type="button" class="btn btn-success btn-flat"><i class="fas fa-align-center"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-success btn-flat"><i class="fas fa-align-right"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-success">1</button>
|
|
<button type="button" class="btn btn-success">2</button>
|
|
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-success dropdown-toggle dropdown-icon" data-toggle="dropdown">
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="#">Dropdown link</a>
|
|
<a class="dropdown-item" href="#">Dropdown link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- /.success -->
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!-- /.card -->
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Appended Buttons</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<strong>With dropdown</strong>
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend">
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
Action
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<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 class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</div>
|
|
<!-- /btn-group -->
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
<!-- /input-group -->
|
|
<strong>Normal</strong>
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend">
|
|
<button type="button" class="btn btn-danger">Action</button>
|
|
</div>
|
|
<!-- /btn-group -->
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
<!-- /input-group -->
|
|
<strong>Flat</strong>
|
|
<div class="input-group mb-3">
|
|
<input type="text" class="form-control rounded-0">
|
|
<span class="input-group-append">
|
|
<button type="button" class="btn btn-info btn-flat">Go!</button>
|
|
</span>
|
|
</div>
|
|
<!-- /input-group -->
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
<!-- split buttons box -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Split buttons</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Split button -->
|
|
<p class="mb-1">Normal split buttons:</p>
|
|
|
|
<div class="margin">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-default">Action</button>
|
|
<button type="button" class="btn btn-default dropdown-toggle dropdown-icon" data-toggle="dropdown">
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
<div class="dropdown-menu" role="menu">
|
|
<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 class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-info">Action</button>
|
|
<button type="button" class="btn btn-info dropdown-toggle dropdown-icon" data-toggle="dropdown">
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
<div class="dropdown-menu" role="menu">
|
|
<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 class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-danger">Action</button>
|
|
<button type="button" class="btn btn-danger dropdown-toggle dropdown-icon" data-toggle="dropdown">
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
<div class="dropdown-menu" role="menu">
|
|
<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 class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-success">Action</button>
|
|
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
<div class="dropdown-menu" role="menu">
|
|
<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 class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-warning">Action</button>
|
|
<button type="button" class="btn btn-warning dropdown-toggle dropdown-icon" data-toggle="dropdown">
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
<div class="dropdown-menu" role="menu">
|
|
<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 class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- flat split buttons -->
|
|
<p class="mt-3 mb-1">Flat split buttons:</p>
|
|
|
|
<div class="margin">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-default btn-flat">Action</button>
|
|
<button type="button" class="btn btn-default btn-flat dropdown-toggle dropdown-icon" data-toggle="dropdown">
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
<div class="dropdown-menu" role="menu">
|
|
<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 class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-info btn-flat">Action</button>
|
|
<button type="button" class="btn btn-info btn-flat dropdown-toggle dropdown-icon" data-toggle="dropdown">
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
<div class="dropdown-menu" role="menu">
|
|
<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 class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-danger btn-flat">Action</button>
|
|
<button type="button" class="btn btn-danger btn-flat dropdown-toggle dropdown-icon" data-toggle="dropdown">
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
<div class="dropdown-menu" role="menu">
|
|
<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 class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-success btn-flat">Action</button>
|
|
<button type="button" class="btn btn-success btn-flat dropdown-toggle dropdown-icon" data-toggle="dropdown">
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
<div class="dropdown-menu" role="menu">
|
|
<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 class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-warning btn-flat">Action</button>
|
|
<button type="button" class="btn btn-warning btn-flat dropdown-toggle dropdown-icon" data-toggle="dropdown">
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
<div class="dropdown-menu" role="menu">
|
|
<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 class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Split button -->
|
|
<p class="mt-3 mb-1">Hoverable split buttons:</p>
|
|
<div class="margin">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-default">Action</button>
|
|
<button type="button" class="btn btn-default dropdown-toggle dropdown-hover dropdown-icon" data-toggle="dropdown">
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
<div class="dropdown-menu" role="menu">
|
|
<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 class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-info">Action</button>
|
|
<button type="button" class="btn btn-info dropdown-toggle dropdown-hover dropdown-icon" data-toggle="dropdown">
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
<div class="dropdown-menu" role="menu">
|
|
<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 class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-danger">Action</button>
|
|
<button type="button" class="btn btn-danger dropdown-toggle dropdown-hover dropdown-icon" data-toggle="dropdown">
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
<div class="dropdown-menu" role="menu">
|
|
<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 class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-success">Action</button>
|
|
<button type="button" class="btn btn-success dropdown-toggle dropdown-hover dropdown-icon" data-toggle="dropdown">
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
<div class="dropdown-menu" role="menu">
|
|
<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 class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-warning">Action</button>
|
|
<button type="button" class="btn btn-warning dropdown-toggle dropdown-hover dropdown-icon" data-toggle="dropdown">
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
<div class="dropdown-menu" role="menu">
|
|
<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 class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- end split buttons box -->
|
|
</div>
|
|
<!-- /.col -->
|
|
<div class="col-md-6">
|
|
<!-- Application buttons -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Application Buttons</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>Add the classes <code>.btn.btn-app</code> to an <code><a></code> tag to achieve the following:</p>
|
|
<a class="btn btn-app">
|
|
<i class="fas fa-edit"></i> Edit
|
|
</a>
|
|
<a class="btn btn-app">
|
|
<i class="fas fa-play"></i> Play
|
|
</a>
|
|
<a class="btn btn-app">
|
|
<i class="fas fa-pause"></i> Pause
|
|
</a>
|
|
<a class="btn btn-app">
|
|
<i class="fas fa-save"></i> Save
|
|
</a>
|
|
<a class="btn btn-app">
|
|
<span class="badge bg-warning">3</span>
|
|
<i class="fas fa-bullhorn"></i> Notifications
|
|
</a>
|
|
<a class="btn btn-app">
|
|
<span class="badge bg-success">300</span>
|
|
<i class="fas fa-barcode"></i> Products
|
|
</a>
|
|
<a class="btn btn-app">
|
|
<span class="badge bg-purple">891</span>
|
|
<i class="fas fa-users"></i> Users
|
|
</a>
|
|
<a class="btn btn-app">
|
|
<span class="badge bg-teal">67</span>
|
|
<i class="fas fa-inbox"></i> Orders
|
|
</a>
|
|
<a class="btn btn-app">
|
|
<span class="badge bg-info">12</span>
|
|
<i class="fas fa-envelope"></i> Inbox
|
|
</a>
|
|
<a class="btn btn-app">
|
|
<span class="badge bg-danger">531</span>
|
|
<i class="fas fa-heart"></i> Likes
|
|
</a>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
|
|
<!-- Vertical grouping -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Vertical Button Group</h3>
|
|
</div>
|
|
<div class="card-body table-responsive pad">
|
|
|
|
<p>
|
|
Vertical button groups are easy to create with bootstrap. Just add your buttons
|
|
inside <code><div class="btn-group-vertical"></div></code>
|
|
</p>
|
|
|
|
<table class="table table-bordered">
|
|
<tr>
|
|
<th>Button</th>
|
|
<th>Icons</th>
|
|
<th>Flat</th>
|
|
<th>Dropdown</th>
|
|
</tr>
|
|
<!-- Default -->
|
|
<tr>
|
|
<td>
|
|
<div class="btn-group-vertical">
|
|
<button type="button" class="btn btn-default">Top</button>
|
|
<button type="button" class="btn btn-default">Middle</button>
|
|
<button type="button" class="btn btn-default">Bottom</button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group-vertical">
|
|
<button type="button" class="btn btn-default"><i class="fas fa-align-left"></i></button>
|
|
<button type="button" class="btn btn-default"><i class="fas fa-align-center"></i></button>
|
|
<button type="button" class="btn btn-default"><i class="fas fa-align-right"></i></button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group-vertical">
|
|
<button type="button" class="btn btn-default btn-flat"><i class="fas fa-align-left"></i></button>
|
|
<button type="button" class="btn btn-default btn-flat"><i class="fas fa-align-center"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-default btn-flat"><i class="fas fa-align-right"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group-vertical">
|
|
<button type="button" class="btn btn-default">1</button>
|
|
<button type="button" class="btn btn-default">2</button>
|
|
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
|
|
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- ./default -->
|
|
<!-- Info -->
|
|
<tr>
|
|
<td>
|
|
<div class="btn-group-vertical">
|
|
<button type="button" class="btn btn-info">Top</button>
|
|
<button type="button" class="btn btn-info">Middle</button>
|
|
<button type="button" class="btn btn-info">Bottom</button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group-vertical">
|
|
<button type="button" class="btn btn-info"><i class="fas fa-align-left"></i></button>
|
|
<button type="button" class="btn btn-info"><i class="fas fa-align-center"></i></button>
|
|
<button type="button" class="btn btn-info"><i class="fas fa-align-right"></i></button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group-vertical">
|
|
<button type="button" class="btn btn-info btn-flat"><i class="fas fa-align-left"></i></button>
|
|
<button type="button" class="btn btn-info btn-flat"><i class="fas fa-align-center"></i></button>
|
|
<button type="button" class="btn btn-info btn-flat"><i class="fas fa-align-right"></i></button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group-vertical">
|
|
<button type="button" class="btn btn-info">1</button>
|
|
<button type="button" class="btn btn-info">2</button>
|
|
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
|
|
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- /. info -->
|
|
<!-- /.danger -->
|
|
<tr>
|
|
<td>
|
|
<div class="btn-group-vertical">
|
|
<button type="button" class="btn btn-danger">Top</button>
|
|
<button type="button" class="btn btn-danger">Middle</button>
|
|
<button type="button" class="btn btn-danger">Bottom</button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group-vertical">
|
|
<button type="button" class="btn btn-danger"><i class="fas fa-align-left"></i></button>
|
|
<button type="button" class="btn btn-danger"><i class="fas fa-align-center"></i></button>
|
|
<button type="button" class="btn btn-danger"><i class="fas fa-align-right"></i></button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group-vertical">
|
|
<button type="button" class="btn btn-danger btn-flat"><i class="fas fa-align-left"></i></button>
|
|
<button type="button" class="btn btn-danger btn-flat"><i class="fas fa-align-center"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-danger btn-flat"><i class="fas fa-align-right"></i></button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group-vertical">
|
|
<button type="button" class="btn btn-danger">1</button>
|
|
<button type="button" class="btn btn-danger">2</button>
|
|
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
|
|
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- /.danger -->
|
|
<!-- warning -->
|
|
<tr>
|
|
<td>
|
|
<div class="btn-group-vertical">
|
|
<button type="button" class="btn btn-warning">Top</button>
|
|
<button type="button" class="btn btn-warning">Middle</button>
|
|
<button type="button" class="btn btn-warning">Bottom</button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group-vertical">
|
|
<button type="button" class="btn btn-warning"><i class="fas fa-align-left"></i></button>
|
|
<button type="button" class="btn btn-warning"><i class="fas fa-align-center"></i></button>
|
|
<button type="button" class="btn btn-warning"><i class="fas fa-align-right"></i></button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group-vertical">
|
|
<button type="button" class="btn btn-warning btn-flat"><i class="fas fa-align-left"></i></button>
|
|
<button type="button" class="btn btn-warning btn-flat"><i class="fas fa-align-center"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-warning btn-flat"><i class="fas fa-align-right"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group-vertical">
|
|
<button type="button" class="btn btn-warning">1</button>
|
|
<button type="button" class="btn btn-warning">2</button>
|
|
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
|
|
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- /.warning -->
|
|
<!-- success -->
|
|
<tr>
|
|
<td>
|
|
<div class="btn-group-vertical">
|
|
<button type="button" class="btn btn-success">Top</button>
|
|
<button type="button" class="btn btn-success">Middle</button>
|
|
<button type="button" class="btn btn-success">Bottom</button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group-vertical">
|
|
<button type="button" class="btn btn-success"><i class="fas fa-align-left"></i></button>
|
|
<button type="button" class="btn btn-success"><i class="fas fa-align-center"></i></button>
|
|
<button type="button" class="btn btn-success"><i class="fas fa-align-right"></i></button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group-vertical">
|
|
<button type="button" class="btn btn-success btn-flat"><i class="fas fa-align-left"></i></button>
|
|
<button type="button" class="btn btn-success btn-flat"><i class="fas fa-align-center"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-success btn-flat"><i class="fas fa-align-right"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group-vertical">
|
|
<button type="button" class="btn btn-success">1</button>
|
|
<button type="button" class="btn btn-success">2</button>
|
|
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
|
|
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- /.success -->
|
|
</table>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
|
|
<!-- Radio Buttons -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Radio Button Group</h3>
|
|
</div>
|
|
<div class="card-body table-responsive pad">
|
|
<p class="mb-1">Radio Button Group with <code>.btn-secondary</code></p>
|
|
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
|
<label class="btn btn-secondary active">
|
|
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
|
|
</label>
|
|
<label class="btn btn-secondary">
|
|
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
|
|
</label>
|
|
<label class="btn btn-secondary">
|
|
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
|
|
</label>
|
|
</div>
|
|
|
|
<p class="mt-3 mb-1">Radio Button Group with <code>.bg-olive</code></p>
|
|
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
|
<label class="btn bg-olive active">
|
|
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
|
|
</label>
|
|
<label class="btn bg-olive">
|
|
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
|
|
</label>
|
|
<label class="btn bg-olive">
|
|
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /.col -->
|
|
</div>
|
|
<!-- /. row -->
|
|
</div><!-- /.container-fluid -->
|
|
</section>
|
|
<!--内容结束-->
|
|
|