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中的隐式类型转换
Dec 05 Javascript
jquery中post方法用法实例
Oct 21 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
angularjs请求数据的方法示例
Aug 06 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使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
JS继承 笔记
2011/07/13 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
十分钟教你上手ES2020新特性
2020/02/12 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
学校安全防火方案
2014/06/07 职场文书
旷工检讨书1000字
2015/01/01 职场文书
惊天动地观后感
2015/06/10 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
MySQL优化及索引解析
2022/03/17 MySQL