Bootstrap据悉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
Halflings
一般是收费的,但是经过Bootstrap和Glyphicons作者之间的情商,允许开发人员不需开发费用即可使。

我们于体制表中抽取这几乎类图标信息,放到数据库中,然后方便界面管理以及挑选处理。

于前边随笔介绍自己的Bootstrap框架的早晚,图标管理界面如下所示。

Bootstrap 1

摘图标的上,提供一个弹出的对话框显示分类不同之图标,让用户挑选后回来即可。

Bootstrap 2

虽发出了这些意义界面,能够降低我们找图标的长河,但是其实利用的时节,还是有有免便民,因为找一个一定的图标,需要翻译了重重页才会找到相当的,效率不高,通过打听我们本身之图标名称与她显示的情还是有充分死的涉及关系的,因此我们应当提供一个示名称的寻找,方便查询出来,并得以于询问列表中展开选,这样便好大大加速我们探寻Bootstrap图标的速度了。

Bootstrap 3

本条界面比原来改进了森,我们可以通过名称搜索,并获取数据库中符合条件的图标进行分页显示,如果选择中间之一,可以将图标和称显示在上头,这样好方便我们采取。

Bootstrap 4

查询的操作以及其余分页的有些类似,把数量通过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)-框架总览及菜单模块的拍卖 

 

相关文章