插件描述：清新好看的用户界面工具包-FLAT UI,今天我给大家介绍一款漂亮的UI插件，整个界面给人一种清新大气的感觉。
更新时间：2020-11-05 22:56:46
更新说明：更新演示以及下载文件
更新时间：2015-07-09 20:15:29
今天我给大家介绍一款漂亮的UI插件，整个界面给人一种清新大气的感觉。
使用步骤
1、将下载的包添加到自己的网站目录
2、引入以下的css文件
1 2 | <link href="css/bootstrap.css" rel="stylesheet"><link href="css/flat-ui.css" rel="stylesheet"> |
3、引入以下的JS文件（考虑到效率，可放在html文档底部）
注意：这里我们是引用全了整个UI包的js文件，而在实际的运用中，我们可以根据自己的需要来引用其中的某些js文件，而不用引用所有的js文件。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script src="js/jquery-1.8.2.min.js"></script> <script src="js/jquery-ui-1.10.0.custom.min.js"></script> <script src="js/jquery.dropkick-1.0.0.js"></script> <script src="js/custom_checkbox_and_radio.js"></script> <script src="js/custom_radio.js"></script> <script src="js/jquery.tagsinput.js"></script> <script src="js/bootstrap-tooltip.js"></script> <script src="js/jquery.placeholder.js"></script> <script src="js/application.js"></script> |
4、所有的文件夹、js和css都准备完毕后，我们就可以来部署自己的标签元素了，需要什么就放置什么标签。
接下来我就列出一些demo来讲解
UI Demo
按钮
1 2 3 4 5 6 7 | <div class="span3"> <a href="#" class="btn btn-large btn-block btn-info">Info Button</a></div> <div class="span3"> <a href="#" class="btn btn-large btn-block btn-danger">Danger Button</a></div> |
水平菜单
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <div class="span9"> <div class="navbar navbar-inverse"> <div class="navbar-inner"> <div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="nav-collapse collapse"> <ul class="nav"> <li> <a href="#"> Menu Item <span class="navbar-unread">1</span> </a> </li> <li class="active"> <a href="#"> Messages <span class="navbar-unread">1</span> </a> <ul> <li> <a href="#">Element One</a> </li> <li> <a href="#">Sub menu</a> <ul> <li> <a href="#">Element One</a> </li> <li> <a href="#">Element Two</a> </li> <li> <a href="#">Element Three</a> </li> </ul><!-- /Sub menu --> </li> <li> <a href="#">Element Three</a> </li> </ul><!-- /Sub menu --> </li> <li> <a href="#"> About Us <span class="navbar-unread">1</span> </a> </li> </ul> </div><!--/.nav-collapse --> </div> </div> </div> </div> |
垂直菜单
1 2 3 4 5 6 7 8 9 | <div class="span3"> <select value="X-Men" class="span3" tabindex="1" name="herolist"> <optionvalue="0">Choose hero</option> <option value="1">Spider Man</option> <option value="2">Wolverine</option> <option value="3">Captain America</option> <option value="X-Men" selected="selected">X-Men</option> <option value="Crocodile">Crocodile</option> </select></div> |
文本框
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <div class="row"> <div class="span3"> <input type="text" value="" placeholder="Inactive" class="span3"> </div> <div class="span3"> <div class="control-group error"> <input type="text" value="Error" class="span3"> </div> </div> <div class="span3"> <div class="control-group success"> <input type="text" value="Success" class="span3"> </div> </div> <div class="span3"> <input type="text" value="Disabled" disabled="disabled"class="span3"> </div> </div> |
滑动条和进度条
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <div class="span5"> <h3 class="demo-panel-title"> Progress bars & Sliders </h3> <div class="progress"> <div class="bar" style="width:45%;"> </div> </div> <div class="progress"> <div class="bar" style="width:40%;"> </div> <div class="bar bar-warning" style="width:10%;"> </div> <div class="bar bar-danger" style="width:10%;"> </div> <div class="bar bar-success" style="width:10%;"> </div>特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！ 本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！ 如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
|