SB Admin 2
引入了基于 Bootstrap 框架的 SB Admin 2 作为系统的主题,从 Start Bootstrap 网站可以预览并下载这个主题
导航栏部分
上边框导航栏
<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
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 分割线
- text-center 文字居中
主页面部分
<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 小屏显示正常