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 相关文章推荐
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 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下实现农历日历的代码
2007/03/07 PHP
坏狼php学习 计数器实例代码
2008/06/15 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
Python之os操作方法(详解)
2017/06/15 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
python实现推箱子游戏
2020/03/25 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
Python OpenCV实现视频分帧
2019/06/01 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
地方课程教学计划
2015/01/19 职场文书
北京颐和园导游词
2015/01/30 职场文书
刑事辩护词范文
2015/05/21 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记
Android Rxjava3 使用场景详解
2022/04/07 Java/Android
Java中的继承、多态以及封装
2022/04/11 Java/Android
分享几个实用的CSS代码块
2022/06/10 HTML / CSS