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 相关文章推荐
表单JS弹出填写提示效果代码
Apr 16 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
vue自定义指令用法经典实例小结
Mar 16 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
PHP4实际应用经验篇(7)
2006/10/09 PHP
php Calender(日历)代码分享
2014/01/03 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python高阶爬虫实战分析
2018/07/29 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
Django接收自定义http header过程详解
2019/08/23 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
岗位职责的含义
2013/11/17 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
培训讲师岗位职责
2014/04/13 职场文书
环保倡议书500字
2014/05/15 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
MongoDB支持的索引类型
2022/04/11 MongoDB
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技