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 相关文章推荐
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
Immutable 在 JavaScript 中的应用
May 02 Javascript
javascript兼容性(实例讲解)
Aug 15 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
js+html制作简单验证码
2017/02/16 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
Python list运算操作代码实例解析
2020/01/20 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
Python socket服务常用操作代码实例
2020/06/22 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
自我鉴定书面格式
2014/01/13 职场文书
歌唱比赛主持词
2014/03/18 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
javascript Number 与 Math对象的介绍
2021/11/17 Javascript
Python实现信息管理系统
2022/06/05 Python