]>
Commit | Line | Data |
---|---|---|
31f18b77 FG |
1 | <section id="components" data-spy="scroll" data-target="#scrollspy-components"> |
2 | <h2 class="page-header"><a href="#components">Components</a></h2> | |
3 | <div class="callout callout-info lead"> | |
4 | <h4>Reminder!</h4> | |
5 | <p> | |
6 | AdminLTE uses all of Bootstrap 3 components. It's a good start to review | |
7 | the <a href="http://getbootstrap.com">Bootstrap documentation</a> to get an idea of the various components | |
8 | that this documentation <b>does not</b> cover. | |
9 | </p> | |
10 | </div> | |
11 | <div class="callout callout-danger lead"> | |
12 | <h4>Tip!</h4> | |
13 | <p> | |
14 | If you go through the example pages and would like to copy a component, right-click on | |
15 | the component and choose "inspect element" to get to the HTML quicker than scanning | |
16 | the HTML page. | |
17 | </p> | |
18 | </div> | |
19 | <h3 id="component-main-header">Main Header</h3> | |
20 | <p class="lead">The main header contains the logo and navbar. Construction of the | |
21 | navbar differs slightly from Bootstrap because it has components that Bootstrap doesn't provide. | |
22 | The navbar can be constructed in two way. This an example for the normal navbar and next we will provide an example for | |
23 | the top nav layout.</p> | |
24 | <div class="box box-solid"> | |
25 | <div class="box-body" style="position: relative;"> | |
26 | <span class="eg">Main Header Example</span> | |
27 | <header class="main-header" style="position: relative;"> | |
28 | <!-- Logo --> | |
29 | <a href="index2.html" class="logo" style="position: relative;"><b>Admin</b>LTE</a> | |
30 | <!-- Header Navbar: style can be found in header.less --> | |
31 | <nav class="navbar" role="navigation" style="border: 0;max-height: 50px;"> | |
32 | <!-- Sidebar toggle button--> | |
33 | <a href="#" class="sidebar-toggle" role="button"> | |
34 | <span class="sr-only">Toggle navigation</span> | |
35 | </a> | |
36 | <!-- Navbar Right Menu --> | |
37 | <div class="navbar-custom-menu"> | |
38 | <ul class="nav navbar-nav"> | |
39 | <!-- Messages: style can be found in dropdown.less--> | |
40 | <li class="dropdown messages-menu"> | |
41 | <a href="#" class="dropdown-toggle" data-toggle="dropdown"> | |
42 | <i class="fa fa-envelope-o"></i> | |
43 | <span class="label label-success">4</span> | |
44 | </a> | |
45 | <ul class="dropdown-menu"> | |
46 | <li class="header">You have 4 messages</li> | |
47 | <li> | |
48 | <!-- inner menu: contains the actual data --> | |
49 | <ul class="menu"> | |
50 | <li><!-- start message --> | |
51 | <a href="#"> | |
52 | <div class="pull-left"> | |
53 | <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> | |
54 | </div> | |
55 | <h4> | |
56 | Support Team | |
57 | <small><i class="fa fa-clock-o"></i> 5 mins</small> | |
58 | </h4> | |
59 | <p>Why not buy a new awesome theme?</p> | |
60 | </a> | |
61 | </li><!-- end message --> | |
62 | </ul> | |
63 | </li> | |
64 | <li class="footer"><a href="#">See All Messages</a></li> | |
65 | </ul> | |
66 | </li> | |
67 | <!-- Notifications: style can be found in dropdown.less --> | |
68 | <li class="dropdown notifications-menu"> | |
69 | <a href="#" class="dropdown-toggle" data-toggle="dropdown"> | |
70 | <i class="fa fa-bell-o"></i> | |
71 | <span class="label label-warning">10</span> | |
72 | </a> | |
73 | <ul class="dropdown-menu"> | |
74 | <li class="header">You have 10 notifications</li> | |
75 | <li> | |
76 | <!-- inner menu: contains the actual data --> | |
77 | <ul class="menu"> | |
78 | <li> | |
79 | <a href="#"> | |
80 | <i class="fa fa-users text-aqua"></i> 5 new members joined today | |
81 | </a> | |
82 | </li> | |
83 | </ul> | |
84 | </li> | |
85 | <li class="footer"><a href="#">View all</a></li> | |
86 | </ul> | |
87 | </li> | |
88 | <!-- Tasks: style can be found in dropdown.less --> | |
89 | <li class="dropdown tasks-menu"> | |
90 | <a href="#" class="dropdown-toggle" data-toggle="dropdown"> | |
91 | <i class="fa fa-flag-o"></i> | |
92 | <span class="label label-danger">9</span> | |
93 | </a> | |
94 | <ul class="dropdown-menu"> | |
95 | <li class="header">You have 9 tasks</li> | |
96 | <li> | |
97 | <!-- inner menu: contains the actual data --> | |
98 | <ul class="menu"> | |
99 | <li><!-- Task item --> | |
100 | <a href="#"> | |
101 | <h3> | |
102 | Design some buttons | |
103 | <small class="pull-right">20%</small> | |
104 | </h3> | |
105 | <div class="progress xs"> | |
106 | <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> | |
107 | <span class="sr-only">20% Complete</span> | |
108 | </div> | |
109 | </div> | |
110 | </a> | |
111 | </li><!-- end task item --> | |
112 | </ul> | |
113 | </li> | |
114 | <li class="footer"> | |
115 | <a href="#">View all tasks</a> | |
116 | </li> | |
117 | </ul> | |
118 | </li> | |
119 | <!-- User Account: style can be found in dropdown.less --> | |
120 | <li class="dropdown user user-menu"> | |
121 | <a href="#" class="dropdown-toggle" data-toggle="dropdown"> | |
122 | <img src="../dist/img/user2-160x160.jpg" class="user-image" alt="User Image"> | |
123 | <span class="hidden-xs">Alexander Pierce</span> | |
124 | </a> | |
125 | <ul class="dropdown-menu"> | |
126 | <!-- User image --> | |
127 | <li class="user-header"> | |
128 | <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> | |
129 | <p> | |
130 | Alexander Pierce - Web Developer | |
131 | <small>Member since Nov. 2012</small> | |
132 | </p> | |
133 | </li> | |
134 | <!-- Menu Body --> | |
135 | <li class="user-body"> | |
136 | <div class="col-xs-4 text-center"> | |
137 | <a href="#">Followers</a> | |
138 | </div> | |
139 | <div class="col-xs-4 text-center"> | |
140 | <a href="#">Sales</a> | |
141 | </div> | |
142 | <div class="col-xs-4 text-center"> | |
143 | <a href="#">Friends</a> | |
144 | </div> | |
145 | </li> | |
146 | <!-- Menu Footer--> | |
147 | <li class="user-footer"> | |
148 | <div class="pull-left"> | |
149 | <a href="#" class="btn btn-default btn-flat">Profile</a> | |
150 | </div> | |
151 | <div class="pull-right"> | |
152 | <a href="#" class="btn btn-default btn-flat">Sign out</a> | |
153 | </div> | |
154 | </li> | |
155 | </ul> | |
156 | </li> | |
157 | </ul> | |
158 | </div> | |
159 | </nav> | |
160 | </header> | |
161 | </div> | |
162 | </div> | |
163 | <pre class="prettyprint"><header class="main-header"> | |
164 | <a href="../../index2.html" class="logo"> | |
165 | <!-- LOGO --> | |
166 | AdminLTE | |
167 | </a> | |
168 | <!-- Header Navbar: style can be found in header.less --> | |
169 | <nav class="navbar navbar-static-top" role="navigation"> | |
170 | <!-- Navbar Right Menu --> | |
171 | <div class="navbar-custom-menu"> | |
172 | <ul class="nav navbar-nav"> | |
173 | <!-- Messages: style can be found in dropdown.less--> | |
174 | <li class="dropdown messages-menu"> | |
175 | <a href="#" class="dropdown-toggle" data-toggle="dropdown"> | |
176 | <i class="fa fa-envelope-o"></i> | |
177 | <span class="label label-success">4</span> | |
178 | </a> | |
179 | <ul class="dropdown-menu"> | |
180 | <li class="header">You have 4 messages</li> | |
181 | <li> | |
182 | <!-- inner menu: contains the actual data --> | |
183 | <ul class="menu"> | |
184 | <li><!-- start message --> | |
185 | <a href="#"> | |
186 | <div class="pull-left"> | |
187 | <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> | |
188 | </div> | |
189 | <h4> | |
190 | Sender Name | |
191 | <small><i class="fa fa-clock-o"></i> 5 mins</small> | |
192 | </h4> | |
193 | <p>Message Excerpt</p> | |
194 | </a> | |
195 | </li><!-- end message --> | |
196 | ... | |
197 | </ul> | |
198 | </li> | |
199 | <li class="footer"><a href="#">See All Messages</a></li> | |
200 | </ul> | |
201 | </li> | |
202 | <!-- Notifications: style can be found in dropdown.less --> | |
203 | <li class="dropdown notifications-menu"> | |
204 | <a href="#" class="dropdown-toggle" data-toggle="dropdown"> | |
205 | <i class="fa fa-bell-o"></i> | |
206 | <span class="label label-warning">10</span> | |
207 | </a> | |
208 | <ul class="dropdown-menu"> | |
209 | <li class="header">You have 10 notifications</li> | |
210 | <li> | |
211 | <!-- inner menu: contains the actual data --> | |
212 | <ul class="menu"> | |
213 | <li> | |
214 | <a href="#"> | |
215 | <i class="ion ion-ios-people info"></i> Notification title | |
216 | </a> | |
217 | </li> | |
218 | ... | |
219 | </ul> | |
220 | </li> | |
221 | <li class="footer"><a href="#">View all</a></li> | |
222 | </ul> | |
223 | </li> | |
224 | <!-- Tasks: style can be found in dropdown.less --> | |
225 | <li class="dropdown tasks-menu"> | |
226 | <a href="#" class="dropdown-toggle" data-toggle="dropdown"> | |
227 | <i class="fa fa-flag-o"></i> | |
228 | <span class="label label-danger">9</span> | |
229 | </a> | |
230 | <ul class="dropdown-menu"> | |
231 | <li class="header">You have 9 tasks</li> | |
232 | <li> | |
233 | <!-- inner menu: contains the actual data --> | |
234 | <ul class="menu"> | |
235 | <li><!-- Task item --> | |
236 | <a href="#"> | |
237 | <h3> | |
238 | Design some buttons | |
239 | <small class="pull-right">20%</small> | |
240 | </h3> | |
241 | <div class="progress xs"> | |
242 | <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> | |
243 | <span class="sr-only">20% Complete</span> | |
244 | </div> | |
245 | </div> | |
246 | </a> | |
247 | </li><!-- end task item --> | |
248 | ... | |
249 | </ul> | |
250 | </li> | |
251 | <li class="footer"> | |
252 | <a href="#">View all tasks</a> | |
253 | </li> | |
254 | </ul> | |
255 | </li> | |
256 | <!-- User Account: style can be found in dropdown.less --> | |
257 | <li class="dropdown user user-menu"> | |
258 | <a href="#" class="dropdown-toggle" data-toggle="dropdown"> | |
259 | <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"> | |
260 | <span class="hidden-xs">Alexander Pierce</span> | |
261 | </a> | |
262 | <ul class="dropdown-menu"> | |
263 | <!-- User image --> | |
264 | <li class="user-header"> | |
265 | <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> | |
266 | <p> | |
267 | Alexander Pierce - Web Developer | |
268 | <small>Member since Nov. 2012</small> | |
269 | </p> | |
270 | </li> | |
271 | <!-- Menu Body --> | |
272 | <li class="user-body"> | |
273 | <div class="col-xs-4 text-center"> | |
274 | <a href="#">Followers</a> | |
275 | </div> | |
276 | <div class="col-xs-4 text-center"> | |
277 | <a href="#">Sales</a> | |
278 | </div> | |
279 | <div class="col-xs-4 text-center"> | |
280 | <a href="#">Friends</a> | |
281 | </div> | |
282 | </li> | |
283 | <!-- Menu Footer--> | |
284 | <li class="user-footer"> | |
285 | <div class="pull-left"> | |
286 | <a href="#" class="btn btn-default btn-flat">Profile</a> | |
287 | </div> | |
288 | <div class="pull-right"> | |
289 | <a href="#" class="btn btn-default btn-flat">Sign out</a> | |
290 | </div> | |
291 | </li> | |
292 | </ul> | |
293 | </li> | |
294 | </ul> | |
295 | </div> | |
296 | </nav> | |
297 | </header></pre> | |
298 | <h4>Top Nav Layout. Main Header Example.</h4> | |
299 | <div class="callout callout-info lead"> | |
300 | <h4>Reminder!</h4> | |
301 | <p>To use this main header instead of the regular one, you must add the <code>layout-top-nav</code> class to the body tag.</p> | |
302 | </div> | |
303 | <div class="box box-solid"> | |
304 | <div class="box-body layout-top-nav"> | |
305 | <span class="eg">Top Nav Example</span> | |
306 | <header class="main-header"> | |
307 | <nav class="navbar navbar-static-top"> | |
308 | <div class="container-fluid"> | |
309 | <div class="navbar-header"> | |
310 | <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a> | |
311 | <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> | |
312 | <i class="fa fa-bars"></i> | |
313 | </button> | |
314 | </div> | |
315 | ||
316 | <!-- Collect the nav links, forms, and other content for toggling --> | |
317 | <div class="collapse navbar-collapse" id="navbar-collapse"> | |
318 | <ul class="nav navbar-nav"> | |
319 | <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> | |
320 | <li><a href="#">Link</a></li> | |
321 | <li class="dropdown"> | |
322 | <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> | |
323 | <ul class="dropdown-menu" role="menu"> | |
324 | <li><a href="#">Action</a></li> | |
325 | <li><a href="#">Another action</a></li> | |
326 | <li><a href="#">Something else here</a></li> | |
327 | <li class="divider"></li> | |
328 | <li><a href="#">Separated link</a></li> | |
329 | <li class="divider"></li> | |
330 | <li><a href="#">One more separated link</a></li> | |
331 | </ul> | |
332 | </li> | |
333 | </ul> | |
334 | <form class="navbar-form navbar-left" role="search"> | |
335 | <div class="form-group"> | |
336 | <input type="text" class="form-control" id="navbar-search-input" placeholder="Search"> | |
337 | </div> | |
338 | </form> | |
339 | <ul class="nav navbar-nav navbar-right"> | |
340 | <li><a href="#">Link</a></li> | |
341 | <li class="dropdown"> | |
342 | <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> | |
343 | <ul class="dropdown-menu" role="menu"> | |
344 | <li><a href="#">Action</a></li> | |
345 | <li><a href="#">Another action</a></li> | |
346 | <li><a href="#">Something else here</a></li> | |
347 | <li class="divider"></li> | |
348 | <li><a href="#">Separated link</a></li> | |
349 | </ul> | |
350 | </li> | |
351 | </ul> | |
352 | </div><!-- /.navbar-collapse --> | |
353 | </div><!-- /.container-fluid --> | |
354 | </nav> | |
355 | </header> | |
356 | </div> | |
357 | </div> | |
358 | <pre class="prettyprint"> | |
359 | <header class="main-header"> | |
360 | <nav class="navbar navbar-static-top"> | |
361 | <div class="container-fluid"> | |
362 | <div class="navbar-header"> | |
363 | <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a> | |
364 | <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> | |
365 | <i class="fa fa-bars"></i> | |
366 | </button> | |
367 | </div> | |
368 | ||
369 | <!-- Collect the nav links, forms, and other content for toggling --> | |
370 | <div class="collapse navbar-collapse" id="navbar-collapse"> | |
371 | <ul class="nav navbar-nav"> | |
372 | <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> | |
373 | <li><a href="#">Link</a></li> | |
374 | <li class="dropdown"> | |
375 | <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> | |
376 | <ul class="dropdown-menu" role="menu"> | |
377 | <li><a href="#">Action</a></li> | |
378 | <li><a href="#">Another action</a></li> | |
379 | <li><a href="#">Something else here</a></li> | |
380 | <li class="divider"></li> | |
381 | <li><a href="#">Separated link</a></li> | |
382 | <li class="divider"></li> | |
383 | <li><a href="#">One more separated link</a></li> | |
384 | </ul> | |
385 | </li> | |
386 | </ul> | |
387 | <form class="navbar-form navbar-left" role="search"> | |
388 | <div class="form-group"> | |
389 | <input type="text" class="form-control" id="navbar-search-input" placeholder="Search"> | |
390 | </div> | |
391 | </form> | |
392 | <ul class="nav navbar-nav navbar-right"> | |
393 | <li><a href="#">Link</a></li> | |
394 | <li class="dropdown"> | |
395 | <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> | |
396 | <ul class="dropdown-menu" role="menu"> | |
397 | <li><a href="#">Action</a></li> | |
398 | <li><a href="#">Another action</a></li> | |
399 | <li><a href="#">Something else here</a></li> | |
400 | <li class="divider"></li> | |
401 | <li><a href="#">Separated link</a></li> | |
402 | </ul> | |
403 | </li> | |
404 | </ul> | |
405 | </div><!-- /.navbar-collapse --> | |
406 | </div><!-- /.container-fluid --> | |
407 | </nav> | |
408 | </header></pre> | |
409 | ||
410 | <!-- ===================================================================== --> | |
411 | ||
412 | <h3 id="component-sidebar">Sidebar</h3> | |
413 | <p class="lead"> | |
414 | The sidebar used in this page to the left provides an example of what your sidebar should like. | |
415 | Construction of a sidebar: | |
416 | </p> | |
417 | <pre class="prettyprint"> | |
418 | <div class="main-sidebar"> | |
419 | <!-- Inner sidebar --> | |
420 | <div class="sidebar"> | |
421 | <!-- user panel (Optional) --> | |
422 | <div class="user-panel"> | |
423 | <div class="pull-left image"> | |
424 | <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> | |
425 | </div> | |
426 | <div class="pull-left info"> | |
427 | <p>User Name</p> | |
428 | ||
429 | <a href="#"><i class="fa fa-circle text-success"></i> Online</a> | |
430 | </div> | |
431 | </div><!-- /.user-panel --> | |
432 | ||
433 | <!-- Search Form (Optional) --> | |
434 | <form action="#" method="get" class="sidebar-form"> | |
435 | <div class="input-group"> | |
436 | <input type="text" name="q" class="form-control" placeholder="Search..."> | |
437 | <span class="input-group-btn"> | |
438 | <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button> | |
439 | </span> | |
440 | </div> | |
441 | </form><!-- /.sidebar-form --> | |
442 | ||
443 | <!-- Sidebar Menu --> | |
444 | <ul class="sidebar-menu"> | |
445 | <li class="header">HEADER</li> | |
446 | <!-- Optionally, you can add icons to the links --> | |
447 | <li class="active"><a href="#"><span>Link</span></a><</li> | |
448 | <li><a href="#"><span>Another Link</span></a></li> | |
449 | <li class="treeview"> | |
450 | <a href="#"><span>Multilevel</span> <i class="fa fa-angle-left pull-right"></i></a> | |
451 | <ul class="treeview-menu"> | |
452 | <li><a href="#">Link in level 2</a></li> | |
453 | <li><a href="#">Link in level 2</a></li> | |
454 | </ul> | |
455 | </li> | |
456 | </ul><!-- /.sidebar-menu --> | |
457 | ||
458 | </div><!-- /.sidebar --> | |
459 | </div><!-- /.main-sidebar --></pre> | |
460 | ||
461 | <h3 id="component-control-sidebar">Control Sidebar</h3> | |
462 | <p class="lead">Control sidebar is the right side bar. It can be used for many purposes and is extremely easy | |
463 | to create. The sidebar ships with two different show/hide styles. The first allows the sidebar to | |
464 | slide over the content. The second pushes the content to make space for the sidebar. Either of | |
465 | these methods can be set through the <a href="#adminlte-options">Javascript options</a>.</p> | |
466 | <p class="lead">The following code should be placed within the <code>.wrapper</code> div. I prefer | |
467 | to place it right after the footer.</p> | |
468 | <p class="lead">Dark Sidebar Markup</p> | |
469 | <pre class="prettyprint"><code class="lang-html"><!-- The Right Sidebar --> | |
470 | <aside class="control-sidebar control-sidebar-dark"> | |
471 | <!-- Content of the sidebar goes here --> | |
472 | </aside> | |
473 | <!-- The sidebar's background --> | |
474 | <!-- This div must placed right after the sidebar for it to work--> | |
475 | <div class="control-sidebar-bg"></div></code></pre> | |
476 | ||
477 | <p class="lead">Light Sidebar Markup</p> | |
478 | <pre class="prettyprint"><code class="lang-html"><!-- The Right Sidebar --> | |
479 | <aside class="control-sidebar control-sidebar-light"> | |
480 | <!-- Content of the sidebar goes here --> | |
481 | </aside> | |
482 | <!-- The sidebar's background --> | |
483 | <!-- This div must placed right after the sidebar for it to work--> | |
484 | <div class="control-sidebar-bg"></div></code></pre> | |
485 | ||
486 | <p class="lead">Once you create the sidebar, you will need a toggle button to open/close it. | |
487 | By adding the attribute <code>data-toggle="control-sidebar"</code> to any button, it will | |
488 | automatically act as the toggle button.</p> | |
489 | ||
490 | <p class="lead">Toggle Button Example</p> | |
491 | <button class="btn btn-primary" data-toggle="control-sidebar">Toggle Right Sidebar</button><br><br> | |
492 | ||
493 | <p class="lead">Sidebar Toggle Markup</p> | |
494 | <pre class="prettyprint"><code class="lang-html"><button class="btn btn-default" data-toggle="control-sidebar">Toggle Right Sidebar</button></code></pre> | |
495 | <!-- ===================================================================== --> | |
496 | ||
497 | <h3 id="component-info-box">Info Box</h3> | |
498 | <p class="lead">Info boxes are used to display statistical snippets. There are two types of info boxes.</p> | |
499 | <h4>First Type of Info Boxes</h4> | |
500 | <!-- Info Boxes --> | |
501 | <div class="row"> | |
502 | <div class="col-md-3 col-sm-6 col-xs-12"> | |
503 | <div class="info-box"> | |
504 | <span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span> | |
505 | <div class="info-box-content"> | |
506 | <span class="info-box-text">Messages</span> | |
507 | <span class="info-box-number">1,410</span> | |
508 | </div><!-- /.info-box-content --> | |
509 | </div><!-- /.info-box --> | |
510 | </div><!-- /.col --> | |
511 | <div class="col-md-3 col-sm-6 col-xs-12"> | |
512 | <div class="info-box"> | |
513 | <span class="info-box-icon bg-green"><i class="fa fa-flag-o"></i></span> | |
514 | <div class="info-box-content"> | |
515 | <span class="info-box-text">Bookmarks</span> | |
516 | <span class="info-box-number">410</span> | |
517 | </div><!-- /.info-box-content --> | |
518 | </div><!-- /.info-box --> | |
519 | </div><!-- /.col --> | |
520 | <div class="col-md-3 col-sm-6 col-xs-12"> | |
521 | <div class="info-box"> | |
522 | <span class="info-box-icon bg-yellow"><i class="fa fa-files-o"></i></span> | |
523 | <div class="info-box-content"> | |
524 | <span class="info-box-text">Uploads</span> | |
525 | <span class="info-box-number">13,648</span> | |
526 | </div><!-- /.info-box-content --> | |
527 | </div><!-- /.info-box --> | |
528 | </div><!-- /.col --> | |
529 | <div class="col-md-3 col-sm-6 col-xs-12"> | |
530 | <div class="info-box"> | |
531 | <span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span> | |
532 | <div class="info-box-content"> | |
533 | <span class="info-box-text">Likes</span> | |
534 | <span class="info-box-number">93,139</span> | |
535 | </div><!-- /.info-box-content --> | |
536 | </div><!-- /.info-box --> | |
537 | </div><!-- /.col --> | |
538 | </div><!-- /.row --> | |
539 | <p class="lead">Markup</p> | |
540 | <pre class="prettyprint"><code class="lang-html"><div class="info-box"> | |
541 | <!-- Apply any bg-* class to to the icon to color it --> | |
542 | <span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span> | |
543 | <div class="info-box-content"> | |
544 | <span class="info-box-text">Likes</span> | |
545 | <span class="info-box-number">93,139</span> | |
546 | </div><!-- /.info-box-content --> | |
547 | </div><!-- /.info-box --></code></pre> | |
548 | ||
549 | <h4>Second Type of Info Boxes</h4> | |
550 | <div class="row"> | |
551 | <div class="col-md-3 col-sm-6 col-xs-12"> | |
552 | <div class="info-box bg-aqua"> | |
553 | <span class="info-box-icon"><i class="fa fa-bookmark-o"></i></span> | |
554 | <div class="info-box-content"> | |
555 | <span class="info-box-text">Bookmarks</span> | |
556 | <span class="info-box-number">41,410</span> | |
557 | <div class="progress"> | |
558 | <div class="progress-bar" style="width: 70%"></div> | |
559 | </div> | |
560 | <span class="progress-description"> | |
561 | 70% Increase in 30 Days | |
562 | </span> | |
563 | </div><!-- /.info-box-content --> | |
564 | </div><!-- /.info-box --> | |
565 | </div><!-- /.col --> | |
566 | <div class="col-md-3 col-sm-6 col-xs-12"> | |
567 | <div class="info-box bg-green"> | |
568 | <span class="info-box-icon"><i class="fa fa-thumbs-o-up"></i></span> | |
569 | <div class="info-box-content"> | |
570 | <span class="info-box-text">Likes</span> | |
571 | <span class="info-box-number">41,410</span> | |
572 | <div class="progress"> | |
573 | <div class="progress-bar" style="width: 70%"></div> | |
574 | </div> | |
575 | <span class="progress-description"> | |
576 | 70% Increase in 30 Days | |
577 | </span> | |
578 | </div><!-- /.info-box-content --> | |
579 | </div><!-- /.info-box --> | |
580 | </div><!-- /.col --> | |
581 | <div class="col-md-3 col-sm-6 col-xs-12"> | |
582 | <div class="info-box bg-yellow"> | |
583 | <span class="info-box-icon"><i class="fa fa-calendar"></i></span> | |
584 | <div class="info-box-content"> | |
585 | <span class="info-box-text">Events</span> | |
586 | <span class="info-box-number">41,410</span> | |
587 | <div class="progress"> | |
588 | <div class="progress-bar" style="width: 70%"></div> | |
589 | </div> | |
590 | <span class="progress-description"> | |
591 | 70% Increase in 30 Days | |
592 | </span> | |
593 | </div><!-- /.info-box-content --> | |
594 | </div><!-- /.info-box --> | |
595 | </div><!-- /.col --> | |
596 | <div class="col-md-3 col-sm-6 col-xs-12"> | |
597 | <div class="info-box bg-red"> | |
598 | <span class="info-box-icon"><i class="fa fa-comments-o"></i></span> | |
599 | <div class="info-box-content"> | |
600 | <span class="info-box-text">Comments</span> | |
601 | <span class="info-box-number">41,410</span> | |
602 | <div class="progress"> | |
603 | <div class="progress-bar" style="width: 70%"></div> | |
604 | </div> | |
605 | <span class="progress-description"> | |
606 | 70% Increase in 30 Days | |
607 | </span> | |
608 | </div><!-- /.info-box-content --> | |
609 | </div><!-- /.info-box --> | |
610 | </div><!-- /.col --> | |
611 | </div><!-- /.row --> | |
612 | <p class="lead">Markup</p> | |
613 | <pre class="prettyprint"><code class="lang-html"><!-- Apply any bg-* class to to the info-box to color it --> | |
614 | <div class="info-box bg-red"> | |
615 | <span class="info-box-icon"><i class="fa fa-comments-o"></i></span> | |
616 | <div class="info-box-content"> | |
617 | <span class="info-box-text">Likes</span> | |
618 | <span class="info-box-number">41,410</span> | |
619 | <!-- The progress section is optional --> | |
620 | <div class="progress"> | |
621 | <div class="progress-bar" style="width: 70%"></div> | |
622 | </div> | |
623 | <span class="progress-description"> | |
624 | 70% Increase in 30 Days | |
625 | </span> | |
626 | </div><!-- /.info-box-content --> | |
627 | </div><!-- /.info-box --></code></pre> | |
628 | <p class="lead">The only thing you need to change to alternate between these style is change the placement of the bg-* class. For the | |
629 | first style apply any bg-* class to the icon itself. For the other style, apply the bg-* class to the info-box div.</p> | |
630 | <!-- ===================================================================== --> | |
631 | ||
632 | <h3 id="component-box">Box</h3> | |
633 | <p class="lead">The box component is the most widely used component through out this template. You can | |
634 | use it for anything from displaying charts to just blocks of text. It comes in many different | |
635 | styles that we will explore below.</p> | |
636 | <h4>Default Box Markup</h4> | |
637 | <div class="box"> | |
638 | <div class="box-header with-border"> | |
639 | <h3 class="box-title">Default Box Example</h3> | |
640 | <div class="box-tools pull-right"> | |
641 | <!-- Buttons, labels, and many other things can be placed here! --> | |
642 | <!-- Here is a label for example --> | |
643 | <span class="label label-primary">Label</span> | |
644 | </div><!-- /.box-tools --> | |
645 | </div><!-- /.box-header --> | |
646 | <div class="box-body"> | |
647 | The body of the box | |
648 | </div><!-- /.box-body --> | |
649 | <div class="box-footer"> | |
650 | The footer of the box | |
651 | </div><!-- box-footer --> | |
652 | </div><!-- /.box --> | |
653 | <pre class="prettyprint"><div class="box"> | |
654 | <div class="box-header with-border"> | |
655 | <h3 class="box-title">Default Box Example</h3> | |
656 | <div class="box-tools pull-right"> | |
657 | <!-- Buttons, labels, and many other things can be placed here! --> | |
658 | <!-- Here is a label for example --> | |
659 | <span class="label label-primary">Label</span> | |
660 | </div><!-- /.box-tools --> | |
661 | </div><!-- /.box-header --> | |
662 | <div class="box-body"> | |
663 | The body of the box | |
664 | </div><!-- /.box-body --> | |
665 | <div class="box-footer"> | |
666 | The footer of the box | |
667 | </div><!-- box-footer --> | |
668 | </div><!-- /.box --></pre> | |
669 | <h4>Box Variants</h4> | |
670 | <p class="lead">You can change the style of the box by adding any of the contextual classes.</p> | |
671 | <div class="row"> | |
672 | <div class="col-md-4"> | |
673 | <div class="box"> | |
674 | <div class="box-header with-border"> | |
675 | <h3 class="box-title">Default Box Example</h3> | |
676 | </div><!-- /.box-header --> | |
677 | <div class="box-body"> | |
678 | The body of the box | |
679 | </div><!-- /.box-body --> | |
680 | </div><!-- /.box --> | |
681 | </div> | |
682 | <div class="col-md-4"> | |
683 | <div class="box box-primary"> | |
684 | <div class="box-header with-border"> | |
685 | <h3 class="box-title">Primary Box Example</h3> | |
686 | </div><!-- /.box-header --> | |
687 | <div class="box-body"> | |
688 | The body of the box | |
689 | </div><!-- /.box-body --> | |
690 | </div><!-- /.box --> | |
691 | </div> | |
692 | <div class="col-md-4"> | |
693 | <div class="box box-info"> | |
694 | <div class="box-header with-border"> | |
695 | <h3 class="box-title">Info Box Example</h3> | |
696 | </div><!-- /.box-header --> | |
697 | <div class="box-body"> | |
698 | The body of the box | |
699 | </div><!-- /.box-body --> | |
700 | </div><!-- /.box --> | |
701 | </div> | |
702 | <div class="clearfix"></div> | |
703 | <div class="col-md-4"> | |
704 | <div class="box box-warning"> | |
705 | <div class="box-header with-border"> | |
706 | <h3 class="box-title">Warning Box Example</h3> | |
707 | </div><!-- /.box-header --> | |
708 | <div class="box-body"> | |
709 | The body of the box | |
710 | </div><!-- /.box-body --> | |
711 | </div><!-- /.box --> | |
712 | </div> | |
713 | <div class="col-md-4"> | |
714 | <div class="box box-success"> | |
715 | <div class="box-header with-border"> | |
716 | <h3 class="box-title">Success Box Example</h3> | |
717 | </div><!-- /.box-header --> | |
718 | <div class="box-body"> | |
719 | The body of the box | |
720 | </div><!-- /.box-body --> | |
721 | </div><!-- /.box --> | |
722 | </div> | |
723 | <div class="col-md-4"> | |
724 | <div class="box box-danger"> | |
725 | <div class="box-header with-border"> | |
726 | <h3 class="box-title">Danger Box Example</h3> | |
727 | </div><!-- /.box-header --> | |
728 | <div class="box-body"> | |
729 | The body of the box | |
730 | </div><!-- /.box-body --> | |
731 | </div><!-- /.box --> | |
732 | </div> | |
733 | </div><!-- /.row --> | |
734 | <pre class="prettyprint"><div class="box box-default">...</div> | |
735 | <div class="box box-primary">...</div> | |
736 | <div class="box box-info">...</div> | |
737 | <div class="box box-warning">...</div> | |
738 | <div class="box box-success">...</div> | |
739 | <div class="box box-danger">...</div></pre> | |
740 | ||
741 | <h4>Solid Box</h4> | |
742 | <p class="lead">Solid Boxes are alternative ways to display boxes. | |
743 | They can be created by simply adding the box-solid class to the box component. | |
744 | You may also use contextual classes with you solid boxes.</p> | |
745 | <div class="row"> | |
746 | <div class="col-md-4"> | |
747 | <div class="box box-solid box-default"> | |
748 | <div class="box-header"> | |
749 | <h3 class="box-title">Default Solid Box Example</h3> | |
750 | </div><!-- /.box-header --> | |
751 | <div class="box-body"> | |
752 | The body of the box | |
753 | </div><!-- /.box-body --> | |
754 | </div><!-- /.box --> | |
755 | </div> | |
756 | <div class="col-md-4"> | |
757 | <div class="box box-solid box-primary"> | |
758 | <div class="box-header"> | |
759 | <h3 class="box-title">Primary Solid Box Example</h3> | |
760 | </div><!-- /.box-header --> | |
761 | <div class="box-body"> | |
762 | The body of the box | |
763 | </div><!-- /.box-body --> | |
764 | </div><!-- /.box --> | |
765 | </div> | |
766 | <div class="col-md-4"> | |
767 | <div class="box box-solid box-info"> | |
768 | <div class="box-header"> | |
769 | <h3 class="box-title">Info Solid Box Example</h3> | |
770 | </div><!-- /.box-header --> | |
771 | <div class="box-body"> | |
772 | The body of the box | |
773 | </div><!-- /.box-body --> | |
774 | </div><!-- /.box --> | |
775 | </div> | |
776 | <div class="clearfix"></div> | |
777 | <div class="col-md-4"> | |
778 | <div class="box box-solid box-warning"> | |
779 | <div class="box-header"> | |
780 | <h3 class="box-title">Warning Solid Box Example</h3> | |
781 | </div><!-- /.box-header --> | |
782 | <div class="box-body"> | |
783 | The body of the box | |
784 | </div><!-- /.box-body --> | |
785 | </div><!-- /.box --> | |
786 | </div> | |
787 | <div class="col-md-4"> | |
788 | <div class="box box-solid box-success"> | |
789 | <div class="box-header"> | |
790 | <h3 class="box-title">Success Solid Box Example</h3> | |
791 | </div><!-- /.box-header --> | |
792 | <div class="box-body"> | |
793 | The body of the box | |
794 | </div><!-- /.box-body --> | |
795 | </div><!-- /.box --> | |
796 | </div> | |
797 | <div class="col-md-4"> | |
798 | <div class="box box-solid box-danger"> | |
799 | <div class="box-header"> | |
800 | <h3 class="box-title">Danger Solid Box Example</h3> | |
801 | </div><!-- /.box-header --> | |
802 | <div class="box-body"> | |
803 | The body of the box | |
804 | </div><!-- /.box-body --> | |
805 | </div><!-- /.box --> | |
806 | </div> | |
807 | </div><!-- /.row --> | |
808 | <pre class="prettyprint"> | |
809 | <div class="box box-solid box-default">...</div> | |
810 | <div class="box box-solid box-primary">...</div> | |
811 | <div class="box box-solid box-info">...</div> | |
812 | <div class="box box-solid box-warning">...</div> | |
813 | <div class="box box-solid box-success">...</div> | |
814 | <div class="box box-solid box-danger">...</div></pre> | |
815 | <h4>Box Tools</h4> | |
816 | <p class="lead">Boxes can contain tools to deploy a specific event or provide simple info. The following examples makes use | |
817 | of multiple AdminLTE components within the header of the box.</p> | |
818 | <p>AdminLTE data-widget attribute provides boxes with the ability to collapse or be removed. The buttons | |
819 | are placed in the box-tools which is placed in the box-header.</p> | |
820 | <pre class="prettyprint"> | |
821 | <!-- This will cause the box to be removed when clicked --> | |
822 | <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> | |
823 | <!-- This will cause the box to collapse when clicked --> | |
824 | <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button></pre> | |
825 | <div class="row"> | |
826 | <div class="col-md-4"> | |
827 | <div class="box box-default"> | |
828 | <div class="box-header with-border"> | |
829 | <h3 class="box-title">Collapsable</h3> | |
830 | <div class="box-tools pull-right"> | |
831 | <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> | |
832 | </div><!-- /.box-tools --> | |
833 | </div><!-- /.box-header --> | |
834 | <div class="box-body"> | |
835 | The body of the box | |
836 | </div><!-- /.box-body --> | |
837 | </div><!-- /.box --> | |
838 | <pre class="prettyprint"> | |
839 | <div class="box box-default"> | |
840 | <div class="box-header with-border"> | |
841 | <h3 class="box-title">Collapsable</h3> | |
842 | <div class="box-tools pull-right"> | |
843 | <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> | |
844 | </div><!-- /.box-tools --> | |
845 | </div><!-- /.box-header --> | |
846 | <div class="box-body"> | |
847 | The body of the box | |
848 | </div><!-- /.box-body --> | |
849 | </div><!-- /.box --></pre> | |
850 | </div> | |
851 | <div class="col-md-4"> | |
852 | <div class="box box-default"> | |
853 | <div class="box-header with-border"> | |
854 | <h3 class="box-title">Removable</h3> | |
855 | <div class="box-tools pull-right"> | |
856 | <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> | |
857 | </div><!-- /.box-tools --> | |
858 | </div><!-- /.box-header --> | |
859 | <div class="box-body"> | |
860 | The body of the box | |
861 | </div><!-- /.box-body --> | |
862 | </div><!-- /.box --> | |
863 | <pre class="prettyprint"> | |
864 | <div class="box box-default"> | |
865 | <div class="box-header with-border"> | |
866 | <h3 class="box-title">Removable</h3> | |
867 | <div class="box-tools pull-right"> | |
868 | <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> | |
869 | </div><!-- /.box-tools --> | |
870 | </div><!-- /.box-header --> | |
871 | <div class="box-body"> | |
872 | The body of the box | |
873 | </div><!-- /.box-body --> | |
874 | </div><!-- /.box --></pre> | |
875 | </div> | |
876 | <div class="col-md-4"> | |
877 | <div class="box box-default collapsed-box"> | |
878 | <div class="box-header with-border"> | |
879 | <h3 class="box-title">Expandable</h3> | |
880 | <div class="box-tools pull-right"> | |
881 | <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button> | |
882 | </div><!-- /.box-tools --> | |
883 | </div><!-- /.box-header --> | |
884 | <div class="box-body"> | |
885 | The body of the box | |
886 | </div><!-- /.box-body --> | |
887 | </div><!-- /.box --> | |
888 | <pre class="prettyprint"> | |
889 | <div class="box box-default collapsed-box"> | |
890 | <div class="box-header with-border"> | |
891 | <h3 class="box-title">Expandable</h3> | |
892 | <div class="box-tools pull-right"> | |
893 | <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button> | |
894 | </div><!-- /.box-tools --> | |
895 | </div><!-- /.box-header --> | |
896 | <div class="box-body"> | |
897 | The body of the box | |
898 | </div><!-- /.box-body --> | |
899 | </div><!-- /.box --></pre> | |
900 | </div> | |
901 | </div><!-- /.row --> | |
902 | <p>We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few examples:</p> | |
903 | <div class="row"> | |
904 | <div class="col-md-4"> | |
905 | <div class="box box-default"> | |
906 | <div class="box-header with-border"> | |
907 | <h3 class="box-title">Labels</h3> | |
908 | <div class="box-tools pull-right"> | |
909 | <span class="label label-default">Some Label</span> | |
910 | </div><!-- /.box-tools --> | |
911 | </div><!-- /.box-header --> | |
912 | <div class="box-body"> | |
913 | The body of the box | |
914 | </div><!-- /.box-body --> | |
915 | </div><!-- /.box --> | |
916 | <pre class="prettyprint"> | |
917 | <div class="box box-default"> | |
918 | <div class="box-header with-border"> | |
919 | <h3 class="box-title">Labels</h3> | |
920 | <div class="box-tools pull-right"> | |
921 | <span class="label label-default">8 New Messages</span> | |
922 | </div><!-- /.box-tools --> | |
923 | </div><!-- /.box-header --> | |
924 | <div class="box-body"> | |
925 | The body of the box | |
926 | </div><!-- /.box-body --> | |
927 | </div><!-- /.box --></pre> | |
928 | </div> | |
929 | <div class="col-md-4"> | |
930 | <div class="box box-default"> | |
931 | <div class="box-header with-border"> | |
932 | <h3 class="box-title">Input</h3> | |
933 | <div class="box-tools pull-right"> | |
934 | <div class="has-feedback"> | |
935 | <input type="text" class="form-control input-sm" placeholder="Search..."> | |
936 | <span class="glyphicon glyphicon-search form-control-feedback text-muted"></span> | |
937 | </div> | |
938 | </div><!-- /.box-tools --> | |
939 | </div><!-- /.box-header --> | |
940 | <div class="box-body"> | |
941 | The body of the box | |
942 | </div><!-- /.box-body --> | |
943 | </div><!-- /.box --> | |
944 | <pre class="prettyprint"> | |
945 | <div class="box box-default"> | |
946 | <div class="box-header with-border"> | |
947 | <h3 class="box-title">Input</h3> | |
948 | <div class="box-tools pull-right"> | |
949 | <div class="has-feedback"> | |
950 | <input type="text" class="form-control input-sm" placeholder="Search..."> | |
951 | <span class="glyphicon glyphicon-search form-control-feedback"></span> | |
952 | </div> | |
953 | </div><!-- /.box-tools --> | |
954 | </div><!-- /.box-header --> | |
955 | <div class="box-body"> | |
956 | The body of the box | |
957 | </div><!-- /.box-body --> | |
958 | </div><!-- /.box --></pre> | |
959 | </div> | |
960 | <div class="col-md-4"> | |
961 | <div class="box box-default"> | |
962 | <div class="box-header with-border"> | |
963 | <h3 class="box-title">Tootips on buttons</h3> | |
964 | <div class="box-tools pull-right"> | |
965 | <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button> | |
966 | <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> | |
967 | </div><!-- /.box-tools --> | |
968 | </div><!-- /.box-header --> | |
969 | <div class="box-body"> | |
970 | The body of the box | |
971 | </div><!-- /.box-body --> | |
972 | </div><!-- /.box --> | |
973 | <pre class="prettyprint"> | |
974 | <div class="box box-default"> | |
975 | <div class="box-header with-border"> | |
976 | <h3 class="box-title">Tooltips on buttons</h3> | |
977 | <div class="box-tools pull-right"> | |
978 | <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button> | |
979 | <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> | |
980 | </div><!-- /.box-tools --> | |
981 | </div><!-- /.box-header --> | |
982 | <div class="box-body"> | |
983 | The body of the box | |
984 | </div><!-- /.box-body --> | |
985 | </div><!-- /.box --></pre> | |
986 | </div><!-- /.col --> | |
987 | </div><!-- /.row --> | |
988 | <p> | |
989 | If you inserted a box into the document after <code>app.js</code> was loaded, you have to activate | |
990 | the collapse/remove buttons explicitly by calling <code>.activateBox()</code>: | |
991 | </p> | |
992 | <pre class="prettyprint"><code class="html"><script> | |
993 | $("#box-widget").activateBox(); | |
994 | </script></code></pre> | |
995 | ||
996 | <h4>Loading States</h4> | |
997 | <div class="row"> | |
998 | <div class="col-md-6"> | |
999 | <div class="box box-default"> | |
1000 | <div class="box-header with-border"> | |
1001 | <h3 class="box-title">Loading state</h3> | |
1002 | </div> | |
1003 | <div class="box-body"> | |
1004 | The body of the box | |
1005 | </div><!-- /.box-body --> | |
1006 | <!-- Loading (remove the following to stop the loading)--> | |
1007 | <div class="overlay"> | |
1008 | <i class="fa fa-refresh fa-spin"></i> | |
1009 | </div> | |
1010 | <!-- end loading --> | |
1011 | </div><!-- /.box --> | |
1012 | </div><!-- /.col --> | |
1013 | ||
1014 | <div class="col-md-6"> | |
1015 | <div class="box box-default box-solid"> | |
1016 | <div class="box-header with-border"> | |
1017 | <h3 class="box-title">Loading state (.box-solid)</h3> | |
1018 | </div> | |
1019 | <div class="box-body"> | |
1020 | The body of the box | |
1021 | </div><!-- /.box-body --> | |
1022 | <!-- Loading (remove the following to stop the loading)--> | |
1023 | <div class="overlay"> | |
1024 | <i class="fa fa-refresh fa-spin"></i> | |
1025 | </div> | |
1026 | <!-- end loading --> | |
1027 | </div><!-- /.box --> | |
1028 | </div><!-- /.col --> | |
1029 | </div><!-- /.row --> | |
1030 | <p class="lead"> | |
1031 | To simulate a loading state, simply place this code before the <code>.box</code> closing tag. | |
1032 | </p> | |
1033 | <pre class="prettyprint"><code class="html"><div class="overlay"> | |
1034 | <i class="fa fa-refresh fa-spin"></i> | |
1035 | </div> | |
1036 | </code></pre> | |
1037 | <h3 id="component-direct-chat">Direct Chat</h3> | |
1038 | <p class="lead">The direct chat widget extends the box component to create a beautiful chat interface. This widget | |
1039 | consists of a required messages pane and an <b>optional</b> contacts pane. Examples:</p> | |
1040 | <!-- Direct Chat --> | |
1041 | <div class="row"> | |
1042 | <div class="col-md-3"> | |
1043 | <!-- DIRECT CHAT PRIMARY --> | |
1044 | <div class="box box-primary direct-chat direct-chat-primary"> | |
1045 | <div class="box-header with-border"> | |
1046 | <h3 class="box-title">Direct Chat</h3> | |
1047 | <div class="box-tools pull-right"> | |
1048 | <span data-toggle="tooltip" title="3 New Messages" class="badge bg-light-blue">3</span> | |
1049 | <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> | |
1050 | <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button> | |
1051 | <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> | |
1052 | </div> | |
1053 | </div><!-- /.box-header --> | |
1054 | <div class="box-body"> | |
1055 | <!-- Conversations are loaded here --> | |
1056 | <div class="direct-chat-messages"> | |
1057 | <!-- Message. Default to the left --> | |
1058 | <div class="direct-chat-msg"> | |
1059 | <div class="direct-chat-info clearfix"> | |
1060 | <span class="direct-chat-name pull-left">Alexander Pierce</span> | |
1061 | <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span> | |
1062 | </div><!-- /.direct-chat-info --> | |
1063 | <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img --> | |
1064 | <div class="direct-chat-text"> | |
1065 | Is this template really for free? That's unbelievable! | |
1066 | </div><!-- /.direct-chat-text --> | |
1067 | </div><!-- /.direct-chat-msg --> | |
1068 | ||
1069 | <!-- Message to the right --> | |
1070 | <div class="direct-chat-msg right"> | |
1071 | <div class="direct-chat-info clearfix"> | |
1072 | <span class="direct-chat-name pull-right">Sarah Bullock</span> | |
1073 | <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span> | |
1074 | </div><!-- /.direct-chat-info --> | |
1075 | <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img --> | |
1076 | <div class="direct-chat-text"> | |
1077 | You better believe it! | |
1078 | </div><!-- /.direct-chat-text --> | |
1079 | </div><!-- /.direct-chat-msg --> | |
1080 | </div><!--/.direct-chat-messages--> | |
1081 | ||
1082 | <!-- Contacts are loaded here --> | |
1083 | <div class="direct-chat-contacts"> | |
1084 | <ul class="contacts-list"> | |
1085 | <li> | |
1086 | <a href="#"> | |
1087 | <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar"> | |
1088 | <div class="contacts-list-info"> | |
1089 | <span class="contacts-list-name"> | |
1090 | Count Dracula | |
1091 | <small class="contacts-list-date pull-right">2/28/2015</small> | |
1092 | </span> | |
1093 | <span class="contacts-list-msg">How have you been? I was...</span> | |
1094 | </div><!-- /.contacts-list-info --> | |
1095 | </a> | |
1096 | </li><!-- End Contact Item --> | |
1097 | </ul><!-- /.contatcts-list --> | |
1098 | </div><!-- /.direct-chat-pane --> | |
1099 | </div><!-- /.box-body --> | |
1100 | <div class="box-footer"> | |
1101 | <form action="#" method="post"> | |
1102 | <div class="input-group"> | |
1103 | <input type="text" name="message" placeholder="Type Message ..." class="form-control"> | |
1104 | <span class="input-group-btn"> | |
1105 | <button type="button" class="btn btn-primary btn-flat">Send</button> | |
1106 | </span> | |
1107 | </div> | |
1108 | </form> | |
1109 | </div><!-- /.box-footer--> | |
1110 | </div><!--/.direct-chat --> | |
1111 | </div><!-- /.col --> | |
1112 | ||
1113 | <div class="col-md-3"> | |
1114 | <!-- DIRECT CHAT SUCCESS --> | |
1115 | <div class="box box-success direct-chat direct-chat-success"> | |
1116 | <div class="box-header with-border"> | |
1117 | <h3 class="box-title">Direct Chat</h3> | |
1118 | <div class="box-tools pull-right"> | |
1119 | <span data-toggle="tooltip" title="3 New Messages" class="badge bg-green">3</span> | |
1120 | <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> | |
1121 | <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button> | |
1122 | <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> | |
1123 | </div> | |
1124 | </div><!-- /.box-header --> | |
1125 | <div class="box-body"> | |
1126 | <!-- Conversations are loaded here --> | |
1127 | <div class="direct-chat-messages"> | |
1128 | <!-- Message. Default to the left --> | |
1129 | <div class="direct-chat-msg"> | |
1130 | <div class="direct-chat-info clearfix"> | |
1131 | <span class="direct-chat-name pull-left">Alexander Pierce</span> | |
1132 | <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span> | |
1133 | </div><!-- /.direct-chat-info --> | |
1134 | <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img --> | |
1135 | <div class="direct-chat-text"> | |
1136 | Is this template really for free? That's unbelievable! | |
1137 | </div><!-- /.direct-chat-text --> | |
1138 | </div><!-- /.direct-chat-msg --> | |
1139 | ||
1140 | <!-- Message to the right --> | |
1141 | <div class="direct-chat-msg right"> | |
1142 | <div class="direct-chat-info clearfix"> | |
1143 | <span class="direct-chat-name pull-right">Sarah Bullock</span> | |
1144 | <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span> | |
1145 | </div><!-- /.direct-chat-info --> | |
1146 | <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img --> | |
1147 | <div class="direct-chat-text"> | |
1148 | You better believe it! | |
1149 | </div><!-- /.direct-chat-text --> | |
1150 | </div><!-- /.direct-chat-msg --> | |
1151 | </div><!--/.direct-chat-messages--> | |
1152 | ||
1153 | <!-- Contacts are loaded here --> | |
1154 | <div class="direct-chat-contacts"> | |
1155 | <ul class="contacts-list"> | |
1156 | <li> | |
1157 | <a href="#"> | |
1158 | <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar"> | |
1159 | <div class="contacts-list-info"> | |
1160 | <span class="contacts-list-name"> | |
1161 | Count Dracula | |
1162 | <small class="contacts-list-date pull-right">2/28/2015</small> | |
1163 | </span> | |
1164 | <span class="contacts-list-msg">How have you been? I was...</span> | |
1165 | </div><!-- /.contacts-list-info --> | |
1166 | </a> | |
1167 | </li><!-- End Contact Item --> | |
1168 | </ul><!-- /.contatcts-list --> | |
1169 | </div><!-- /.direct-chat-pane --> | |
1170 | </div><!-- /.box-body --> | |
1171 | <div class="box-footer"> | |
1172 | <form action="#" method="post"> | |
1173 | <div class="input-group"> | |
1174 | <input type="text" name="message" placeholder="Type Message ..." class="form-control"> | |
1175 | <span class="input-group-btn"> | |
1176 | <button type="button" class="btn btn-success btn-flat">Send</button> | |
1177 | </span> | |
1178 | </div> | |
1179 | </form> | |
1180 | </div><!-- /.box-footer--> | |
1181 | </div><!--/.direct-chat --> | |
1182 | </div><!-- /.col --> | |
1183 | ||
1184 | <div class="col-md-3"> | |
1185 | <!-- DIRECT CHAT WARNING --> | |
1186 | <div class="box box-warning direct-chat direct-chat-warning"> | |
1187 | <div class="box-header with-border"> | |
1188 | <h3 class="box-title">Direct Chat</h3> | |
1189 | <div class="box-tools pull-right"> | |
1190 | <span data-toggle="tooltip" title="3 New Messages" class="badge bg-yellow">3</span> | |
1191 | <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> | |
1192 | <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button> | |
1193 | <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> | |
1194 | </div> | |
1195 | </div><!-- /.box-header --> | |
1196 | <div class="box-body"> | |
1197 | <!-- Conversations are loaded here --> | |
1198 | <div class="direct-chat-messages"> | |
1199 | <!-- Message. Default to the left --> | |
1200 | <div class="direct-chat-msg"> | |
1201 | <div class="direct-chat-info clearfix"> | |
1202 | <span class="direct-chat-name pull-left">Alexander Pierce</span> | |
1203 | <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span> | |
1204 | </div><!-- /.direct-chat-info --> | |
1205 | <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img --> | |
1206 | <div class="direct-chat-text"> | |
1207 | Is this template really for free? That's unbelievable! | |
1208 | </div><!-- /.direct-chat-text --> | |
1209 | </div><!-- /.direct-chat-msg --> | |
1210 | ||
1211 | <!-- Message to the right --> | |
1212 | <div class="direct-chat-msg right"> | |
1213 | <div class="direct-chat-info clearfix"> | |
1214 | <span class="direct-chat-name pull-right">Sarah Bullock</span> | |
1215 | <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span> | |
1216 | </div><!-- /.direct-chat-info --> | |
1217 | <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img --> | |
1218 | <div class="direct-chat-text"> | |
1219 | You better believe it! | |
1220 | </div><!-- /.direct-chat-text --> | |
1221 | </div><!-- /.direct-chat-msg --> | |
1222 | </div><!--/.direct-chat-messages--> | |
1223 | ||
1224 | <!-- Contacts are loaded here --> | |
1225 | <div class="direct-chat-contacts"> | |
1226 | <ul class="contacts-list"> | |
1227 | <li> | |
1228 | <a href="#"> | |
1229 | <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar"> | |
1230 | <div class="contacts-list-info"> | |
1231 | <span class="contacts-list-name"> | |
1232 | Count Dracula | |
1233 | <small class="contacts-list-date pull-right">2/28/2015</small> | |
1234 | </span> | |
1235 | <span class="contacts-list-msg">How have you been? I was...</span> | |
1236 | </div><!-- /.contacts-list-info --> | |
1237 | </a> | |
1238 | </li><!-- End Contact Item --> | |
1239 | </ul><!-- /.contatcts-list --> | |
1240 | </div><!-- /.direct-chat-pane --> | |
1241 | </div><!-- /.box-body --> | |
1242 | <div class="box-footer"> | |
1243 | <form action="#" method="post"> | |
1244 | <div class="input-group"> | |
1245 | <input type="text" name="message" placeholder="Type Message ..." class="form-control"> | |
1246 | <span class="input-group-btn"> | |
1247 | <button type="button" class="btn btn-warning btn-flat">Send</button> | |
1248 | </span> | |
1249 | </div> | |
1250 | </form> | |
1251 | </div><!-- /.box-footer--> | |
1252 | </div><!--/.direct-chat --> | |
1253 | </div><!-- /.col --> | |
1254 | ||
1255 | <div class="col-md-3"> | |
1256 | <!-- DIRECT CHAT DANGER --> | |
1257 | <div class="box box-danger direct-chat direct-chat-danger"> | |
1258 | <div class="box-header with-border"> | |
1259 | <h3 class="box-title">Direct Chat</h3> | |
1260 | <div class="box-tools pull-right"> | |
1261 | <span data-toggle="tooltip" title="3 New Messages" class="badge bg-red">3</span> | |
1262 | <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> | |
1263 | <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button> | |
1264 | <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> | |
1265 | </div> | |
1266 | </div><!-- /.box-header --> | |
1267 | <div class="box-body"> | |
1268 | <!-- Conversations are loaded here --> | |
1269 | <div class="direct-chat-messages"> | |
1270 | <!-- Message. Default to the left --> | |
1271 | <div class="direct-chat-msg"> | |
1272 | <div class="direct-chat-info clearfix"> | |
1273 | <span class="direct-chat-name pull-left">Alexander Pierce</span> | |
1274 | <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span> | |
1275 | </div><!-- /.direct-chat-info --> | |
1276 | <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img --> | |
1277 | <div class="direct-chat-text"> | |
1278 | Is this template really for free? That's unbelievable! | |
1279 | </div><!-- /.direct-chat-text --> | |
1280 | </div><!-- /.direct-chat-msg --> | |
1281 | ||
1282 | <!-- Message to the right --> | |
1283 | <div class="direct-chat-msg right"> | |
1284 | <div class="direct-chat-info clearfix"> | |
1285 | <span class="direct-chat-name pull-right">Sarah Bullock</span> | |
1286 | <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span> | |
1287 | </div><!-- /.direct-chat-info --> | |
1288 | <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img --> | |
1289 | <div class="direct-chat-text"> | |
1290 | You better believe it! | |
1291 | </div><!-- /.direct-chat-text --> | |
1292 | </div><!-- /.direct-chat-msg --> | |
1293 | </div><!--/.direct-chat-messages--> | |
1294 | ||
1295 | <!-- Contacts are loaded here --> | |
1296 | <div class="direct-chat-contacts"> | |
1297 | <ul class="contacts-list"> | |
1298 | <li> | |
1299 | <a href="#"> | |
1300 | <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar"> | |
1301 | <div class="contacts-list-info"> | |
1302 | <span class="contacts-list-name"> | |
1303 | Count Dracula | |
1304 | <small class="contacts-list-date pull-right">2/28/2015</small> | |
1305 | </span> | |
1306 | <span class="contacts-list-msg">How have you been? I was...</span> | |
1307 | </div><!-- /.contacts-list-info --> | |
1308 | </a> | |
1309 | </li><!-- End Contact Item --> | |
1310 | </ul><!-- /.contatcts-list --> | |
1311 | </div><!-- /.direct-chat-pane --> | |
1312 | </div><!-- /.box-body --> | |
1313 | <div class="box-footer"> | |
1314 | <form action="#" method="post"> | |
1315 | <div class="input-group"> | |
1316 | <input type="text" name="message" placeholder="Type Message ..." class="form-control"> | |
1317 | <span class="input-group-btn"> | |
1318 | <button type="button" class="btn btn-danger btn-flat">Send</button> | |
1319 | </span> | |
1320 | </div> | |
1321 | </form> | |
1322 | </div><!-- /.box-footer--> | |
1323 | </div><!--/.direct-chat --> | |
1324 | </div><!-- /.col --> | |
1325 | </div><!-- /.row --> | |
1326 | <p class="lead">Direct Chat Markup</p> | |
1327 | <pre class="prettyprint"><code class="html"> | |
1328 | <!-- Construct the box with style you want. Here we are using box-danger --> | |
1329 | <!-- Then add the class direct-chat and choose the direct-chat-* contexual class --> | |
1330 | <!-- The contextual class should match the box, so we are using direct-chat-danger --> | |
1331 | <div class="box box-danger direct-chat direct-chat-danger"> | |
1332 | <div class="box-header with-border"> | |
1333 | <h3 class="box-title">Direct Chat</h3> | |
1334 | <div class="box-tools pull-right"> | |
1335 | <span data-toggle="tooltip" title="3 New Messages" class="badge bg-red">3</span> | |
1336 | <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> | |
1337 | <!-- In box-tools add this button if you intend to use the contacts pane --> | |
1338 | <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button> | |
1339 | <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> | |
1340 | </div> | |
1341 | </div><!-- /.box-header --> | |
1342 | <div class="box-body"> | |
1343 | <!-- Conversations are loaded here --> | |
1344 | <div class="direct-chat-messages"> | |
1345 | <!-- Message. Default to the left --> | |
1346 | <div class="direct-chat-msg"> | |
1347 | <div class="direct-chat-info clearfix"> | |
1348 | <span class="direct-chat-name pull-left">Alexander Pierce</span> | |
1349 | <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span> | |
1350 | </div><!-- /.direct-chat-info --> | |
1351 | <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img --> | |
1352 | <div class="direct-chat-text"> | |
1353 | Is this template really for free? That's unbelievable! | |
1354 | </div><!-- /.direct-chat-text --> | |
1355 | </div><!-- /.direct-chat-msg --> | |
1356 | ||
1357 | <!-- Message to the right --> | |
1358 | <div class="direct-chat-msg right"> | |
1359 | <div class="direct-chat-info clearfix"> | |
1360 | <span class="direct-chat-name pull-right">Sarah Bullock</span> | |
1361 | <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span> | |
1362 | </div><!-- /.direct-chat-info --> | |
1363 | <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img --> | |
1364 | <div class="direct-chat-text"> | |
1365 | You better believe it! | |
1366 | </div><!-- /.direct-chat-text --> | |
1367 | </div><!-- /.direct-chat-msg --> | |
1368 | </div><!--/.direct-chat-messages--> | |
1369 | ||
1370 | <!-- Contacts are loaded here --> | |
1371 | <div class="direct-chat-contacts"> | |
1372 | <ul class="contacts-list"> | |
1373 | <li> | |
1374 | <a href="#"> | |
1375 | <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar"> | |
1376 | <div class="contacts-list-info"> | |
1377 | <span class="contacts-list-name"> | |
1378 | Count Dracula | |
1379 | <small class="contacts-list-date pull-right">2/28/2015</small> | |
1380 | </span> | |
1381 | <span class="contacts-list-msg">How have you been? I was...</span> | |
1382 | </div><!-- /.contacts-list-info --> | |
1383 | </a> | |
1384 | </li><!-- End Contact Item --> | |
1385 | </ul><!-- /.contatcts-list --> | |
1386 | </div><!-- /.direct-chat-pane --> | |
1387 | </div><!-- /.box-body --> | |
1388 | <div class="box-footer"> | |
1389 | <div class="input-group"> | |
1390 | <input type="text" name="message" placeholder="Type Message ..." class="form-control"> | |
1391 | <span class="input-group-btn"> | |
1392 | <button type="button" class="btn btn-danger btn-flat">Send</button> | |
1393 | </span> | |
1394 | </div> | |
1395 | </div><!-- /.box-footer--> | |
1396 | </div><!--/.direct-chat --> | |
1397 | </code></pre> | |
1398 | ||
1399 | <p>Of course you can use direct chat with a solid box by adding the class <code>solid-box</code> to the box. Here are a couple of examples:</p> | |
1400 | ||
1401 | <!-- Direct Chat With Solid Boxes --> | |
1402 | <div class="row"> | |
1403 | <div class="col-md-6"> | |
1404 | <!-- DIRECT CHAT WARNING --> | |
1405 | <div class="box box-primary box-solid direct-chat direct-chat-primary"> | |
1406 | <div class="box-header"> | |
1407 | <h3 class="box-title">Direct Chat in a Solid Box</h3> | |
1408 | <div class="box-tools pull-right"> | |
1409 | <span data-toggle="tooltip" title="3 New Messages" class="badge bg-light-blue">3</span> | |
1410 | <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> | |
1411 | <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button> | |
1412 | <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> | |
1413 | </div> | |
1414 | </div><!-- /.box-header --> | |
1415 | <div class="box-body"> | |
1416 | <!-- Conversations are loaded here --> | |
1417 | <div class="direct-chat-messages"> | |
1418 | <!-- Message. Default to the left --> | |
1419 | <div class="direct-chat-msg"> | |
1420 | <div class="direct-chat-info clearfix"> | |
1421 | <span class="direct-chat-name pull-left">Alexander Pierce</span> | |
1422 | <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span> | |
1423 | </div><!-- /.direct-chat-info --> | |
1424 | <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img --> | |
1425 | <div class="direct-chat-text"> | |
1426 | Is this template really for free? That's unbelievable! | |
1427 | </div><!-- /.direct-chat-text --> | |
1428 | </div><!-- /.direct-chat-msg --> | |
1429 | ||
1430 | <!-- Message to the right --> | |
1431 | <div class="direct-chat-msg right"> | |
1432 | <div class="direct-chat-info clearfix"> | |
1433 | <span class="direct-chat-name pull-right">Sarah Bullock</span> | |
1434 | <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span> | |
1435 | </div><!-- /.direct-chat-info --> | |
1436 | <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img --> | |
1437 | <div class="direct-chat-text"> | |
1438 | You better believe it! | |
1439 | </div><!-- /.direct-chat-text --> | |
1440 | </div><!-- /.direct-chat-msg --> | |
1441 | </div><!--/.direct-chat-messages--> | |
1442 | ||
1443 | <!-- Contacts are loaded here --> | |
1444 | <div class="direct-chat-contacts"> | |
1445 | <ul class="contacts-list"> | |
1446 | <li> | |
1447 | <a href="#"> | |
1448 | <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar"> | |
1449 | <div class="contacts-list-info"> | |
1450 | <span class="contacts-list-name"> | |
1451 | Count Dracula | |
1452 | <small class="contacts-list-date pull-right">2/28/2015</small> | |
1453 | </span> | |
1454 | <span class="contacts-list-msg">How have you been? I was...</span> | |
1455 | </div><!-- /.contacts-list-info --> | |
1456 | </a> | |
1457 | </li><!-- End Contact Item --> | |
1458 | </ul><!-- /.contatcts-list --> | |
1459 | </div><!-- /.direct-chat-pane --> | |
1460 | </div><!-- /.box-body --> | |
1461 | <div class="box-footer"> | |
1462 | <form action="#" method="post"> | |
1463 | <div class="input-group"> | |
1464 | <input type="text" name="message" placeholder="Type Message ..." class="form-control"> | |
1465 | <span class="input-group-btn"> | |
1466 | <button type="button" class="btn btn-primary btn-flat">Send</button> | |
1467 | </span> | |
1468 | </div> | |
1469 | </form> | |
1470 | </div><!-- /.box-footer--> | |
1471 | </div><!--/.direct-chat --> | |
1472 | </div><!-- /.col --> | |
1473 | ||
1474 | <div class="col-md-6"> | |
1475 | <!-- DIRECT CHAT DANGER --> | |
1476 | <div class="box box-info box-solid direct-chat direct-chat-info"> | |
1477 | <div class="box-header"> | |
1478 | <h3 class="box-title">Direct Chat in a Solid Box</h3> | |
1479 | <div class="box-tools pull-right"> | |
1480 | <span data-toggle="tooltip" title="3 New Messages" class="badge bg-aqua">3</span> | |
1481 | <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> | |
1482 | <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button> | |
1483 | <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> | |
1484 | </div> | |
1485 | </div><!-- /.box-header --> | |
1486 | <div class="box-body"> | |
1487 | <!-- Conversations are loaded here --> | |
1488 | <div class="direct-chat-messages"> | |
1489 | <!-- Message. Default to the left --> | |
1490 | <div class="direct-chat-msg"> | |
1491 | <div class="direct-chat-info clearfix"> | |
1492 | <span class="direct-chat-name pull-left">Alexander Pierce</span> | |
1493 | <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span> | |
1494 | </div><!-- /.direct-chat-info --> | |
1495 | <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img --> | |
1496 | <div class="direct-chat-text"> | |
1497 | Is this template really for free? That's unbelievable! | |
1498 | </div><!-- /.direct-chat-text --> | |
1499 | </div><!-- /.direct-chat-msg --> | |
1500 | ||
1501 | <!-- Message to the right --> | |
1502 | <div class="direct-chat-msg right"> | |
1503 | <div class="direct-chat-info clearfix"> | |
1504 | <span class="direct-chat-name pull-right">Sarah Bullock</span> | |
1505 | <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span> | |
1506 | </div><!-- /.direct-chat-info --> | |
1507 | <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img --> | |
1508 | <div class="direct-chat-text"> | |
1509 | You better believe it! | |
1510 | </div><!-- /.direct-chat-text --> | |
1511 | </div><!-- /.direct-chat-msg --> | |
1512 | </div><!--/.direct-chat-messages--> | |
1513 | ||
1514 | <!-- Contacts are loaded here --> | |
1515 | <div class="direct-chat-contacts"> | |
1516 | <ul class="contacts-list"> | |
1517 | <li> | |
1518 | <a href="#"> | |
1519 | <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar"> | |
1520 | <div class="contacts-list-info"> | |
1521 | <span class="contacts-list-name"> | |
1522 | Count Dracula | |
1523 | <small class="contacts-list-date pull-right">2/28/2015</small> | |
1524 | </span> | |
1525 | <span class="contacts-list-msg">How have you been? I was...</span> | |
1526 | </div><!-- /.contacts-list-info --> | |
1527 | </a> | |
1528 | </li><!-- End Contact Item --> | |
1529 | </ul><!-- /.contatcts-list --> | |
1530 | </div><!-- /.direct-chat-pane --> | |
1531 | </div><!-- /.box-body --> | |
1532 | <div class="box-footer"> | |
1533 | <form action="#" method="post"> | |
1534 | <div class="input-group"> | |
1535 | <input type="text" name="message" placeholder="Type Message ..." class="form-control"> | |
1536 | <span class="input-group-btn"> | |
1537 | <button type="button" class="btn btn-info btn-flat">Send</button> | |
1538 | </span> | |
1539 | </div> | |
1540 | </form> | |
1541 | </div><!-- /.box-footer--> | |
1542 | </div><!--/.direct-chat --> | |
1543 | </div><!-- /.col --> | |
1544 | </div><!-- /.row --> | |
1545 | </section> |