项目实训-中医药知识图谱5

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   分割线

1. 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 小屏显示正常