December 28, 2015

Bootstrap 3 下拉选框 select boxes

By Gideon Javascript /Jquery / React / Bootstrap / Web 0 Comments

1. Select 2

Browser compatibility

IE 8+
Chrome 8+
Firefox 10+
Safari 3+
Opera 10.6+

    $(document).ready(function() {
      $(".js-example-basic-single").select2();
    });
     
    <select class="js-example-basic-single">
      <option value="AL">Alabama</option>
        ...
      <option value="WY">Wyoming</option>
    </select>

下载：select2-master

更多实例参考：https://select2.github.io/examples.html

2. bootstrap-select

// To style only <select>s with the selectpicker class
$('.selectpicker').selectpicker();

//Or
// To style all <select>s
$('select').selectpicker();

<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

下载：bootstrap-select-master

本文：Bootstrap 3 下拉选框 select boxes

Bootstrap 字体图标 Bootstrap Glyphicon Components
基本用法： <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p> <p>Search icon: <span…
移动前端工作的那些事---前端制作篇之框架篇
为了更好的提升用户体验，移动端逐渐出了许多的移动端的框架，比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点，不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点：一、Sencha Touch框架是一个重量级的框架、它上手较难，代码复杂，并且需要较强的程序基础才能学习，最开始的时候因为一个项目，想使用Sencha Touch框架，后来工期实在太紧张，根本没时间学习它并使用。所以最后转投其他框架。这个框架兼容性很高，运行起来的速度一般，需要长时间的学习且需要水平较高的程序基础才行。所以不太适合前端制作人员的使用。我会在以后的机会单开一篇关于它的使用demo。二、JQTouch是一个轻量级框架、纯jquery写法，上手比较容易，代码容易理解，加载速度也很快，缺点是配合的移动端效果插件较少，需要很多外部的插件相结合，另外，个别插件还需要解决与框架之间的兼容问题。它的最大的一个弊端就是可利用和变通的布局较少。三、Jquery-moblie也是一个轻量级框架、纯jquery写法，上手容易，代码容易理解，但由于其绑定的前端效果插件过多，且代码结构有些臃肿，造成加载速度很慢。尤其是在android系统上测试，速度很慢。用户体验效果不太好，它比较适合开发IPAD或是IOS系统的高端机型。四、jqMobi也是一个轻量级框架、它的语言基于jquery语言。并对其进行了简化，更有利于在移动设备上进行应用，并且速度很流畅。上手也比较容…
bootstrap 3 下拉条选项 dropdown select
<div class="container"> <div class="form-group"> <label for="platform" class="control-label col-xs-2">Platform:</label> <div…

Just Code

Bootstrap 3 下拉选框 select boxes

1. Select 2

Browser compatibility

2. bootstrap-select

About Author

Gideon

Add a Comment

1. Select 2

Browser compatibility

2. bootstrap-select

Related Posts

Related Posts

About Author

Gideon

Add a Comment