编程 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 Ajax之$.get()方法和$.post()方法

Oct 12 Javascript

DOM基础教程之使用DOM设置文本框

Jan 20 Javascript

Javascript核心读书有感之语句

Feb 11 Javascript

超漂亮的jQuery图片轮播特效

Nov 24 Javascript

深入浅析JavaScript中的constructor

Apr 19 Javascript

原生JS实现垂直手风琴效果

Feb 19 Javascript

Vue-cli 使用json server在本地模拟请求数据的示例代码

Nov 02 Javascript

vue源码解析之事件机制原理

Apr 21 Javascript

Vue 实现展开折叠效果的示例代码

Aug 27 Javascript

JS温故而知新之变量提升和时间死区

Jan 27 Javascript

开发中常用的25个JavaScript单行代码(小结)

Jun 28 Javascript

Angular.JS读取数据库数据调用完整实例

Jul 02 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判断表单复选框选中状态完整例子

2014/06/24 PHP

PHP中文乱码解决方案

2015/03/05 PHP

php redis实现对200w用户的即时推送

2017/03/04 PHP

JavaScript静态的动态

2006/09/18 Javascript

javascript 检测浏览器类型和版本的代码

2009/09/15 Javascript

基于Jquery与WebMethod投票功能实现代码

2011/01/19 Javascript

Prototype源码浅析 String部分(一)之有关indexOf优化

2012/01/15 Javascript

用javascript添加控件自定义属性解析

2013/11/25 Javascript

jQuery中常用动画效果函数(日常整理)

2016/09/17 Javascript

KnockoutJS 3.X API 第四章之数据控制流with绑定

2016/10/10 Javascript

浅谈EasyUI常用控件的禁用方法

2016/11/09 Javascript

Asp.Net之JS生成分页条的方法

2016/11/23 Javascript

如何学JavaScript？前辈的经验之谈

2016/12/28 Javascript

简单谈谈axios中的get,post方法

2017/06/25 Javascript

layui点击数据表格添加或删除一行的例子

2019/09/12 Javascript

如何在JavaScript中创建具有多个空格的字符串？

2020/02/23 Javascript

vue实现div单选多选功能

2020/07/16 Javascript

Python自动化开发学习之三级菜单制作

2017/07/14 Python

解决python3 urllib 链接中有中文的问题

2018/07/16 Python

深度辨析Python的eval()与exec()的方法

2019/03/26 Python

Python实现代码统计工具

2019/09/19 Python

Python实现图片识别加翻译功能

2019/12/26 Python

如何基于Python创建目录文件夹

2019/12/31 Python

Python PyPDF2模块安装使用解析

2020/01/19 Python

详解HTML5中的标签

2015/06/19 HTML / CSS

美国50岁以上单身人士约会平台：SilverSingles

2018/06/29 全球购物

《在大海中永生》教学反思

2014/02/24 职场文书

关于十八大的演讲稿

2014/09/15 职场文书

2014年客服工作总结范文

2014/11/13 职场文书

课堂打架检讨书200字

2014/11/21 职场文书

2014年检察院个人工作总结

2014/12/09 职场文书

介绍信格式

2015/01/30 职场文书

2015年党务公开工作总结

2015/05/19 职场文书

vue-cli4.5.x快速搭建项目

2021/05/30 Vue.js

mysql数据插入覆盖和时间戳的问题及解决

2022/03/25 MySQL

Python PIL按比例裁剪图片

2022/05/11 Python