适合初学者的教程——Bootstrap下拉菜单(Dropdown)插件
- 格式：pdf
- 大小：434.86 KB
- 文档页数：5
文档推荐
-
Bootstrap实战教程页数:20
-
Bootstrap入门与布局教程页数:36
-
《BootStrap开发技术》课程标准.doc页数:20
-
BootStrap入门教程页数:45
下载文档原格式
合集下载
基于Bootstrap下拉框插件bootstrap-select使用方法详解
基于Bootstrap下拉框插件bootstrap-select使⽤⽅法详解写在前⾯：在这次的项⽬中，没有再使⽤liger-ui做为前端框架了，改为了Bootstrap,这次也好接触下新的技术，在学习的过程中发现，Bootstrap的⼀些组件基本都是采⽤class的形式，就是给⼀个它定义好的样式，就会给你展现出⼀个好看的组件出来，这个⽐liger-ui的界⾯做的要好，但是了解了Boostrap的基本语法后，发现在官⽅的⽂档中，并没有⼀些可以动态加载组件的demo,因为之前⽤的liger-ui，⼤多数组件都只需要写⼀⾏代码，就能很好的，并且很⽅便的直接与后台进⾏交互，并动态加载数据。
但是bootstrap的⽂档中并没有这样的例⼦。
毕竟它就是做静态的，只需要给⼀个样式，那我动态加载数据怎么办？全部⾃⼰封装吗？后⾯查阅资料发现，有许多常⽤的组件插件是基于bootstrap来进⾏封装的，这就需要我们如果要使⽤什么组件，可以单独的再去下载它的插件。
这个时候，就可以做到很⽅便的像后台发送数据进⾏动态加载了。
这⾥就记录下，⼀些常⽤的bootstrap的组件插件吧，⾸先是下拉框。
基于Bootstrap的下拉框也有好⼏个，这⾥我选择了bootstrap-select.js.下⾯就简单的记录下它的⽤法吧，主要是动态的加载数据。
⾸先还是上代码，毕竟代码最直观。
前台jsp页⾯：<%@ page contentType="text/html;charset=UTF-8" language="java" %><%String scheme = request.getScheme();String serverName = request.getServerName();String contextPath = request.getContextPath();int port = request.getServerPort();//⽹站的访问跟路径String baseURL = scheme + "://" + serverName + ":" + port+ contextPath;request.setAttribute("baseURL", baseURL);System.out.println("baseURL:" + baseURL);%><html><head><meta name="viewport" content="width=device-width" /><title>bootstrap-select测试</title><%--导⼊bootstrap与select样式--%><link rel="stylesheet" type="text/css" href="${baseURL}/Bootstrap/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" /> <link href="${baseURL}/Bootstrap/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" /><%--先导⼊jqury插件--%><script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script><%--导⼊bootstrap插件--%><script src="${baseURL}/Bootstrap/bootstrap/assets/js/bootstrap.min.js"></script><%--下拉框插件--%><script src="${baseURL}/Bootstrap/bootstrap-select/js/bootstrap-select.js"></script></head><body><label style="font-weight:normal;background-color: #fac090;width: 80px;text-align: center" >Role</label><%--给⼀个class=“selectpicker” 改变下拉框的宽度⽤data-width --%><select id="sel_role" name="role" class="selectpicker" title="请选择" data-width="150px" style=""></select></body><script>$(function(){//初始化下拉框//动态加载$.ajax({type: 'get',url: '${baseURL}/listAllRole',dataType: "json",success: function (data) {//拼接下拉框for(var i=0;i<data.length;i++){$("#sel_role").append("<option value='"+data[i].roleId+"'>"+data[i].roleName+"</option>");}//这⼀步不要忘记不然下拉框没有数据$("#sel_role").selectpicker("refresh");}});});</script></html>⾸先要导⼊相关的样式以及js插件，由于bootstrap是基于jquery的，故要先导⼊jquery插件，然后bootstrap-select⼜是基于bootstrap的。
【Bootstrap】bootstrap-select2下拉菜单插件
【Bootstrap】bootstrap-select2下拉菜单插件 这次开发了个⼩TRS系统，虽然是很⼩，但是作为初⼼者，第⼀次⽤到了很多看起来洋⽓使⽤起来有相对简单的各种前端（主要是和bootstrap配合使⽤）组件。
包括bootstrap-select2，bootstrap-datetimepicker，bootstrap-fileinput等。
本⽂就旨在记录⼀些这些组件相关的内容【bootstrap-select2】 官⽅⽂档：【https:///options】 这个组件主要⽤于优化<select>等页⾯组件。
⽐如我们想要在下拉菜单的顶部加上⼀个搜索框⽀持我们对选项进⾏搜索，抑或是在多选下拉菜单中我们要有那种类似于tag形式的表现，⽤这个组件就很好了。
⾸先是这个组件需要在页⾯中进⾏引⼊的⽂件：<link href="{% static 'select2/dist/css/select2.min.css' %}" rel="stylesheet" /><script src="{% static 'select2/dist/js/select2.min.js' %}"></script><script src="{% static 'select2/dist/js/i18n/zh-CN.js' %}"></script> zh-CN.js是语⾔翻译⽂件，需要注意引⼊必须在select2.min.js后⾯，否则会报错。
这⼀点也适⽤于绝⼤多数⽀持国际化显⽰的组件。
当然因为是bootstrap的组件，⾃然是不能少bootstrap的js和css以及⽀持bootstrap的jquery了，这个就不写出来了。
Dropdown下拉菜单
Dropdown下拉菜单将动作或菜单折叠到下拉菜单中。
基础⽤法移动到下拉菜单上，展开更多操作。
通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown来设置下拉菜单。
默认情况下，下拉按钮只要hover即可，⽆需点击也会显⽰下拉菜单。
1<el-dropdown>2<span class="el-dropdown-link">3下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>4</span>5<el-dropdown-menu slot="dropdown">6<el-dropdown-item>黄⾦糕</el-dropdown-item>7<el-dropdown-item>狮⼦头</el-dropdown-item>8<el-dropdown-item>螺蛳粉</el-dropdown-item>9<el-dropdown-item disabled>双⽪奶</el-dropdown-item>10<el-dropdown-item divided>蚵仔煎</el-dropdown-item>11</el-dropdown-menu>12</el-dropdown>View Code触发对象可使⽤按钮触发下拉菜单。
设置split-button属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为true即可。
1<el-dropdown>2<el-button type="primary">3更多菜单<i class="el-icon-arrow-down el-icon--right"></i>4</el-button>5<el-dropdown-menu slot="dropdown">6<el-dropdown-item>黄⾦糕</el-dropdown-item>7<el-dropdown-item>狮⼦头</el-dropdown-item>8<el-dropdown-item>螺蛳粉</el-dropdown-item>9<el-dropdown-item>双⽪奶</el-dropdown-item>10<el-dropdown-item>蚵仔煎</el-dropdown-item>11</el-dropdown-menu>12</el-dropdown>13<el-dropdown split-button type="primary" @click="handleClick">14更多菜单15<el-dropdown-menu slot="dropdown">16<el-dropdown-item>黄⾦糕</el-dropdown-item>17<el-dropdown-item>狮⼦头</el-dropdown-item>18<el-dropdown-item>螺蛳粉</el-dropdown-item>19<el-dropdown-item>双⽪奶</el-dropdown-item>20<el-dropdown-item>蚵仔煎</el-dropdown-item>21</el-dropdown-menu>22</el-dropdown>2324<style>25 .el-dropdown {26 vertical-align: top;27 }28 .el-dropdown + .el-dropdown {29 margin-left: 15px;30 }31 .el-icon-arrow-down {32 font-size: 12px;33 }34</style>3536<script>37 export default {38 methods: {39 handleClick() {40 alert('button click');41 }42 }43 }44</script>触发⽅式可以配置 click 激活或者 hover 激活。
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
BootStrap点击下拉菜单项后显⽰⼀个新的输⼊框实现代码我的页⾯上有⼀个下拉菜单,页⾯上有⼀个⽂本输⼊框,⼀个图像上传框,⽂本输⼊框默认是显⽰的,⽽图⽚上传框是隐藏的.假设下拉菜单有两项A和B,我想实现这样的效果:点击A时显⽰⽂本输⼊框,隐藏图像输⼊框；点击B时显⽰图像上传框,隐藏⽂本输⼊框,请问怎么实现?⽤firebug调试的时候发现只有在加载html页⾯的时候⼏个click函数才会执⾏,页⾯加载好后点击下拉菜单项,这些断点都不会被执⾏,求解是怎么回事.我的js代码如下(定义在<head>部分中):<script type="text/javascript">//image_upload是图⽚上传框的id,最开始时把它隐藏$(document).ready( function(){$("#image_upload").hide();});//text_only是下拉菜单项,我想这个函数来实现点击这个菜单项时//显⽰⽂本输⼊框text_input,隐藏图⽚上传框image_upload$('#text_only').click(function(e){$("#text_input").show();$("#image_upload").hide();e.stopPropagation();});/*image_only是下拉菜单项,点击它时隐藏⽂本框,显⽰图⽚上传框*/$('image_only').click(function(){$("#text_input").hide();$("#image_upload").show();});</script>完整的代码如下,怕上⾯的信息还不够:<!DOCTYPE html><html lang="en"><head><title> hello,world</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--防⽌中⽂乱码 --><link href="css/bootstrap.css" rel="stylesheet" media="screen"><link href="css/bootstrap-fileupload.css" rel="stylesheet" media="screen"><script src="/jquery.js"></script><script src="js/bootstrap.min.js"></script><script src="js/bootstrap-fileupload.js"></script><style>.center {width : auto;display : table;margin-top:150px;margin-left: auto;margin-right: auto;}.text-center {margin-top:30px;display:table;margin-left:auto;margin-right:auto;}body{margin:0;background: url('img/955.jpg');background-size: 1440px 800px;background-repeat: no-repeat;display: compact;background-color: transparent;}padding: 14px 34px;}</style><script type="text/javascript">$(document).ready( function(){$("#image_upload").hide();});$('#text_only').click(function(e){$("#text_input").show();$("#image_upload").hide();e.stopPropagation();});$('image_only').click(function(){$("#text_input").hide();$("#image_upload").show();});$('supervised').click(function(){$("#text_input").show();$("#image_upload").show();});</script><script type="text/javascript"></script></head><body><h1>hello,world</h1><div class="container"><div class="navbar"><div class="navbar-inner"><ul class="nav"><li class="active"><a href="#">⾸页</a></li><li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >单模态 <b class="caret"> </b></a><ul class="dropdown-menu" ><li><a id="text_only" href="#">⽂本 </a> </li><li><a id="image_only" href="#">图像 </a> </li></ul></li><li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">多模态 <b class="caret"> </b></a><ul class="dropdown-menu" ><li><a id="supervised" href="#">有监督 </a> </li><li><a id="unsupervised" href="#">⽆监督 </a> </li></ul></li></ul></div></div><!-- end of navbar --><div class="center"><form class="form-vertical"><fieldset><input id="text_input" type="text" class="input-xxlarge search-query" placeholder="Text input"> </br><div id="image_upload" class="fileupload fileupload-new text-center" data-provides="fileupload"> <!-- <input type="hidden" value="" name=""> --><div class="input-append"><div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i><span class="fileupload-preview"></span></div><span class=" btn btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" /></span><a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a></div><button type="submit" class="btn text-center btn-large btn-success"> Search </button></br></fieldset></form></div></div></body></html>BootStrap点击下拉菜单项后显⽰⼀个新的输⼊框实现代码，希望对⼤家有所帮助！。
bootstrap selectpicker 方法
bootstrap selectpicker 方法（原创实用版4篇）目录（篇1）I.介绍Bootstrap选择器II.描述选择器的使用方法III.分析选择器的优点和缺点IV.总结正文（篇1）Bootstrap选择器是一种用于在网页上创建下拉菜单的工具。
它是由Bootstrap框架提供的一种插件，可以方便地实现下拉菜单的选择功能。
使用Bootstrap选择器非常简单。
只需要在HTML代码中添加相应的JavaScript代码，即可实现下拉菜单的选择功能。
例如，以下是一个简单的HTML代码示例：```htmlu003cselect class="form-control"data-toggle="selectpicker"u003eu003coption value=""u003e请选择u003c/optionu003eu003coption value="1"u003e选项1u003c/optionu003eu003coption value="2"u003e选项2u003c/optionu003eu003coption value="3"u003e选项3u003c/optionu003eu003c/selectu003e```在这个示例中，我们使用了class属性来指定选择器的类名，data-toggle属性指定了选择器的名称，以及options属性来定义下拉菜单的选项。
选择器的优点在于它可以快速地实现下拉菜单的选择功能，并且可以与Bootstrap框架的样式一起使用，使下拉菜单更加美观。
目录（篇2）一、Bootstrap与Selectpicker1.Bootstrap是一种流行的前端框架，提供了一系列的CSS样式和JavaScript插件，用于构建响应式的Web应用程序。
2.Selectpicker是Bootstrap的一个插件，用于在选择框中显示下拉列表，并提供了许多功能，如选择、搜索、标签和排序等。
bootstrap 使用方法
bootstrap 使用方法
Bootstrap是一种流行的前端开发框架，可以帮助开发者快速构建响应式和移动优先的网站。
以下是Bootstrap的使用方法：
1. 安装Bootstrap：可以通过下载压缩包或使用包管理器（如npm或yarn）来安装Bootstrap。
安装完成后，将Bootstrap的CSS和JavaScript文件
引入到HTML文件中。
2. 创建HTML骨架结构：先正常搭建一个HTML页面，然后根据需要选择Bootstrap提供的组件，将其复制到HTML页面中。
3. 引入相关样式文件：使用link标签引入Bootstrap的CSS文件。
也可以通过Sass工具对Bootstrap进行深度定制。
4. 书写内容：正常输入内容，如果发现内容没有了浏览器默认的内外边距，则证明CSS文件引入成功。
5. 利用Bootstrap组件：Bootstrap提供的组件不仅减少了开发工作量，
而且统一了设计风格。
例如，可以使用Navbar组件创建导航菜单，使用模态框创建对话框，使用Carousel组件添加动态轮播图等。
总之，使用Bootstrap可以快速构建出美观、响应式的网站，提高开发效率。
如需了解更多关于Bootstrap的使用方法，建议访问相关社区或论坛，或参考官方文档。
基于bootstrap实现下拉框搜索功能
基于bootstrap实现下拉框搜索功能由于项⽬中下拉项内容太多，所以需要⽤到搜索功能，因此⽤bootstrap的下拉可以完美实现<div class="field-group"> <select class="form-control" id="sel_pcType" data-live-search="true"> <option value="" >第⼀项</option> </select></div>⾸先我需要从后台取到下拉的内容添加到select中封装添加option的函数function addOptions(container,list,value,desc) { var selectObj = document.getElementById(container); if(selectObj){ var length = list.length; for ( var i = 0; i < length; i++) { var obj = list[i]; var op = new Option(obj[desc],obj[value]); selectObj.options.add(op); } }}获取后台数据后台1.后台2(传参数,function(datas){ if(datas && datas.length > 0){ addOptions("sel_pcType",datas,"ddValue","ddDesc"); 添加option以后 $('#sel_pcType').selectpicker(); }}就可以实现下拉和搜索了，这⾥主要是$('#sel_pcType').selectpicker()要在添加完option以后实现，并且配合data-live-search="true"属性来整体实现如果是前端写死的option 那么不⽤这么⿇烦只要class="selectpicker show-tick form-control" data-live-search="true" 属性直接写在select标签上就可以实现了，需要多选添加multiple属性即可。
JS组件Bootstrap按钮组与下拉按钮详解_
JS组件Bootstrap按钮组与下拉按钮详解_ 这篇文章主要为大家介绍了JS组件Bootstrap按钮组与下拉按钮的相关资料，感爱好的小伙伴们可以参考一下本文先为大家分享按钮组的用法方法，具体内容如下一、按钮组（Button Groups）1、单个按钮组用.btn-group封装多个带.btn的buttondiv class="btn-group"button class="btn"1/buttonbutton class="btn"2/buttonbutton class="btn"3/button/div2、多个按钮组将多个div class="btn-group"放进div class="btn-toolbar"中。
div class="btn-toolbar"div class="btn-group".../divdiv class="btn-group".../div/div3、垂直按钮组向.btn-group添加.btn-group-vertical。
div class="btn-group btn-group-vertical".../div二、下拉按钮（Button Dropdowns）例子div class="btn-group"a class="btn dropdown-toggle" data-toggle="dropdown" href="#"Actionspan class="caret"/span/aul class="dropdown-menu"!-- dropdown menu links --/ul/div1、掌握大小同样用法.btn-large、.btn-small、.btn-mini掌握大小。
bootstrap3三级下拉菜单
bootstrap3三级下拉菜单<!DOCTYPE HTML><html lang="zh-CN"><head><meta charset="UTF-8"><title>Bootstrap 3 的多级下拉菜单⽰例</title><script type="text/javascript" src="js/jquery-3.2.1.js"></script><link rel="stylesheet" href="css/bootstrap.min.css"/><script type="text/javascript" src="js/bootstrap.min.js"></script>//1. <script type="text/javascript" src="bootstrap-3.3.6/js/jquery.cyan1.js"></script><span style="color:#ff0000;">jquery库⽂件</span>2. <script type="text/javascript" src="bootstrap-3.3.6/js/<span style="color:#ff0000;">dropdown.js</span>"></script>3. <link rel="stylesheet" href="bootstrap-3.3.6/dist/css/bootstrap.min.css" />//<style type="text/css">.dropdown-submenu {position: relative;}.dropdown-submenu > .dropdown-menu {top: 0;left: 100%;margin-top: -6px;margin-left: -1px;-webkit-border-radius: 0 6px 6px 6px;-moz-border-radius: 0 6px 6px;border-radius: 0 6px 6px 6px;}.dropdown-submenu:hover > .dropdown-menu {display: block;}.dropdown-submenu > a:after {display: block;content: " ";float: right;width: 0;height: 0;border-color: transparent;border-style: solid;border-width: 5px 0 5px 5px;border-left-color: #ccc;margin-top: 5px;margin-right: -10px;}.dropdown-submenu:hover > a:after {border-left-color: #fff;}.dropdown-submenu.pull-left {float: none;}.dropdown-submenu.pull-left > .dropdown-menu {left: -100%;margin-left: 10px;-webkit-border-radius: 6px 0 6px 6px;-moz-border-radius: 6px 0 6px 6px;border-radius: 6px 0 6px 6px;}</style></head><body><div class="container"><div class="row"><div class="form-group"><input type="hidden" name="category_id" id="category_id" value="" /><div class="dropdown"><a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-white" data-target="#" href="javascript:;"><span id="select-title">选择分类</span> <span class="caret"></span></a><ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"><li><a href="javascript:;" data-index="1" data-title="⼀级菜单">⼀级菜单</a></li><li class="dropdown-submenu"><a href="javascript:;" data-index="2" data-title="⼀级菜单">⼀级菜单</a><ul class="dropdown-menu"><li><a data-index="2-1" href="javascript:;" data-title="⼆级菜单">⼆级菜单</a></li></ul></li><li class="dropdown-submenu"><a tabindex="3" href="javascript:;" data-title="⼀级菜单">⼀级菜单</a><ul class="dropdown-menu"><li><a tabindex="3-1" href="javascript:;" data-title="⼆级菜单">⼆级菜单</a></li><li class="divider"></li><li class="dropdown-submenu"><a href="javascript:;" data-index="3-2" data-title="⼆级菜单">⼆级菜单</a><ul class="dropdown-menu"><li><a href="javascript:;" data-index="3-2-1" data-title="三级菜单">三级菜单</a></li></ul></li></ul></li></ul></div></div></div></div></body></html><script type="text/javascript">$('.dropdown li a').click(function(){console.log(this);title = $(this).attr("data-title");id = $(this).attr("data-index");$("#select-title").text(title);$("#category_id").val(id);})</script>。
BootStrap学习（3）_导航菜单
BootStrap学习（3）_导航菜单⼀、导航元素1.表格导航或标签以⼀个带有 class .nav 的⽆序列表开始。
添加 class .nav-tabs。
<!DOCTYPE html><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><link href="/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/><script src="/libs/jquery/2.0.0/jquery.min.js"></script><script src="/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body style="margin-top:20px;margin-left:20px;"><p>标签式的导航菜单</p><ul class="nav nav-tabs"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">iOS</a></li><li><a href="#"></a></li><li><a href="#">Java</a></li><li><a href="#">PHP</a></li></ul></body></html>效果:2.胶囊式的导航菜单如果需要把标签改成胶囊的样式，只需要使⽤ class .nav-pills 代替 .nav-tabs 即可，其他的步骤与上⾯相同。