Bootstrap下拉菜单Dropdowns的实现代码


Posted in Javascript onMarch 17, 2017

本文实例为大家分享了Bootstrap下拉菜单的具体代码,供大家参考,具体内容如下

<!DOCTYPE html> 
<html> 
 <head> 
  <title>Bootstrap-下拉菜单标题</title> 
   <meta charset="utf-8"> 
  <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" > 
  <style> 
   body {  
    padding-top: 150px;  
    padding-bottom: 40px;  
    font-family: '宋体';  
   } 
  </style> 
 </head> 
 
 <body> 
  <div class="container"> 
  <div class="dropdown"> 
   <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" 
   style="font-size:36px;: blue; width:100;height: 50; "> 
    常用语种 <span class="caret"> </span> 
   </button> 
   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
    <li role="presentation" class="dropdown-header"> 
     下拉菜单标题 
    </li> 
    <li role="presentation" > 
     <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" >中文</a> 
    </li> 
    <li role="presentation" class="dropdown-header"> 
     下拉菜单标题 
    </li> 
    <li role="presentation"> 
     <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" >英文</a> 
    </li> 
   </ul> 
  </div> 
  </div> 
  <script src="js/jquery.min.js"></script> 
  <script src="js/bootstrap.min.js"></script> 
 </body> 
</html>

 效果图:

Bootstrap下拉菜单Dropdowns的实现代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
html数组字符串拼接的最快方法
Sep 16 Javascript
jquery 框架使用教程 AJAX篇
Oct 11 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
javascript实现的简单计时器
Jul 19 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
Node.js使用Angular简单示例
May 11 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 #Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 #Javascript
详解Vue.js入门环境搭建
Mar 17 #Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 #Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 #Javascript
基于bootstrap实现收缩导航条
Mar 17 #Javascript
javascript基本数据类型和转换
Mar 17 #Javascript
You might like
php print EOF实现方法
2009/05/21 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
python迭代dict的key和value的方法
2018/07/06 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
联想德国官网:Lenovo Germany
2018/07/04 全球购物
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
教学大赛获奖感言
2014/01/15 职场文书
专家推荐信模板
2014/05/09 职场文书
新法人代表任命书
2014/06/06 职场文书
民族精神月活动总结
2014/08/28 职场文书
四风问题对照检查材料
2014/09/22 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
2015年高中语文教学总结
2015/08/18 职场文书