15 Star 102 Fork 36

笔下光年 / Light Year Example

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
test_bootstrap_select_v4.html 18.09 KB
一键复制 编辑 Web IDE 原始数据 按行查看 历史
笔下光年 提交于 2022-01-05 02:53 . 调整css
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>下拉选择框插件bootstrap-select - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V4是一个基于Bootstrap v4.4.1的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="http://lyear.itshubao.com/iframe/v4/css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="js/bootstrap-select-1.13.18/bootstrap-select.min.css" rel="stylesheet">
<link href="http://lyear.itshubao.com/iframe/v4/css/style.min.css" rel="stylesheet">
<style>
.bootstrap-select.show .dropdown-toggle {
border-color: #33cabb!important;
box-shadow: 0 0 0 0.2rem rgba(51, 202, 187, 0.25);
}
.bootstrap-select.show .dropdown-menu.open {
border: 1px solid #ebebeb;
}
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select>select.mobile-device:focus+.dropdown-toogle {
outline: 0!important;
outline-offset: 0!important;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header"><div class="card-title">下拉选择框插件 bootstrap-select</div></div>
<div class="card-body">
<p>最早的版本是1.6.2,不支持bootstrap 4,这里采用最新的稳定版本1.13.18。</p>
<div class="row">
<div class="col-md-6">
<p>默认</p>
<div class="form-group">
<label for="example-1"><strong>你是一名</strong></label>
<select class="form-control selectpicker" name="example-1" id="example-1">
<option value="1" selected>码奴</option>
<option value="2">码农</option>
<option value="3">码匠</option>
<option value="4">码神</option>
</select>
</div>
<p>选择带有optgroups的框</p>
<div class="form-group">
<label for="example-2"><strong>野外宿营要带</strong></label>
<select class="form-control selectpicker" name="example-2" id="example-2">
<optgroup label="食物">
<option>零食</option>
<option>面包</option>
<option>调料</option>
</optgroup>
<optgroup label="物品">
<option>帐篷</option>
<option>手电筒</option>
<option>卫生纸</option>
</optgroup>
</select>
</div>
<p>多选</p>
<div class="form-group">
<label for="example-3"><strong>中国足球为什么不行</strong></label>
<select class="form-control selectpicker" name="example-3" id="example-3" multiple>
<option>教练不行</option>
<option>态度不行</option>
<option>球员不行</option>
<option>哪都不行</option>
</select>
</div>
<p>实时搜索</p>
<div class="form-group">
<label for="example-4"><strong>杰伦的巅峰专辑是</strong></label>
<select class="form-control selectpicker" data-live-search="true" name="example-4" id="example-4">
<option>范特西</option>
<option>八度空间</option>
<option>叶惠美</option>
<option>七里香</option>
<option data-tokens="夜曲">十一月的肖邦</option><!--option上可使用data-tokens用来提高可搜索性-->
<option>依然范特西</option>
<option>我很忙</option>
</select>
</div>
<p>限制选择的数量</p>
<div class="form-group">
<label for="example-5"><strong>你最想去的城市是</strong></label>
<select class="form-control selectpicker" multiple data-max-options="2" name="example-5" id="example-5">
<option>重庆</option>
<option>北京</option>
<option>杭州</option>
<option>厦门</option>
<option>上海</option>
<option>大理</option>
</select>
</div>
<p>设置单个选项的样式</p>
<div class="form-group">
<label for="example-11"><strong>介绍下自己吧</strong></label>
<select class="form-control selectpicker" name="example-11" id="example-11">
<option>我是默认</option>
<option class="bg-danger">我是小红</option>
<option style="background: #5cb85c; color: #fff; padding-left: 8px">我是往右侧靠近小绿</option>
</select>
</div>
<p>自定义图标</p>
<div class="form-group">
<label for="example-12"><strong>添加 data-icon</strong> 4的版本需要写全图标class。例如:mdi mdi-motorbike</label>
<select class="form-control selectpicker" name="example-12" id="example-12">
<option data-icon="mdi mdi-motorbike m-r-5">摩托车</option>
<option data-icon="mdi mdi-silverware-variant m-r-5">刀和叉</option>
<option data-icon="mdi mdi-needle m-r-5">注射器</option>
</select>
</div>
<p>取消/选择所有选项</p>
<div class="form-group">
<label for="example-15"><strong>我全/不要</strong></label>
<select class="form-control selectpicker" multiple data-actions-box="true" name="example-15" id="example-15">
<option>李白</option>
<option>杜甫</option>
<option>杜牧</option>
</select>
</div>
<p>菜单标题</p>
<div class="form-group">
<label for="example-17"><strong>三国鼎立</strong></label>
<select class="form-control selectpicker" data-header="选择一位大将吧" name="example-17" id="example-17">
<option>典韦</option>
<option>许褚</option>
<option>赵云</option>
<option>关羽</option>
<option>黄忠</option>
<option>马超</option>
<option>张飞</option>
<option>太史慈</option>
<option>周泰</option>
</select>
</div>
</div>
<div class="col-md-6">
<p>自定义文字(占位符)</p>
<div class="form-group">
<label for="example-6"><strong>您最想要什么</strong></label>
<select class="form-control selectpicker" multiple title="小伙子选择一个吧..." name="example-6" id="example-6">
<option>吊打海内外的编程技术</option>
<option>迷倒万千少女的颜值</option>
<option>马云大大的财富</option>
</select>
</div>
<p>单个选项的替代文本</p>
<div class="form-group">
<label for="example-7"><strong>这赛季谁将带领球队夺冠</strong></label>
<select class="form-control selectpicker" name="example-7" id="example-7">
<option title="詹姆斯,戴维斯">湖人</option>
<option title="莱安纳德,保罗乔治,路威">快船</option>
<option title="约基奇,穆雷">掘金</option>
<option title="字母哥,米德尔顿">雄鹿</option>
<option title="沃克,塔图姆">凯尔特人</option>
<option title="巴特勒,莱恩">热火</option>
</select>
</div>
<p>选定后的文本格式</p>
<div class="form-group">
<label for="example-8"><strong>选择人员组一个球队吧</strong></label>
<!--select class="form-control selectpicker" multiple data-selected-text-format="count" name="example-8" id="example-8"-->
<select class="form-control selectpicker" multiple data-selected-text-format="count > 3" name="example-8" id="example-8">
<option>乔丹</option>
<option>艾弗森</option>
<option>约翰逊</option>
<option>奥尼尔</option>
<option>詹姆斯</option>
<option>库里</option>
<option>邓肯</option>
<option>拉塞尔</option>
<option>奥拉朱旺</option>
</select>
</div>
<p>自定义样式</p>
<div class="form-group">
<label for="example-9"><strong>最厉害的将领</strong></label>
<select class="form-control selectpicker" name="example-9" id="example-9" data-style="btn-primary">
<option>李牧</option>
<option>王翦</option>
<option>廉颇</option>
<option>白起</option>
<option>周亚夫</option>
<option>李广</option>
<option>霍去病</option>
<option>卫青</option>
<option>李靖</option>
<option>岳飞</option>
<option>戚继光</option>
</select>
</div>
<p>勾选所选选项</p>
<div class="form-group">
<label for="example-10"><strong>谁最厉害</strong></label>
<select class="form-control selectpicker show-tick">
<option>吕布</option>
<option>项羽</option>
<option>李元霸</option>
</select>
</div>
<p>自定义内容</p>
<div class="form-group">
<label for="example-13"><strong>四大名著</strong></label>
<select class="form-control selectpicker" name="example-13" id="example-13">
<option data-content="&lt;span class=&apos;label label-primary&apos;&gt;《三国演义》&lt;/span&gt;">《三国演义》</option>
<option data-content="&lt;span class=&apos;label label-success&apos;&gt;《红楼梦》&lt;/span&gt;">《红楼梦》</option>
<option data-content="&lt;span class=&apos;label label-info&apos;&gt;《水浒传》&lt;/span&gt;">《水浒传》</option>
<option data-content="&lt;span class=&apos;label label-danger&apos;&gt;《西游记》&lt;/span&gt;">《西游记》</option>
</select>
</div>
<p>添加子文本</p>
<div class="form-group">
<label for="example-14"><strong>古文典籍</strong></label>
<select class="form-control selectpicker" name="example-14" id="example-14">
<option data-subtext="司马光">《资治通鉴》</option>
<option data-subtext="司马迁">《史记》</option>
<option data-subtext="解缙、姚广孝">《永乐大典》</option>
</select>
</div>
<p>分割线</p>
<div class="form-group">
<label for="example-16"><strong>中国三大球</strong></label>
<select class="form-control selectpicker" name="example-16" id="example-16">
<option>中国女排</option>
<option>中国女篮</option>
<option>中国女足</option>
<option data-divider="true"></option>
<option>中国男篮</option>
<option>中国男排</option>
<option>中国男足</option>
</select>
</div>
<p>禁用菜单</p>
<div class="form-group">
<label for="example-16"><strong>别人家的工作</strong></label>
<select class="form-control selectpicker" name="example-18" id="example-18" disabled>
<option>钱多</option>
<option>活少</option>
<option>假多</option>
</select>
</div>
<p>禁用选项</p>
<div class="form-group">
<select class="form-control selectpicker">
<option>汉朝</option>
<option disabled>唐朝</option>
<option>元朝</option>
</select>
</div>
<div class="form-group">
<select class="form-control selectpicker">
<optgroup label="篮球" disabled>
<option>乔丹</option>
<option>科比</option>
<option>詹姆斯</option>
</optgroup>
<optgroup label="足球">
<option>贝利</option>
<option>C罗</option>
<option>梅西</option>
</optgroup>
</select>
</div>
</div>
</div>
<p>布局宽度</p>
<div class="row">
<div class="col-3">
<div class="form-group">
<select class="form-control selectpicker">
<option>及时雨宋江</option>
<option>玉麒麟卢俊义</option>
<option>智多星吴用</option>
</select>
</div>
</div>
<div class="col-9">
<div class="form-group">
<select class="form-control selectpicker">
<option>入云龙公孙胜</option>
<option>大刀关胜</option>
<option>豹子头林冲</option>
</select>
</div>
</div>
<div class="col-4">
<div class="form-group">
<select class="form-control selectpicker">
<option>霹雳火秦明</option>
<option>双鞭呼延灼</option>
<option>小李广花荣</option>
</select>
</div>
</div>
<div class="col-8">
<div class="form-group">
<select class="form-control selectpicker">
<option>小旋风柴进</option>
<option>扑天雕李应</option>
<option>美髯公朱仝</option>
</select>
</div>
</div>
<div class="col-5">
<div class="form-group">
<select class="form-control selectpicker">
<option>花和尚鲁智深</option>
<option>行者武松</option>
<option>双枪将董平</option>
</select>
</div>
</div>
<div class="col-7">
<div class="form-group">
<select class="form-control selectpicker">
<option>没羽箭张清</option>
<option>青面兽杨志</option>
<option>急先锋索超</option>
</select>
</div>
</div>
</div>
<hr>
<p>使用 data-width 设置宽度</p>
<div class="form-group">
<p>添加 <code>data-width="auto"</code></p>
<select class="selectpicker" data-width="auto">
<option>神行太保戴宗</option>
<option>赤发鬼刘唐</option>
<option>黑旋风李逵</option>
<option>九纹龙史进</option>
</select>
</div>
<div class="form-group">
<p>添加 <code>data-width="fit"</code></p>
<select class="selectpicker" data-width="fit">
<option>没遮拦穆弘</option>
<option>插翅虎雷横</option>
<option>混江龙李俊</option>
<option>立地太岁阮小二</option>
</select>
</div>
<div class="form-group">
<p>添加 <code>data-width="200px"</code></p>
<select class="selectpicker" data-width="200px">
<option>船火儿张横</option>
<option>短命二郎阮小五</option>
<option>浪里白条张顺</option>
<option>活阎罗阮小七</option>
</select>
</div>
<div class="form-group">
<p>添加 <code>data-width="75%"</code></p>
<select class="selectpicker" data-width="75%">
<option>病关索杨雄</option>
<option>拼命三郎石秀</option>
<option>两头蛇解珍</option>
<option>双尾蝎解宝</option>
<option>浪子燕青</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/jquery.min.js"></script>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/popper.min.js"></script>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/bootstrap.min.js"></script>
<script src="js/bootstrap-select-1.13.18/bootstrap-select.min.js"></script>
<script src="js/bootstrap-select-1.13.18/i18n/defaults-zh_CN.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 默认
$('.selectpicker').selectpicker();
});
</script>
</body>
</html>
HTML
1
https://gitee.com/yinqi/Light-Year-Example.git
git@gitee.com:yinqi/Light-Year-Example.git
yinqi
Light-Year-Example
Light Year Example
master

搜索帮助

14c37bed 8189591 565d56ea 8189591