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之对系统的toFixed()方法的修正
May 08 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
vue iview多张图片大图预览、缩放翻转
Jul 13 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 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
服务器web工具 php环境下
2010/12/29 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
php实现数字补零的方法总结
2018/09/12 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
jQuery 操作XML入门
2008/12/25 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
使用npm安装最新版本nodejs
2018/01/18 NodeJs
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python 远程统计文件代码分享
2015/05/14 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
Python 可视化神器Plotly详解
2020/12/26 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
广州盈通面试题
2015/12/05 面试题
酒店前厅员工辞职信
2014/01/08 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
专家推荐信范文
2015/03/26 职场文书
Python基础之数据结构详解
2021/04/28 Python
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript