编程 Javascript

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的实现代码

- Author -

boonyaxnn

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery插件的写法分享

Jun 12 Javascript

javascript同页面多次调用弹出层具体实例代码

Aug 16 Javascript

JavaScript代码因逗号不规范导致IE不兼容的问题

Feb 25 Javascript

全面理解JavaScript中的继承(必看)

Jun 16 Javascript

基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)

Aug 29 Javascript

详解springmvc 接收json对象的两种方式

Dec 06 Javascript

Bootstrap基本插件学习笔记之Tooltip提示工具(18)

Dec 08 Javascript

解决layer弹出层msg的文字不显示的问题

Sep 11 Javascript

layui表格设计以及数据初始化详解

Oct 26 Javascript

深入理解Antd-Select组件的用法

Feb 25 Javascript

解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题

Jul 24 Javascript

利用vue3+ts实现管理后台（增删改查）

Oct 30 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入门速成(2)

2006/10/09 PHP

适用于php-5.2 的 php.ini 中文版[金步国翻译]

2011/04/17 PHP

一个漂亮的php验证码类(分享)

2013/08/06 PHP

php中简单的对称加密算法实现

2017/01/05 PHP

Yii2 批量插入、更新数据实例

2017/03/15 PHP

JavaScript中的变量声明早于赋值分析

2012/03/01 Javascript

javascript 兼容各个浏览器的事件

2015/02/04 Javascript

jQuery使用animate创建动画用法实例

2015/08/07 Javascript

详解javascript new的运行机制

2016/01/26 Javascript

深入理解JavaScript中的块级作用域、私有变量与模块模式

2016/10/31 Javascript

详解Angular2表单-模板驱动的表单(Template-Driven Forms)

2017/08/04 Javascript

浅谈Node.js 中间件模式

2018/06/12 Javascript

微信小程序自定义组件之可清除的input组件

2018/07/17 Javascript

基于Koa2写个脚手架模拟接口服务的方法

2018/11/27 Javascript

jQuery实现放大镜案例

2020/10/19 jQuery

vant中的toast轻提示实现代码

2020/11/04 Javascript

[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG

2018/04/01 DOTA

Python爬虫中urllib库的进阶学习

2018/01/05 Python

python 解压pkl文件的方法

2018/10/25 Python

Python装饰器语法糖

2019/01/02 Python

Python3 sys.argv[ ]用法详解

2019/10/24 Python

Python input函数使用实例解析

2019/11/22 Python

pytorch 移动端部署之helloworld的使用

2020/10/30 Python

iphoneX 适配客户端H5页面的方法教程

2017/12/08 HTML / CSS

UNOde50美国官网：西班牙珠宝品牌

2020/08/15 全球购物

新年主持词

2014/03/27 职场文书

建筑公司员工自我鉴定

2014/04/08 职场文书

2014年人事科工作总结

2014/11/19 职场文书

毕业设计论文评语

2014/12/31 职场文书

单位租车协议书

2015/01/29 职场文书

2015年电信员工工作总结

2015/05/26 职场文书

水知道答案观后感

2015/06/08 职场文书

2016教师政治学习心得体会

2016/01/23 职场文书

Django使用redis配置缓存的方法

2021/06/01 Redis

python如何利用cv2模块读取显示保存图片

2021/06/04 Python

MySQL表类型存储引擎的选择

2021/11/11 MySQL