SB Admin 2 学习笔记1

需要掌握能够搭建起一个 dashboard 的能力, 因为很少有运维开发团队有专职的前端, bootstrap 也要讲个基本法.

SB Admin 2, 一个免费的 bootstrap theme, 4000颗星, 大体看了下, 想要的功能都有, 够用了. 一点点啃下来.

一. 导航栏部分

1. 上边框导航栏

<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">

nav.navbar.navbar-default.navbar-static-top navbar-static-top 是指导航条随页面滚动而消失, navbar-fixed-top 指导航条固定在顶端

nav[role="navigation"] 增强导航条的可访问性

nav[style="margin-bottom: 0"] 设置nav 的下外边距为0

<!-- Navigation -->

<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">

    <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

            <span class="sr-only">Toggle navigation</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

        </button>

        <a class="navbar-brand" href="index.html">服务器运维看板</a>

    </div>

    <!-- /.navbar-header -->

span.sr-only screen read only 仅供屏幕阅读器

span.icon-bar 是按键中的一条横杠

div.navbar-header 里面包含一个 a.navbar-brand, 用作导航条标题, 显示上字体会更大一号

<ul class="nav navbar-top-links navbar-right">

    <li class="dropdown">

        <a class="dropdown-toggle" data-toggle="dropdown" href="#">

            <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>

        </a>

        <ul class="dropdown-menu dropdown-messages">

            <li>

                <a href="#">

                    <div>

                        <strong>John Smith</strong>

                        <span class="pull-right text-muted">

                            <em>Yesterday</em>

                        </span>

                    </div>

                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>

                </a>

            </li>

            <li class="divider"></li>

            <li>

                <a href="#">

                    <div>

                        <strong>John Smith</strong>

                        <span class="pull-right text-muted">

                            <em>Yesterday</em>

                        </span>

                    </div>

                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>

                </a>

            </li>

            <li class="divider"></li>

            <li>

                <a href="#">

                    <div>

                        <strong>John Smith</strong>

                        <span class="pull-right text-muted">

                            <em>Yesterday</em>

                        </span>

                    </div>

                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>

                </a>

            </li>

            <li class="divider"></li>

            <li>

                <a class="text-center" href="#">

                    <strong>Read All Messages</strong>

                    <i class="fa fa-angle-right"></i>

                </a>

            </li>

        </ul>

        <!-- /.dropdown-messages -->

    </li>

    ...

</ul>

<!-- /.navbar-top-links -->

ul.nav.navbar-top-links.navbar-right nav 定义导航链接, navbar-top-links 查不到这个属性, navbar-right 右对齐

li.dropdown 下拉菜单

a[class="dropdown-toggle"][data-toggle="dropdown"][href="#"] 点击即可触发下拉菜单

i.fa.fa-envelop.fa-fw FrontAwesome 图标, fa-fw 固定图标宽度

ul.dropdown-menu.dropdown-messages 下拉菜单

span.pull-right.text-muted span 用来组合行内元素, 以便通过样式来格式化它们, 建议使用"提示"时使用 span 元素, pull-right 右对齐, text-muted 柔和灰

li.divider 分割线

a.text-center 文字居中

2. 侧边框导航栏

<div class="navbar-default sidebar" role="navigation">

    <div class="sidebar-nav navbar-collapse">

        <ul class="nav" id="side-menu">

            <li class="sidebar-search">

                <div class="input-group custom-search-form">

                    <input type="text" class="form-control" placeholder="Search...">

                    <span class="input-group-btn">

                    <button class="btn btn-default" type="button">

                        <i class="fa fa-search"></i>

                    </button>

                </span>

                </div>

                <!-- /input-group -->

            </li>

            <li>

                <a href="index.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>

            </li>

            <li>

                <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span></a>

                <ul class="nav nav-second-level">

                    <li>

                        <a href="flot.html">Flot Charts</a>

                    </li>

                    <li>

                        <a href="morris.html">Morris.js Charts</a>

                    </li>

                </ul>

                <!-- /.nav-second-level -->

            </li>

            <li>

                <a href="tables.html"><i class="fa fa-table fa-fw"></i> Tables</a>

            </li>

            <li>

                <a href="forms.html"><i class="fa fa-edit fa-fw"></i> Forms</a>

            </li>

            <li>

                <a href="#"><i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span></a>

                <ul class="nav nav-second-level">

                    <li>

                        <a href="panels-wells.html">Panels and Wells</a>

                    </li>

                    <li>

                        <a href="buttons.html">Buttons</a>

                    </li>

                    <li>

                        <a href="notifications.html">Notifications</a>

                    </li>

                    <li>

                        <a href="typography.html">Typography</a>

                    </li>

                    <li>

                        <a href="icons.html"> Icons</a>

                    </li>

                    <li>

                        <a href="grid.html">Grid</a>

                    </li>

                </ul>

                <!-- /.nav-second-level -->

            </li>

            <li>

                <a href="#"><i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span></a>

                <ul class="nav nav-second-level">

                    <li>

                        <a href="#">Second Level Item</a>

                    </li>

                    <li>

                        <a href="#">Second Level Item</a>

                    </li>

                    <li>

                        <a href="#">Third Level <span class="fa arrow"></span></a>

                        <ul class="nav nav-third-level">

                            <li>

                                <a href="#">Third Level Item</a>

                            </li>

                            <li>

                                <a href="#">Third Level Item</a>

                            </li>

                            <li>

                                <a href="#">Third Level Item</a>

                            </li>

                            <li>

                                <a href="#">Third Level Item</a>

                            </li>

                        </ul>

                        <!-- /.nav-third-level -->

                    </li>

                </ul>

                <!-- /.nav-second-level -->

            </li>

            <li>

                <a href="#"><i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span></a>

                <ul class="nav nav-second-level">

                    <li>

                        <a href="blank.html">Blank Page</a>

                    </li>

                    <li>

                        <a href="login.html">Login Page</a>

                    </li>

                </ul>

                <!-- /.nav-second-level -->

            </li>

        </ul>

    </div>

    <!-- /.sidebar-collapse -->

</div>

<!-- /.navbar-static-side -->

div.navbar-default.sidebar sidebar 是自定义侧边栏

div.sidebar-nav.navbar-collapse sidebar-nav 自定义侧边栏导航, navbar-collapse navbar-toggle 的 data-target

div.input-group.custom-search-form custom-search-form 疑是 wordpress 的 plugin, 属性可删除

<ul class="nav" id="side-menu">

    <li class="sidebar-search">

        <div class="input-group custom-search-form">

            <input type="text" class="form-control" placeholder="Search...">

            <span class="input-group-btn">

                <button class="btn btn-default" type="button">

                    <i class="fa fa-search"></i>

                </button>

            </span>

        </div>

        <!-- /input-group -->

    </li>

ul[class="nav"][id="side-menu"] 定义侧边导航栏

li.sidebar-search 应该是为JS 准备的

div.input-group input[type="text"][class="form-control"] 输入框组

span.input-group-btn button[class="btn btn-default"][type="button"] i.fa.fa-search 搜索符号

    <li>

        <a href="index.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>

    </li>

    <li>

        <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span></a>

        <ul class="nav nav-second-level">

            <li>

                <a href="flot.html">Flot Charts</a>

            </li>

            <li>

                <a href="morris.html">Morris.js Charts</a>

            </li>

        </ul>

        <!-- /.nav-second-level -->

    </li>

    <li>

        <a href="tables.html"><i class="fa fa-table fa-fw"></i> Tables</a>

    </li>

    <li>

        <a href="forms.html"><i class="fa fa-edit fa-fw"></i> Forms</a>

    </li>

    <li>

        <a href="#"><i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span></a>

        <ul class="nav nav-second-level">

            <li>

                <a href="panels-wells.html">Panels and Wells</a>

            </li>

            <li>

                <a href="buttons.html">Buttons</a>

            </li>

            <li>

                <a href="notifications.html">Notifications</a>

            </li>

            <li>

                <a href="typography.html">Typography</a>

            </li>

            <li>

                <a href="icons.html"> Icons</a>

            </li>

            <li>

                <a href="grid.html">Grid</a>

            </li>

        </ul>

        <!-- /.nav-second-level -->

    </li>

    <li>

        <a href="#"><i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span></a>

        <ul class="nav nav-second-level">

            <li>

                <a href="#">Second Level Item</a>

            </li>

            <li>

                <a href="#">Second Level Item</a>

            </li>

            <li>

                <a href="#">Third Level <span class="fa arrow"></span></a>

                <ul class="nav nav-third-level">

                    <li>

                        <a href="#">Third Level Item</a>

                    </li>

                    <li>

                        <a href="#">Third Level Item</a>

                    </li>

                    <li>

                        <a href="#">Third Level Item</a>

                    </li>

                    <li>

                        <a href="#">Third Level Item</a>

                    </li>

                </ul>

                <!-- /.nav-third-level -->

            </li>

        </ul>

        <!-- /.nav-second-level -->

    </li>

    <li>

        <a href="#"><i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span></a>

        <ul class="nav nav-second-level">

            <li>

                <a href="blank.html">Blank Page</a>

            </li>

            <li>

                <a href="login.html">Login Page</a>

            </li>

        </ul>

        <!-- /.nav-second-level -->

    </li>

</ul>

ul.nav.nav-second-level ul.nav.nav-third-level 的加载是由 JS 控制

至此, 导航栏分析完毕, 原来侧边框导航栏是使用css 排版实现的.

二. 主页面部分

<div id="page-wrapper">

    <div class="row">

        <div class="col-lg-12">

            <h1 class="page-header">Dashboard</h1>

        </div>

        <!-- /.col-lg-12 -->

    </div>

    <!-- /.row -->

    <div class="row">

        <div class="col-lg-3 col-md-6">

            <div class="panel panel-primary">

                <div class="panel-heading">

                    <div class="row">

                        <div class="col-xs-3">

                            <i class="fa fa-comments fa-5x"></i>

                        </div>

                        <div class="col-xs-9 text-right">

                            <div class="huge">26</div>

                            <div>New Comments!</div>

                        </div>

                    </div>

                </div>

                <a href="#">

                    <div class="panel-footer">

                        <span class="pull-left">View Details</span>

                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>

                        <div class="clearfix"></div>

                    </div>

                </a>

            </div>

        </div>

div.row 栅格系统的行

h1.page-header 页面标题, 会在网页标题周围增加适当的间距

div.panel.panel-primary 带情景效果的面板, 适用于将某些 dom 内容搁到盒子里

div.panel-heading 面板标题容器, 也可以通过添加设置了 .panel-title 类的 <h1>-<h6> 标签，添加一个预定义样式的标题

div.huge 是自定义大小, 40px

div.panel-footer 面板脚注容器

div.clearfix 清除浮动, 保证两个 span 小屏显示正常

实现方式是, 所有的 panel 搁到一个 row 中, 左边的 panel 设置为 col-lg-8, 右侧的 panel 设置为 col-lg-4

<div class="row">

    <div class="col-lg-8">

        <div class="panel panel-default">

            <div class="panel-heading">

                <i class="fa fa-bar-chart-o fa-fw"></i> Area Chart Example

                <div class="pull-right">

                    <div class="btn-group">

                        <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">

                            Actions

                            <span class="caret"></span>

                        </button>

                        <ul class="dropdown-menu pull-right" role="menu">

                            <li><a href="#">Action</a>

                            </li>

                            <li><a href="#">Another action</a>

                            </li>

                            <li><a href="#">Something else here</a>

                            </li>

                            <li class="divider"></li>

                            <li><a href="#">Separated link</a>

                            </li>

                        </ul>

                    </div>

                </div>

            </div>

            <!-- /.panel-heading -->

            <div class="panel-body">

                <div id="morris-area-chart"></div>

            </div>

            <!-- /.panel-body -->

        </div>

        <!-- /.panel -->

绘图可以换成highchart, echart, d3js

<div class="panel panel-default">

    <div class="panel-heading">

        <i class="fa fa-bar-chart-o fa-fw"></i> Bar Chart Example

        <div class="pull-right">

            <div class="btn-group">

                <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">

                    Actions

                    <span class="caret"></span>

                </button>

                <ul class="dropdown-menu pull-right" role="menu">

                    <li><a href="#">Action</a>

                    </li>

                    <li><a href="#">Another action</a>

                    </li>

                    <li><a href="#">Something else here</a>

                    </li>

                    <li class="divider"></li>

                    <li><a href="#">Separated link</a>

                    </li>

                </ul>

            </div>

        </div>

    </div>

    <!-- /.panel-heading -->

    <div class="panel-body">

        <div class="row">

            <div class="col-lg-4">

                <div class="table-responsive">

                    <table class="table table-bordered table-hover table-striped">

                        <thead>

                            <tr>

                                <th>#</th>

                                <th>Date</th>

                                <th>Time</th>

                                <th>Amount</th>

                            </tr>

                        </thead>

                        <tbody>

                            <tr>

                                <td>3326</td>

                                <td>10/21/2013</td>

                                <td>3:29 PM</td>

                                <td>$321.33</td>

                            </tr>

                            <tr>

                                <td>3325</td>

                                <td>10/21/2013</td>

                                <td>3:20 PM</td>

                                <td>$234.34</td>

                            </tr>

                            <tr>

                                <td>3324</td>

                                <td>10/21/2013</td>

                                <td>3:03 PM</td>

                                <td>$724.17</td>

                            </tr>

                            <tr>

                                <td>3323</td>

                                <td>10/21/2013</td>

                                <td>3:00 PM</td>

                                <td>$23.71</td>

                            </tr>

                            <tr>

                                <td>3322</td>

                                <td>10/21/2013</td>

                                <td>2:49 PM</td>

                                <td>$8345.23</td>

                            </tr>

                            <tr>

                                <td>3321</td>

                                <td>10/21/2013</td>

                                <td>2:23 PM</td>

                                <td>$245.12</td>

                            </tr>

                            <tr>

                                <td>3320</td>

                                <td>10/21/2013</td>

                                <td>2:15 PM</td>

                                <td>$5663.54</td>

                            </tr>

                            <tr>

                                <td>3319</td>

                                <td>10/21/2013</td>

                                <td>2:13 PM</td>

                                <td>$943.45</td>

                            </tr>

                        </tbody>

                    </table>

                </div>

                <!-- /.table-responsive -->

            </div>

            <!-- /.col-lg-4 (nested) -->

            <div class="col-lg-8">

                <div id="morris-bar-chart"></div>

            </div>

            <!-- /.col-lg-8 (nested) -->

        </div>

        <!-- /.row -->

    </div>

    <!-- /.panel-body -->

</div>

<!-- /.panel -->

div.table-responsive 响应式表格

table.table.table-bordered.table-hover.table-striped table-bordered 边框 table-hover 悬停 table-striped 斑马纹

事件时间线, 这个是非常吸引我的.

<div class="panel panel-default">

    <div class="panel-heading">

        <i class="fa fa-clock-o fa-fw"></i> Responsive Timeline

    </div>

    <!-- /.panel-heading -->

    <div class="panel-body">

        <ul class="timeline">

            <li>

                <div class="timeline-badge"><i class="fa fa-check"></i>

                </div>

                <div class="timeline-panel">

                    <div class="timeline-heading">

                        <h4 class="timeline-title">Lorem ipsum dolor</h4>

                        <p><small class="text-muted"><i class="fa fa-clock-o"></i> 11 hours ago via Twitter</small>

                        </p>

                    </div>

                    <div class="timeline-body">

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero laboriosam dolor perspiciatis omnis exercitationem. Beatae, officia pariatur? Est cum veniam excepturi. Maiores praesentium, porro voluptas suscipit facere rem dicta, debitis.</p>

                    </div>

                </div>

            </li>

            <li class="timeline-inverted">

                <div class="timeline-badge warning"><i class="fa fa-credit-card"></i>

                </div>

                <div class="timeline-panel">

                    <div class="timeline-heading">

                        <h4 class="timeline-title">Lorem ipsum dolor</h4>

                    </div>

                    <div class="timeline-body">

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolorem quibusdam, tenetur commodi provident cumque magni voluptatem libero, quis rerum. Fugiat esse debitis optio, tempore. Animi officiis alias, officia repellendus.</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium maiores odit qui est tempora eos, nostrum provident explicabo dignissimos debitis vel! Adipisci eius voluptates, ad aut recusandae minus eaque facere.</p>

                    </div>

                </div>

            </li>

            <li>

                <div class="timeline-badge danger"><i class="fa fa-bomb"></i>

                </div>

                <div class="timeline-panel">

                    <div class="timeline-heading">

                        <h4 class="timeline-title">Lorem ipsum dolor</h4>

                    </div>

                    <div class="timeline-body">

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus numquam facilis enim eaque, tenetur nam id qui vel velit similique nihil iure molestias aliquam, voluptatem totam quaerat, magni commodi quisquam.</p>

                    </div>

                </div>

            </li>

            <li class="timeline-inverted">

                <div class="timeline-panel">

                    <div class="timeline-heading">

                        <h4 class="timeline-title">Lorem ipsum dolor</h4>

                    </div>

                    <div class="timeline-body">

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates est quaerat asperiores sapiente, eligendi, nihil. Itaque quos, alias sapiente rerum quas odit! Aperiam officiis quidem delectus libero, omnis ut debitis!</p>

                    </div>

                </div>

            </li>

            <li>

                <div class="timeline-badge info"><i class="fa fa-save"></i>

                </div>

                <div class="timeline-panel">

                    <div class="timeline-heading">

                        <h4 class="timeline-title">Lorem ipsum dolor</h4>

                    </div>

                    <div class="timeline-body">

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis minus modi quam ipsum alias at est molestiae excepturi delectus nesciunt, quibusdam debitis amet, beatae consequuntur impedit nulla qui! Laborum, atque.</p>

                        <hr>

                        <div class="btn-group">

                            <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">

                                <i class="fa fa-gear"></i> <span class="caret"></span>

                            </button>

                            <ul class="dropdown-menu" role="menu">

                                <li><a href="#">Action</a>

                                </li>

                                <li><a href="#">Another action</a>

                                </li>

                                <li><a href="#">Something else here</a>

                                </li>

                                <li class="divider"></li>

                                <li><a href="#">Separated link</a>

                                </li>

                            </ul>

                        </div>

                    </div>

                </div>

            </li>

            <li>

                <div class="timeline-panel">

                    <div class="timeline-heading">

                        <h4 class="timeline-title">Lorem ipsum dolor</h4>

                    </div>

                    <div class="timeline-body">

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi fuga odio quibusdam. Iure expedita, incidunt unde quis nam! Quod, quisquam. Officia quam qui adipisci quas consequuntur nostrum sequi. Consequuntur, commodi.</p>

                    </div>

                </div>

            </li>

            <li class="timeline-inverted">

                <div class="timeline-badge success"><i class="fa fa-graduation-cap"></i>

                </div>

                <div class="timeline-panel">

                    <div class="timeline-heading">

                        <h4 class="timeline-title">Lorem ipsum dolor</h4>

                    </div>

                    <div class="timeline-body">

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt obcaecati, quaerat tempore officia voluptas debitis consectetur culpa amet, accusamus dolorum fugiat, animi dicta aperiam, enim incidunt quisquam maxime neque eaque.</p>

                    </div>

                </div>

            </li>

        </ul>

    </div>

    <!-- /.panel-body -->

</div>

<!-- /.panel -->

</div>

<!-- /.col-lg-8 -->

li.timeline-inverted 时间线右侧面板, 无 class 属性则默认为左侧面板

<div class="col-lg-4">

    <div class="panel panel-default">

        <div class="panel-heading">

            <i class="fa fa-bell fa-fw"></i> Notifications Panel

        </div>

        <!-- /.panel-heading -->

        <div class="panel-body">

            <div class="list-group">

                <a href="#" class="list-group-item">

                    <i class="fa fa-comment fa-fw"></i> New Comment

                    <span class="pull-right text-muted small"><em>4 minutes ago</em>

                    </span>

                </a>

                <a href="#" class="list-group-item">

                    <i class="fa fa-twitter fa-fw"></i> 3 New Followers

                    <span class="pull-right text-muted small"><em>12 minutes ago</em>

                    </span>

                </a>

                <a href="#" class="list-group-item">

                    <i class="fa fa-envelope fa-fw"></i> Message Sent

                    <span class="pull-right text-muted small"><em>27 minutes ago</em>

                    </span>

                </a>

                <a href="#" class="list-group-item">

                    <i class="fa fa-tasks fa-fw"></i> New Task

                    <span class="pull-right text-muted small"><em>43 minutes ago</em>

                    </span>

                </a>

                <a href="#" class="list-group-item">

                    <i class="fa fa-upload fa-fw"></i> Server Rebooted

                    <span class="pull-right text-muted small"><em>11:32 AM</em>

                    </span>

                </a>

                <a href="#" class="list-group-item">

                    <i class="fa fa-bolt fa-fw"></i> Server Crashed!

                    <span class="pull-right text-muted small"><em>11:13 AM</em>

                    </span>

                </a>

                <a href="#" class="list-group-item">

                    <i class="fa fa-warning fa-fw"></i> Server Not Responding

                    <span class="pull-right text-muted small"><em>10:57 AM</em>

                    </span>

                </a>

                <a href="#" class="list-group-item">

                    <i class="fa fa-shopping-cart fa-fw"></i> New Order Placed

                    <span class="pull-right text-muted small"><em>9:49 AM</em>

                    </span>

                </a>

                <a href="#" class="list-group-item">

                    <i class="fa fa-money fa-fw"></i> Payment Received

                    <span class="pull-right text-muted small"><em>Yesterday</em>

                    </span>

                </a>

            </div>

            <!-- /.list-group -->

            <a href="#" class="btn btn-default btn-block">View All Alerts</a>

        </div>

        <!-- /.panel-body -->

    </div>

    <!-- /.panel -->

div.list-group 列表组

<div class="panel panel-default">

    <div class="panel-heading">

        <i class="fa fa-bar-chart-o fa-fw"></i> Donut Chart Example

    </div>

    <div class="panel-body">

        <div id="morris-donut-chart"></div>

        <a href="#" class="btn btn-default btn-block">View Details</a>

    </div>

    <!-- /.panel-body -->

</div>

<!-- /.panel -->

<div class="chat-panel panel panel-default">

    <div class="panel-heading">

        <i class="fa fa-comments fa-fw"></i> Chat

        <div class="btn-group pull-right">

            <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">

                <i class="fa fa-chevron-down"></i>

            </button>

            <ul class="dropdown-menu slidedown">

                <li>

                    <a href="#">

                        <i class="fa fa-refresh fa-fw"></i> Refresh

                    </a>

                </li>

                <li>

                    <a href="#">

                        <i class="fa fa-check-circle fa-fw"></i> Available

                    </a>

                </li>

                <li>

                    <a href="#">

                        <i class="fa fa-times fa-fw"></i> Busy

                    </a>

                </li>

                <li>

                    <a href="#">

                        <i class="fa fa-clock-o fa-fw"></i> Away

                    </a>

                </li>

                <li class="divider"></li>

                <li>

                    <a href="#">

                        <i class="fa fa-sign-out fa-fw"></i> Sign Out

                    </a>

                </li>

            </ul>

        </div>

    </div>

    <!-- /.panel-heading -->

    <div class="panel-body">

        <ul class="chat">

            <li class="left clearfix">

                <span class="chat-img pull-left">

                    <img src="http://placehold.it/50/55C1E7/fff" alt="User Avatar" class="img-circle" />

                </span>

                <div class="chat-body clearfix">

                    <div class="header">

                        <strong class="primary-font">Jack Sparrow</strong>

                        <small class="pull-right text-muted">

                            <i class="fa fa-clock-o fa-fw"></i> 12 mins ago

                        </small>

                    </div>

                    <p>

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.

                    </p>

                </div>

            </li>

            <li class="right clearfix">

                <span class="chat-img pull-right">

                    <img src="http://placehold.it/50/FA6F57/fff" alt="User Avatar" class="img-circle" />

                </span>

                <div class="chat-body clearfix">

                    <div class="header">

                        <small class=" text-muted">

                            <i class="fa fa-clock-o fa-fw"></i> 13 mins ago</small>

                        <strong class="pull-right primary-font">Bhaumik Patel</strong>

                    </div>

                    <p>

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.

                    </p>

                </div>

            </li>

            <li class="left clearfix">

                <span class="chat-img pull-left">

                    <img src="http://placehold.it/50/55C1E7/fff" alt="User Avatar" class="img-circle" />

                </span>

                <div class="chat-body clearfix">

                    <div class="header">

                        <strong class="primary-font">Jack Sparrow</strong>

                        <small class="pull-right text-muted">

                            <i class="fa fa-clock-o fa-fw"></i> 14 mins ago</small>

                    </div>

                    <p>

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.

                    </p>

                </div>

            </li>

            <li class="right clearfix">

                <span class="chat-img pull-right">

                    <img src="http://placehold.it/50/FA6F57/fff" alt="User Avatar" class="img-circle" />

                </span>

                <div class="chat-body clearfix">

                    <div class="header">

                        <small class=" text-muted">

                            <i class="fa fa-clock-o fa-fw"></i> 15 mins ago</small>

                        <strong class="pull-right primary-font">Bhaumik Patel</strong>

                    </div>

                    <p>

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.

                    </p>

                </div>

            </li>

        </ul>

    </div>

    <!-- /.panel-body -->

    <div class="panel-footer">

        <div class="input-group">

            <input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here..." />

            <span class="input-group-btn">

                <button class="btn btn-warning btn-sm" id="btn-chat">

                    Send

                </button>

            </span>

        </div>

    </div>

    <!-- /.panel-footer -->

</div>

<!-- /.panel .chat-panel -->

ul.dropdown-menu.slidedown css 中定制了 slidedown

至此, index.html 分析完成.

SB Admin 2 学习笔记1的更多相关文章

Hadoop学习笔记—18.Sqoop框架学习
一.Sqoop基础:连接关系型数据库与Hadoop的桥梁 1.1 Sqoop的基本概念 Hadoop正成为企业用于大数据分析的最热门选择,但想将你的数据移植过去并不容易.Apache Sqoop正在加 ...
Java学习笔记（04）
Java学习笔记(04) 如有不对或不足的地方,请给出建议,谢谢! 一．对象面向对象的核心:找合适的对象做合适的事情面向对象的编程思想:尽可能的用计算机语言来描述现实生活中的事物面向对象:侧重于 ...
Oracle之PL/SQL学习笔记
自己在学习Oracle是做的笔记及实验代码记录,内容挺全的,也挺详细,发篇博文分享给需要的朋友,共有1w多字的学习笔记吧.是以前做的,一直在压箱底,今天拿出来整理了一下,给大家分享,有不足之处还望大家 ...
MongoDB学习笔记—权限管理
1.MongoDB权限介绍 a 上篇文章中,我们在Linux下配置了MongoDB环境并且将其设置为服务随机器启动而启动,那么接下来这篇文章我们就来简单说一下MongoDB下对登录用户权限的管理. b ...
毕业设计之二 PHP学习笔记（一）
毕业设计之二 PHP学习笔记(一) 作者:20135216 平台:windows10 软件:XAMPP,DreamWeaver 一.环境搭建 1.XAMPP下载安装 XAMPP是PHP.MySQL ...
两千行PHP学习笔记
亲们,如约而至的PHP笔记来啦~绝对干货! 以下为我以前学PHP时做的笔记,时不时的也会添加一些基础知识点进去,有时还翻出来查查. MySQL笔记:一千行MySQL学习笔记http://www.cnb ...
【工作笔记】BAT批处理学习笔记与示例
BAT批处理学习笔记一.批注里定义:批处理文件是将一系列命令按一定的顺序集合为一个可执行的文本文件,其扩展名为BAT或者CMD,这些命令统称批处理命令. 二.常见的批处理指令: 命令清单: 1.RE ...
Nodejs学习笔记（四）——支持Mongodb
前言:回顾前面零零碎碎写的三篇挂着Nodejs学习笔记的文章,着实有点名不副实,当然,这篇可能还是要继续走着离主线越走越远的路子,从简短的介绍什么是Nodejs,到如何寻找一个可以调试的Nodejs ...
Nodejs学习笔记（三）——一张图看懂Nodejs建站
前言:一条线,竖着放,如果做不到精进至深,那就旋转90°,至少也图个幅度宽广. 通俗解释上面的胡言乱语:还没学会爬,就学起走了?! 继上篇<Nodejs学习笔记(二)——Eclipse中运行调试 ...

随机推荐

比较.NET程序集(DLL或EXE)是否相同
如何比较两个.NET程序集(DLL或EXE)是否相同呢? 直接比较文件内容?当然没那么简单了,这个你可以去试试,去比较一下两次Build产生的程序集, 就算内容没有改变,产生的程序集的二进制文件也是不 ...
How to Disable Strict SQL Mode in MySQL 5.7
If your app was written for older versions of MySQL and is not compatible with strict SQL mode in My ...
js判断浏览器类型
使用navigator.userAgent和来判断 PC端: <script type="text/javascript">var ua=navigator.userA ...
OC与JavaScript的交互
stringByEvaluatingJavaScriptFromString的用法,它的功能非常的强大,用起来非常简单,通过它我们可以很方便的操作uiwebview中的页面元素. UIWebView是 ...
UTF-8编码的空格（194 160）问题
前台的字符串传递到后台进行处理,发现了一个较诡异的问题:字符串中的一个空格(ASCII:32)被UTF-8编码之后变成了一个诡异的字符(ASCII:194 和 160的组合)!但在后台其表象还是空格. ...
writing
1.作文类型和结构2.作文的四个评分标准3.作文的常用句型4.作文的逻辑观点大作文分为几类:1.A类(Argument): 这类作文实际上是比较常见的,比如:Caring for children ...
第1章 (ASP.NET MVC简介)
一.MVC概念 MVC由三部分组成:视图(View).模型(Model).控制器(Controller)组成二.运用VS创建MVC 1.新建一个"解决方案" 2.在"解 ...
JSON资料整理
http://www.cnblogs.com/zxlovenet/p/3566802.html
web页面之响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
关于MapReduce中自定义分组类（三）
Job类 /** * Define the comparator that controls which keys are grouped together * for a single ...

SB Admin 2 学习笔记1

SB Admin 2 学习笔记1的更多相关文章

随机推荐

热门专题