buttons.html 77 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>AdminLTE 2 | Dashboard</title>
  6. <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
  7. <!-- Bootstrap 3.3.2 -->
  8. <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  9. <!-- Font Awesome Icons -->
  10. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  11. <!-- Ionicons -->
  12. <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
  13. <!-- Theme style -->
  14. <link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
  15. <!-- AdminLTE Skins. Choose a skin from the css/skins
  16. folder instead of downloading all of them to reduce the load. -->
  17. <link href="../../dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
  18. <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  19. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  20. <!--[if lt IE 9]>
  21. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  22. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  23. <![endif]-->
  24. </head>
  25. <body class="skin-blue sidebar-mini">
  26. <div class="wrapper">
  27. <header class="main-header">
  28. <!-- Logo -->
  29. <a href="../../index2.html" class="logo">
  30. <!-- mini logo for sidebar mini 50x50 pixels -->
  31. <span class="logo-mini"><b>A</b>LT</span>
  32. <!-- logo for regular state and mobile devices -->
  33. <span class="logo-lg"><b>Admin</b>LTE</span>
  34. </a>
  35. <!-- Header Navbar: style can be found in header.less -->
  36. <nav class="navbar navbar-static-top" role="navigation">
  37. <!-- Sidebar toggle button-->
  38. <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
  39. <span class="sr-only">Toggle navigation</span>
  40. <span class="icon-bar"></span>
  41. <span class="icon-bar"></span>
  42. <span class="icon-bar"></span>
  43. </a>
  44. <div class="navbar-custom-menu">
  45. <ul class="nav navbar-nav">
  46. <!-- Messages: style can be found in dropdown.less-->
  47. <li class="dropdown messages-menu">
  48. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  49. <i class="fa fa-envelope-o"></i>
  50. <span class="label label-success">4</span>
  51. </a>
  52. <ul class="dropdown-menu">
  53. <li class="header">You have 4 messages</li>
  54. <li>
  55. <!-- inner menu: contains the actual data -->
  56. <ul class="menu">
  57. <li><!-- start message -->
  58. <a href="#">
  59. <div class="pull-left">
  60. <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/>
  61. </div>
  62. <h4>
  63. Support Team
  64. <small><i class="fa fa-clock-o"></i> 5 mins</small>
  65. </h4>
  66. <p>Why not buy a new awesome theme?</p>
  67. </a>
  68. </li><!-- end message -->
  69. <li>
  70. <a href="#">
  71. <div class="pull-left">
  72. <img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="user image"/>
  73. </div>
  74. <h4>
  75. AdminLTE Design Team
  76. <small><i class="fa fa-clock-o"></i> 2 hours</small>
  77. </h4>
  78. <p>Why not buy a new awesome theme?</p>
  79. </a>
  80. </li>
  81. <li>
  82. <a href="#">
  83. <div class="pull-left">
  84. <img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="user image"/>
  85. </div>
  86. <h4>
  87. Developers
  88. <small><i class="fa fa-clock-o"></i> Today</small>
  89. </h4>
  90. <p>Why not buy a new awesome theme?</p>
  91. </a>
  92. </li>
  93. <li>
  94. <a href="#">
  95. <div class="pull-left">
  96. <img src="../../dist/img/user3-128x128.jpg" class="img-circle" alt="user image"/>
  97. </div>
  98. <h4>
  99. Sales Department
  100. <small><i class="fa fa-clock-o"></i> Yesterday</small>
  101. </h4>
  102. <p>Why not buy a new awesome theme?</p>
  103. </a>
  104. </li>
  105. <li>
  106. <a href="#">
  107. <div class="pull-left">
  108. <img src="../../dist/img/user4-128x128.jpg" class="img-circle" alt="user image"/>
  109. </div>
  110. <h4>
  111. Reviewers
  112. <small><i class="fa fa-clock-o"></i> 2 days</small>
  113. </h4>
  114. <p>Why not buy a new awesome theme?</p>
  115. </a>
  116. </li>
  117. </ul>
  118. </li>
  119. <li class="footer"><a href="#">See All Messages</a></li>
  120. </ul>
  121. </li>
  122. <!-- Notifications: style can be found in dropdown.less -->
  123. <li class="dropdown notifications-menu">
  124. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  125. <i class="fa fa-bell-o"></i>
  126. <span class="label label-warning">10</span>
  127. </a>
  128. <ul class="dropdown-menu">
  129. <li class="header">You have 10 notifications</li>
  130. <li>
  131. <!-- inner menu: contains the actual data -->
  132. <ul class="menu">
  133. <li>
  134. <a href="#">
  135. <i class="fa fa-users text-aqua"></i> 5 new members joined today
  136. </a>
  137. </li>
  138. <li>
  139. <a href="#">
  140. <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
  141. </a>
  142. </li>
  143. <li>
  144. <a href="#">
  145. <i class="fa fa-users text-red"></i> 5 new members joined
  146. </a>
  147. </li>
  148. <li>
  149. <a href="#">
  150. <i class="fa fa-shopping-cart text-green"></i> 25 sales made
  151. </a>
  152. </li>
  153. <li>
  154. <a href="#">
  155. <i class="fa fa-user text-red"></i> You changed your username
  156. </a>
  157. </li>
  158. </ul>
  159. </li>
  160. <li class="footer"><a href="#">View all</a></li>
  161. </ul>
  162. </li>
  163. <!-- Tasks: style can be found in dropdown.less -->
  164. <li class="dropdown tasks-menu">
  165. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  166. <i class="fa fa-flag-o"></i>
  167. <span class="label label-danger">9</span>
  168. </a>
  169. <ul class="dropdown-menu">
  170. <li class="header">You have 9 tasks</li>
  171. <li>
  172. <!-- inner menu: contains the actual data -->
  173. <ul class="menu">
  174. <li><!-- Task item -->
  175. <a href="#">
  176. <h3>
  177. Design some buttons
  178. <small class="pull-right">20%</small>
  179. </h3>
  180. <div class="progress xs">
  181. <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
  182. <span class="sr-only">20% Complete</span>
  183. </div>
  184. </div>
  185. </a>
  186. </li><!-- end task item -->
  187. <li><!-- Task item -->
  188. <a href="#">
  189. <h3>
  190. Create a nice theme
  191. <small class="pull-right">40%</small>
  192. </h3>
  193. <div class="progress xs">
  194. <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
  195. <span class="sr-only">40% Complete</span>
  196. </div>
  197. </div>
  198. </a>
  199. </li><!-- end task item -->
  200. <li><!-- Task item -->
  201. <a href="#">
  202. <h3>
  203. Some task I need to do
  204. <small class="pull-right">60%</small>
  205. </h3>
  206. <div class="progress xs">
  207. <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
  208. <span class="sr-only">60% Complete</span>
  209. </div>
  210. </div>
  211. </a>
  212. </li><!-- end task item -->
  213. <li><!-- Task item -->
  214. <a href="#">
  215. <h3>
  216. Make beautiful transitions
  217. <small class="pull-right">80%</small>
  218. </h3>
  219. <div class="progress xs">
  220. <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
  221. <span class="sr-only">80% Complete</span>
  222. </div>
  223. </div>
  224. </a>
  225. </li><!-- end task item -->
  226. </ul>
  227. </li>
  228. <li class="footer">
  229. <a href="#">View all tasks</a>
  230. </li>
  231. </ul>
  232. </li>
  233. <!-- User Account: style can be found in dropdown.less -->
  234. <li class="dropdown user user-menu">
  235. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  236. <img src="../../dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/>
  237. <span class="hidden-xs">Alexander Pierce</span>
  238. </a>
  239. <ul class="dropdown-menu">
  240. <!-- User image -->
  241. <li class="user-header">
  242. <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
  243. <p>
  244. Alexander Pierce - Web Developer
  245. <small>Member since Nov. 2012</small>
  246. </p>
  247. </li>
  248. <!-- Menu Body -->
  249. <li class="user-body">
  250. <div class="col-xs-4 text-center">
  251. <a href="#">Followers</a>
  252. </div>
  253. <div class="col-xs-4 text-center">
  254. <a href="#">Sales</a>
  255. </div>
  256. <div class="col-xs-4 text-center">
  257. <a href="#">Friends</a>
  258. </div>
  259. </li>
  260. <!-- Menu Footer-->
  261. <li class="user-footer">
  262. <div class="pull-left">
  263. <a href="#" class="btn btn-default btn-flat">Profile</a>
  264. </div>
  265. <div class="pull-right">
  266. <a href="#" class="btn btn-default btn-flat">Sign out</a>
  267. </div>
  268. </li>
  269. </ul>
  270. </li>
  271. <!-- Control Sidebar Toggle Button -->
  272. <li>
  273. <a href="#" data-toggle="control-sidebar"><i class="fa fa-outdent"></i></a>
  274. </li>
  275. </ul>
  276. </div>
  277. </nav>
  278. </header>
  279. <!-- Left side column. contains the logo and sidebar -->
  280. <aside class="main-sidebar">
  281. <!-- sidebar: style can be found in sidebar.less -->
  282. <section class="sidebar">
  283. <!-- Sidebar user panel -->
  284. <div class="user-panel">
  285. <div class="pull-left image">
  286. <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
  287. </div>
  288. <div class="pull-left info">
  289. <p>Alexander Pierce</p>
  290. <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
  291. </div>
  292. </div>
  293. <!-- search form -->
  294. <form action="#" method="get" class="sidebar-form">
  295. <div class="input-group">
  296. <input type="text" name="q" class="form-control" placeholder="Search..."/>
  297. <span class="input-group-btn">
  298. <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
  299. </span>
  300. </div>
  301. </form>
  302. <!-- /.search form -->
  303. <!-- sidebar menu: : style can be found in sidebar.less -->
  304. <ul class="sidebar-menu">
  305. <li class="header">MAIN NAVIGATION</li>
  306. <li class="treeview">
  307. <a href="#">
  308. <i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i>
  309. </a>
  310. <ul class="treeview-menu">
  311. <li><a href="../../index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
  312. <li><a href="../../index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
  313. </ul>
  314. </li>
  315. <li class="treeview">
  316. <a href="#">
  317. <i class="fa fa-files-o"></i>
  318. <span>Layout Options</span>
  319. <span class="label label-primary pull-right">4</span>
  320. </a>
  321. <ul class="treeview-menu">
  322. <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
  323. <li><a href="../layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
  324. <li><a href="../layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
  325. <li><a href="../layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
  326. </ul>
  327. </li>
  328. <li>
  329. <a href="../widgets.html">
  330. <i class="fa fa-th"></i> <span>Widgets</span> <small class="label pull-right bg-green">new</small>
  331. </a>
  332. </li>
  333. <li class="treeview">
  334. <a href="#">
  335. <i class="fa fa-pie-chart"></i>
  336. <span>Charts</span>
  337. <i class="fa fa-angle-left pull-right"></i>
  338. </a>
  339. <ul class="treeview-menu">
  340. <li><a href="../charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
  341. <li><a href="../charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
  342. <li><a href="../charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
  343. </ul>
  344. </li>
  345. <li class="treeview active">
  346. <a href="#">
  347. <i class="fa fa-laptop"></i>
  348. <span>UI Elements</span>
  349. <i class="fa fa-angle-left pull-right"></i>
  350. </a>
  351. <ul class="treeview-menu">
  352. <li><a href="general.html"><i class="fa fa-circle-o"></i> General</a></li>
  353. <li><a href="icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
  354. <li class="active"><a href="buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
  355. <li><a href="sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
  356. <li><a href="timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li>
  357. <li><a href="modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
  358. </ul>
  359. </li>
  360. <li class="treeview">
  361. <a href="#">
  362. <i class="fa fa-edit"></i> <span>Forms</span>
  363. <i class="fa fa-angle-left pull-right"></i>
  364. </a>
  365. <ul class="treeview-menu">
  366. <li><a href="../forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
  367. <li><a href="../forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
  368. <li><a href="../forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
  369. </ul>
  370. </li>
  371. <li class="treeview">
  372. <a href="#">
  373. <i class="fa fa-table"></i> <span>Tables</span>
  374. <i class="fa fa-angle-left pull-right"></i>
  375. </a>
  376. <ul class="treeview-menu">
  377. <li><a href="../tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
  378. <li><a href="../tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
  379. </ul>
  380. </li>
  381. <li>
  382. <a href="../calendar.html">
  383. <i class="fa fa-calendar"></i> <span>Calendar</span>
  384. <small class="label pull-right bg-red">3</small>
  385. </a>
  386. </li>
  387. <li>
  388. <a href="../mailbox/mailbox.html">
  389. <i class="fa fa-envelope"></i> <span>Mailbox</span>
  390. <small class="label pull-right bg-yellow">12</small>
  391. </a>
  392. </li>
  393. <li class="treeview">
  394. <a href="#">
  395. <i class="fa fa-folder"></i> <span>Examples</span>
  396. <i class="fa fa-angle-left pull-right"></i>
  397. </a>
  398. <ul class="treeview-menu">
  399. <li><a href="../examples/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
  400. <li><a href="../examples/login.html"><i class="fa fa-circle-o"></i> Login</a></li>
  401. <li><a href="../examples/register.html"><i class="fa fa-circle-o"></i> Register</a></li>
  402. <li><a href="../examples/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
  403. <li><a href="../examples/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
  404. <li><a href="../examples/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
  405. <li><a href="../examples/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
  406. </ul>
  407. </li>
  408. <li class="treeview">
  409. <a href="#">
  410. <i class="fa fa-share"></i> <span>Multilevel</span>
  411. <i class="fa fa-angle-left pull-right"></i>
  412. </a>
  413. <ul class="treeview-menu">
  414. <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
  415. <li>
  416. <a href="#"><i class="fa fa-circle-o"></i> Level One <i class="fa fa-angle-left pull-right"></i></a>
  417. <ul class="treeview-menu">
  418. <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
  419. <li>
  420. <a href="#"><i class="fa fa-circle-o"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a>
  421. <ul class="treeview-menu">
  422. <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
  423. <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
  424. </ul>
  425. </li>
  426. </ul>
  427. </li>
  428. <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
  429. </ul>
  430. </li>
  431. <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
  432. <li class="header">LABELS</li>
  433. <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
  434. <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
  435. <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
  436. </ul>
  437. </section>
  438. <!-- /.sidebar -->
  439. </aside>
  440. <!-- Content Wrapper. Contains page content -->
  441. <div class="content-wrapper">
  442. <!-- Content Header (Page header) -->
  443. <section class="content-header">
  444. <h1>
  445. Buttons
  446. <small>Control panel</small>
  447. </h1>
  448. <ol class="breadcrumb">
  449. <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
  450. <li><a href="#">UI</a></li>
  451. <li class="active">Buttons</li>
  452. </ol>
  453. </section>
  454. <!-- Main content -->
  455. <section class="content">
  456. <div class="row">
  457. <div class="col-md-12">
  458. <div class="box box-primary">
  459. <div class="box-header">
  460. <i class="fa fa-edit"></i>
  461. <h3 class="box-title">Buttons</h3>
  462. </div>
  463. <div class="box-body pad table-responsive">
  464. <p>Various types of buttons. Using the base class <code>.btn</code></p>
  465. <table class="table table-bordered text-center">
  466. <tr>
  467. <th>Normal</th>
  468. <th>Large <code>.btn-lg</code></th>
  469. <th>Small <code>.btn-sm</code></th>
  470. <th>X-Small <code>.btn-xs</code></th>
  471. <th>Flat <code>.btn-flat</code></th>
  472. <th>Disabled <code>.disabled</code></th>
  473. </tr>
  474. <tr>
  475. <td><button class="btn btn-block btn-default">Default</button></td>
  476. <td><button class="btn btn-block btn-default btn-lg">Default</button></td>
  477. <td><button class="btn btn-block btn-default btn-sm">Default</button></td>
  478. <td><button class="btn btn-block btn-default btn-xs">Default</button></td>
  479. <td><button class="btn btn-block btn-default btn-flat">Default</button></td>
  480. <td><button class="btn btn-block btn-default disabled">Default</button></td>
  481. </tr>
  482. <tr>
  483. <td><button class="btn btn-block btn-primary">Primary</button></td>
  484. <td><button class="btn btn-block btn-primary btn-lg">Primary</button></td>
  485. <td><button class="btn btn-block btn-primary btn-sm">Primary</button></td>
  486. <td><button class="btn btn-block btn-primary btn-xs">Primary</button></td>
  487. <td><button class="btn btn-block btn-primary btn-flat">Primary</button></td>
  488. <td><button class="btn btn-block btn-primary disabled">Primary</button></td>
  489. </tr>
  490. <tr>
  491. <td><button class="btn btn-block btn-success">Success</button></td>
  492. <td><button class="btn btn-block btn-success btn-lg">Success</button></td>
  493. <td><button class="btn btn-block btn-success btn-sm">Success</button></td>
  494. <td><button class="btn btn-block btn-success btn-xs">Success</button></td>
  495. <td><button class="btn btn-block btn-success btn-flat">Success</button></td>
  496. <td><button class="btn btn-block btn-success disabled">Success</button></td>
  497. </tr>
  498. <tr>
  499. <td><button class="btn btn-block btn-info">Info</button></td>
  500. <td><button class="btn btn-block btn-info btn-lg">Info</button></td>
  501. <td><button class="btn btn-block btn-info btn-sm">Info</button></td>
  502. <td><button class="btn btn-block btn-info btn-xs">Info</button></td>
  503. <td><button class="btn btn-block btn-info btn-flat">Info</button></td>
  504. <td><button class="btn btn-block btn-info disabled">Info</button></td>
  505. </tr>
  506. <tr>
  507. <td><button class="btn btn-block btn-danger">Danger</button></td>
  508. <td><button class="btn btn-block btn-danger btn-lg">Danger</button></td>
  509. <td><button class="btn btn-block btn-danger btn-sm">Danger</button></td>
  510. <td><button class="btn btn-block btn-danger btn-xs">Danger</button></td>
  511. <td><button class="btn btn-block btn-danger btn-flat">Danger</button></td>
  512. <td><button class="btn btn-block btn-danger disabled">Danger</button></td>
  513. </tr>
  514. <tr>
  515. <td><button class="btn btn-block btn-warning">Warning</button></td>
  516. <td><button class="btn btn-block btn-warning btn-lg">Warning</button></td>
  517. <td><button class="btn btn-block btn-warning btn-sm">Warning</button></td>
  518. <td><button class="btn btn-block btn-warning btn-xs">Warning</button></td>
  519. <td><button class="btn btn-block btn-warning btn-flat">Warning</button></td>
  520. <td><button class="btn btn-block btn-warning disabled">Warning</button></td>
  521. </tr>
  522. </table>
  523. </div><!-- /.box -->
  524. </div>
  525. </div><!-- /.col -->
  526. </div><!-- ./row -->
  527. <div class="row">
  528. <div class="col-md-6">
  529. <!-- Block buttons -->
  530. <div class="box">
  531. <div class="box-header">
  532. <h3 class="box-title">Block Buttons</h3>
  533. </div>
  534. <div class="box-body">
  535. <button class="btn btn-default btn-block">.btn-block</button>
  536. <button class="btn btn-default btn-block btn-flat">.btn-block .btn-flat</button>
  537. <button class="btn btn-default btn-block btn-sm">.btn-block .btn-sm</button>
  538. </div>
  539. </div><!-- /.box -->
  540. <!-- Horizontal grouping -->
  541. <div class='box'>
  542. <div class='box-header'>
  543. <h3 class='box-title'>Horizontal Button Group</h3>
  544. </div>
  545. <div class='box-body table-responsive pad'>
  546. <p>
  547. Horizontal button groups are easy to create with bootstrap. Just add your buttons
  548. inside <code>&lt;div class="btn-group"&gt;&lt;/div&gt;</code>
  549. </p>
  550. <table class='table table-bordered'>
  551. <tr>
  552. <th>Button</th>
  553. <th>Icons</th>
  554. <th>Flat</th>
  555. <th>Dropdown</th>
  556. </tr>
  557. <!-- Default -->
  558. <tr>
  559. <td>
  560. <div class="btn-group">
  561. <button type="button" class="btn btn-default">Left</button>
  562. <button type="button" class="btn btn-default">Middle</button>
  563. <button type="button" class="btn btn-default">Right</button>
  564. </div>
  565. </td>
  566. <td>
  567. <div class="btn-group">
  568. <button type="button" class="btn btn-default"><i class='fa fa-align-left'></i></button>
  569. <button type="button" class="btn btn-default"><i class='fa fa-align-center'></i></button>
  570. <button type="button" class="btn btn-default"><i class='fa fa-align-right'></i></button>
  571. </div>
  572. </td>
  573. <td>
  574. <div class="btn-group">
  575. <button type="button" class="btn btn-default btn-flat"><i class='fa fa-align-left'></i></button>
  576. <button type="button" class="btn btn-default btn-flat"><i class='fa fa-align-center'></i></button>
  577. <button type="button" class="btn btn-default btn-flat"><i class='fa fa-align-right'></i></button>
  578. </div>
  579. </td>
  580. <td>
  581. <div class="btn-group">
  582. <button type="button" class="btn btn-default">1</button>
  583. <button type="button" class="btn btn-default">2</button>
  584. <div class="btn-group">
  585. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  586. <span class="caret"></span>
  587. </button>
  588. <ul class="dropdown-menu">
  589. <li><a href="#">Dropdown link</a></li>
  590. <li><a href="#">Dropdown link</a></li>
  591. </ul>
  592. </div>
  593. </div>
  594. </td>
  595. </tr><!-- ./default -->
  596. <!-- Info -->
  597. <tr>
  598. <td>
  599. <div class="btn-group">
  600. <button type="button" class="btn btn-info">Left</button>
  601. <button type="button" class="btn btn-info">Middle</button>
  602. <button type="button" class="btn btn-info">Right</button>
  603. </div>
  604. </td>
  605. <td>
  606. <div class="btn-group">
  607. <button type="button" class="btn btn-info"><i class='fa fa-align-left'></i></button>
  608. <button type="button" class="btn btn-info"><i class='fa fa-align-center'></i></button>
  609. <button type="button" class="btn btn-info"><i class='fa fa-align-right'></i></button>
  610. </div>
  611. </td>
  612. <td>
  613. <div class="btn-group">
  614. <button type="button" class="btn btn-info btn-flat"><i class='fa fa-align-left'></i></button>
  615. <button type="button" class="btn btn-info btn-flat"><i class='fa fa-align-center'></i></button>
  616. <button type="button" class="btn btn-info btn-flat"><i class='fa fa-align-right'></i></button>
  617. </div>
  618. </td>
  619. <td>
  620. <div class="btn-group">
  621. <button type="button" class="btn btn-info">1</button>
  622. <button type="button" class="btn btn-info">2</button>
  623. <div class="btn-group">
  624. <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
  625. <span class="caret"></span>
  626. </button>
  627. <ul class="dropdown-menu">
  628. <li><a href="#">Dropdown link</a></li>
  629. <li><a href="#">Dropdown link</a></li>
  630. </ul>
  631. </div>
  632. </div>
  633. </td>
  634. </tr> <!-- /. info -->
  635. <!-- /.danger -->
  636. <tr>
  637. <td>
  638. <div class="btn-group">
  639. <button type="button" class="btn btn-danger">Left</button>
  640. <button type="button" class="btn btn-danger">Middle</button>
  641. <button type="button" class="btn btn-danger">Right</button>
  642. </div>
  643. </td>
  644. <td>
  645. <div class="btn-group">
  646. <button type="button" class="btn btn-danger"><i class='fa fa-align-left'></i></button>
  647. <button type="button" class="btn btn-danger"><i class='fa fa-align-center'></i></button>
  648. <button type="button" class="btn btn-danger"><i class='fa fa-align-right'></i></button>
  649. </div>
  650. </td>
  651. <td>
  652. <div class="btn-group">
  653. <button type="button" class="btn btn-danger btn-flat"><i class='fa fa-align-left'></i></button>
  654. <button type="button" class="btn btn-danger btn-flat"><i class='fa fa-align-center'></i></button>
  655. <button type="button" class="btn btn-danger btn-flat"><i class='fa fa-align-right'></i></button>
  656. </div>
  657. </td>
  658. <td>
  659. <div class="btn-group">
  660. <button type="button" class="btn btn-danger">1</button>
  661. <button type="button" class="btn btn-danger">2</button>
  662. <div class="btn-group">
  663. <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
  664. <span class="caret"></span>
  665. </button>
  666. <ul class="dropdown-menu">
  667. <li><a href="#">Dropdown link</a></li>
  668. <li><a href="#">Dropdown link</a></li>
  669. </ul>
  670. </div>
  671. </div>
  672. </td>
  673. </tr> <!-- /.danger -->
  674. <!-- warning -->
  675. <tr>
  676. <td>
  677. <div class="btn-group">
  678. <button type="button" class="btn btn-warning">Left</button>
  679. <button type="button" class="btn btn-warning">Middle</button>
  680. <button type="button" class="btn btn-warning">Right</button>
  681. </div>
  682. </td>
  683. <td>
  684. <div class="btn-group">
  685. <button type="button" class="btn btn-warning"><i class='fa fa-align-left'></i></button>
  686. <button type="button" class="btn btn-warning"><i class='fa fa-align-center'></i></button>
  687. <button type="button" class="btn btn-warning"><i class='fa fa-align-right'></i></button>
  688. </div>
  689. </td>
  690. <td>
  691. <div class="btn-group">
  692. <button type="button" class="btn btn-warning btn-flat"><i class='fa fa-align-left'></i></button>
  693. <button type="button" class="btn btn-warning btn-flat"><i class='fa fa-align-center'></i></button>
  694. <button type="button" class="btn btn-warning btn-flat"><i class='fa fa-align-right'></i></button>
  695. </div>
  696. </td>
  697. <td>
  698. <div class="btn-group">
  699. <button type="button" class="btn btn-warning">1</button>
  700. <button type="button" class="btn btn-warning">2</button>
  701. <div class="btn-group">
  702. <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
  703. <span class="caret"></span>
  704. </button>
  705. <ul class="dropdown-menu">
  706. <li><a href="#">Dropdown link</a></li>
  707. <li><a href="#">Dropdown link</a></li>
  708. </ul>
  709. </div>
  710. </div>
  711. </td>
  712. </tr> <!-- /.warning -->
  713. <!-- success -->
  714. <tr>
  715. <td>
  716. <div class="btn-group">
  717. <button type="button" class="btn btn-success">Left</button>
  718. <button type="button" class="btn btn-success">Middle</button>
  719. <button type="button" class="btn btn-success">Right</button>
  720. </div>
  721. </td>
  722. <td>
  723. <div class="btn-group">
  724. <button type="button" class="btn btn-success"><i class='fa fa-align-left'></i></button>
  725. <button type="button" class="btn btn-success"><i class='fa fa-align-center'></i></button>
  726. <button type="button" class="btn btn-success"><i class='fa fa-align-right'></i></button>
  727. </div>
  728. </td>
  729. <td>
  730. <div class="btn-group">
  731. <button type="button" class="btn btn-success btn-flat"><i class='fa fa-align-left'></i></button>
  732. <button type="button" class="btn btn-success btn-flat"><i class='fa fa-align-center'></i></button>
  733. <button type="button" class="btn btn-success btn-flat"><i class='fa fa-align-right'></i></button>
  734. </div>
  735. </td>
  736. <td>
  737. <div class="btn-group">
  738. <button type="button" class="btn btn-success">1</button>
  739. <button type="button" class="btn btn-success">2</button>
  740. <div class="btn-group">
  741. <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
  742. <span class="caret"></span>
  743. </button>
  744. <ul class="dropdown-menu">
  745. <li><a href="#">Dropdown link</a></li>
  746. <li><a href="#">Dropdown link</a></li>
  747. </ul>
  748. </div>
  749. </div>
  750. </td>
  751. </tr> <!-- /.success -->
  752. </table>
  753. </div>
  754. </div><!-- /.box -->
  755. <div class="box">
  756. <div class="box-header">
  757. <h3 class="box-title">Button Addon</h3>
  758. </div>
  759. <div class="box-body">
  760. <p>With dropdown</p>
  761. <div class="input-group margin">
  762. <div class="input-group-btn">
  763. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="fa fa-caret-down"></span></button>
  764. <ul class="dropdown-menu">
  765. <li><a href="#">Action</a></li>
  766. <li><a href="#">Another action</a></li>
  767. <li><a href="#">Something else here</a></li>
  768. <li class="divider"></li>
  769. <li><a href="#">Separated link</a></li>
  770. </ul>
  771. </div><!-- /btn-group -->
  772. <input type="text" class="form-control">
  773. </div><!-- /input-group -->
  774. <p>Normal</p>
  775. <div class="input-group margin">
  776. <div class="input-group-btn">
  777. <button type="button" class="btn btn-danger">Action</button>
  778. </div><!-- /btn-group -->
  779. <input type="text" class="form-control">
  780. </div><!-- /input-group -->
  781. <p>Flat</p>
  782. <div class="input-group margin">
  783. <input type="text" class="form-control">
  784. <span class="input-group-btn">
  785. <button class="btn btn-info btn-flat" type="button">Go!</button>
  786. </span>
  787. </div><!-- /input-group -->
  788. </div><!-- /.box-body -->
  789. </div><!-- /.box -->
  790. <!-- split buttons box -->
  791. <div class="box">
  792. <div class="box-header">
  793. <h3 class="box-title">Split buttons</h3>
  794. </div>
  795. <div class="box-body">
  796. <!-- Split button -->
  797. <p>Normal split buttons:</p>
  798. <div class="margin">
  799. <div class="btn-group">
  800. <button type="button" class="btn btn-default">Action</button>
  801. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  802. <span class="caret"></span>
  803. <span class="sr-only">Toggle Dropdown</span>
  804. </button>
  805. <ul class="dropdown-menu" role="menu">
  806. <li><a href="#">Action</a></li>
  807. <li><a href="#">Another action</a></li>
  808. <li><a href="#">Something else here</a></li>
  809. <li class="divider"></li>
  810. <li><a href="#">Separated link</a></li>
  811. </ul>
  812. </div>
  813. <div class="btn-group">
  814. <button type="button" class="btn btn-info">Action</button>
  815. <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
  816. <span class="caret"></span>
  817. <span class="sr-only">Toggle Dropdown</span>
  818. </button>
  819. <ul class="dropdown-menu" role="menu">
  820. <li><a href="#">Action</a></li>
  821. <li><a href="#">Another action</a></li>
  822. <li><a href="#">Something else here</a></li>
  823. <li class="divider"></li>
  824. <li><a href="#">Separated link</a></li>
  825. </ul>
  826. </div>
  827. <div class="btn-group">
  828. <button type="button" class="btn btn-danger">Action</button>
  829. <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
  830. <span class="caret"></span>
  831. <span class="sr-only">Toggle Dropdown</span>
  832. </button>
  833. <ul class="dropdown-menu" role="menu">
  834. <li><a href="#">Action</a></li>
  835. <li><a href="#">Another action</a></li>
  836. <li><a href="#">Something else here</a></li>
  837. <li class="divider"></li>
  838. <li><a href="#">Separated link</a></li>
  839. </ul>
  840. </div>
  841. <div class="btn-group">
  842. <button type="button" class="btn btn-success">Action</button>
  843. <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
  844. <span class="caret"></span>
  845. <span class="sr-only">Toggle Dropdown</span>
  846. </button>
  847. <ul class="dropdown-menu" role="menu">
  848. <li><a href="#">Action</a></li>
  849. <li><a href="#">Another action</a></li>
  850. <li><a href="#">Something else here</a></li>
  851. <li class="divider"></li>
  852. <li><a href="#">Separated link</a></li>
  853. </ul>
  854. </div>
  855. <div class="btn-group">
  856. <button type="button" class="btn btn-warning">Action</button>
  857. <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
  858. <span class="caret"></span>
  859. <span class="sr-only">Toggle Dropdown</span>
  860. </button>
  861. <ul class="dropdown-menu" role="menu">
  862. <li><a href="#">Action</a></li>
  863. <li><a href="#">Another action</a></li>
  864. <li><a href="#">Something else here</a></li>
  865. <li class="divider"></li>
  866. <li><a href="#">Separated link</a></li>
  867. </ul>
  868. </div>
  869. </div>
  870. <!-- flat split buttons -->
  871. <p>Flat split buttons:</p>
  872. <div class="margin">
  873. <div class="btn-group">
  874. <button type="button" class="btn btn-default btn-flat">Action</button>
  875. <button type="button" class="btn btn-default btn-flat dropdown-toggle" data-toggle="dropdown">
  876. <span class="caret"></span>
  877. <span class="sr-only">Toggle Dropdown</span>
  878. </button>
  879. <ul class="dropdown-menu" role="menu">
  880. <li><a href="#">Action</a></li>
  881. <li><a href="#">Another action</a></li>
  882. <li><a href="#">Something else here</a></li>
  883. <li class="divider"></li>
  884. <li><a href="#">Separated link</a></li>
  885. </ul>
  886. </div>
  887. <div class="btn-group">
  888. <button type="button" class="btn btn-info btn-flat">Action</button>
  889. <button type="button" class="btn btn-info btn-flat dropdown-toggle" data-toggle="dropdown">
  890. <span class="caret"></span>
  891. <span class="sr-only">Toggle Dropdown</span>
  892. </button>
  893. <ul class="dropdown-menu" role="menu">
  894. <li><a href="#">Action</a></li>
  895. <li><a href="#">Another action</a></li>
  896. <li><a href="#">Something else here</a></li>
  897. <li class="divider"></li>
  898. <li><a href="#">Separated link</a></li>
  899. </ul>
  900. </div>
  901. <div class="btn-group">
  902. <button type="button" class="btn btn-danger btn-flat">Action</button>
  903. <button type="button" class="btn btn-danger btn-flat dropdown-toggle" data-toggle="dropdown">
  904. <span class="caret"></span>
  905. <span class="sr-only">Toggle Dropdown</span>
  906. </button>
  907. <ul class="dropdown-menu" role="menu">
  908. <li><a href="#">Action</a></li>
  909. <li><a href="#">Another action</a></li>
  910. <li><a href="#">Something else here</a></li>
  911. <li class="divider"></li>
  912. <li><a href="#">Separated link</a></li>
  913. </ul>
  914. </div>
  915. <div class="btn-group">
  916. <button type="button" class="btn btn-success btn-flat">Action</button>
  917. <button type="button" class="btn btn-success btn-flat dropdown-toggle" data-toggle="dropdown">
  918. <span class="caret"></span>
  919. <span class="sr-only">Toggle Dropdown</span>
  920. </button>
  921. <ul class="dropdown-menu" role="menu">
  922. <li><a href="#">Action</a></li>
  923. <li><a href="#">Another action</a></li>
  924. <li><a href="#">Something else here</a></li>
  925. <li class="divider"></li>
  926. <li><a href="#">Separated link</a></li>
  927. </ul>
  928. </div>
  929. <div class="btn-group">
  930. <button type="button" class="btn btn-warning btn-flat">Action</button>
  931. <button type="button" class="btn btn-warning btn-flat dropdown-toggle" data-toggle="dropdown">
  932. <span class="caret"></span>
  933. <span class="sr-only">Toggle Dropdown</span>
  934. </button>
  935. <ul class="dropdown-menu" role="menu">
  936. <li><a href="#">Action</a></li>
  937. <li><a href="#">Another action</a></li>
  938. <li><a href="#">Something else here</a></li>
  939. <li class="divider"></li>
  940. <li><a href="#">Separated link</a></li>
  941. </ul>
  942. </div>
  943. </div>
  944. </div><!-- /.box-body -->
  945. </div><!-- end split buttons box -->
  946. <!-- social buttons -->
  947. <div class="box">
  948. <div class="box-header">
  949. <h3 class="box-title">Social Buttons (By <a href="https://github.com/lipis/bootstrap-social">Lipis</a>)</h3>
  950. </div>
  951. <div class="box-body">
  952. <a class="btn btn-block btn-social btn-bitbucket">
  953. <i class="fa fa-bitbucket"></i> Sign in with Bitbucket
  954. </a>
  955. <a class="btn btn-block btn-social btn-dropbox">
  956. <i class="fa fa-dropbox"></i> Sign in with Dropbox
  957. </a>
  958. <a class="btn btn-block btn-social btn-facebook">
  959. <i class="fa fa-facebook"></i> Sign in with Facebook
  960. </a>
  961. <a class="btn btn-block btn-social btn-flickr">
  962. <i class="fa fa-flickr"></i> Sign in with Flickr
  963. </a>
  964. <a class="btn btn-block btn-social btn-foursquare">
  965. <i class="fa fa-foursquare"></i> Sign in with Foursquare
  966. </a>
  967. <a class="btn btn-block btn-social btn-github">
  968. <i class="fa fa-github"></i> Sign in with GitHub
  969. </a>
  970. <a class="btn btn-block btn-social btn-google-plus">
  971. <i class="fa fa-google-plus"></i> Sign in with Google
  972. </a>
  973. <a class="btn btn-block btn-social btn-instagram">
  974. <i class="fa fa-instagram"></i> Sign in with Instagram
  975. </a>
  976. <a class="btn btn-block btn-social btn-linkedin">
  977. <i class="fa fa-linkedin"></i> Sign in with LinkedIn
  978. </a>
  979. <a class="btn btn-block btn-social btn-tumblr">
  980. <i class="fa fa-tumblr"></i> Sign in with Tumblr
  981. </a>
  982. <a class="btn btn-block btn-social btn-twitter">
  983. <i class="fa fa-twitter"></i> Sign in with Twitter
  984. </a>
  985. <a class="btn btn-block btn-social btn-vk">
  986. <i class="fa fa-vk"></i> Sign in with VK
  987. </a>
  988. <br />
  989. <div class="text-center">
  990. <a class="btn btn-social-icon btn-bitbucket"><i class="fa fa-bitbucket"></i></a>
  991. <a class="btn btn-social-icon btn-dropbox"><i class="fa fa-dropbox"></i></a>
  992. <a class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></a>
  993. <a class="btn btn-social-icon btn-flickr"><i class="fa fa-flickr"></i></a>
  994. <a class="btn btn-social-icon btn-foursquare"><i class="fa fa-foursquare"></i></a>
  995. <a class="btn btn-social-icon btn-github"><i class="fa fa-github"></i></a>
  996. <a class="btn btn-social-icon btn-google-plus"><i class="fa fa-google-plus"></i></a>
  997. <a class="btn btn-social-icon btn-instagram"><i class="fa fa-instagram"></i></a>
  998. <a class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i></a>
  999. <a class="btn btn-social-icon btn-tumblr"><i class="fa fa-tumblr"></i></a>
  1000. <a class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i></a>
  1001. <a class="btn btn-social-icon btn-vk"><i class="fa fa-vk"></i></a>
  1002. </div>
  1003. </div>
  1004. </div><!-- /.box -->
  1005. </div><!-- /.col -->
  1006. <div class="col-md-6">
  1007. <!-- Application buttons -->
  1008. <div class="box">
  1009. <div class="box-header">
  1010. <h3 class="box-title">Application Buttons</h3>
  1011. </div>
  1012. <div class="box-body">
  1013. <p>Add the classes <code>.btn.btn-app</code> to an <code>&lt;a></code> tag to achieve the following:</p>
  1014. <a class="btn btn-app">
  1015. <i class="fa fa-edit"></i> Edit
  1016. </a>
  1017. <a class="btn btn-app">
  1018. <i class="fa fa-play"></i> Play
  1019. </a>
  1020. <a class="btn btn-app">
  1021. <i class="fa fa-repeat"></i> Repeat
  1022. </a>
  1023. <a class="btn btn-app">
  1024. <i class="fa fa-pause"></i> Pause
  1025. </a>
  1026. <a class="btn btn-app">
  1027. <i class="fa fa-save"></i> Save
  1028. </a>
  1029. <a class="btn btn-app">
  1030. <span class="badge bg-yellow">3</span>
  1031. <i class="fa fa-bullhorn"></i> Notifications
  1032. </a>
  1033. <a class="btn btn-app">
  1034. <span class="badge bg-green">300</span>
  1035. <i class="fa fa-barcode"></i> Products
  1036. </a>
  1037. <a class="btn btn-app">
  1038. <span class="badge bg-purple">891</span>
  1039. <i class="fa fa-users"></i> Users
  1040. </a>
  1041. <a class="btn btn-app">
  1042. <span class="badge bg-teal">67</span>
  1043. <i class="fa fa-inbox"></i> Orders
  1044. </a>
  1045. <a class="btn btn-app">
  1046. <span class="badge bg-aqua">12</span>
  1047. <i class="fa fa-envelope"></i> Inbox
  1048. </a>
  1049. <a class="btn btn-app">
  1050. <span class="badge bg-red">531</span>
  1051. <i class="fa fa-heart-o"></i> Likes
  1052. </a>
  1053. </div><!-- /.box-body -->
  1054. </div><!-- /.box -->
  1055. <!-- Various colors -->
  1056. <div class="box">
  1057. <div class="box-header">
  1058. <h3 class="box-title">Different colors</h3>
  1059. </div>
  1060. <div class="box-body">
  1061. <p>Mix and match with various background colors. Use base class <code>.btn</code> and add any available <code>.bg-*</code> class</p>
  1062. <!-- You may notice a .margin class added
  1063. here but that's only to make the content
  1064. display correctly without having to use a table-->
  1065. <p>
  1066. <button class="btn bg-maroon btn-flat margin">.btn.bg-maroon.btn-flat</button>
  1067. <button class="btn bg-purple btn-flat margin">.btn.bg-purple.btn-flat</button>
  1068. <button class="btn bg-navy btn-flat margin">.btn.bg-navy.btn-flat</button>
  1069. <button class="btn bg-orange btn-flat margin">.btn.bg-orange.btn-flat</button>
  1070. <button class="btn bg-olive btn-flat margin">.btn.bg-olive.btn-flat</button>
  1071. </p>
  1072. <p>
  1073. <button class="btn bg-maroon margin">.btn.bg-maroon</button>
  1074. <button class="btn bg-purple margin">.btn.bg-purple</button>
  1075. <button class="btn bg-navy margin">.btn.bg-navy</button>
  1076. <button class="btn bg-orange margin">.btn.bg-orange</button>
  1077. <button class="btn bg-olive margin">.btn.bg-olive</button>
  1078. </p>
  1079. </div>
  1080. </div><!-- /.box -->
  1081. <!-- Vertical grouping -->
  1082. <div class='box'>
  1083. <div class='box-header'>
  1084. <h3 class='box-title'>Vertical Button Group</h3>
  1085. </div>
  1086. <div class='box-body table-responsive pad'>
  1087. <p>
  1088. Vertical button groups are easy to create with bootstrap. Just add your buttons
  1089. inside <code>&lt;div class="btn-group-vertical"&gt;&lt;/div&gt;</code>
  1090. </p>
  1091. <table class='table table-bordered'>
  1092. <tr>
  1093. <th>Button</th>
  1094. <th>Icons</th>
  1095. <th>Flat</th>
  1096. <th>Dropdown</th>
  1097. </tr>
  1098. <!-- Default -->
  1099. <tr>
  1100. <td>
  1101. <div class="btn-group-vertical">
  1102. <button type="button" class="btn btn-default">Top</button>
  1103. <button type="button" class="btn btn-default">Middle</button>
  1104. <button type="button" class="btn btn-default">Bottom</button>
  1105. </div>
  1106. </td>
  1107. <td>
  1108. <div class="btn-group-vertical">
  1109. <button type="button" class="btn btn-default"><i class='fa fa-align-left'></i></button>
  1110. <button type="button" class="btn btn-default"><i class='fa fa-align-center'></i></button>
  1111. <button type="button" class="btn btn-default"><i class='fa fa-align-right'></i></button>
  1112. </div>
  1113. </td>
  1114. <td>
  1115. <div class="btn-group-vertical">
  1116. <button type="button" class="btn btn-default btn-flat"><i class='fa fa-align-left'></i></button>
  1117. <button type="button" class="btn btn-default btn-flat"><i class='fa fa-align-center'></i></button>
  1118. <button type="button" class="btn btn-default btn-flat"><i class='fa fa-align-right'></i></button>
  1119. </div>
  1120. </td>
  1121. <td>
  1122. <div class="btn-group-vertical">
  1123. <button type="button" class="btn btn-default">1</button>
  1124. <button type="button" class="btn btn-default">2</button>
  1125. <div class="btn-group">
  1126. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  1127. <span class="caret"></span>
  1128. </button>
  1129. <ul class="dropdown-menu">
  1130. <li><a href="#">Dropdown link</a></li>
  1131. <li><a href="#">Dropdown link</a></li>
  1132. </ul>
  1133. </div>
  1134. </div>
  1135. </td>
  1136. </tr><!-- ./default -->
  1137. <!-- Info -->
  1138. <tr>
  1139. <td>
  1140. <div class="btn-group-vertical">
  1141. <button type="button" class="btn btn-info">Top</button>
  1142. <button type="button" class="btn btn-info">Middle</button>
  1143. <button type="button" class="btn btn-info">Bottom</button>
  1144. </div>
  1145. </td>
  1146. <td>
  1147. <div class="btn-group-vertical">
  1148. <button type="button" class="btn btn-info"><i class='fa fa-align-left'></i></button>
  1149. <button type="button" class="btn btn-info"><i class='fa fa-align-center'></i></button>
  1150. <button type="button" class="btn btn-info"><i class='fa fa-align-right'></i></button>
  1151. </div>
  1152. </td>
  1153. <td>
  1154. <div class="btn-group-vertical">
  1155. <button type="button" class="btn btn-info btn-flat"><i class='fa fa-align-left'></i></button>
  1156. <button type="button" class="btn btn-info btn-flat"><i class='fa fa-align-center'></i></button>
  1157. <button type="button" class="btn btn-info btn-flat"><i class='fa fa-align-right'></i></button>
  1158. </div>
  1159. </td>
  1160. <td>
  1161. <div class="btn-group-vertical">
  1162. <button type="button" class="btn btn-info">1</button>
  1163. <button type="button" class="btn btn-info">2</button>
  1164. <div class="btn-group">
  1165. <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
  1166. <span class="caret"></span>
  1167. </button>
  1168. <ul class="dropdown-menu">
  1169. <li><a href="#">Dropdown link</a></li>
  1170. <li><a href="#">Dropdown link</a></li>
  1171. </ul>
  1172. </div>
  1173. </div>
  1174. </td>
  1175. </tr> <!-- /. info -->
  1176. <!-- /.danger -->
  1177. <tr>
  1178. <td>
  1179. <div class="btn-group-vertical">
  1180. <button type="button" class="btn btn-danger">Top</button>
  1181. <button type="button" class="btn btn-danger">Middle</button>
  1182. <button type="button" class="btn btn-danger">Bottom</button>
  1183. </div>
  1184. </td>
  1185. <td>
  1186. <div class="btn-group-vertical">
  1187. <button type="button" class="btn btn-danger"><i class='fa fa-align-left'></i></button>
  1188. <button type="button" class="btn btn-danger"><i class='fa fa-align-center'></i></button>
  1189. <button type="button" class="btn btn-danger"><i class='fa fa-align-right'></i></button>
  1190. </div>
  1191. </td>
  1192. <td>
  1193. <div class="btn-group-vertical">
  1194. <button type="button" class="btn btn-danger btn-flat"><i class='fa fa-align-left'></i></button>
  1195. <button type="button" class="btn btn-danger btn-flat"><i class='fa fa-align-center'></i></button>
  1196. <button type="button" class="btn btn-danger btn-flat"><i class='fa fa-align-right'></i></button>
  1197. </div>
  1198. </td>
  1199. <td>
  1200. <div class="btn-group-vertical">
  1201. <button type="button" class="btn btn-danger">1</button>
  1202. <button type="button" class="btn btn-danger">2</button>
  1203. <div class="btn-group">
  1204. <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
  1205. <span class="caret"></span>
  1206. </button>
  1207. <ul class="dropdown-menu">
  1208. <li><a href="#">Dropdown link</a></li>
  1209. <li><a href="#">Dropdown link</a></li>
  1210. </ul>
  1211. </div>
  1212. </div>
  1213. </td>
  1214. </tr> <!-- /.danger -->
  1215. <!-- warning -->
  1216. <tr>
  1217. <td>
  1218. <div class="btn-group-vertical">
  1219. <button type="button" class="btn btn-warning">Top</button>
  1220. <button type="button" class="btn btn-warning">Middle</button>
  1221. <button type="button" class="btn btn-warning">Bottom</button>
  1222. </div>
  1223. </td>
  1224. <td>
  1225. <div class="btn-group-vertical">
  1226. <button type="button" class="btn btn-warning"><i class='fa fa-align-left'></i></button>
  1227. <button type="button" class="btn btn-warning"><i class='fa fa-align-center'></i></button>
  1228. <button type="button" class="btn btn-warning"><i class='fa fa-align-right'></i></button>
  1229. </div>
  1230. </td>
  1231. <td>
  1232. <div class="btn-group-vertical">
  1233. <button type="button" class="btn btn-warning btn-flat"><i class='fa fa-align-left'></i></button>
  1234. <button type="button" class="btn btn-warning btn-flat"><i class='fa fa-align-center'></i></button>
  1235. <button type="button" class="btn btn-warning btn-flat"><i class='fa fa-align-right'></i></button>
  1236. </div>
  1237. </td>
  1238. <td>
  1239. <div class="btn-group-vertical">
  1240. <button type="button" class="btn btn-warning">1</button>
  1241. <button type="button" class="btn btn-warning">2</button>
  1242. <div class="btn-group">
  1243. <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
  1244. <span class="caret"></span>
  1245. </button>
  1246. <ul class="dropdown-menu">
  1247. <li><a href="#">Dropdown link</a></li>
  1248. <li><a href="#">Dropdown link</a></li>
  1249. </ul>
  1250. </div>
  1251. </div>
  1252. </td>
  1253. </tr> <!-- /.warning -->
  1254. <!-- success -->
  1255. <tr>
  1256. <td>
  1257. <div class="btn-group-vertical">
  1258. <button type="button" class="btn btn-success">Top</button>
  1259. <button type="button" class="btn btn-success">Middle</button>
  1260. <button type="button" class="btn btn-success">Bottom</button>
  1261. </div>
  1262. </td>
  1263. <td>
  1264. <div class="btn-group-vertical">
  1265. <button type="button" class="btn btn-success"><i class='fa fa-align-left'></i></button>
  1266. <button type="button" class="btn btn-success"><i class='fa fa-align-center'></i></button>
  1267. <button type="button" class="btn btn-success"><i class='fa fa-align-right'></i></button>
  1268. </div>
  1269. </td>
  1270. <td>
  1271. <div class="btn-group-vertical">
  1272. <button type="button" class="btn btn-success btn-flat"><i class='fa fa-align-left'></i></button>
  1273. <button type="button" class="btn btn-success btn-flat"><i class='fa fa-align-center'></i></button>
  1274. <button type="button" class="btn btn-success btn-flat"><i class='fa fa-align-right'></i></button>
  1275. </div>
  1276. </td>
  1277. <td>
  1278. <div class="btn-group-vertical">
  1279. <button type="button" class="btn btn-success">1</button>
  1280. <button type="button" class="btn btn-success">2</button>
  1281. <div class="btn-group">
  1282. <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
  1283. <span class="caret"></span>
  1284. </button>
  1285. <ul class="dropdown-menu">
  1286. <li><a href="#">Dropdown link</a></li>
  1287. <li><a href="#">Dropdown link</a></li>
  1288. </ul>
  1289. </div>
  1290. </div>
  1291. </td>
  1292. </tr> <!-- /.success -->
  1293. </table>
  1294. </div><!-- /.box-body -->
  1295. </div><!-- /.box -->
  1296. </div><!-- /.col -->
  1297. </div><!-- /. row -->
  1298. </section><!-- /.content -->
  1299. </div><!-- /.content-wrapper -->
  1300. <footer class="main-footer">
  1301. <div class="pull-right hidden-xs">
  1302. <b>Version</b> 2.0
  1303. </div>
  1304. <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
  1305. </footer>
  1306. <!-- Control Sidebar -->
  1307. <aside class="control-sidebar">
  1308. <!-- Create the tabs -->
  1309. <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
  1310. <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
  1311. <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
  1312. </ul>
  1313. <!-- Tab panes -->
  1314. <div class="tab-content">
  1315. <!-- Home tab content -->
  1316. <div class="tab-pane active" id="control-sidebar-home-tab">
  1317. <h3 class="control-sidebar-heading">Recent Activity</h3>
  1318. <ul class='control-sidebar-menu'>
  1319. <li>
  1320. <a href='javascript::;'>
  1321. <i class="menu-icon fa fa-birthday-cake bg-red"></i>
  1322. <div class="menu-info">
  1323. <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
  1324. <p>Will be 23 on April 24th</p>
  1325. </div>
  1326. </a>
  1327. </li>
  1328. <li>
  1329. <a href='javascript::;'>
  1330. <i class="menu-icon fa fa-user bg-yellow"></i>
  1331. <div class="menu-info">
  1332. <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
  1333. <p>New phone +1(800)555-1234</p>
  1334. </div>
  1335. </a>
  1336. </li>
  1337. <li>
  1338. <a href='javascript::;'>
  1339. <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
  1340. <div class="menu-info">
  1341. <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
  1342. <p>nora@example.com</p>
  1343. </div>
  1344. </a>
  1345. </li>
  1346. <li>
  1347. <a href='javascript::;'>
  1348. <i class="menu-icon fa fa-file-code-o bg-green"></i>
  1349. <div class="menu-info">
  1350. <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
  1351. <p>Execution time 5 seconds</p>
  1352. </div>
  1353. </a>
  1354. </li>
  1355. </ul><!-- /.control-sidebar-menu -->
  1356. <h3 class="control-sidebar-heading">Tasks Progress</h3>
  1357. <ul class='control-sidebar-menu'>
  1358. <li>
  1359. <a href='javascript::;'>
  1360. <h4 class="control-sidebar-subheading">
  1361. Custom Template Design
  1362. <span class="label label-danger pull-right">70%</span>
  1363. </h4>
  1364. <div class="progress progress-xxs">
  1365. <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
  1366. </div>
  1367. </a>
  1368. </li>
  1369. <li>
  1370. <a href='javascript::;'>
  1371. <h4 class="control-sidebar-subheading">
  1372. Update Resume
  1373. <span class="label label-success pull-right">95%</span>
  1374. </h4>
  1375. <div class="progress progress-xxs">
  1376. <div class="progress-bar progress-bar-success" style="width: 95%"></div>
  1377. </div>
  1378. </a>
  1379. </li>
  1380. <li>
  1381. <a href='javascript::;'>
  1382. <h4 class="control-sidebar-subheading">
  1383. Laravel Integration
  1384. <span class="label label-waring pull-right">50%</span>
  1385. </h4>
  1386. <div class="progress progress-xxs">
  1387. <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
  1388. </div>
  1389. </a>
  1390. </li>
  1391. <li>
  1392. <a href='javascript::;'>
  1393. <h4 class="control-sidebar-subheading">
  1394. Back End Framework
  1395. <span class="label label-primary pull-right">68%</span>
  1396. </h4>
  1397. <div class="progress progress-xxs">
  1398. <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
  1399. </div>
  1400. </a>
  1401. </li>
  1402. </ul><!-- /.control-sidebar-menu -->
  1403. </div><!-- /.tab-pane -->
  1404. <!-- Stats tab content -->
  1405. <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane -->
  1406. <!-- Settings tab content -->
  1407. <div class="tab-pane" id="control-sidebar-settings-tab">
  1408. <form method="post">
  1409. <h3 class="control-sidebar-heading">General Settings</h3>
  1410. <div class="form-group">
  1411. <label class="control-sidebar-subheading">
  1412. Report panel usage
  1413. <input type="checkbox" class="pull-right" checked />
  1414. </label>
  1415. <p>
  1416. Some information about this general settings option
  1417. </p>
  1418. </div><!-- /.form-group -->
  1419. <div class="form-group">
  1420. <label class="control-sidebar-subheading">
  1421. Allow mail redirect
  1422. <input type="checkbox" class="pull-right" checked />
  1423. </label>
  1424. <p>
  1425. Other sets of options are available
  1426. </p>
  1427. </div><!-- /.form-group -->
  1428. <div class="form-group">
  1429. <label class="control-sidebar-subheading">
  1430. Expose author name in posts
  1431. <input type="checkbox" class="pull-right" checked />
  1432. </label>
  1433. <p>
  1434. Allow the user to show his name in blog posts
  1435. </p>
  1436. </div><!-- /.form-group -->
  1437. <h3 class="control-sidebar-heading">Chat Settings</h3>
  1438. <div class="form-group">
  1439. <label class="control-sidebar-subheading">
  1440. Show me as online
  1441. <input type="checkbox" class="pull-right" checked />
  1442. </label>
  1443. </div><!-- /.form-group -->
  1444. <div class="form-group">
  1445. <label class="control-sidebar-subheading">
  1446. Turn off notifications
  1447. <input type="checkbox" class="pull-right" />
  1448. </label>
  1449. </div><!-- /.form-group -->
  1450. <div class="form-group">
  1451. <label class="control-sidebar-subheading">
  1452. Delete chat history
  1453. <a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
  1454. </label>
  1455. </div><!-- /.form-group -->
  1456. </form>
  1457. </div><!-- /.tab-pane -->
  1458. </div>
  1459. </aside><!-- /.control-sidebar -->
  1460. <!-- Add the sidebar's background. This div must be placed
  1461. immediately after the control sidebar -->
  1462. <div class='control-sidebar-bg'></div>
  1463. </div><!-- ./wrapper -->
  1464. <!-- jQuery 2.1.3 -->
  1465. <script src="../../plugins/jQuery/jQuery-2.1.3.min.js"></script>
  1466. <!-- Bootstrap 3.3.2 JS -->
  1467. <script src="../../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
  1468. <!-- FastClick -->
  1469. <script src='../../plugins/fastclick/fastclick.min.js'></script>
  1470. <!-- AdminLTE App -->
  1471. <script src="../../dist/js/app.min.js" type="text/javascript"></script>
  1472. <!-- AdminLTE for demo purposes -->
  1473. <script src="../../dist/js/demo.js" type="text/javascript"></script>
  1474. </body>
  1475. </html>