python测试开发django-151.bootstrap-select下拉框

前言

bootstrap-select下拉框插件学习使用

下载与使用

bootstrap版本用的是v3.4.1
jquery版本3.2.1
bootstrap-select 版本用的是v1.12.4

bootstrap-select github开源地址：https://github.com/silviomoreto/bootstrap-select

通过CDN安装(cdnjs 或 jsDelivr):

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/i18n/defaults-*.min.js"></script>

也可以下载到本地引用，下载地址https://github.com/silviomoreto/bootstrap-select
注意顺序，先引用css.然后是jquery.js文件，再引用bootstrap.min.js,最后引用bootstrap-select.min.js

<head>
<link href="/static/bootstarp/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/static/bootstrap-select/dist1.12.4/css/bootstrap-select.min.css">
<script src="/static/bootstarp/jquery/jquery3.2.1.js"></script>
<script src="/static/bootstarp/js/bootstrap.min.js"></script>
<script src="/static/bootstrap-select/dist1.12.4/js/bootstrap-select.min.js"></script>
</head>

基础示例

select标签只需加class属性，设置class="selectpicker"

<div class="container">
<h1>select下拉框示例</h1>
<select class="selectpicker">
<option value="1">python</option>
<option value="2">selenium</option>
<option value="3">pytest</option>
<option value="4">appium</option>
<option value="5">cypress</option>
</select>
</div>

显示效果

多选框

多选框，在标签添加multiple

<select class="selectpicker" multiple>
<option value="1">python</option>
<option value="2">selenium</option>
<option value="3">pytest</option>
<option value="4">appium</option>
<option value="5">cypress</option>
</select>

显示效果

可通过data-max-options属性选择的选项数

<select class="selectpicker" multiple data-max-options="2">
<option value="1">python</option>
<option value="2">selenium</option>
<option value="3">pytest</option>
<option value="4">appium</option>
<option value="5">cypress</option>
</select>

显示效果

选项分组 <select class="selectpicker" multiple data-max-options="2">
<optgroup label="python" data-max-options="1">
<option value="1">python</option>
<option value="3">pytest</option>
<option value="4">appium</option>
</optgroup>
<optgroup label="web" data-max-options="1">
<option value="2">selenium</option>
<option value="5">cypress</option>
</optgroup>
</select>

实时搜索

data-live-search =”true”属性来添加搜索输入

<select class="selectpicker" data-live-search ="true">
<option value="1">python</option>
<option value="2">selenium</option>
<option value="3">pytest</option>
<option value="4">appium</option>
<option value="5">cypress</option>
</select>

显示效果

在选项中添加关键字以提高其可搜索性data-tokens.

<select class="selectpicker" data-live-search ="true">
<option data-tokens="python" value="1">python</option>
<option data-tokens="web" value="2">selenium</option>
<option data-tokens="python" value="3">pytest</option>
<option data-tokens="app" value="4">appium</option>
<option data-tokens="web" value="5">cypress</option>
</select>

title设置输入框默认文字

select标签添加title属性，给输入框加一个默认文字

<select class="selectpicker" title="请选择">
<option value="1">python</option>
<option value="2">selenium</option>
<option value="3">pytest</option>
<option value="4">appium</option>
<option value="5">cypress</option>
</select>

显示效果

按钮颜色

通过data-style属性设置按钮类，颜色可以选以下几种

  • data-style=”btn-primary”

  • data-style=”btn-info”

  • data-style=”btn-success”

  • data-style=”btn-warning”

  • data-style=”btn-danger”

<select class="selectpicker" title="请选择" data-style="btn-primary">
......
</select>

勾选选择的选项

使用show-tick类在选项中加一个勾选标识

<select class="selectpicker show-tick" title="请选择">
......
</select>

宽度设置

select下拉框的宽度可以根据bootstrap网格父元素的宽度来定义
添加form-group和form-control属性定义form表单控件宽度

<div class="row">
<div class="col-md-6">
<div class="form-group">
<select class="selectpicker form-control" title="请选择">
<option value="1" title="python自动化">python</option>
<option value="2" title="web自动化">selenium</option>
<option value="3" title="pytest自动化">pytest</option>
<option value="4" title="app自动化">appium</option>
<option value="5" title="UI自动化">cypress</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<select class="selectpicker form-control" title="请选择">
<option value="1" title="python自动化">python</option>
<option value="2" title="web自动化">selenium</option>
<option value="3" title="pytest自动化">pytest</option>
<option value="4" title="app自动化">appium</option>
<option value="5" title="UI自动化">cypress</option>
</select>
</div>
</div>
</div>

实现效果

使用data-width属性设置select的宽度。将数据宽度设置为“自动”以自动将选择的宽度调整为最宽的选项。
'fit’会自动将select的宽度调整为当前所选选项的宽度。还可以指定精确值，例如300px或50％。

<select class="selectpicker" data-width="auto">
...
</select>
<select class="selectpicker" data-width="fit">
...
</select>
<select class="selectpicker" data-width="100px">
...
</select>
<select class="selectpicker" data-width="75%">
...
</select>

赞 (0)

相关推荐