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 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
js阻止移动端页面滚动的两种方法
Jan 25 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
JS中style属性
2006/10/11 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
javascript 内存回收机制理解
2011/01/17 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
vue devtools的安装与使用教程
2018/08/08 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
python pygame实现2048游戏
2018/11/20 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
django基于restframework的CBV封装详解
2019/08/08 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
企业厂长岗位职责
2013/12/17 职场文书
建筑工程毕业生自我鉴定
2014/01/14 职场文书
网络程序员自荐信
2014/01/25 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
班级旅游计划书
2014/05/03 职场文书
法人委托书的范本格式
2014/09/11 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书