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

2024-04-02 15:11:17

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>

</li>

...

</ul>

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>

</div>

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

项目实训-中医药知识图谱5相关推荐

项目实训-中医药知识图谱7
前端主界面部分代码 <!doctype html> <html lang="en" xmlns:th="http://http://www.tcmkg. ...
Android基础知识【项目实训-实现二级导航“今日活动”及读取数据库】【5】
[该项目实训是Android基础知识的一个综合练习,特别提示:项目中会用到一些图片素材,都是随意整理的,稍后会上传一个资源,包含该事项项目的基本功能,也含有图片素材] [项目题目]:校园订餐App设计 ...
Blog1 TCMKG——中医药知识图谱项目介绍
一.项目背景知识图谱以结构化的形式描述客观世界中概念.实体及其之间的关系,将互联网的信息表达成更接近人类认知世界的形式,提供了一种更好地组织.管理和理解互联网海量,的能力.知识图谱给互联网语义搜索带 ...
项目实训记录（1-2周）
前言我是我们项目实训小队的队长,负责了开题答辩.下面是项目实训1-2周的工作记录. 一.确定选题我们小组四个同学就选题进行了很长时间的讨论,最后确定选择做一个基于人工智能技术的大学生辅助学习系统. ...
BeagleBone Black项目实训手册（大学霸内部资料）
BeagleBone Black项目实训手册(大学霸内部资料) 介绍:本教程是<BeagleBone Black快速入门教程>的后续教程.本教程以项目操作为主,讲解LED项目.声音项目.传 ...
java质数和合数的程序_《java项目实训》课程设计计算器.doc
<java项目实训>课程设计计算器.doc 课程设计报告课程名称JAVA项目实训课程设计设计名称基于JAVA计算器的设计与实现学生学号学生姓名学生学号学生姓名学生学号学生姓名学生学号学生姓 ...
web前端小项目个人实例_Web前端：小程序界面与逻辑项目实训
大家好,我来了!本期为大家带来的Web前端学习知识是"Web前端:小程序界面与逻辑项目实训",喜欢Web前端的小伙伴,一起看看吧! 主要内容数据绑定渲染界面层数据渲染事件处 ...
2022年大数据BI工程师项目实训介绍
来自[仅悦数据]<大数据BI工程师项目实训>的介绍,精心整理,盗用必究- 本文阅读约需15分钟,感谢观看~ 最新播报:2022年BI大数据实训全面升级,我们必将更专业.更用心! 一.202 ...
学生计算机培训照片,四川新华电脑学校三维项目实训室参观照片
四川新华电脑学校为加强学生的实践动手能力,每个专业开设项目实训室,新华独创"任务驱动式五步教学法"让每位新华学子理论与实践并驾齐驱,学校课程设置改革紧跟市场需求,市场需要什么人才, ...

最新文章

热门文章