需要掌握能够搭建起一个 dashboard 的能力, 因为很少有运维开发团队有专职的前端, bootstrap 也要讲个基本法.
SB Admin 2, 一个免费的 bootstrap theme, 4000颗星, 大体看了下, 想要的功能都有, 够用了. 一点点啃下来.
一. 导航栏部分
1. 上边框导航栏
nav.navbar.navbar-default.navbar-static-top navbar-static-top 是指导航条随页面滚动而消失, navbar-fixed-top 指导航条固定在顶端
nav[role="navigation"] 增强导航条的可访问性
nav[style="margin-bottom: 0"] 设置nav 的下外边距为0
span.sr-only screen read only 仅供屏幕阅读器
span.icon-bar 是按键中的一条横杠
div.navbar-header 里面包含一个 a.navbar-brand, 用作导航条标题, 显示上字体会更大一号
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.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.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 搜索符号
ul.nav.nav-second-level ul.nav.nav-third-level 的加载是由 JS 控制
至此, 导航栏分析完毕, 原来侧边框导航栏是使用css 排版实现的.
二. 主页面部分
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
Area Chart Example
绘图可以换成highchart, echart, d3js
Bar Chart Example
# Date Time Amount 3326 10/21/2013 3:29 PM $321.33 3325 10/21/2013 3:20 PM $234.34 3324 10/21/2013 3:03 PM $724.17 3323 10/21/2013 3:00 PM $23.71 3322 10/21/2013 2:49 PM $8345.23 3321 10/21/2013 2:23 PM $245.12 3320 10/21/2013 2:15 PM $5663.54 3319 10/21/2013 2:13 PM $943.45
div.table-responsive 响应式表格
table.table.table-bordered.table-hover.table-striped table-bordered 边框 table-hover 悬停 table-striped 斑马纹
事件时间线, 这个是非常吸引我的.
Responsive Timeline
Lorem ipsum dolor
11 hours ago via Twitter
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.
Lorem ipsum dolor
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.
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.
Lorem ipsum dolor
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.
Lorem ipsum dolor
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!
Lorem ipsum dolor
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.
Lorem ipsum dolor
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.
Lorem ipsum dolor
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.
li.timeline-inverted 时间线右侧面板, 无 class 属性则默认为左侧面板
div.list-group 列表组
Donut Chart Example
Chat
Jack Sparrow 12 mins agoLorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.
13 mins ago Bhaumik PatelLorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.
ul.dropdown-menu.slidedown css 中定制了 slidedown
至此, index.html 分析完成.