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 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
js prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
JQuery 选择器、过滤器介绍
Feb 14 Javascript
js复制到剪切板的实例方法
Jun 28 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
微信小程序实现人脸识别
May 25 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 Javascript
JavaScript实现电灯开关小案例
Mar 30 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之第七天
2006/10/09 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
jquery 实现的全选和反选
2009/04/15 Javascript
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
js实现扫雷源代码
2020/11/27 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
Python的math模块中的常用数学函数整理
2016/02/04 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
Python异常处理机制结构实例解析
2020/07/23 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
医学生自我鉴定范文
2013/11/08 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
安全生产承诺书范文
2014/05/22 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python
MySQL限制查询和数据排序介绍
2022/03/25 MySQL