前端開發工具(插件)


Bootstrap

  在眾多插件中,Bootstrap是用得最多、功能最強大的。Bootstrap是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JavaScript 的,它簡潔靈活,使得 Web 開發更加快捷。Bootstrap是基於HTML5和CSS3開發的,它在jQuery的基礎上進行了更為個性化的完善,形成一套自己獨有的網站風格,並兼容大部分jQuery插件。

  使用時需要在HTML代碼的<head></head>標簽中導入     文件路徑/bootstrap-3.3.7-dist/css/bootstrap.min.css

<head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>

  也可用CDN的形式

<script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">

 

  使用方法詳見官網鏈接:http://v3.bootcss.com/    中文全漢化網站:http://www.bootcss.com/

 

FontAwesome

  FontAwesome是一個擁有海量圖標的網站,雖然Bootstrap中已經有非常多的圖標供我們使用,但仍有捉襟見肘的時刻,FontAwesome可以很好的幫助我們解決圖標不夠用的問題。同理使用前需下載好文件並進行導入

  FontAwesome中文網:http://www.fontawesome.com.cn/faicons/

 

SweetAlert系列

  SweetAlert是一項對原生JS中的alert加以美化的工具,有SweetAlert2和SweetAlert22兩個版本。

  現在多用SweetAlert2,下載及教程地址:https://sweetalert2.github.io/   中文:http://mishengqiang.com/sweetalert/

  SweetAlert 到 SweetAlert2 升級指南

  使用前記得引入<script src="sweetalert2/sweetalert2.js"></script>

  也可用CDN形式

<script src="https://cdn.bootcss.com/sweetalert/2.1.0/sweetalert.min.js"></script>

 

 

 

Toastr通知

 

        Toastr

 

jQueryLazyload懶加載

示例代碼:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>懶加載示例</title>
</head>
<body>
<div>
  <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  ...
  <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>

</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
<script>
  $("img.lazy").lazyload({
    effect: "fadeIn",
    event: "click"
  })
</script>
</body>
</html>

 

管理后台模板

        Metronic

 

Highcharts圖像分析

  網址:https://www.hcharts.cn/demo/highcharts

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM