- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title>bootstrap 表格 </title>
- <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
- <style>
- body {
- padding: 1em;
- }
- table {
- margin: 0 auto;
- text-align: center;
- }
- table th, table td {
- vertical-align: middle !important;
- }
- .btn, .btn:active, .btn:focus {
- outline: none !important;
- }
- .btn {
- position: relative;
- z-index: 1;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.3);
- -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
- -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- border-radius: 3px;
- }
- .btn:before, .btn:after {
- content: '';
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- z-index: -1;
- }
- .btn:after {
- height: 50%;
- background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4zIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0.3)));
- background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.3));
- background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.3));
- background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.3));
- -moz-border-image: -moz-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1)) 1 1 0 stretch;
- -moz-border-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1)) 1 1 0 stretch;
- -o-border-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1)) 1 1 0 stretch;
- -webkit-border-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1)) 1 1 0 stretch;
- -webkit-border-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1)) 1 1 0 stretch;
- border-image: -moz-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1)) 1 1 0 stretch;
- border-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1)) 1 1 0 stretch;
- border-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1)) 1 1 0 stretch;
- border-width: 1px 1px 0;
- }
- .btn:before {
- bottom: 0;
- background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjEwMCUiIHI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
- background: -moz-radial-gradient(bottom center, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
- background: -webkit-radial-gradient(bottom center, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
- background: radial-gradient(bottom center, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
- -moz-border-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)) 0 0 1 stretch;
- -moz-border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)) 0 0 1 stretch;
- -o-border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)) 0 0 1 stretch;
- -webkit-border-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)) 0 0 1 stretch;
- -webkit-border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)) 0 0 1 stretch;
- border-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)) 0 0 1 stretch;
- border-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)) 0 0 1 stretch;
- border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)) 0 0 1 stretch;
- border-width: 0 0 1px;
- }
- .btn:hover:before, .btn:active:before, .btn.active:before {
- background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjEwMCUiIHI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4zIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
- background: -moz-radial-gradient(bottom center, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));
- background: -webkit-radial-gradient(bottom center, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));
- background: radial-gradient(bottom center, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));
- }
- .btn:active, .btn.active {
- -moz-box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.5);
- -webkit-box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.5);
- box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.5);
- color: #ddd;
- }
- .btn:active:after, .btn.active:after {
- display: none;
- }
- .btn:active:before, .btn.active:before {
- background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
- background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.2)));
- background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
- background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
- background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
- border: none;
- }
- .btn.btn-square {
- -moz-border-radius: 0;
- -webkit-border-radius: 0;
- border-radius: 0;
- }
- .btn.btn-default {
- text-shadow: 0 1px rgba(255, 255, 255, 0.6);
- }
- .btn.btn-default:active, .btn.btn-default.active {
- color: #000;
- }
- .btn.btn-default:before {
- background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjEwMCUiIHI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMSIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
- background: -moz-radial-gradient(bottom center, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
- background: -webkit-radial-gradient(bottom center, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
- background: radial-gradient(bottom center, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
- }
- .btn.btn-default:before:hover {
- -moz-border-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), #ffffff, rgba(255, 255, 255, 0)) 0 0 1 stretch;
- -moz-border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff, rgba(255, 255, 255, 0)) 0 0 1 stretch;
- -o-border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff, rgba(255, 255, 255, 0)) 0 0 1 stretch;
- -webkit-border-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), #ffffff, rgba(255, 255, 255, 0)) 0 0 1 stretch;
- -webkit-border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff, rgba(255, 255, 255, 0)) 0 0 1 stretch;
- border-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), #ffffff, rgba(255, 255, 255, 0)) 0 0 1 stretch;
- border-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), #ffffff, rgba(255, 255, 255, 0)) 0 0 1 stretch;
- border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff, rgba(255, 255, 255, 0)) 0 0 1 stretch;
- }
- .btn.btn-link {
- -moz-box-shadow: none;
- -webkit-box-shadow: none;
- box-shadow: none;
- text-shadow: none;
- }
- .btn.btn-link:before, .btn.btn-link:after {
- display: none;
- }
- .btn.btn-link:active, .btn.btn-link.active {
- color: #428bca;
- }
- </style>
- </head>
- <body>
- <div class="page-header">
- <h1>Un-Flat Bootstrap Buttons</h1>
- </div>
- <section>
- <table class="table table-bordered table-condensed">
- <thead>
- <tr>
- <th rowspan="2"> </th>
- <th colspan="3" class="text-center">default</th>
- <th colspan="3" class="text-center">primary</th>
- <th colspan="3" class="text-center">info</th>
- <th colspan="3" class="text-center">success</th>
- <th colspan="3" class="text-center">warning</th>
- <th colspan="3" class="text-center">danger</th>
- <th colspan="3" class="text-center">link</th>
- </tr>
- <tr>
- <th class="text-center">normal</th>
- <th class="text-center">disabled</th>
- <th class="text-center">active</th>
- <th class="text-center">normal</th>
- <th class="text-center">disabled</th>
- <th class="text-center">active</th>
- <th class="text-center">normal</th>
- <th class="text-center">disabled</th>
- <th class="text-center">active</th>
- <th class="text-center">normal</th>
- <th class="text-center">disabled</th>
- <th class="text-center">active</th>
- <th class="text-center">normal</th>
- <th class="text-center">disabled</th>
- <th class="text-center">active</th>
- <th class="text-center">normal</th>
- <th class="text-center">disabled</th>
- <th class="text-center">active</th>
- <th class="text-center">normal</th>
- <th class="text-center">disabled</th>
- <th class="text-center">active</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <th scope="row">xs / round</th>
- <td>
- <button class="btn btn-default btn-xs btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-default btn-xs btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-default btn-xs btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-primary btn-xs btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-primary btn-xs btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-primary btn-xs btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-info btn-xs btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-info btn-xs btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-info btn-xs btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-success btn-xs btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-success btn-xs btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-success btn-xs btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-warning btn-xs btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-warning btn-xs btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-warning btn-xs btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-danger btn-xs btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-danger btn-xs btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-danger btn-xs btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-link btn-xs btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-link btn-xs btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-link btn-xs btn-round">C</btn>
- </td>
- </tr>
- <tr>
- <th scope="row">xs / square</th>
- <td>
- <button class="btn btn-default btn-xs btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-default btn-xs btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-default btn-xs btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-primary btn-xs btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-primary btn-xs btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-primary btn-xs btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-info btn-xs btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-info btn-xs btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-info btn-xs btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-success btn-xs btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-success btn-xs btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-success btn-xs btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-warning btn-xs btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-warning btn-xs btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-warning btn-xs btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-danger btn-xs btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-danger btn-xs btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-danger btn-xs btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-link btn-xs btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-link btn-xs btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-link btn-xs btn-square">C</btn>
- </td>
- </tr>
- <tr>
- <th scope="row">sm / round</th>
- <td>
- <button class="btn btn-default btn-sm btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-default btn-sm btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-default btn-sm btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-primary btn-sm btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-primary btn-sm btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-primary btn-sm btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-info btn-sm btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-info btn-sm btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-info btn-sm btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-success btn-sm btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-success btn-sm btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-success btn-sm btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-warning btn-sm btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-warning btn-sm btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-warning btn-sm btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-danger btn-sm btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-danger btn-sm btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-danger btn-sm btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-link btn-sm btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-link btn-sm btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-link btn-sm btn-round">C</btn>
- </td>
- </tr>
- <tr>
- <th scope="row">sm / square</th>
- <td>
- <button class="btn btn-default btn-sm btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-default btn-sm btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-default btn-sm btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-primary btn-sm btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-primary btn-sm btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-primary btn-sm btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-info btn-sm btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-info btn-sm btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-info btn-sm btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-success btn-sm btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-success btn-sm btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-success btn-sm btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-warning btn-sm btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-warning btn-sm btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-warning btn-sm btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-danger btn-sm btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-danger btn-sm btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-danger btn-sm btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-link btn-sm btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-link btn-sm btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-link btn-sm btn-square">C</btn>
- </td>
- </tr>
- <tr>
- <th scope="row">md / round</th>
- <td>
- <button class="btn btn-default btn-md btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-default btn-md btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-default btn-md btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-primary btn-md btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-primary btn-md btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-primary btn-md btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-info btn-md btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-info btn-md btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-info btn-md btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-success btn-md btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-success btn-md btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-success btn-md btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-warning btn-md btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-warning btn-md btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-warning btn-md btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-danger btn-md btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-danger btn-md btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-danger btn-md btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-link btn-md btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-link btn-md btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-link btn-md btn-round">C</btn>
- </td>
- </tr>
- <tr>
- <th scope="row">md / square</th>
- <td>
- <button class="btn btn-default btn-md btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-default btn-md btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-default btn-md btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-primary btn-md btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-primary btn-md btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-primary btn-md btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-info btn-md btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-info btn-md btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-info btn-md btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-success btn-md btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-success btn-md btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-success btn-md btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-warning btn-md btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-warning btn-md btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-warning btn-md btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-danger btn-md btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-danger btn-md btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-danger btn-md btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-link btn-md btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-link btn-md btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-link btn-md btn-square">C</btn>
- </td>
- </tr>
- <tr>
- <th scope="row">lg / round</th>
- <td>
- <button class="btn btn-default btn-lg btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-default btn-lg btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-default btn-lg btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-primary btn-lg btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-primary btn-lg btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-primary btn-lg btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-info btn-lg btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-info btn-lg btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-info btn-lg btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-success btn-lg btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-success btn-lg btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-success btn-lg btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-warning btn-lg btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-warning btn-lg btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-warning btn-lg btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-danger btn-lg btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-danger btn-lg btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-danger btn-lg btn-round">C</btn>
- </td>
- <td>
- <button class="btn btn-link btn-lg btn-round">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-link btn-lg btn-round">B</btn>
- </td>
- <td>
- <btn class="active btn btn-link btn-lg btn-round">C</btn>
- </td>
- </tr>
- <tr>
- <th scope="row">lg / square</th>
- <td>
- <button class="btn btn-default btn-lg btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-default btn-lg btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-default btn-lg btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-primary btn-lg btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-primary btn-lg btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-primary btn-lg btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-info btn-lg btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-info btn-lg btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-info btn-lg btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-success btn-lg btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-success btn-lg btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-success btn-lg btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-warning btn-lg btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-warning btn-lg btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-warning btn-lg btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-danger btn-lg btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-danger btn-lg btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-danger btn-lg btn-square">C</btn>
- </td>
- <td>
- <button class="btn btn-link btn-lg btn-square">A</button>
- </td>
- <td>
- <btn disabled="disabled" class="btn btn-link btn-lg btn-square">B</btn>
- </td>
- <td>
- <btn class="active btn btn-link btn-lg btn-square">C</btn>
- </td>
- </tr>
- </tbody>
- </table>
- </section>
- <!-- 推荐开源 CDN 来选取需引用的外部 JS //-->
- <script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/40816/1025f66f0f6a8d211db6a23a83b973a0.html