发布于 2017-06-06 00:53:30 | 276 次阅读 | 评论: 1 | 来源: 网友投递
这里有新鲜出炉的Bootstrap v3教程,程序狗速度看过来!
Bootstrap Web前端CSS框架
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。
在学习bootstrap实现下拉多选效果的时候,觉得该效果很好,所以拿来分享下,这里就不详细的描述了,直接附上代码给各位看看
HTML代码:
<div class= "row" style ="margin-top :10px;">
<div class= "form-group col-xs-12">
<label for= "sceneModel_title" class="col-sm-1 col-sm-offset-1 control-label" >分类: </label>
<div class= "col-sm-4">
<select class= "form-control selectpicker" multiple>
<option> 请选择</option >
<option> 游记</option >
<option> 景点</option >
<option> 东京</option >
<option> 日本</option >
<option> 香港</option >
<option> 加拿大</option >
</select>
</div>
<label for= "scene_title" class="col-sm-1 control-label" >主题游: </label>
<div class= "col-sm-4">
<select class= "form-control selectpicker" multiple>
<option> 请选择</option >
<option> 游船</option >
<option> 漂流避暑</option >
<option> 博物馆</option >
<option> 影视基地</option >
<option> 名胜古迹</option >
<option> 海岛度假</option >
</select>
</div>
<!-- <div class="col-sm-10"> -->
<%-- <form:checkboxes path="sceneTypeRelations" items="${sceneTypeMap}" /> --%>
<!-- </div> -->
</div>
</div>
js代码:
define(function(require, exports, module) {
var $ = require( "jquery");
require( "jquery-validation/1.11.1/jquery.validate.min.js" );
require( "jquery-validation/1.11.1/messages_bs_zh.js" );
require( "bootstrap/select/bootstrap-select.min.css" )
require( "bootstrap/select/bootstrap-select.min.js" )
$(document).ready( function() {
// 聚焦第一个输入框
$( "input[name=name]").focus();
// 为inputForm注册validate函数
$( "#sceneModel").validate();
var lon = $("input[name=longitude]" ).val();
if (lon == "," ) {
$( "input[name=longitude]").val("" );
}
jQuery( '.selectpicker').selectpicker({
liveSearch: true,
size:8
});
});
module.exports = $;
});
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持phperz。