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 相关文章推荐
JavaScript中null与undefined分析
Jul 25 Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
详解如何构建Angular项目目录结构
Jul 13 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
layui实现下拉框三级联动
Jul 26 Javascript
vue中实现高德定位功能
Dec 03 Javascript
微信小程序实现日历小功能
Nov 18 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
python3之微信文章爬虫实例讲解
2017/07/12 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
Pytorch之Variable的用法
2019/12/31 Python
Python如何使用字符打印照片
2020/01/03 Python
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
财务会计专业推荐信
2013/11/30 职场文书
怎么写自荐书范文
2014/02/12 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
幼儿园标语大全
2014/06/19 职场文书
员工福利申请报告
2015/05/15 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL