grid.html 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Bootstrap网格 - 宇威科技-唐佳云在线学习管理系统</title>
  6. <meta name="keywords" content="Bootstrap模版,Bootstrap模版下载,Bootstrap教程,Bootstrap中文" />
  7. <meta name="description" content="JS代码网提供Bootstrap模版,Bootstrap教程,Bootstrap中文翻译等相关Bootstrap插件下载" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  9. <!-- basic styles -->
  10. <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
  11. <link rel="stylesheet" href="assets/css/font-awesome.min.css" />
  12. <!--[if IE 7]>
  13. <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
  14. <![endif]-->
  15. <!-- page specific plugin styles -->
  16. <!-- fonts -->
  17. <!--<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />-->
  18. <!-- ace styles -->
  19. <link rel="stylesheet" href="assets/css/ace.min.css" />
  20. <link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
  21. <link rel="stylesheet" href="assets/css/ace-skins.min.css" />
  22. <!--[if lte IE 8]>
  23. <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
  24. <![endif]-->
  25. <!-- inline styles related to this page -->
  26. <style>
  27. .center {
  28. text-align:center;
  29. }
  30. .center [class*="col-"] {
  31. margin-top:2px;
  32. margin-bottom:2px;
  33. padding-top:4px;
  34. padding-bottom:4px;
  35. position:relative;
  36. text-overflow:ellipsis;
  37. }
  38. .center [class*="col-"] span{
  39. position:relative;
  40. z-index:2;
  41. display: inline-block;
  42. overflow: hidden;
  43. text-overflow: ellipsis;
  44. white-space: nowrap;
  45. width: 100%;
  46. }
  47. .center [class*="col-"]:before {
  48. position:absolute;
  49. top:0; bottom:0;
  50. left:2px; right:2px;
  51. content:"";
  52. display:block;
  53. border:1px solid #DDD;
  54. z-index: 1;
  55. }
  56. .center [class*="col-"]:hover:before {
  57. background-color:#FCE6A6;
  58. border-color:#EFD27A;
  59. }
  60. </style>
  61. <!-- ace settings handler -->
  62. <script src="assets/js/ace-extra.min.js"></script>
  63. <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  64. <!--[if lt IE 9]>
  65. <script src="assets/js/html5shiv.js"></script>
  66. <script src="assets/js/respond.min.js"></script>
  67. <![endif]-->
  68. </head>
  69. <body>
  70. <div class="navbar navbar-default" id="navbar">
  71. <script type="text/javascript">
  72. try{ace.settings.check('navbar' , 'fixed')}catch(e){}
  73. </script>
  74. <div class="navbar-container" id="navbar-container">
  75. <div class="navbar-header pull-left">
  76. <a href="#" class="navbar-brand">
  77. <small>
  78. <i class="icon-leaf"></i>
  79. 唐佳云在线学习管理系统
  80. </small>
  81. </a><!-- /.brand -->
  82. </div><!-- /.navbar-header -->
  83. <div class="navbar-header pull-right" role="navigation">
  84. <ul class="nav ace-nav">
  85. <li class="grey">
  86. <a data-toggle="dropdown" class="dropdown-toggle" href="#">
  87. <i class="icon-tasks"></i>
  88. <span class="badge badge-grey">4</span>
  89. </a>
  90. <ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
  91. <li class="dropdown-header">
  92. <i class="icon-ok"></i>
  93. 4 Tasks to complete
  94. </li>
  95. <li>
  96. <a href="#">
  97. <div class="clearfix">
  98. <span class="pull-left">Software Update</span>
  99. <span class="pull-right">65%</span>
  100. </div>
  101. <div class="progress progress-mini ">
  102. <div style="width:65%" class="progress-bar "></div>
  103. </div>
  104. </a>
  105. </li>
  106. <li>
  107. <a href="#">
  108. <div class="clearfix">
  109. <span class="pull-left">Hardware Upgrade</span>
  110. <span class="pull-right">35%</span>
  111. </div>
  112. <div class="progress progress-mini ">
  113. <div style="width:35%" class="progress-bar progress-bar-danger"></div>
  114. </div>
  115. </a>
  116. </li>
  117. <li>
  118. <a href="#">
  119. <div class="clearfix">
  120. <span class="pull-left">Unit Testing</span>
  121. <span class="pull-right">15%</span>
  122. </div>
  123. <div class="progress progress-mini ">
  124. <div style="width:15%" class="progress-bar progress-bar-warning"></div>
  125. </div>
  126. </a>
  127. </li>
  128. <li>
  129. <a href="#">
  130. <div class="clearfix">
  131. <span class="pull-left">Bug Fixes</span>
  132. <span class="pull-right">90%</span>
  133. </div>
  134. <div class="progress progress-mini progress-striped active">
  135. <div style="width:90%" class="progress-bar progress-bar-success"></div>
  136. </div>
  137. </a>
  138. </li>
  139. <li>
  140. <a href="#">
  141. See tasks with details
  142. <i class="icon-arrow-right"></i>
  143. </a>
  144. </li>
  145. </ul>
  146. </li>
  147. <li class="purple">
  148. <a data-toggle="dropdown" class="dropdown-toggle" href="#">
  149. <i class="icon-bell-alt icon-animated-bell"></i>
  150. <span class="badge badge-important">8</span>
  151. </a>
  152. <ul class="pull-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">
  153. <li class="dropdown-header">
  154. <i class="icon-warning-sign"></i>
  155. 8 Notifications
  156. </li>
  157. <li>
  158. <a href="#">
  159. <div class="clearfix">
  160. <span class="pull-left">
  161. <i class="btn btn-xs no-hover btn-pink icon-comment"></i>
  162. New Comments
  163. </span>
  164. <span class="pull-right badge badge-info">+12</span>
  165. </div>
  166. </a>
  167. </li>
  168. <li>
  169. <a href="#">
  170. <i class="btn btn-xs btn-primary icon-user"></i>
  171. Bob just signed up as an editor ...
  172. </a>
  173. </li>
  174. <li>
  175. <a href="#">
  176. <div class="clearfix">
  177. <span class="pull-left">
  178. <i class="btn btn-xs no-hover btn-success icon-shopping-cart"></i>
  179. New Orders
  180. </span>
  181. <span class="pull-right badge badge-success">+8</span>
  182. </div>
  183. </a>
  184. </li>
  185. <li>
  186. <a href="#">
  187. <div class="clearfix">
  188. <span class="pull-left">
  189. <i class="btn btn-xs no-hover btn-info icon-twitter"></i>
  190. Followers
  191. </span>
  192. <span class="pull-right badge badge-info">+11</span>
  193. </div>
  194. </a>
  195. </li>
  196. <li>
  197. <a href="#">
  198. See all notifications
  199. <i class="icon-arrow-right"></i>
  200. </a>
  201. </li>
  202. </ul>
  203. </li>
  204. <li class="green">
  205. <a data-toggle="dropdown" class="dropdown-toggle" href="#">
  206. <i class="icon-envelope icon-animated-vertical"></i>
  207. <span class="badge badge-success">5</span>
  208. </a>
  209. <ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
  210. <li class="dropdown-header">
  211. <i class="icon-envelope-alt"></i>
  212. 5 Messages
  213. </li>
  214. <li>
  215. <a href="#">
  216. <img src="assets/avatars/avatar.png" class="msg-photo" alt="Alex's Avatar" />
  217. <span class="msg-body">
  218. <span class="msg-title">
  219. <span class="blue">Alex:</span>
  220. Ciao sociis natoque penatibus et auctor ...
  221. </span>
  222. <span class="msg-time">
  223. <i class="icon-time"></i>
  224. <span>a moment ago</span>
  225. </span>
  226. </span>
  227. </a>
  228. </li>
  229. <li>
  230. <a href="#">
  231. <img src="assets/avatars/avatar3.png" class="msg-photo" alt="Susan's Avatar" />
  232. <span class="msg-body">
  233. <span class="msg-title">
  234. <span class="blue">Susan:</span>
  235. Vestibulum id ligula porta felis euismod ...
  236. </span>
  237. <span class="msg-time">
  238. <i class="icon-time"></i>
  239. <span>20 minutes ago</span>
  240. </span>
  241. </span>
  242. </a>
  243. </li>
  244. <li>
  245. <a href="#">
  246. <img src="assets/avatars/avatar4.png" class="msg-photo" alt="Bob's Avatar" />
  247. <span class="msg-body">
  248. <span class="msg-title">
  249. <span class="blue">Bob:</span>
  250. Nullam quis risus eget urna mollis ornare ...
  251. </span>
  252. <span class="msg-time">
  253. <i class="icon-time"></i>
  254. <span>3:15 pm</span>
  255. </span>
  256. </span>
  257. </a>
  258. </li>
  259. <li>
  260. <a href="inbox.html">
  261. See all messages
  262. <i class="icon-arrow-right"></i>
  263. </a>
  264. </li>
  265. </ul>
  266. </li>
  267. <li class="light-blue">
  268. <a data-toggle="dropdown" href="#" class="dropdown-toggle">
  269. <img class="nav-user-photo" src="assets/avatars/user.jpg" alt="Jason's Photo" />
  270. <span class="user-info">
  271. <small>Welcome,</small>
  272. Jason
  273. </span>
  274. <i class="icon-caret-down"></i>
  275. </a>
  276. <ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
  277. <li>
  278. <a href="#">
  279. <i class="icon-cog"></i>
  280. Settings
  281. </a>
  282. </li>
  283. <li>
  284. <a href="#">
  285. <i class="icon-user"></i>
  286. Profile
  287. </a>
  288. </li>
  289. <li class="divider"></li>
  290. <li>
  291. <a href="#">
  292. <i class="icon-off"></i>
  293. Logout
  294. </a>
  295. </li>
  296. </ul>
  297. </li>
  298. </ul><!-- /.ace-nav -->
  299. </div><!-- /.navbar-header -->
  300. </div><!-- /.container -->
  301. </div>
  302. <div class="main-container" id="main-container">
  303. <script type="text/javascript">
  304. try{ace.settings.check('main-container' , 'fixed')}catch(e){}
  305. </script>
  306. <div class="main-container-inner">
  307. <a class="menu-toggler" id="menu-toggler" href="#">
  308. <span class="menu-text"></span>
  309. </a>
  310. <div class="sidebar" id="sidebar">
  311. <script type="text/javascript">
  312. try{ace.settings.check('sidebar' , 'fixed')}catch(e){}
  313. </script>
  314. <div class="sidebar-shortcuts" id="sidebar-shortcuts">
  315. <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
  316. <button class="btn btn-success">
  317. <i class="icon-signal"></i>
  318. </button>
  319. <button class="btn btn-info">
  320. <i class="icon-pencil"></i>
  321. </button>
  322. <button class="btn btn-warning">
  323. <i class="icon-group"></i>
  324. </button>
  325. <button class="btn btn-danger">
  326. <i class="icon-cogs"></i>
  327. </button>
  328. </div>
  329. <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
  330. <span class="btn btn-success"></span>
  331. <span class="btn btn-info"></span>
  332. <span class="btn btn-warning"></span>
  333. <span class="btn btn-danger"></span>
  334. </div>
  335. </div><!-- #sidebar-shortcuts -->
  336. <ul class="nav nav-list">
  337. <li class="active">
  338. <a href="index.html">
  339. <i class="icon-dashboard"></i>
  340. <span class="menu-text"> 控制台 </span>
  341. </a>
  342. </li>
  343. <li>
  344. <a href="typography.html">
  345. <i class="icon-text-width"></i>
  346. <span class="menu-text"> 文字排版 </span>
  347. </a>
  348. </li>
  349. <li>
  350. <a href="#" class="dropdown-toggle">
  351. <i class="icon-desktop"></i>
  352. <span class="menu-text"> UI 组件 </span>
  353. <b class="arrow icon-angle-down"></b>
  354. </a>
  355. <ul class="submenu">
  356. <li>
  357. <a href="elements.html">
  358. <i class="icon-double-angle-right"></i>
  359. 组件
  360. </a>
  361. </li>
  362. <li>
  363. <a href="buttons.html">
  364. <i class="icon-double-angle-right"></i>
  365. 按钮 &amp; 图表
  366. </a>
  367. </li>
  368. <li>
  369. <a href="treeview.html">
  370. <i class="icon-double-angle-right"></i>
  371. 树菜单
  372. </a>
  373. </li>
  374. <li>
  375. <a href="jquery-ui.html">
  376. <i class="icon-double-angle-right"></i>
  377. jQuery UI
  378. </a>
  379. </li>
  380. <li>
  381. <a href="nestable-list.html">
  382. <i class="icon-double-angle-right"></i>
  383. 可拖拽列表
  384. </a>
  385. </li>
  386. <li>
  387. <a href="#" class="dropdown-toggle">
  388. <i class="icon-double-angle-right"></i>
  389. 三级菜单
  390. <b class="arrow icon-angle-down"></b>
  391. </a>
  392. <ul class="submenu">
  393. <li>
  394. <a href="#">
  395. <i class="icon-leaf"></i>
  396. 第一级
  397. </a>
  398. </li>
  399. <li>
  400. <a href="#" class="dropdown-toggle">
  401. <i class="icon-pencil"></i>
  402. 第四级
  403. <b class="arrow icon-angle-down"></b>
  404. </a>
  405. <ul class="submenu">
  406. <li>
  407. <a href="#">
  408. <i class="icon-plus"></i>
  409. 添加产品
  410. </a>
  411. </li>
  412. <li>
  413. <a href="#">
  414. <i class="icon-eye-open"></i>
  415. 查看商品
  416. </a>
  417. </li>
  418. </ul>
  419. </li>
  420. </ul>
  421. </li>
  422. </ul>
  423. </li>
  424. <li>
  425. <a href="#" class="dropdown-toggle">
  426. <i class="icon-list"></i>
  427. <span class="menu-text"> 表格 </span>
  428. <b class="arrow icon-angle-down"></b>
  429. </a>
  430. <ul class="submenu">
  431. <li>
  432. <a href="tables.html">
  433. <i class="icon-double-angle-right"></i>
  434. 简单 &amp; 动态
  435. </a>
  436. </li>
  437. <li>
  438. <a href="jqgrid.html">
  439. <i class="icon-double-angle-right"></i>
  440. jqGrid plugin
  441. </a>
  442. </li>
  443. </ul>
  444. </li>
  445. <li>
  446. <a href="#" class="dropdown-toggle">
  447. <i class="icon-edit"></i>
  448. <span class="menu-text"> 表单 </span>
  449. <b class="arrow icon-angle-down"></b>
  450. </a>
  451. <ul class="submenu">
  452. <li>
  453. <a href="form-elements.html">
  454. <i class="icon-double-angle-right"></i>
  455. 表单组件
  456. </a>
  457. </li>
  458. <li>
  459. <a href="form-wizard.html">
  460. <i class="icon-double-angle-right"></i>
  461. 向导提示 &amp; 验证
  462. </a>
  463. </li>
  464. <li>
  465. <a href="wysiwyg.html">
  466. <i class="icon-double-angle-right"></i>
  467. 编辑器
  468. </a>
  469. </li>
  470. <li>
  471. <a href="dropzone.html">
  472. <i class="icon-double-angle-right"></i>
  473. 文件上传
  474. </a>
  475. </li>
  476. </ul>
  477. </li>
  478. <li>
  479. <a href="widgets.html">
  480. <i class="icon-list-alt"></i>
  481. <span class="menu-text"> 插件 </span>
  482. </a>
  483. </li>
  484. <li>
  485. <a href="calendar.html">
  486. <i class="icon-calendar"></i>
  487. <span class="menu-text">
  488. 日历
  489. <span class="badge badge-transparent tooltip-error" title="2&nbsp;Important&nbsp;Events">
  490. <i class="icon-warning-sign red bigger-130"></i>
  491. </span>
  492. </span>
  493. </a>
  494. </li>
  495. <li>
  496. <a href="gallery.html">
  497. <i class="icon-picture"></i>
  498. <span class="menu-text"> 相册 </span>
  499. </a>
  500. </li>
  501. <li>
  502. <a href="#" class="dropdown-toggle">
  503. <i class="icon-tag"></i>
  504. <span class="menu-text"> 更多页面 </span>
  505. <b class="arrow icon-angle-down"></b>
  506. </a>
  507. <ul class="submenu">
  508. <li>
  509. <a href="profile.html">
  510. <i class="icon-double-angle-right"></i>
  511. 用户信息
  512. </a>
  513. </li>
  514. <li>
  515. <a href="inbox.html">
  516. <i class="icon-double-angle-right"></i>
  517. 收件箱
  518. </a>
  519. </li>
  520. <li>
  521. <a href="pricing.html">
  522. <i class="icon-double-angle-right"></i>
  523. 售价单
  524. </a>
  525. </li>
  526. <li>
  527. <a href="invoice.html">
  528. <i class="icon-double-angle-right"></i>
  529. 购物车
  530. </a>
  531. </li>
  532. <li>
  533. <a href="timeline.html">
  534. <i class="icon-double-angle-right"></i>
  535. 时间轴
  536. </a>
  537. </li>
  538. <li>
  539. <a href="login.html">
  540. <i class="icon-double-angle-right"></i>
  541. 登录 &amp; 注册
  542. </a>
  543. </li>
  544. </ul>
  545. </li>
  546. <li class="active open">
  547. <a href="#" class="dropdown-toggle">
  548. <i class="icon-file-alt"></i>
  549. <span class="menu-text">
  550. 其他页面
  551. <span class="badge badge-primary ">5</span>
  552. </span>
  553. <b class="arrow icon-angle-down"></b>
  554. </a>
  555. <ul class="submenu">
  556. <li>
  557. <a href="faq.html">
  558. <i class="icon-double-angle-right"></i>
  559. 帮助
  560. </a>
  561. </li>
  562. <li>
  563. <a href="error-404.html">
  564. <i class="icon-double-angle-right"></i>
  565. 404错误页面
  566. </a>
  567. </li>
  568. <li>
  569. <a href="error-500.html">
  570. <i class="icon-double-angle-right"></i>
  571. 500错误页面
  572. </a>
  573. </li>
  574. <li class="active">
  575. <a href="grid.html">
  576. <i class="icon-double-angle-right"></i>
  577. 网格
  578. </a>
  579. </li>
  580. <li>
  581. <a href="blank.html">
  582. <i class="icon-double-angle-right"></i>
  583. 空白页面
  584. </a>
  585. </li>
  586. </ul>
  587. </li>
  588. </ul><!-- /.nav-list -->
  589. <div class="sidebar-collapse" id="sidebar-collapse">
  590. <i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>
  591. </div>
  592. <script type="text/javascript">
  593. try{ace.settings.check('sidebar' , 'collapsed')}catch(e){}
  594. </script>
  595. </div>
  596. <div class="main-content">
  597. <div class="breadcrumbs" id="breadcrumbs">
  598. <script type="text/javascript">
  599. try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
  600. </script>
  601. <ul class="breadcrumb">
  602. <li>
  603. <i class="icon-home home-icon"></i>
  604. <a href="#">Home</a>
  605. </li>
  606. <li>
  607. <a href="#">Other Pages</a>
  608. </li>
  609. <li class="active">Grid</li>
  610. </ul><!-- .breadcrumb -->
  611. <div class="nav-search" id="nav-search">
  612. <form class="form-search">
  613. <span class="input-icon">
  614. <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
  615. <i class="icon-search nav-search-icon"></i>
  616. </span>
  617. </form>
  618. </div><!-- #nav-search -->
  619. </div>
  620. <div class="page-content">
  621. <div class="page-header">
  622. <h1>
  623. Grid
  624. <small>
  625. <i class="icon-double-angle-right"></i>
  626. bootstrap grid sizing
  627. </small>
  628. </h1>
  629. </div><!-- /.page-header -->
  630. <div class="row">
  631. <div class="col-xs-12">
  632. <!-- PAGE CONTENT BEGINS -->
  633. <div class="center">
  634. <div class="row">
  635. <div class="col-xs-12">
  636. <span>.col-xs-12</span>
  637. </div>
  638. </div>
  639. <div class="row">
  640. <div class="col-xs-1">
  641. <span>.col-xs-1</span>
  642. </div>
  643. <div class="col-xs-11">
  644. <span>.col-xs-11</span>
  645. </div>
  646. </div>
  647. <div class="row">
  648. <div class="col-xs-6 col-sm-2">
  649. <span>.col-xs-6.col-sm-2</span>
  650. </div>
  651. <div class="col-xs-6 col-sm-10">
  652. <span>.col-xs-6.col-sm-10</span>
  653. </div>
  654. </div>
  655. <div class="row">
  656. <div class="col-xs-12 col-lg-6">
  657. <span>.col-xs-12.col-lg-6</span>
  658. </div>
  659. <div class="col-xs-12 col-lg-6">
  660. <span>.col-xs-12.col-lg-6</span>
  661. </div>
  662. </div>
  663. <div class="row">
  664. <div class="col-xs-4">
  665. <span>.col-xs-4</span>
  666. </div>
  667. <div class="col-xs-8">
  668. <span>.col-xs-8</span>
  669. </div>
  670. </div>
  671. <div class="row">
  672. <div class="col-xs-5">
  673. <span>.col-xs-5</span>
  674. </div>
  675. <div class="col-xs-7">
  676. <span>.col-xs-7</span>
  677. </div>
  678. </div>
  679. <div class="row">
  680. <div class="col-xs-6">
  681. <span>.col-xs-6</span>
  682. </div>
  683. <div class="col-xs-6">
  684. <span>.col-xs-6</span>
  685. </div>
  686. </div>
  687. <div class="row">
  688. <div class="col-xs-7">
  689. <span>.col-xs-7</span>
  690. </div>
  691. <div class="col-xs-5">
  692. <span>.col-xs-5</span>
  693. </div>
  694. </div>
  695. <div class="row">
  696. <div class="col-xs-8">
  697. <span>.col-xs-8</span>
  698. </div>
  699. <div class="col-xs-4">
  700. <span>.col-xs-4</span>
  701. </div>
  702. </div>
  703. <div class="row">
  704. <div class="col-xs-9">
  705. <span>.col-xs-9</span>
  706. </div>
  707. <div class="col-xs-3">
  708. <span>.col-xs-3</span>
  709. </div>
  710. </div>
  711. <div class="row">
  712. <div class="col-xs-10">
  713. <span>.col-xs-10</span>
  714. </div>
  715. <div class="col-xs-2">
  716. <span>.col-xs-2</span>
  717. </div>
  718. </div>
  719. <div class="row">
  720. <div class="col-xs-11">
  721. <span>.col-xs-11</span>
  722. </div>
  723. <div class="col-xs-1">
  724. <span>.col-xs-1</span>
  725. </div>
  726. </div>
  727. <div class="row">
  728. <div class="col-xs-12">
  729. <span>.col-xs-12</span>
  730. </div>
  731. </div>
  732. </div>
  733. <!-- PAGE CONTENT ENDS -->
  734. </div><!-- /.col -->
  735. </div><!-- /.row -->
  736. </div><!-- /.page-content -->
  737. </div><!-- /.main-content -->
  738. <div class="ace-settings-container" id="ace-settings-container">
  739. <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
  740. <i class="icon-cog bigger-150"></i>
  741. </div>
  742. <div class="ace-settings-box" id="ace-settings-box">
  743. <div>
  744. <div class="pull-left">
  745. <select id="skin-colorpicker" class="hide">
  746. <option data-skin="default" value="#438EB9">#438EB9</option>
  747. <option data-skin="skin-1" value="#222A2D">#222A2D</option>
  748. <option data-skin="skin-2" value="#C6487E">#C6487E</option>
  749. <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
  750. </select>
  751. </div>
  752. <span>&nbsp; Choose Skin</span>
  753. </div>
  754. <div>
  755. <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" />
  756. <label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
  757. </div>
  758. <div>
  759. <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" />
  760. <label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
  761. </div>
  762. <div>
  763. <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" />
  764. <label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
  765. </div>
  766. <div>
  767. <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" />
  768. <label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
  769. </div>
  770. <div>
  771. <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" />
  772. <label class="lbl" for="ace-settings-add-container">
  773. Inside
  774. <b>.container</b>
  775. </label>
  776. </div>
  777. </div>
  778. </div><!-- /#ace-settings-container -->
  779. </div><!-- /.main-container-inner -->
  780. <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
  781. <i class="icon-double-angle-up icon-only bigger-110"></i>
  782. </a>
  783. </div><!-- /.main-container -->
  784. <!-- basic scripts -->
  785. <!--[if !IE]> -->
  786. <script src="assets/js/jquery-2.0.3.min.js"></script>
  787. <!-- <![endif]-->
  788. <!--[if IE]>
  789. <script src="assets/js/jquery-1.10.2.min.js"></script>
  790. <![endif]-->
  791. <!--[if !IE]> -->
  792. <script type="text/javascript">
  793. window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
  794. </script>
  795. <!-- <![endif]-->
  796. <!--[if IE]>
  797. <script type="text/javascript">
  798. window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
  799. </script>
  800. <![endif]-->
  801. <script type="text/javascript">
  802. if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
  803. </script>
  804. <script src="assets/js/bootstrap.min.js"></script>
  805. <script src="assets/js/typeahead-bs2.min.js"></script>
  806. <!-- page specific plugin scripts -->
  807. <!-- ace scripts -->
  808. <script src="assets/js/ace-elements.min.js"></script>
  809. <script src="assets/js/ace.min.js"></script>
  810. <!-- inline scripts related to this page -->
  811. </body>
  812. </html>