bootstrap栅格系统和下拉菜单插件bootstrap-selected 的简单应用

 

https://v3.bootcss.com/css/#grid-example-basic

实例：从堆叠到水平排列

使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

因为这是一个基于bootstrap的插件 所以需要引入如下文件：

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-select.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.js"></script>

html代码

<div class="col-sm-6 col-sm-offset-3" style="margin-top: 200px;">
    <div class="row">
        <label class="col-sm-3 control-label" style="line-height: 34px;margin-bottom: 20px;">选择用户：</label>
        <div class="col-sm-6">
            <select id="select" name="select" class="selectpicker show-tick form-control" multiple data-live-search="true" data-actions-box="true">
            　　<option value="苹果">苹果</option>
            　　<option value="菠萝">菠萝</option>
            　　<option value="香蕉">香蕉</option>
            　　<option value="火龙果">火龙果</option>
            　　<option value="梨子">梨子</option>
            　　<option value="草莓">草莓</option>    
            　　<option value="哈密瓜">哈密瓜</option>
            　　<option value="椰子">椰子</option>
            　　<option value="猕猴桃">猕猴桃</option>
            　　<option value="桃子">桃子</option>
            </select>
        </div>
    </div>
</div>                   

 

js代码：

$(window).on('load', function () {
     $('.selectpicker').selectpicker();
        
});