tab-panel.html 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title></title>
  7. <!-- Bootstrap Styles-->
  8. <link href="assets/css/bootstrap.css" rel="stylesheet" />
  9. <!-- FontAwesome Styles-->
  10. <link href="assets/css/font-awesome.css" rel="stylesheet" />
  11. <!-- Custom Styles-->
  12. <link href="assets/css/custom-styles.css" rel="stylesheet" />
  13. <!-- Google Fonts-->
  14. <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
  15. </head>
  16. <body>
  17. <div id="wrapper">
  18. <nav class="navbar navbar-default top-navbar" role="navigation">
  19. <div class="navbar-header">
  20. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
  21. <span class="sr-only">Toggle navigation</span>
  22. <span class="icon-bar"></span>
  23. <span class="icon-bar"></span>
  24. <span class="icon-bar"></span>
  25. </button>
  26. <a class="navbar-brand" href="index.html"><i class="fa fa-comments"></i> <strong>MASTER </strong></a>
  27. </div>
  28. <ul class="nav navbar-top-links navbar-right">
  29. <li class="dropdown">
  30. <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
  31. <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
  32. </a>
  33. <ul class="dropdown-menu dropdown-messages">
  34. <li>
  35. <a href="#">
  36. <div>
  37. <strong>John Doe</strong>
  38. <span class="pull-right text-muted">
  39. <em>Today</em>
  40. </span>
  41. </div>
  42. <div>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</div>
  43. </a>
  44. </li>
  45. <li class="divider"></li>
  46. <li>
  47. <a href="#">
  48. <div>
  49. <strong>John Smith</strong>
  50. <span class="pull-right text-muted">
  51. <em>Yesterday</em>
  52. </span>
  53. </div>
  54. <div>Lorem Ipsum has been the industry's standard dummy text ever since an kwilnw...</div>
  55. </a>
  56. </li>
  57. <li class="divider"></li>
  58. <li>
  59. <a href="#">
  60. <div>
  61. <strong>John Smith</strong>
  62. <span class="pull-right text-muted">
  63. <em>Yesterday</em>
  64. </span>
  65. </div>
  66. <div>Lorem Ipsum has been the industry's standard dummy text ever since the...</div>
  67. </a>
  68. </li>
  69. <li class="divider"></li>
  70. <li>
  71. <a class="text-center" href="#">
  72. <strong>Read All Messages</strong>
  73. <i class="fa fa-angle-right"></i>
  74. </a>
  75. </li>
  76. </ul>
  77. <!-- /.dropdown-messages -->
  78. </li>
  79. <!-- /.dropdown -->
  80. <li class="dropdown">
  81. <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
  82. <i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
  83. </a>
  84. <ul class="dropdown-menu dropdown-tasks">
  85. <li>
  86. <a href="#">
  87. <div>
  88. <p>
  89. <strong>Task 1</strong>
  90. <span class="pull-right text-muted">60% Complete</span>
  91. </p>
  92. <div class="progress progress-striped active">
  93. <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
  94. <span class="sr-only">60% Complete (success)</span>
  95. </div>
  96. </div>
  97. </div>
  98. </a>
  99. </li>
  100. <li class="divider"></li>
  101. <li>
  102. <a href="#">
  103. <div>
  104. <p>
  105. <strong>Task 2</strong>
  106. <span class="pull-right text-muted">28% Complete</span>
  107. </p>
  108. <div class="progress progress-striped active">
  109. <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100" style="width: 28%">
  110. <span class="sr-only">28% Complete</span>
  111. </div>
  112. </div>
  113. </div>
  114. </a>
  115. </li>
  116. <li class="divider"></li>
  117. <li>
  118. <a href="#">
  119. <div>
  120. <p>
  121. <strong>Task 3</strong>
  122. <span class="pull-right text-muted">60% Complete</span>
  123. </p>
  124. <div class="progress progress-striped active">
  125. <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
  126. <span class="sr-only">60% Complete (warning)</span>
  127. </div>
  128. </div>
  129. </div>
  130. </a>
  131. </li>
  132. <li class="divider"></li>
  133. <li>
  134. <a href="#">
  135. <div>
  136. <p>
  137. <strong>Task 4</strong>
  138. <span class="pull-right text-muted">85% Complete</span>
  139. </p>
  140. <div class="progress progress-striped active">
  141. <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%">
  142. <span class="sr-only">85% Complete (danger)</span>
  143. </div>
  144. </div>
  145. </div>
  146. </a>
  147. </li>
  148. <li class="divider"></li>
  149. <li>
  150. <a class="text-center" href="#">
  151. <strong>See All Tasks</strong>
  152. <i class="fa fa-angle-right"></i>
  153. </a>
  154. </li>
  155. </ul>
  156. <!-- /.dropdown-tasks -->
  157. </li>
  158. <!-- /.dropdown -->
  159. <li class="dropdown">
  160. <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
  161. <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
  162. </a>
  163. <ul class="dropdown-menu dropdown-alerts">
  164. <li>
  165. <a href="#">
  166. <div>
  167. <i class="fa fa-comment fa-fw"></i> New Comment
  168. <span class="pull-right text-muted small">4 min</span>
  169. </div>
  170. </a>
  171. </li>
  172. <li class="divider"></li>
  173. <li>
  174. <a href="#">
  175. <div>
  176. <i class="fa fa-twitter fa-fw"></i> 3 New Followers
  177. <span class="pull-right text-muted small">12 min</span>
  178. </div>
  179. </a>
  180. </li>
  181. <li class="divider"></li>
  182. <li>
  183. <a href="#">
  184. <div>
  185. <i class="fa fa-envelope fa-fw"></i> Message Sent
  186. <span class="pull-right text-muted small">4 min</span>
  187. </div>
  188. </a>
  189. </li>
  190. <li class="divider"></li>
  191. <li>
  192. <a href="#">
  193. <div>
  194. <i class="fa fa-tasks fa-fw"></i> New Task
  195. <span class="pull-right text-muted small">4 min</span>
  196. </div>
  197. </a>
  198. </li>
  199. <li class="divider"></li>
  200. <li>
  201. <a href="#">
  202. <div>
  203. <i class="fa fa-upload fa-fw"></i> Server Rebooted
  204. <span class="pull-right text-muted small">4 min</span>
  205. </div>
  206. </a>
  207. </li>
  208. <li class="divider"></li>
  209. <li>
  210. <a class="text-center" href="#">
  211. <strong>See All Alerts</strong>
  212. <i class="fa fa-angle-right"></i>
  213. </a>
  214. </li>
  215. </ul>
  216. <!-- /.dropdown-alerts -->
  217. </li>
  218. <!-- /.dropdown -->
  219. <li class="dropdown">
  220. <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
  221. <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
  222. </a>
  223. <ul class="dropdown-menu dropdown-user">
  224. <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
  225. </li>
  226. <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
  227. </li>
  228. <li class="divider"></li>
  229. <li><a href="#"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
  230. </li>
  231. </ul>
  232. <!-- /.dropdown-user -->
  233. </li>
  234. <!-- /.dropdown -->
  235. </ul>
  236. </nav>
  237. <!--/. NAV TOP -->
  238. <nav class="navbar-default navbar-side" role="navigation">
  239. <div class="sidebar-collapse">
  240. <ul class="nav" id="main-menu">
  241. <li>
  242. <a href="index.html"><i class="fa fa-dashboard"></i> Dashboard</a>
  243. </li>
  244. <li>
  245. <a href="ui-elements.html"><i class="fa fa-desktop"></i> UI Elements</a>
  246. </li>
  247. <li>
  248. <a href="chart.html"><i class="fa fa-bar-chart-o"></i> Charts</a>
  249. </li>
  250. <li>
  251. <a href="tab-panel.html" class="active-menu"><i class="fa fa-qrcode"></i> Tabs & Panels</a>
  252. </li>
  253. <li>
  254. <a href="table.html"><i class="fa fa-table"></i> Responsive Tables</a>
  255. </li>
  256. <li>
  257. <a href="form.html"><i class="fa fa-edit"></i> Forms </a>
  258. </li>
  259. <li>
  260. <a href="#"><i class="fa fa-sitemap"></i> Multi-Level Dropdown<span class="fa arrow"></span></a>
  261. <ul class="nav nav-second-level">
  262. <li>
  263. <a href="#">Second Level Link</a>
  264. </li>
  265. <li>
  266. <a href="#">Second Level Link</a>
  267. </li>
  268. <li>
  269. <a href="#">Second Level Link<span class="fa arrow"></span></a>
  270. <ul class="nav nav-third-level">
  271. <li>
  272. <a href="#">Third Level Link</a>
  273. </li>
  274. <li>
  275. <a href="#">Third Level Link</a>
  276. </li>
  277. <li>
  278. <a href="#">Third Level Link</a>
  279. </li>
  280. </ul>
  281. </li>
  282. </ul>
  283. </li>
  284. <li>
  285. <a href="empty.html"><i class="fa fa-fw fa-file"></i> Empty Page</a>
  286. </li>
  287. </ul>
  288. </div>
  289. </nav>
  290. <!-- /. NAV SIDE -->
  291. <div id="page-wrapper" >
  292. <div id="page-inner">
  293. <div class="row">
  294. <div class="col-md-12">
  295. <h1 class="page-header">
  296. Tabs & Panels <small>Nice tabs and panels</small>
  297. </h1>
  298. </div>
  299. </div>
  300. <!-- /. ROW -->
  301. <div class="row">
  302. <div class="col-md-4 col-sm-4">
  303. <div class="panel panel-default">
  304. <div class="panel-heading">
  305. Default Panel
  306. </div>
  307. <div class="panel-body">
  308. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
  309. </div>
  310. <div class="panel-footer">
  311. Panel Footer
  312. </div>
  313. </div>
  314. </div>
  315. <div class="col-md-4 col-sm-4">
  316. <div class="panel panel-primary">
  317. <div class="panel-heading">
  318. Primary Panel
  319. </div>
  320. <div class="panel-body">
  321. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
  322. </div>
  323. <div class="panel-footer">
  324. Panel Footer
  325. </div>
  326. </div>
  327. </div>
  328. <div class="col-md-4 col-sm-4">
  329. <div class="panel panel-success">
  330. <div class="panel-heading">
  331. Success Panel
  332. </div>
  333. <div class="panel-body">
  334. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
  335. </div>
  336. <div class="panel-footer">
  337. Panel Footer
  338. </div>
  339. </div>
  340. </div>
  341. </div>
  342. <!-- /. ROW -->
  343. <div class="row">
  344. <div class="col-md-4 col-sm-4">
  345. <div class="panel panel-info">
  346. <div class="panel-heading">
  347. Info Panel
  348. </div>
  349. <div class="panel-body">
  350. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
  351. </div>
  352. <div class="panel-footer">
  353. Panel Footer
  354. </div>
  355. </div>
  356. </div>
  357. <div class="col-md-4 col-sm-4">
  358. <div class="panel panel-warning">
  359. <div class="panel-heading">
  360. Warning Panel
  361. </div>
  362. <div class="panel-body">
  363. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
  364. </div>
  365. <div class="panel-footer">
  366. Panel Footer
  367. </div>
  368. </div>
  369. </div>
  370. <div class="col-md-4 col-sm-4">
  371. <div class="panel panel-danger">
  372. <div class="panel-heading">
  373. Danger Panel
  374. </div>
  375. <div class="panel-body">
  376. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
  377. </div>
  378. <div class="panel-footer">
  379. Panel Footer
  380. </div>
  381. </div>
  382. </div>
  383. </div>
  384. <!-- /. ROW -->
  385. <div class="row">
  386. <div class="col-md-12">
  387. <div class="panel panel-default">
  388. <div class="panel-heading">
  389. Collapsible Accordion Panel Group
  390. </div>
  391. <div class="panel-body">
  392. <div class="panel-group" id="accordion">
  393. <div class="panel panel-default">
  394. <div class="panel-heading">
  395. <h4 class="panel-title">
  396. <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="collapsed">Collapsible Group Item #1</a>
  397. </h4>
  398. </div>
  399. <div id="collapseOne" class="panel-collapse collapse" style="height: 0px;">
  400. <div class="panel-body">
  401. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  402. </div>
  403. </div>
  404. </div>
  405. <div class="panel panel-default">
  406. <div class="panel-heading">
  407. <h4 class="panel-title">
  408. <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group Item #2</a>
  409. </h4>
  410. </div>
  411. <div id="collapseTwo" class="panel-collapse in" style="height: auto;">
  412. <div class="panel-body">
  413. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  414. </div>
  415. </div>
  416. </div>
  417. <div class="panel panel-default">
  418. <div class="panel-heading">
  419. <h4 class="panel-title">
  420. <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="collapsed">Collapsible Group Item #3</a>
  421. </h4>
  422. </div>
  423. <div id="collapseThree" class="panel-collapse collapse">
  424. <div class="panel-body">
  425. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  426. </div>
  427. </div>
  428. </div>
  429. </div>
  430. </div>
  431. </div>
  432. </div>
  433. </div>
  434. <!-- /. ROW -->
  435. <div class="row">
  436. <div class="col-md-6 col-sm-6">
  437. <div class="panel panel-default">
  438. <div class="panel-heading">
  439. Basic Tabs
  440. </div>
  441. <div class="panel-body">
  442. <ul class="nav nav-tabs">
  443. <li class="active"><a href="#home" data-toggle="tab">Home</a>
  444. </li>
  445. <li class=""><a href="#profile" data-toggle="tab">Profile</a>
  446. </li>
  447. <li class=""><a href="#messages" data-toggle="tab">Messages</a>
  448. </li>
  449. <li class=""><a href="#settings" data-toggle="tab">Settings</a>
  450. </li>
  451. </ul>
  452. <div class="tab-content">
  453. <div class="tab-pane fade active in" id="home">
  454. <h4>Home Tab</h4>
  455. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  456. </div>
  457. <div class="tab-pane fade" id="profile">
  458. <h4>Profile Tab</h4>
  459. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  460. </div>
  461. <div class="tab-pane fade" id="messages">
  462. <h4>Messages Tab</h4>
  463. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  464. </div>
  465. <div class="tab-pane fade" id="settings">
  466. <h4>Settings Tab</h4>
  467. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  468. </div>
  469. </div>
  470. </div>
  471. </div>
  472. </div>
  473. <div class="col-md-6 col-sm-6">
  474. <div class="panel panel-default">
  475. <div class="panel-heading">
  476. Pill Tabs
  477. </div>
  478. <div class="panel-body">
  479. <ul class="nav nav-pills">
  480. <li class=""><a href="#home-pills" data-toggle="tab">Home</a>
  481. </li>
  482. <li class=""><a href="#profile-pills" data-toggle="tab">Profile</a>
  483. </li>
  484. <li class=""><a href="#messages-pills" data-toggle="tab">Messages</a>
  485. </li>
  486. <li class="active"><a href="#settings-pills" data-toggle="tab">Settings</a>
  487. </li>
  488. </ul>
  489. <div class="tab-content">
  490. <div class="tab-pane fade" id="home-pills">
  491. <h4>Home Tab</h4>
  492. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  493. </div>
  494. <div class="tab-pane fade" id="profile-pills">
  495. <h4>Profile Tab</h4>
  496. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  497. </div>
  498. <div class="tab-pane fade" id="messages-pills">
  499. <h4>Messages Tab</h4>
  500. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  501. </div>
  502. <div class="tab-pane fade active in" id="settings-pills">
  503. <h4>Settings Tab</h4>
  504. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  505. </div>
  506. </div>
  507. </div>
  508. </div>
  509. </div>
  510. </div>
  511. <!-- /. ROW -->
  512. <div class="row">
  513. <div class="col-md-4 col-sm-4">
  514. <div class="well">
  515. <h4>Normal Well</h4>
  516. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
  517. </div>
  518. </div>
  519. <div class="col-md-4 col-sm-4">
  520. <div class="well well-lg">
  521. <h4>Large Well</h4>
  522. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
  523. </div>
  524. </div>
  525. <div class="col-md-4 col-sm-4">
  526. <div class="well well-sm">
  527. <h4>Small Well</h4>
  528. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
  529. </div>
  530. </div>
  531. </div>
  532. <!-- /. ROW -->
  533. <div class="row">
  534. <div class="col-md-12">
  535. <div class="jumbotron">
  536. <h1>Jumbotron</h1>
  537. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing.</p>
  538. <p>
  539. <a class="btn btn-primary btn-lg" role="button">Learn more</a>
  540. </p>
  541. </div>
  542. </div>
  543. </div>
  544. <!-- /. ROW -->
  545. <footer><p>Copyright &copy; 2016.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p></footer>
  546. </div>
  547. <!-- /. PAGE INNER -->
  548. </div>
  549. <!-- /. PAGE WRAPPER -->
  550. </div>
  551. <!-- /. WRAPPER -->
  552. <!-- JS Scripts-->
  553. <!-- jQuery Js -->
  554. <script src="assets/js/jquery-1.10.2.js"></script>
  555. <!-- Bootstrap Js -->
  556. <script src="assets/js/bootstrap.min.js"></script>
  557. <!-- Metis Menu Js -->
  558. <script src="assets/js/jquery.metisMenu.js"></script>
  559. <!-- Custom Js -->
  560. <script src="assets/js/custom-scripts.js"></script>
  561. </body>
  562. </html>