通过一款ui源码学习bootstrap(一)

源码下载链接:http://www.mycodes.net/154/9724.htm

bootstrap实战pdf:https://www.jb51.net/books/620650.html(翻了下,还是根据成品来学习快)

NICE ADMIN响应式后台管理模板 分析(主要收集积累类别和前端图形知识):

一.index.html

根据head头引用bootstrap积累

<title>Creative - Bootstrap Admin Template</title>
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- bootstrap theme -->
<link href="css/bootstrap-theme.css" rel="stylesheet">
<!--external css-->
<!-- font icon -->
<link href="css/elegant-icons-style.css" rel="stylesheet" /><!--由360款优雅的矢量图标字体组成,完全免费使用 -->
<link href="css/font-awesome.min.css" rel="stylesheet" />    <!--是一款基于css框架的网页字体图标库-->
<!-- full calendar css-->
<link href="assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" /> <!--bootstrap 标签页与fullcalendar 日历插件-->
<link href="assets/fullcalendar/fullcalendar/fullcalendar.css" rel="stylesheet" />
<!-- easy pie chart-->
<link href="assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/><!--此插件主要是用来统计新的访问、跳出率、服务器负载、使用的RAM等,功能很强大,带有HTML5的动画效果,效果非常炫-->
<!-- owl carousel -->
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css"><!--强大实用的jQuery幻灯片插件Owl Carousel-->
<link href="css/jquery-jvectormap-1.2.2.css" rel="stylesheet">  <!--地图-->
<!-- Custom styles -->
<link rel="stylesheet" href="css/fullcalendar.css">
<link href="css/widgets.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet" />
<link href="css/xcharts.min.css" rel=" stylesheet">  <!--实现图表-->
<link href="css/jquery-ui-1.10.4.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 -->
<!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
  <script src="js/respond.min.js"></script>
  <script src="js/lte-ie7.js"></script>
<![endif]-->


2.header头

3.aside边

<aside>
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu">

4.主体

静态地图直接用的bootstrap接口


<div class="panel panel-default">
<div class="panel-heading">
<h2><i class="fa fa-map-marker red"></i><strong>Countries</strong></h2>
<div class="panel-actions">
<a href="index.html#" class="btn-setting"><i class="fa fa-rotate-right"></i></a>
<a href="index.html#" class="btn-minimize"><i class="fa fa-chevron-up"></i></a>
<a href="index.html#" class="btn-close"><i class="fa fa-times"></i></a>
</div>
</div>
<div class="panel-body-map">
<div id="map" style="height:380px;"></div>
</div>

</div>

几个柱状图写法:

<li>
<!-- Graph -->
<div><span id="todayspark1" class="spark"></span></div>
<!-- Text -->
<div class="datas-text">11,500 visitors/day</div>
</li>
<li>
<div><span id="todayspark2" class="spark"></span></div>
<div class="datas-text">15,000 Pageviews</div>
</li>
<li>
<div><span id="todayspark3" class="spark"></span></div>
<div class="datas-text">30.55% Bounce Rate</div>
</li>
<li>
<div><span id="todayspark4" class="spark"></span></div>
<div class="datas-text">$16,00 Revenue/Day</div>
</li>
<li>
<div><span id="todayspark5" class="spark"></span></div>
<div class="datas-text">12,000000 visitors every Month</div>
</li>


二.chart-chartjs.html

几种图形

三.其他的暂不记录


2019.4.12

发表评论

电子邮件地址不会被公开。 必填项已用*标注