Tangdao Design

介绍

Tangdao Design 是一个优质的现代干净的Bootstrap 4中台模板，使用简单和最小的设计。它使用SASS预处理器、HTML5、CSS3和jQuery插件完全响应。它使用了大多数helper/utilities类，这些类是可重用的类，可以加快页面的速度并提高页面时间加载的速度。它可以用于大多数类型的应用程序模板，如分析、管理等程序，也可以用于您的桌面或移动应用程序。惊人的灵活性和可重用性。

组件示例

文档说明

预览

安装教程

安装
$ npm install -g gulp-cli   安装gulp客户端
$ gulp --version            查看版本
$ npm install sass          安装sass
$ sass --version            查看版本
$ npm install               安装插件

打包
$ gulp npm-lib              更新插件
$ gulp sass-css             编译核心样式
$ gulp sass-pages           编译页面样式
$ gulp sass-skins           编译主题库
$ gulp minify-css           压缩样式（可以不执行）

运行
$ gulp default              开发运行

使用说明

Stylesheet
<!-- vendor css -->
<link href="../lib/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="../lib/ionicons/css/ionicons.min.css" rel="stylesheet">

<!-- Tangdao CSS -->
<link rel="stylesheet" href="../assets/css/tangdao.css">
<!-- some additional css here -->

Scripts
<script src="../lib/jquery/jquery.min.js"></script>
<script src="../lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../lib/feather-icons/feather.min.js"></script>

<script src="../assets/js/tangdao.js"></script>

Dashboard
<header class="navbar navbar-header navbar-header-fixed">
  <a href="" id="mainMenuOpen" class="burger-menu"><i data-feather="menu"></i></a>
  <div class="navbar-brand">
    <a href="../index.html" class="td-logo">dash<span>forge</span></a>
  </div>
  <div id="navbarMenu" class="navbar-menu-wrapper">
    <div class="navbar-menu-header">
      <a href="../index.html" class="td-logo">dash<span>forge</span></a>
      <a id="mainMenuClose" href=""><i data-feather="x"></i></a>
    </div>
    <ul class="nav navbar-menu">...</ul>
  </div>
  <div class="navbar-right">...</div>
</header>
<div class="content content-fixed">
  <div class="container pd-x-0 pd-lg-x-10 pd-xl-x-0">
    ...
  </div>
</div>
<footer class="footer">...</footer>

Apps
<header class="navbar navbar-header navbar-header-fixed">...</header>

<!-- app-wrapper is a custom class that you can add in the style (ie. contact-wrapper, chat-wrapper)-->
<!-- check app pages for references -->
<div class="app-wrapper">...</div>

Pages
<header class="navbar navbar-header navbar-header-fixed">...</header>

<div class="content content-fixed bd-b">
  <div class="container pd-x-0 pd-lg-x-10 pd-xl-x-0">
    ...
  </div>
</div>

<footer class="footer">...</footer>

References

Plugins	Link
Bootstrap	https://getbootstrap.com/
Chart JS	http://www.chartjs.org/
CryptoFont	@AMPoellmann
DataTables	https://datatables.net/
Flag Icon CSS	https://github.com/lipis/flag-icon-css
Flot	http://www.flotcharts.org/
Flot CurvedLines	Michael Zinsmaier and nergal.dev
FontAwesome	http://fontawesome.io/
FullCalendar	https://fullcalendar.io/
GMaps	https://hpneo.github.io/gmaps/
IonRangeSlider	IonDen.com
Ionicons	http://ionicons.com/
jQuery	https://jquery.com/
jQuery Sparkline	http://digitalbush.com/projects/masked-input-plugin/
jQuery Steps	http://www.jquery-steps.com/
jQuery UI	https://jqueryui.com/
jQuery MaskedInput	https://digitalbush.com/projects/masked-input-plugin/
jQVMap	http://jqvmap.com
Leaflet	http://leafletjs.com
LightSlider	https://github.com/sachinchoolur/lightslider
LineAwesome	https://icons8.com/line-awesome
Moment JS	https://momentjs.com/
Morris JS	http://morrisjs.github.io/morris.js/
Parsley JS	http://parsleyjs.org
Peity	http://benpickles.github.io/peity
Perfect Scrollbar	http://utatti.github.io/perfect-scrollbar/
Popper JS	https://popper.js.org/
Quill	https://quilljs.com/
Raphael	http://dmitrybaranovskiy.github.io/raphael/
Select2	https://select2.org/
Spectrum	https://bgrins.github.io/spectrum/
Typicons	https://www.s-ings.com/typicons/

史蒂芬-库外 / tangdao-design

Tangdao Design

介绍

组件示例

文档说明

安装教程

使用说明

References

简介

发行版

贡献者

近期动态

史蒂芬-库外 / tangdao-design .gitee-modal { width: 500px !important; }

Tangdao Design

介绍

组件示例

文档说明

安装教程

使用说明

References

简介

发行版

贡献者

近期动态

搜索帮助

史蒂芬-库外 / tangdao-design