639 lines
12 KiB
HTML
639 lines
12 KiB
HTML
![]() |
<div class="row">
|
||
|
|
||
|
<div class="col-md-6">
|
||
|
<h4 class="m-t-xs">
|
||
|
Button options
|
||
|
</h4>
|
||
|
<div class="doc-buttons">
|
||
|
<a href="#" class="btn btn-s-md btn-default">
|
||
|
Default
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-s-md btn-primary">
|
||
|
Primary
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-s-md btn-success">
|
||
|
Success
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-s-md btn-info">
|
||
|
Info
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-s-md btn-warning">
|
||
|
Warning
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-s-md btn-danger">
|
||
|
Danger
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-s-md btn-dark">
|
||
|
Dark
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-s-md btn-default disabled">
|
||
|
Disabled
|
||
|
</a>
|
||
|
</div>
|
||
|
<h4 class="m-t">
|
||
|
Button size
|
||
|
</h4>
|
||
|
<p>
|
||
|
<a href="#" class="btn btn-default btn-lg">
|
||
|
Large button
|
||
|
</a>
|
||
|
</p>
|
||
|
<p>
|
||
|
<a href="#" class="btn btn-default">
|
||
|
Default button
|
||
|
</a>
|
||
|
</p>
|
||
|
<p>
|
||
|
<a href="#" class="btn btn-default btn-sm">
|
||
|
Small button
|
||
|
</a>
|
||
|
</p>
|
||
|
<p>
|
||
|
<a href="#" class="btn btn-default btn-xs">
|
||
|
Extra small button
|
||
|
</a>
|
||
|
</p>
|
||
|
<h4 class="m-t-lg">
|
||
|
Button dropdowns
|
||
|
</h4>
|
||
|
<p class="text-muted">
|
||
|
Single button dropdowns
|
||
|
</p>
|
||
|
<div class="m-b-sm">
|
||
|
<div class="btn-group">
|
||
|
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||
|
Action
|
||
|
<span class="caret">
|
||
|
</span>
|
||
|
</button>
|
||
|
<ul 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>
|
||
|
<div class="btn-group">
|
||
|
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
|
||
|
Action
|
||
|
<span class="caret">
|
||
|
</span>
|
||
|
</button>
|
||
|
<ul 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>
|
||
|
</div>
|
||
|
<div class="m-b-sm">
|
||
|
<div class="btn-group">
|
||
|
<button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
|
||
|
Action
|
||
|
<span class="caret">
|
||
|
</span>
|
||
|
</button>
|
||
|
<ul 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>
|
||
|
</div>
|
||
|
<div class="m-b-sm">
|
||
|
<div class="btn-group">
|
||
|
<button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
|
||
|
Action
|
||
|
<span class="caret">
|
||
|
</span>
|
||
|
</button>
|
||
|
<ul 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>
|
||
|
</div>
|
||
|
<p class="text-muted">
|
||
|
Split button dropdowns & variation
|
||
|
</p>
|
||
|
<div class="m-b-sm">
|
||
|
<div class="btn-group">
|
||
|
<button class="btn btn-default">
|
||
|
Action
|
||
|
</button>
|
||
|
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||
|
<span class="caret">
|
||
|
</span>
|
||
|
</button>
|
||
|
<ul 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>
|
||
|
<div class="btn-group dropup">
|
||
|
<button class="btn btn-default">
|
||
|
Action
|
||
|
</button>
|
||
|
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||
|
<span class="caret">
|
||
|
</span>
|
||
|
</button>
|
||
|
<ul 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>
|
||
|
</div>
|
||
|
<h4 class="m-t-lg">
|
||
|
Button with icon
|
||
|
</h4>
|
||
|
<p>
|
||
|
<a href="#" class="btn btn-default">
|
||
|
<i class="fa fa-html5">
|
||
|
</i>
|
||
|
Html5
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-info">
|
||
|
<i class="fa fa-css3">
|
||
|
</i>
|
||
|
CSS3
|
||
|
</a>
|
||
|
</p>
|
||
|
<p>
|
||
|
<a href="#" class="btn btn-default btn-lg btn-block">
|
||
|
<i class="fa fa-bars pull-right">
|
||
|
</i>
|
||
|
Block button with icon
|
||
|
</a>
|
||
|
</p>
|
||
|
<p>
|
||
|
<a href="#" class="btn btn-default btn-block">
|
||
|
<i class="fa fa-bars pull-left">
|
||
|
</i>
|
||
|
Block button with icon
|
||
|
</a>
|
||
|
</p>
|
||
|
<h4 class="m-t-lg">
|
||
|
Button icon
|
||
|
</h4>
|
||
|
<p id="social-buttons">
|
||
|
<a href="#" class="btn btn-sm btn-icon btn-info">
|
||
|
<i class="fa fa-twitter">
|
||
|
</i>
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-sm btn-icon btn-success">
|
||
|
<i class="fa fa-facebook">
|
||
|
</i>
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-sm btn-icon btn-danger">
|
||
|
<i class="fa fa-google-plus">
|
||
|
</i>
|
||
|
</a>
|
||
|
</p>
|
||
|
<h4 class="m-t-lg">
|
||
|
Button icon rounded
|
||
|
</h4>
|
||
|
<p id="social-buttons">
|
||
|
<a href="#" class="btn btn-rounded btn-sm btn-icon btn-default">
|
||
|
<i class="fa fa-twitter">
|
||
|
</i>
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-rounded btn-sm btn-icon btn-default">
|
||
|
<i class="fa fa-facebook">
|
||
|
</i>
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-rounded btn-sm btn-icon btn-default">
|
||
|
<i class="fa fa-google-plus">
|
||
|
</i>
|
||
|
</a>
|
||
|
</p>
|
||
|
</div>
|
||
|
<div class="col-md-6">
|
||
|
<h4 class="m-t-xs">
|
||
|
Rounded button
|
||
|
</h4>
|
||
|
<div class="doc-buttons">
|
||
|
<a href="#" class="btn btn-s-md btn-default btn-rounded">
|
||
|
Default
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-s-md btn-primary btn-rounded">
|
||
|
Primary
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-s-md btn-success btn-rounded">
|
||
|
Success
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-s-md btn-info btn-rounded">
|
||
|
Info
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-s-md btn-warning btn-rounded">
|
||
|
Warning
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-s-md btn-danger btn-rounded">
|
||
|
Danger
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-s-md btn-dark btn-rounded">
|
||
|
Dark
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-s-md btn-default btn-rounded disabled">
|
||
|
Disabled
|
||
|
</a>
|
||
|
</div>
|
||
|
<h4 class="m-t-lg">
|
||
|
Button groups
|
||
|
</h4>
|
||
|
<div class="m-b-sm">
|
||
|
<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>
|
||
|
</div>
|
||
|
<p class="text-muted">
|
||
|
Vertical button groups
|
||
|
</p>
|
||
|
<div class="btn-group-vertical m-b-sm">
|
||
|
<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>
|
||
|
<p class="text-muted">
|
||
|
Nested button groups
|
||
|
</p>
|
||
|
<div class="btn-group m-b-sm">
|
||
|
<button type="button" class="btn btn-default">
|
||
|
1
|
||
|
</button>
|
||
|
<button type="button" class="btn btn-success">
|
||
|
2
|
||
|
</button>
|
||
|
<button type="button" class="btn btn-default">
|
||
|
3
|
||
|
</button>
|
||
|
<div class="btn-group">
|
||
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||
|
Dropdown
|
||
|
<span class="caret">
|
||
|
</span>
|
||
|
</button>
|
||
|
<ul class="dropdown-menu">
|
||
|
<li>
|
||
|
<a href="#">
|
||
|
Dropdown link
|
||
|
</a>
|
||
|
</li>
|
||
|
<li>
|
||
|
<a href="#">
|
||
|
Dropdown link
|
||
|
</a>
|
||
|
</li>
|
||
|
<li>
|
||
|
<a href="#">
|
||
|
Dropdown link
|
||
|
</a>
|
||
|
</li>
|
||
|
</ul>
|
||
|
</div>
|
||
|
</div>
|
||
|
<p class="text-muted">
|
||
|
Justified button groups
|
||
|
</p>
|
||
|
<div class="m-b-sm">
|
||
|
<div class="btn-group btn-group-justified">
|
||
|
<a href="#" class="btn btn-primary">
|
||
|
Left
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-info">
|
||
|
Middle
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-success">
|
||
|
Right
|
||
|
</a>
|
||
|
</div>
|
||
|
</div>
|
||
|
<p class="text-muted">
|
||
|
Multiple button groups
|
||
|
</p>
|
||
|
<div class="btn-toolbar">
|
||
|
<div class="btn-group">
|
||
|
<button type="button" class="btn btn-default">
|
||
|
1
|
||
|
</button>
|
||
|
<button type="button" class="btn btn-default active">
|
||
|
2
|
||
|
</button>
|
||
|
<button type="button" class="btn btn-default">
|
||
|
3
|
||
|
</button>
|
||
|
<button type="button" class="btn btn-default">
|
||
|
4
|
||
|
</button>
|
||
|
</div>
|
||
|
<div class="btn-group">
|
||
|
<button type="button" class="btn btn-default">
|
||
|
5
|
||
|
</button>
|
||
|
<button type="button" class="btn btn-default">
|
||
|
6
|
||
|
</button>
|
||
|
<button type="button" class="btn btn-default">
|
||
|
7
|
||
|
</button>
|
||
|
</div>
|
||
|
<div class="btn-group">
|
||
|
<button type="button" class="btn btn-default">
|
||
|
8
|
||
|
</button>
|
||
|
</div>
|
||
|
</div>
|
||
|
<h4 class="m-t-lg">
|
||
|
Button components
|
||
|
</h4>
|
||
|
<p class="text-muted">
|
||
|
<span>
|
||
|
There are a few easy ways to quickly get started with Bootstrap, each
|
||
|
one ...
|
||
|
</span>
|
||
|
<span class="text-muted hide" id="moreless">
|
||
|
appealing to a different skill level and use case. Read through to see
|
||
|
what suits your particular needs.
|
||
|
</span>
|
||
|
</p>
|
||
|
<p>
|
||
|
<button href="#moreless" class="btn btn-sm btn-default" data-toggle="class:show">
|
||
|
<i class="fa fa-plus text">
|
||
|
</i>
|
||
|
<span class="text">
|
||
|
More
|
||
|
</span>
|
||
|
<i class="fa fa-minus text-active">
|
||
|
</i>
|
||
|
<span class="text-active">
|
||
|
Less
|
||
|
</span>
|
||
|
</button>
|
||
|
</p>
|
||
|
<p>
|
||
|
<button class="btn btn-default" id="btn-1" href="#btn-1" data-toggle="class:btn-success">
|
||
|
<i class="fa fa-cloud-upload text">
|
||
|
</i>
|
||
|
<span class="text">
|
||
|
Upload
|
||
|
</span>
|
||
|
<i class="fa fa-check text-active">
|
||
|
</i>
|
||
|
<span class="text-active">
|
||
|
Success
|
||
|
</span>
|
||
|
</button>
|
||
|
<button class="btn btn-default" data-toggle="button">
|
||
|
<i class="fa fa-heart-o text">
|
||
|
</i>
|
||
|
<i class="fa fa-heart text-active text-danger">
|
||
|
</i>
|
||
|
</button>
|
||
|
<button class="btn btn-default" data-toggle="button">
|
||
|
<span class="text">
|
||
|
<i class="fa fa-thumbs-up text-success">
|
||
|
</i>
|
||
|
25
|
||
|
</span>
|
||
|
<span class="text-active">
|
||
|
<i class="fa fa-thumbs-down text-danger">
|
||
|
</i>
|
||
|
10
|
||
|
</span>
|
||
|
</button>
|
||
|
<button class="btn btn-success" data-toggle="class:show inline" data-target="#spin"
|
||
|
data-loading-text="Saving...">
|
||
|
Save
|
||
|
</button>
|
||
|
<i class="fa fa-spin fa-spinner hide" id="spin">
|
||
|
</i>
|
||
|
</p>
|
||
|
<div class="m-b-sm">
|
||
|
<div class="btn-group" data-toggle="buttons">
|
||
|
<label class="btn btn-sm btn-info active">
|
||
|
<input type="radio" name="options" id="option1">
|
||
|
<i class="fa fa-check text-active">
|
||
|
</i>
|
||
|
Male
|
||
|
</label>
|
||
|
<label class="btn btn-sm btn-success">
|
||
|
<input type="radio" name="options" id="option2">
|
||
|
<i class="fa fa-check text-active">
|
||
|
</i>
|
||
|
Female
|
||
|
</label>
|
||
|
<label class="btn btn-sm btn-primary">
|
||
|
<input type="radio" name="options" id="option3">
|
||
|
<i class="fa fa-check text-active">
|
||
|
</i>
|
||
|
N/A
|
||
|
</label>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="m-b-sm">
|
||
|
<div class="btn-group" data-toggle="buttons">
|
||
|
<label class="btn btn-sm btn-default">
|
||
|
<input type="checkbox" name="options" id="option1">
|
||
|
option1
|
||
|
</label>
|
||
|
<label class="btn btn-sm btn-default">
|
||
|
<input type="checkbox" name="options" id="option2">
|
||
|
option2
|
||
|
</label>
|
||
|
</div>
|
||
|
</div>
|
||
|
<h5 class="m-t-lg">
|
||
|
Select Button
|
||
|
</h5>
|
||
|
<div class="btn-group m-r">
|
||
|
<button data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle">
|
||
|
<span class="dropdown-label">
|
||
|
Option1
|
||
|
</span>
|
||
|
<span class="caret">
|
||
|
</span>
|
||
|
</button>
|
||
|
<ul class="dropdown-menu dropdown-select">
|
||
|
<li class="active">
|
||
|
<a href="#">
|
||
|
<input type="radio" name="d-s-r" checked="">
|
||
|
Option1
|
||
|
</a>
|
||
|
</li>
|
||
|
<li>
|
||
|
<a href="#">
|
||
|
<input type="radio" name="d-s-r">
|
||
|
Option2
|
||
|
</a>
|
||
|
</li>
|
||
|
<li>
|
||
|
<a href="#">
|
||
|
<input type="radio" name="d-s-r">
|
||
|
Option3
|
||
|
</a>
|
||
|
</li>
|
||
|
<li class="disabled">
|
||
|
<a href="#">
|
||
|
<input type="radio" name="d-s-r" disabled="">
|
||
|
I'm disabled
|
||
|
</a>
|
||
|
</li>
|
||
|
</ul>
|
||
|
</div>
|
||
|
<h4 class="m-t-lg">
|
||
|
<a href="#" class="pull-right text-sm" data-toggle="class:btn-rounded"
|
||
|
data-target="#social-buttons a">
|
||
|
Toggle
|
||
|
</a>
|
||
|
Social buttons
|
||
|
</h4>
|
||
|
<p id="social-buttons">
|
||
|
<a href="#" class="btn btn-rounded btn-sm btn-twitter">
|
||
|
<i class="fa fa-fw fa-twitter">
|
||
|
</i>
|
||
|
Twitter
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-rounded btn-sm btn-facebook">
|
||
|
<i class="fa fa-fw fa-facebook">
|
||
|
</i>
|
||
|
Facebook
|
||
|
</a>
|
||
|
<a href="#" class="btn btn-rounded btn-sm btn-gplus">
|
||
|
<i class="fa fa-fw fa-google-plus">
|
||
|
</i>
|
||
|
Google+
|
||
|
</a>
|
||
|
</p>
|
||
|
</div>
|
||
|
|
||
|
</div>
|