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,jquery闭包概念分析
Jun 19 Javascript
js返回上一页并刷新代码整理
Dec 21 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
javascript折半查找详解
Jan 26 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
js中async函数结合promise的小案例浅析
Apr 14 Javascript
vue实现顶部菜单栏
Nov 08 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获取301跳转URL简单实例
2013/12/16 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
Angular工具方法学习
2016/12/26 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
python人人网登录应用实例
2014/09/26 Python
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
C语言面试题
2013/05/19 面试题
销售高级职员求职信
2013/10/29 职场文书
平面设计师工作职责范文
2013/12/03 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
停车位租赁协议书
2014/09/24 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
捐助感谢信
2015/01/22 职场文书
领导离职感言
2015/08/03 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript