您的位置:68399皇家赌场 > 服务器租用 > 【www.68399.com】很准确的四款Bootstrap IconLogo选取组

【www.68399.com】很准确的四款Bootstrap IconLogo选取组

发布时间:2019-07-13 06:50编辑:服务器租用浏览(86)

    支持“上一页”和“下一页”

    你大概感兴趣的文章:

    • 详解Bootstrap glyphicons字体Logo

    Icon图标接纳组件,bootstrapicon 一、Bootstrap icon picker组件 这几个组件是在github上面寻觅的时候找到的,初初看上去,确实...

    JS组件种类之Bootstrap IconLogo选拔组件,bootstrapicon

    前言:方今广大爱人在群里面说起bootstrap iconLogo的主题材料,比方最常见的菜系管理,每一个菜单确定须要一个相应的美食做法Logo,若是有一个可视化的Logo选取组件就好了,最佳是一贯选用Logo,就能够得到相应的class样式。于是乎各个百度,皇天不辜负有心人,最终被博主找到了,认为效果勉强可以,而且协理自定义的Logo,前日就拿出去分享下,相对的干货哦!

    一、Bootstrap icon picker组件

    那么些组件是在github下边找出的时候找到的,初初看上去,确实是很不错的,并且是依附bootstrap风格的,所以更加的适合采用bootstrap风格布局的等级次序。既然是github上面包车型大巴,无庸置疑,那是一个开源组件,源码地址。好了,说了这么多,一同来探视它毕竟长啥样子吧。

    1、组件效果预览

    先是次起初化

    www.68399.com 1

    支持“上一页”和“下一页”

    www.68399.com 2

    援助自定义Logo的挑选

    www.68399.com 3

    支撑模糊寻觅Logo,比如大家寻觅camera

    www.68399.com 4

    采用Logo后对应的体制放入到文本框里面

    www.68399.com 5

    2、组件代码示例(1)普通用法

    此组件基于bootstrap和jquery,必要援用的文件如下

     <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> 
    <link href="~/Content/Bootstrap-icon-picker-master/Bootstrap-icon-picker-master/css/icon-picker.css" rel="stylesheet" /> 
    <script src="~/Scripts/jquery-1.9.1.js">
    </script> 
    <script src="~/Content/Bootstrap-icon-picker-master/Bootstrap-icon-picker-master/js/iconPicker.js">
    </script>
    

    在html页面下面放置贰个平凡的的input文本框

    <input type="text">
    

    JS初始化

    $(function () { //bootstrap icon初始化 $("#txt_boostrap_icon").iconPicker(); });
    

    这么早先化之后就能够收看如上海教室的功用了。有木有非常粗大略~~

    然后大家供给获得选中的值,和一般性input文本框的行使方法未有另外分歧var bootstrap_icon = $("#txt_boostrap_icon").val();

    (2)自定义Logo

    我们看出使用方面包车型地铁秘籍起首化之后,Logo的个数是定位的那么几十三个。要是我们必要往里面加一些大家自身的icon图标怎么做吧?又或然,我们须求使用背景图片来作为Logo,该如何是好?别急,办法总是会有的!大家先来归纳看看它的js源码:

    www.68399.com 6

    一起也就一百多行代码,要看懂也易于。我们任重(Ren Zhong)而道远来探望上面红线匡里面包车型地铁变量icons,旁观开采那一个数组里面存放的正是大家富有Logo的联谊。再来看看生成的html源码。

    www.68399.com 7

    通过大家猜度是还是不是可以自定义样式也命名叫glyphicon-那样的有个别体裁来自定义Logo呢?有了这么些主张,我们在css文件之中新加四个样式

    www.68399.com 8

    然后在icons变量里面加test11、test12、test13、test14多个项之后

    var icons = new Array("adjust", "align-center", "align-justify", "align-left", "align-right", "arrow-down", "arrow-left", "arrow-right", "arrow-up",......... "zoom-out","test11","test12","test13", "test14");
    

    好了,马到成功。接下来正是刷新页面看效果了。

    www.68399.com 9

    故此这些组件最大的功利正是增加自身的Logo方便,不管是用content写照旧采用背景图片都能够无缝衔接。杠杠的!

    二、jQuery fontIconPicker组件

    jquery fonticonpicker是博主是找jquery插件的时候无意中窥见的,不开掘无妨,留神钻探后发觉这组件真心不错,特别是分界面效果很棒。何况开源,文档全,功用丰富。源码下载地址

    1、组件效果预览

    初始化的时候有自定义了各个大旨(博主更偏心第一种bootstrap风格的)

    www.68399.com 10

    www.68399.com 11

    www.68399.com 12

    www.68399.com 13

    协理分页

    www.68399.com 14

    鼠标上地方效果

    www.68399.com 15

    支撑模糊搜索

    www.68399.com 16

    支撑自定义每页呈现的Logo个数

    www.68399.com 17

    选料有个别Logo后的作用

    www.68399.com 18

    2、组件代码示例

    (1)普通用法

    以此组件无需bootstrap的支持,然则急需jquery的支撑,可是大家测量检验的内需依旧将bootstrap.css给援用进来。

    <script src="~/Scripts/jquery-1.9.1.js"></script> <script src="~/Content/fontIconPicker-2.0.0/jquery.fonticonpicker.js">
    
    </script> <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/css/jquery.fonticonpicker.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/themes/grey-theme/jquery.fonticonpicker.grey.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/themes/dark-grey-theme/jquery.fonticonpicker.darkgrey.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/themes/inverted-theme/jquery.fonticonpicker.inverted.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/fontIconPicker-2.0.0/demo/fontello-7275ca86/css/fontello.css" rel="stylesheet" />
    

    功能炫,必然援用的公文就多了。

    再来看看html计划

    1)静态html

    <select name="myselect"> <option value="">No icon</option> <option>icon-user</option> <option>icon-search</option> <option>icon-right-dir</option> <option>icon-star</option> <option>icon-cancel</option> <option>icon-help-circled</option> <option>icon-info-circled</option> <option>icon-eye</option> <option>icon-tag</option> <option>icon-bookmark</option> <option>icon-heart</option> <option>icon-thumbs-down-alt</option> <option>icon-upload-cloud</option> <option>icon-phone-squared</option> <option>icon-cog</option> <option>icon-wrench</option> <option>icon-volume-down</option> <option>icon-down-dir</option> <option>icon-up-dir</option> <option>icon-left-dir</option> <option>icon-thumbs-up-alt</option> </select>
    

    2)尽管是动态设置Logo,这里只需求放一个空的select就可以

    <select name="myselect"></select>
    

    JS初始化

    1)静态开头化(针对select里面早就写好了option的动静)

    $(function () { //jquery icon初始化 $('#myselect').fontIconPicker(); // Load with default options });
    

    2)动态开头化(针对空的select标签)

    $(function () { //jquery icon初始化 $('#myselect').fontIconPicker({ theme: 'fip-bootstrap',//四种主题风格:fip-grey, fip-darkgrey, fip-bootstrap, fip-inverted source: ["icon-music", "icon-search", "icon-mail", "icon-mail-alt", "icon-heart", "icon-heart-empty", "icon-star", "icon-star-empty", "icon-star-half", "icon-star-half-alt", "icon-user", "icon-users", "icon-male", "icon-female", "icon-video", "icon-videocam", "icon-picture", "icon-camera", "icon-camera-alt", "icon-th-large", "icon-th", "icon-th-list", "icon-ok", "icon-ok-circled", "icon-ok-circled2", "icon-ok-squared", "icon-cancel", "icon-cancel-circled", "icon-cancel-circled2", "icon-plus", "icon-plus-circled", "icon-plus-squared", "icon-plus-squared-small", "icon-minus", "icon-minus-circled", "icon-minus-squared", "icon-minus-squared-alt", "icon-minus-squared-small", "icon-help", "icon-help-circled", "icon-info-circled", "icon-info", "icon-home", "icon-link", "icon-unlink", "icon-link-ext", "icon-link-ext-alt", "icon-attach", "icon-lock", "icon-lock-open", "icon-lock-open-alt", "icon-pin", "icon-eye", "icon-eye-off", "icon-tag", "icon-tags", "icon-bookmark", "icon-bookmark-empty", "icon-flag", "icon-flag-empty", "icon-flag-checkered", "icon-thumbs-up", "icon-thumbs-down", "icon-thumbs-up-alt", "icon-thumbs-down-alt", "icon-download", "icon-upload", "icon-download-cloud", "icon-upload-cloud", "icon-reply", "icon-reply-all", "icon-forward", "icon-quote-left", "icon-quote-right", "icon-code", "icon-export", "icon-export-alt", "icon-pencil", "icon-pencil-squared", "icon-edit", "icon-print", "icon-retweet", "icon-keyboard", "icon-gamepad", "icon-comment", "icon-chat", "icon-chat-empty", "icon-bell", "icon-bell-alt", "ion-android-alert", "ion-android-apps"], emptyIcon: true,//是否显示空 emptyIconValue: "none",//空值 iconsPerPage: 30, //每页显示图标的个数,默认20 hasSearch: true,//是否显示试试框,默认true }); });
    

    实则也相当的粗略,就那么多少个能够设置的参数,代码里面已经写了对应的解说,这里就不做过多讲授。

    一直以来,获取选中的值,能够直接行使jquery的val()就能够。

    (2)自定义Logo

    看了下面bootstrap icon的自定义Logo,你是还是不是也在想,那些组件也能协助自定义就好了。呵呵,博主也是如此想得。好依然不佳呢?我们先来试一试。

    1)使用背景图片的Logo尝试,结果倒闭

    率先直接在页面上边定义二个应用背景图片的体制

    <style type="text/css"> .glyphicon-test13
    
     { background: url('/Content/images/icons/p13.png') no-repeat center center!important; height: 15px!important; width: 14px!important; 
    }
    </style>
    

    接下来将"glyphicon-test13"归入到初阶化source对应的数组的最后,看似水到渠成。我们刷新下界面看看

    www.68399.com 19

    差强人意,Logo背景图不恐怕符合规律展现。那是干吗呢?博主好奇心又来了,检查核对元素看看:

    www.68399.com 20

    原先这一个组件生成的是i标签,它和上边包车型地铁span是见仁见智的,span能够当作容器,而不得不作为一种斜体标签。所以此种尝试退步。然则博主不服气了,你说i标签不是容器未有实际的占位是啊,大家将i里面写入三个空格行依旧不行呢?

    www.68399.com 21

    能够看出向i标签里面参预空格之后,确实能够让图片呈现出来,貌似难点周详化解!然则,不过,别欢快太早了,选中的时候照旧特别,因为选中的内部依然空的i标签。所以总的来讲,这种方式能够当做一种参照他事他说加以考察思路,前面一时光看是不是能够确切修改下源码达成那一个职能,近来那阶段是不帮衬自定背景图片的!

    2)使用css写的Logo尝试,结果成功

    既然如此自定义背景图片不行,那么只要我们自定icon呢,也正是如果咱们都经过:before{content:""}这种艺术来写的Logo是或不是足以啊?答案是能够的。我们找到一个特意放icon的网址Icon下载,去里面下载icon包,援用到我们项目标页面中来。

    www.68399.com 22

    我们随意选七个"ion-android-archive"、"ion-android-arrow-back"放到伊始化source对应的数组的末段。刷新分界面

    www.68399.com 23

    当选之后

    www.68399.com 24

    三、比较

    上述便是二种iconLogo选择组件的施用示例。相比较一下,这种组件其实各有利弊。

    1、从分界面效果来看,第三种(jqueryfontIconPicker)要比第一种(Bootstrap icon picker)要美观,分界面更炫,用户体验更加好。那一个从未计较。

    2、从组件的轻量级上边来讲,第一种是要比第三种更优的,很醒目,第三种援用了那么多的css,明确或多或少会促成组件的重叠。

    3、从利用是还是不是有助于的角度来看,第一种采取越发简便易行,更易扩张;第三种api 越发完善,可自定义的项非常多,使用灵活,可是自定义背景图片这两天会不不奇怪。

    然后将"glyphicon-test13"放入到发轫化source对应的数组的末段,看似旗开马到。大家刷新下分界面看看

    挑选Logo后对应的样式放入到文本框里面

    很不错的五款Bootstrap IconLogo选拔组件,bootstrapicon

    一、Bootstrap icon picker组件

    以此组件是在github上边找寻的时候找到的,初初看上去,确实是很正确的,并且是依据bootstrap风格的,所以进一步切合采纳bootstrap风格布局的品类。既然是github上面包车型大巴,确实无疑,那是一个开源组件,源码地址。好了,说了那般多,一起来探访它毕竟长啥样子吧。

    1、组件效果预览

    率先次早先化

    www.68399.com 25

    支持“上一页”和“下一页”

    www.68399.com 26

    支持自定义Logo的抉择

    www.68399.com 27

    支撑模糊寻找Logo,比如大家搜索camera

    www.68399.com 28

    接纳Logo后对应的体制归入到文本框里面

    www.68399.com 29

    2、组件代码示例
    (1)普通用法
    此组件基于bootstrap和jquery,须求引用的公文如下

       <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
     <link href="~/Content/Bootstrap-icon-picker-master/Bootstrap-icon-picker-master/css/icon-picker.css" rel="stylesheet" />
    
     <script src="~/Scripts/jquery-1.9.1.js"></script>
     <script src="~/Content/Bootstrap-icon-picker-master/Bootstrap-icon-picker-master/js/iconPicker.js"></script>
    

    在html页面上边放置三个一般的的input文本框

     <input type="text" class="form-control" id="txt_boostrap_icon">
    

    JS初始化

      $(function () {
      //bootstrap icon初始化
      $("#txt_boostrap_icon").iconPicker();
     });
    

    如此开首化之后就会见到如上海教室的效能了。有木有很轻松~~

    然后我们供给获得选中的值,和日常input文本框的运用办法未有别的不一样 var bootstrap_icon = $("#txt_boostrap_icon").val();

    (2)自定义Logo

    我们看出使用方面包车型大巴方式先河化之后,Logo的个数是原则性的那么几十一个。即便我们须要往里面加一些我们同心合力的iconLogo如何是好吧?又或然,大家供给使用背景图片来作为图标,该如何做?别急,办法总是会某个!大家先来轻易看看它的js源码:

    www.68399.com 30

    计算也就一百多行代码,要看懂也一见钟情。大家根本来探视上面红线匡里面包车型大巴变量icons,旁观发掘那个数组里面寄存的就是大家具有图标的集聚。再来看看生成的html源码。

    www.68399.com 31

    经过大家推断是或不是足以自定义样式也命名叫glyphicon-这样的有的样式来自定义Logo呢?有了这么些主张,大家在css文件之中新加五个样式

    www.68399.com 32

    然后在icons变量里面加test11、test12、test13、test14八个项之后

    复制代码 代码如下:var icons = new Array("adjust", "align-center", "align-justify", "align-left", "align-right", "arrow-down", "arrow-left", "arrow-right", "arrow-up",......... "zoom-out","test11","test12","test13", "test14");

    好了,马到成功。接下来正是刷新页面看成效了。

    www.68399.com 33

    之所以这一个组件最大的低价正是扩展本身的Logo方便,不管是用content写如故利用背景图片都能够无缝衔接。杠杠的!

    二、jQuery fontIconPicker组件

    jquery fonticonpicker是博主是找jquery插件的时候无意中开掘的,不开采不妨,三思而行后意识那组件真心不错,非常是分界面效果很棒。而且开源,文书档案全,功能丰裕。

    1、组件效果预览

    早先化的时候有自定义了五种主旨(博主更偏幸第一种bootstrap风格的)

    www.68399.com 34

    www.68399.com 35

    www.68399.com 36

    www.68399.com 37

    支撑分页

    www.68399.com 38

    鼠标上地方效果

    www.68399.com 39

    扶助模糊寻找

    www.68399.com 40

    支持自定义每页突显的Logo个数

    www.68399.com 41

    慎选有个别Logo后的功能

    www.68399.com 42

    2、组件代码示例
    (1)普通用法
    本条组件不要求bootstrap的支撑,不过须要jquery的帮忙,但是大家测量检验的急需依然将bootstrap.css给引用进来。

    <script src="~/Scripts/jquery-1.9.1.js"></script>
     <script src="~/Content/fontIconPicker-2.0.0/jquery.fonticonpicker.js"></script>
    
     <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
     <link href="~/Content/fontIconPicker-2.0.0/css/jquery.fonticonpicker.css" rel="stylesheet" />
     <link href="~/Content/fontIconPicker-2.0.0/themes/grey-theme/jquery.fonticonpicker.grey.css" rel="stylesheet" />
     <link href="~/Content/fontIconPicker-2.0.0/themes/dark-grey-theme/jquery.fonticonpicker.darkgrey.css" rel="stylesheet" />
     <link href="~/Content/fontIconPicker-2.0.0/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.css" rel="stylesheet" />
     <link href="~/Content/fontIconPicker-2.0.0/themes/inverted-theme/jquery.fonticonpicker.inverted.css" rel="stylesheet" />
     <link href="~/Content/fontIconPicker-2.0.0/fontIconPicker-2.0.0/demo/fontello-7275ca86/css/fontello.css" rel="stylesheet" />
    

    成效炫,必然援引的文件就多了。

    再来看看html盘算

    1)静态html

    <select id="myselect" name="myselect" class="myselect">
        <option value="">No icon</option>
        <option>icon-user</option>
        <option>icon-search</option>
        <option>icon-right-dir</option>
        <option>icon-star</option>
        <option>icon-cancel</option>
        <option>icon-help-circled</option>
        <option>icon-info-circled</option>
        <option>icon-eye</option>
        <option>icon-tag</option>
        <option>icon-bookmark</option>
        <option>icon-heart</option>
        <option>icon-thumbs-down-alt</option>
        <option>icon-upload-cloud</option>
        <option>icon-phone-squared</option>
        <option>icon-cog</option>
        <option>icon-wrench</option>
        <option>icon-volume-down</option>
        <option>icon-down-dir</option>
        <option>icon-up-dir</option>
        <option>icon-left-dir</option>
        <option>icon-thumbs-up-alt</option>
        </select>
    

    2)假如是动态设置Logo,这里只要求放三个空的select就可以

    <select id="myselect" name="myselect" class="myselect"></select>
    

    JS初始化

    1)静态早先化(针对select里面已经写好了option的景况)

    $(function () {
     //jquery icon初始化
     $('#myselect').fontIconPicker(); // Load with default options
     });
    

    2)动态初步化(针对空的select标签)

    $(function () {
      //jquery icon初始化
      $('#myselect').fontIconPicker({
      theme: 'fip-bootstrap',//四种主题风格:fip-grey, fip-darkgrey, fip-bootstrap, fip-inverted
      source: ["icon-music", "icon-search", "icon-mail", "icon-mail-alt", "icon-heart", "icon-heart-empty", "icon-star", "icon-star-empty", "icon-star-half", "icon-star-half-alt", "icon-user", "icon-users", "icon-male", "icon-female", "icon-video", "icon-videocam", "icon-picture", "icon-camera", "icon-camera-alt", "icon-th-large", "icon-th", "icon-th-list", "icon-ok", "icon-ok-circled", "icon-ok-circled2", "icon-ok-squared", "icon-cancel", "icon-cancel-circled", "icon-cancel-circled2", "icon-plus", "icon-plus-circled", "icon-plus-squared", "icon-plus-squared-small", "icon-minus", "icon-minus-circled", "icon-minus-squared", "icon-minus-squared-alt", "icon-minus-squared-small", "icon-help", "icon-help-circled", "icon-info-circled", "icon-info", "icon-home", "icon-link", "icon-unlink", "icon-link-ext", "icon-link-ext-alt", "icon-attach", "icon-lock", "icon-lock-open", "icon-lock-open-alt", "icon-pin", "icon-eye", "icon-eye-off", "icon-tag", "icon-tags", "icon-bookmark", "icon-bookmark-empty", "icon-flag", "icon-flag-empty", "icon-flag-checkered", "icon-thumbs-up", "icon-thumbs-down", "icon-thumbs-up-alt", "icon-thumbs-down-alt", "icon-download", "icon-upload", "icon-download-cloud", "icon-upload-cloud", "icon-reply", "icon-reply-all", "icon-forward", "icon-quote-left", "icon-quote-right", "icon-code", "icon-export", "icon-export-alt", "icon-pencil", "icon-pencil-squared", "icon-edit", "icon-print", "icon-retweet", "icon-keyboard", "icon-gamepad", "icon-comment", "icon-chat", "icon-chat-empty", "icon-bell", "icon-bell-alt", "ion-android-alert", "ion-android-apps"],
      emptyIcon: true,//是否显示空
      emptyIconValue: "none",//空值
      iconsPerPage: 30, //每页显示图标的个数,默认20
      hasSearch: true,//是否显示试试框,默认true
    
      }); 
     });
    

    实在也很简单,就那么多少个能够设置的参数,代码里面已经写了相应的注释,这里就不做过多讲明。

    大同小异,获取选中的值,能够直接使用jquery的val()就可以。

    (2)自定义Logo
    看了上面bootstrap icon的自定义Logo,你是不是也在想,那一个组件也能辅助自定义就好了。呵呵,博主也是这么想得。好还是不好呢?大家先来试一试。

    1)使用背景图片的Logo尝试,结果停业

    第一直接在页面上边定义一个采纳背景图片的体裁

    <style type="text/css">
     .glyphicon-test13 {
      background: url('/Content/images/icons/p13.png') no-repeat center center!important;
      height: 15px!important;
      width: 14px!important;
     }
    </style>
    

    下一场将"glyphicon-test13"放入到起初化source对应的数组的尾声,看似水到渠成。我们刷新下分界面看看

    www.68399.com 43

    差强人意,Logo背景图不能符合规律呈现。那是干什么吗?好奇心又来了,核实成分看看:

    www.68399.com 44

    原本这么些组件生成的是i标签,它和方面包车型客车span是差别的,span可以用作容器,而不得不当作一种斜体标签。所以此种尝试退步。可是不服气了,你说i标签不是容器没有实际的占位是吗,大家将i里面写入四个空格能够依然不可能吧?

    www.68399.com 45

    能够看来向i标签里面出席空格之后,确实能够让图片展现出来,貌似难点全面消除!不过,可是,别欢娱太早了,选中的时候依旧十三分,因为选中的在那之中照旧空的i标签。所以总的来讲,这种措施得以用作一种参谋思路,前边有的时候间看是或不是足以适用修改下源码完成那么些效果,这段时间那阶段是不帮衬自定背景图片的!

    2)使用css写的Logo尝试,结果成功

    既然自定义背景图片不行,那么只要我们自定icon呢,也正是一旦我们都因此:before{content:""}这种办法来写的Logo是还是不是可以吗?答案是足以的。我们找到一个特意放icon的网址,去里面下载icon包,援引到我们项目标页面中来。

    www.68399.com 46

    小编们无论选四个"ion-android-archive"、"ion-android-arrow-back"放到伊始化source对应的数组的尾声。刷新界面

    www.68399.com 47

    入选之后

    www.68399.com 48

    三、比较
    以上就是二种iconLogo选用组件的应用示例。比较一下,这种组件其实各有利弊。

    1、从分界面效果来看,第三种(jquery fontIconPicker)要比第一种(Bootstrap icon picker)要赏心悦目,分界面更炫,用户体验更加好。那些从未纠纷。

    2、从组件的轻量级下面来讲,第一种是要比第三种更优的,很猛烈,第三种引用了那么多的css,肯定或多或少会促成组件的重叠。

    3、从利用是不是有助于的角度来看,第一种采纳越发简便易行,更易扩张;第二种api 特别完善,可自定义的项非常多,使用灵活,可是自定义背景图片近些日子会有毛病。

    好了,那篇就到此地。假设您的品种刚刚也需求用到这种Logo接纳组件,能够用起来试试。

    你大概感兴趣的篇章:

    • 读书Bootstrap组件之下拉菜单
    • JS组件Bootstrap完毕弹出框和提醒框效果代码
    • JS组件Bootstrap Table表格行拖拽效果落到实处代码
    • JS组件Bootstrap Table表格多行拖拽效果完结代码
    • 详解Bootstrap glyphicons字体Logo

    IconLogo采纳组件,bootstrapicon 前言:近些日子游人如织爱人在群里面聊起bootstrap iconLogo的标题,比方最分布的菜单管理,每一种...

    $(function () { //jquery icon初始化 $('#myselect').fontIconPicker({ theme: 'fip-bootstrap',//四种主题风格:fip-grey, fip-darkgrey, fip-bootstrap, fip-inverted source: ["icon-music", "icon-search", "icon-mail", "icon-mail-alt", "icon-heart", "icon-heart-empty", "icon-star", "icon-star-empty", "icon-star-half", "icon-star-half-alt", "icon-user", "icon-users", "icon-male", "icon-female", "icon-video", "icon-videocam", "icon-picture", "icon-camera", "icon-camera-alt", "icon-th-large", "icon-th", "icon-th-list", "icon-ok", "icon-ok-circled", "icon-ok-circled2", "icon-ok-squared", "icon-cancel", "icon-cancel-circled", "icon-cancel-circled2", "icon-plus", "icon-plus-circled", "icon-plus-squared", "icon-plus-squared-small", "icon-minus", "icon-minus-circled", "icon-minus-squared", "icon-minus-squared-alt", "icon-minus-squared-small", "icon-help", "icon-help-circled", "icon-info-circled", "icon-info", "icon-home", "icon-link", "icon-unlink", "icon-link-ext", "icon-link-ext-alt", "icon-attach", "icon-lock", "icon-lock-open", "icon-lock-open-alt", "icon-pin", "icon-eye", "icon-eye-off", "icon-tag", "icon-tags", "icon-bookmark", "icon-bookmark-empty", "icon-flag", "icon-flag-empty", "icon-flag-checkered", "icon-thumbs-up", "icon-thumbs-down", "icon-thumbs-up-alt", "icon-thumbs-down-alt", "icon-download", "icon-upload", "icon-download-cloud", "icon-upload-cloud", "icon-reply", "icon-reply-all", "icon-forward", "icon-quote-left", "icon-quote-right", "icon-code", "icon-export", "icon-export-alt", "icon-pencil", "icon-pencil-squared", "icon-edit", "icon-print", "icon-retweet", "icon-keyboard", "icon-gamepad", "icon-comment", "icon-chat", "icon-chat-empty", "icon-bell", "icon-bell-alt", "ion-android-alert", "ion-android-apps"], emptyIcon: true,//是否显示空 emptyIconValue: "none",//空值 iconsPerPage: 30, //每页显示图标的个数,默认20 hasSearch: true,//是否显示试试框,默认true }); });
    
     <input type="text" class="form-control" id="txt_boostrap_icon">
    

    看了地点bootstrap icon的自定义Logo,你是或不是也在想,这一个组件也能帮助自定义就好了。呵呵,博主也是这么想得。行依旧不行呢?我们先来试一试。

    不尽人意,Logo背景图不可能正常展现。那是干吗呢?好奇心又来了,审查成分看看:

    既然自定义背景图片不行,那么一旦我们自定icon呢,也正是借使我们都因而:before{content:""}这种方法来写的Logo是还是不是能够吧?答案是足以的。大家找到八个特地放icon的网址Icon下载,去里面下载icon包,援用到大家项目标页面中来。

    <script src="~/Scripts/jquery-1.9.1.js"></script>
     <script src="~/Content/fontIconPicker-2.0.0/jquery.fonticonpicker.js"></script>
    
     <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
     <link href="~/Content/fontIconPicker-2.0.0/css/jquery.fonticonpicker.css" rel="stylesheet" />
     <link href="~/Content/fontIconPicker-2.0.0/themes/grey-theme/jquery.fonticonpicker.grey.css" rel="stylesheet" />
     <link href="~/Content/fontIconPicker-2.0.0/themes/dark-grey-theme/jquery.fonticonpicker.darkgrey.css" rel="stylesheet" />
     <link href="~/Content/fontIconPicker-2.0.0/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.css" rel="stylesheet" />
     <link href="~/Content/fontIconPicker-2.0.0/themes/inverted-theme/jquery.fonticonpicker.inverted.css" rel="stylesheet" />
     <link href="~/Content/fontIconPicker-2.0.0/fontIconPicker-2.0.0/demo/fontello-7275ca86/css/fontello.css" rel="stylesheet" />
    

    下一场在icons变量里面加test11、test12、test13、test14多少个项之后

    如此这般开端化之后就能够看出如上海体育场合的职能了。有木有相当的粗略~~

    1、组件效果预览

    咱俩看看接纳方面包车型地铁方法开头化之后,Logo的个数是一直的那么几13个。即使大家须要往里面加一些大家和好的iconLogo怎么做呢?又只怕,大家要求运用背景图片来作为Logo,该咋做?别急,办法总是会有些!我们先来大致看看它的js源码:

    再来看看html准备

    www.68399.com 49

    <input type="text">
    

    www.68399.com 50

    www.68399.com 51

    2、从组件的轻量级上边来说,第一种是要比第三种更优的,很明显,第两种引用了那么多的css,料定或多或少会促成组件的交汇。

     <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> 
    <link href="~/Content/Bootstrap-icon-picker-master/Bootstrap-icon-picker-master/css/icon-picker.css" rel="stylesheet" /> 
    <script src="~/Scripts/jquery-1.9.1.js">
    </script> 
    <script src="~/Content/Bootstrap-icon-picker-master/Bootstrap-icon-picker-master/js/iconPicker.js">
    </script>
    

    您可能感兴趣的稿子:

    • 本地Bootstrap文件字体Logo引进却力不能支出示难点的缓和办法
    • Bootstrap字体Logo不能不荒谬显示的减轻格局
    • BootStrap glyphicon图标不能显示的缓慢解决措施
    • Bootstrap3 input输入框插入glyphiconLogo的艺术
    • bootstrap布局中input输入框右侧图标点击功效
    • BootStrap glyphicons 字体Logo完成格局
    • JS组件体系之Bootstrap IconLogo选择组件
    • 详解Bootstrap glyphicons字体Logo
    • bootstrap中增加额外的Logo实例代码

    1)使用背景图片的Logo尝试,结果失利

    支撑模糊寻觅Logo,举例大家搜索camera

    第三遍初步化

       <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
     <link href="~/Content/Bootstrap-icon-picker-master/Bootstrap-icon-picker-master/css/icon-picker.css" rel="stylesheet" />
    
     <script src="~/Scripts/jquery-1.9.1.js"></script>
     <script src="~/Content/Bootstrap-icon-picker-master/Bootstrap-icon-picker-master/js/iconPicker.js"></script>
    

    适得其反,Logo背景图不能够平常显示。那是干吗吧?博主好奇心又来了,调查成分看看:

    www.68399.com 52

    www.68399.com 53

    www.68399.com 54

    www.68399.com 55

    2)动态初叶化(针对空的select标签)

    (1)普通用法

    同样,获取选中的值,能够直接行使jquery的val()就能够。

    辅助自定义每页展现的Logo个数

    下一场将"glyphicon-test13"归入到开首化source对应的数组的最后,看似马到成功。大家刷新下分界面看看

    三、比较

    二、jQuery fontIconPicker组件

    www.68399.com 56

    累计也就一百多行代码,要看懂也一面还是。我们重要来探视下边红线匡里面包车型大巴变量icons,观望发掘这一个数组里面寄存的便是大家具有Logo的聚众。再来看看生成的html源码。

    此组件基于bootstrap和jquery,须求引用的文书如下

    jquery fonticonpicker是博主是找jquery插件的时候无意中发觉的,不开掘不要紧,稳重研商后开掘那组件真心不错,越发是分界面效果很棒。并且开源,文书档案全,功用丰富。

    www.68399.com 57

    2)如若是动态设置Logo,这里只供给放叁个空的select就可以

    2)假诺是动态设置Logo,这里只须要放七个空的select就能够

    (2)自定义Logo

    <script src="~/Scripts/jquery-1.9.1.js"></script> <script src="~/Content/fontIconPicker-2.0.0/jquery.fonticonpicker.js">
    
    </script> <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/css/jquery.fonticonpicker.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/themes/grey-theme/jquery.fonticonpicker.grey.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/themes/dark-grey-theme/jquery.fonticonpicker.darkgrey.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/themes/inverted-theme/jquery.fonticonpicker.inverted.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/fontIconPicker-2.0.0/demo/fontello-7275ca86/css/fontello.css" rel="stylesheet" />
    

    2、组件代码示例
    (1)普通用法
    此组件基于bootstrap和jquery,需求引用的文件如下

    $(function () { //jquery icon初始化 $('#myselect').fontIconPicker(); // Load with default options });
    

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:【www.68399.com】很准确的四款Bootstrap IconLogo选取组

    关键词: 68399皇家赌场

上一篇:js达成轻松的联合浮动菜单功用

下一篇:没有了