• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

longbow-select: bootstrap 类型 select 下拉框组件

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

longbow-select

开源软件地址:

https://gitee.com/LongbowEnterprise/longbow-select

开源软件介绍:

Bootstrap 风格下拉框

Bootstrap 风格页面中Select在不同的浏览器下呈现各有不同,但是相同的一点是非常的丑陋,由于表单录入、数据展示时下拉框经常与文本框一同使用,下拉框在form-control样式下与文本框宽度不一致,使用起来非常的别扭,本人利用文本框改造了一个下拉框样式使用起来非常方便与美观,与文本框一起使用非常完美。

在线演示

单页面演示:http://longbowenterprise.gitee.io/longbow-select/
项目内演示:http://argo.zylweb.cn/ (本项目为开源后台管理框架 [BootstrapAdmin])

快速开始

组件依赖 jQuery bootstrap font-awesome

CSS

<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><link href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css"><link href="./disk/longbow-select.css">

将引入样式表的 <link> 标签复制并粘贴到 <head> 中,并放在所有其他样式表之前。

JS

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script src="./disk/longbow-select.js"></script>

将引入脚本的 <script> 标签复制并粘贴到 <body> 最后面。

用法

添加网页Html元素

<select id="test" class="d-none">    <option value="1">北京</option>    <option value="2">上海</option>    <option value="3">深圳</option></select>

API

通过 javascript 初始化控件

<select id="test" class="d-none">    <option value="1">北京</option>    <option value="2">上海</option>    <option value="3">深圳</option></select><script>    $('#test').lgbSelect();</script>   

Options

可以根据自己需要设置占位符,边框颜色等

<select id="test" class="d-none">    <option value="1">北京</option>    <option value="2">上海</option>    <option value="3">深圳</option></select><script>    $('#test').lgbSelect({ borderClass: 'primary' });</script>   

项目截图

后台首页

Issue

请前往 Issue 页面添加问题

参与贡献

  1. Fork 本项目
  2. 新建 Feat_xxx 分支
  3. 提交代码
  4. 新建 Pull Request

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap