据悉Metronic的Bootstrap开发框架经验总括(10)–优化Bootstrap图标管理

在按照Bootstrap开发的花色中,鲜艳颜色的按钮,以及丰硕的图形是很吸引人的特色,为了将以此特性发挥到极致,可以动用Bootstrap图标抽取到数据库里面,并在界面中展开田间管理和使用,那样大家可以把那么些图标方便利用在依次页面部件上,如菜单模块,按钮界面,表单输入等三个场面进行利用。在前头小说《据悉Metronic的Bootstrap开发框架经验统计(4)–Bootstrap图标的领到和应用》中,我对如何抽取Bootstrap图标,并单独开发一个页面举办图片的军事管制,本小说介绍怎么样在那个基础上展开优化,已毕更便利的使用。

1、优化图标管理界面

在面前小说中,大家介绍了对图标的抽取、图标管理界面等情节。我们再来回看一下Bootstrap的图纸类型,Bootstrap图标库里面分为了三类内容:

Font Awesome:Bootstrap专用图标字体,Font Awesome
中隐含的富有图标都是矢量的,也就能够擅自缩放,幸免了一个图标做多种尺寸的难为。CSS对字体可以安装的体制也一致可以利用到这一个图标上了。

Simple
Icons
:收集广大网站的Logo,并提供高质地、差距尺寸的png格式图片给周边网友,所有Icon版权归其所属企业。

Glyphicons:包涵200个标志字体格式图表集合,由Glyphicons提供,Glyphicons
哈尔(Hal)flings
一般是收费的,可是透过Bootstrap和Glyphicons作者之间的协议,允许开发人士不须求支出费用即可使用。

咱俩从样式表中抽取这几类图标音信,放到数据库里面,然后方便界面管理和接纳处理。

在面前随笔介绍我的Bootstrap框架的时候,图标管理界面如下所示。

Bootstrap 1

挑选图标的时候,提供一个弹出的对话框突显分类分裂的图标,让用户挑选后回来即可。

Bootstrap 2

虽说有了这么些效应界面,可以下降大家摸索图标的长河,不过事实上行使的时候,如故有部分不便利,因为寻找一个一定的图标,要求翻了广大页才能检索到适合的,作用不高,通过驾驭我们本身的图标名称和它呈现的情节照旧有很大的关联关系的,因而大家应该提供一个显得名称的寻找,方便查询出来,并得以在询问列表中开展精选,那样就可以大大加速大家寻找Bootstrap图标的速度了。

Bootstrap 3

以此界面比原先革新了无数,我们得以通过名称搜索,并赢得数据库里面符合条件的图标举办分页显示,假如选拔之中之一,可以把图标和名称呈现在上头,那样可以便宜我们应用。

Bootstrap 4

Bootstrap,询问的操作和其余分页的部分类似,把数量通过AJax形式取得后,在界面上实行分页呈现即可。

                            <div class="form-group">
                                <label class="control-label col-md-2">图标显示名称</label>
                                <div class="input-icon col-md-3">
                                    <div class="input-group">
                                        <div class="input-icon ">
                                            <input id="WHC_DisplayName" name="WHC_DisplayName" type="text" class="form-control" placeholder="显示名称...">
                                        </div>

                                            <button id="btnSearch" class="btn btn-success" type="button" onclick="SearchDisplayName()">
                                                <i class="glyphicon glyphicon-list"></i>查询
                                            </button>

                                    </div>
                                </div>
                            </div>

        //根据名称查询图标
        function SearchDisplayName()
        {
            var condition = "WHC_DisplayName=" + $("#WHC_DisplayName").val();
            SearchCondition(currentPage, condition);
        }

        //图标查询
        function Search(page) {
            var condition = "WHC_SourceType=SimpleLine";//SimpleLine,FontAwesome,Glyphicons

            SearchCondition(page, condition);
        }
        function SearchCondition(page, condition) {
            var iconUrl = "/BootstrapIcon/FindWithPager?page=" + page + "&rows=" + rows;

            $.getJSON(iconUrl + "&" + condition, function (data) {
                $("#grid_body").html("");
                $.each(data.rows, function (i, item) {
                    var tr = "<a href='javascript:;' onclick=\"SetIconClass('" + item.ClassName + "')\" class='icon-btn' title=\"" + item.DisplayName + "\">";
                    tr += "    <i class=\"" + item.ClassName + " \" style=\"font-size: 2.2em\"></i>";//
                    tr += "</a>";
                    $("#grid_body").append(tr);
                });

                var element = $('#grid_paging');
                if(data.total > 0) {
                    var options = {
                        bootstrapMajorVersion: 3,
                        currentPage: page,
                        numberOfPages: rows,
                        totalPages: Math.ceil(data.total / rows),
                        onPageChanged: function (event, oldPage, newPage) {
                            SearchCondition(newPage, condition);
                        }
                    }
                    element.bootstrapPaginator(options);
                } else {
                    element.html("");
                }
            });
        }

除此以外图标的体裁我们也有利一起构成让它显得,如Primary Success Info Warning
Danger等经典样式,当然大家也足以安装颜色使图标展现更加多的色彩。

Bootstrap 5

连锁的界面代码如下所示。

                                <div class="input-icon col-md-6">
                                    <button type="button" class="btn btn-default" onclick="ChangeIconStyle('default')">Default</button>
                                    <button type="button" class="btn btn-primary" onclick="ChangeIconStyle('primary')">Primary</button>
                                    <button type="button" class="btn btn-success" onclick="ChangeIconStyle('success')">Success</button>
                                    <button type="button" class="btn btn-info" onclick="ChangeIconStyle('info')">Info</button>
                                    <button type="button" class="btn btn-warning" onclick="ChangeIconStyle('warning')">Warning</button>
                                    <button type="button" class="btn btn-danger" onclick="ChangeIconStyle('danger')">Danger</button>
                                </div>

    <script>
        //通过JS修改界面图标的显示和样式
        function ChangeIconStyle(style) {
            var icon = $("#WebIcon").val();
            if (style != 'default') {
                $("#i_WebIcon").attr("class", icon + " icon-state-" + style);
                $("#lbl_WebIcon").attr("class", "label label-" + style);
                $("#lbl_WebIcon").text(icon + " icon-state-" + style);
            } else {
                $("#i_WebIcon").attr("class", icon);
                $("#lbl_WebIcon").attr("class", "");
                $("#lbl_WebIcon").text(icon);
            }
        }
    </script>

 

2、图标的行使场景

有了这种便宜拔取图标的保管界面,可以极大增强大家的频率。大家得以在菜单、按钮等八个地点使用图标,使得界面越发雅观。

如在菜单界面中使用如下所示。

Bootstrap 6

要么可以左侧菜单进行应用。

Bootstrap 7

Bootstrap 8

俺们仍是可以把图标用在界面的机能按钮上。

Bootstrap 9

万一感兴趣Bootstrap开发框架体系,可以参照学习下边的稿子,感谢您的翻阅。

在MVC控制器里面使用dynamic和ExpandoObject,完结数据转义的出口 

依照Metronic的Bootstrap开发框架经验统计(9)–达成Web页面内容的打印预览和封存操作 

 

根据Metronic的Bootstrap开发框架经验计算(8)–框架作用完全界面介绍  

 

按照Metronic的Bootstrap开发框架经验统计(7)–数据的导入、导出及附件的查阅处理

 

依照Metronic的Bootstrap开发框架经验总计(6)–对话框及提醒框的处理和优化 

 

依照Metronic的Bootstrap开发框架经验总计(5)–Bootstrap文件上传插件File
Input的应用

 

据悉Metronic的Bootstrap开发框架经验总括(4)–Bootstrap图标的领取和运用 

 

基于Metronic的Bootstrap开发框架经验总计(3)–下拉列表Select2插件的使用 

 

基于Metronic的Bootstrap开发框架经验统计(2)–列表分页处理和插件JSTree的采取 

 

根据Metronic的Bootstrap开发框架经验计算(1)-框架总览及菜单模块的拍卖 

 

相关文章