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 相关文章推荐
extjs 为某个事件设置拦截器
Jan 15 Javascript
js中if语句的几种优化代码写法
Mar 12 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
JS实现520 表白简单代码
May 21 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
JsonProperty 的使用方法详解
Oct 11 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 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 addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
python递归查询菜单并转换成json实例
2017/03/27 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
如何定义TensorFlow输入节点
2020/01/23 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
自荐信范文
2013/12/10 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
行政部工作岗位职责范本
2014/03/05 职场文书
假面舞会策划方案
2014/05/29 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
博士生专家推荐信
2014/09/26 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python
Python pandas求方差和标准差的方法实例
2021/08/04 Python
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技