Bootstrap下拉菜单样式


Posted in Javascript onFebruary 07, 2017

本文实例为大家分享了Bootstrap下拉菜单的具体代码,供大家参考,具体内容如下

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap</title>
  <link rel="stylesheet" href="css/bootstrap.css" />
</head>
<!--第1步:添加一个dropdown父级;
第2步:给button添加一个data-toggle="dropdown"属性;
第3步:给ul添加一个class="dropdown-menu”.
 最好再给button添加一个dropdown-toggle的class属性
-->
<body>
  <div class="container" style="margin-top:5px">
    <div class="row">
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">学院课程 <span class="caret"></span></button><!--btn-default默认颜色-->
        <ul class="dropdown-menu">
          <li><a href="#">html</a></li>
          <li><a href="#">css</a></li>
          <li><a href="#">javascript</a></li>
          <li><a href="#">less</a></li>
          <li><a href="#">bootstrap</a></li>
        </ul>  
      </div>

    </div>
  </div>
  <script src="js/jquery-2.1.0.js"></script>
  <script src="js/bootstrap.js"></script>
</body>
</html>

效果图:

Bootstrap下拉菜单样式

Bootstrap下拉菜单的样式:

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Bootstrap</title>
 <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
</head>
<body>
 <div class="container" style="margin-top:5px">
 <div class="row">
  <div class="col-lg-4">
  <div class="dropdown"> <!--在dropdown后面加上open使下拉列表默认展开;而pull-right使其右浮动并右对齐,改为dropup使箭头朝上并向上展开-->
   <button class="btn btn-default dropdown-toggle btn-block" data-toggle="dropdown">学院课程 <span class="caret"></span></button><!--btn-block使按钮撑满整个父级-->
   <ul class="dropdown-menu">
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >html</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >css</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >javascript</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >less</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >bootstrap</a></li>
   </ul> 
  </div>
  </div>
  <div class="col-lg-4">
  <div class="dropdown">
   <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">学院课程 <span class="caret"></span></button>
   <ul class="dropdown-menu">
   <li class="dropdown-header"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >前端</a></li><!--dropdown-header是菜单里的标题,给li添加-->
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >html</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >css</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >javascript</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >less</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >bootstrap</a></li>
   <li class="divider"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >html</a></li><!--divider是分隔线,给li添加-->
   <li class="dropdown-header text-center"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >后端</a></li><!--text-center让内容居中-->
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >php</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >java</a></li>
   <li class="disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >.net</a></li><!--disabled使菜单不可选-->
   </ul> 
  </div>
  </div>
 </div>
 </div>
 <script src="js/jquery-2.1.0.js"></script>
 <script src="js/bootstrap.js"></script>
</body>
</html>

效果图:

Bootstrap下拉菜单样式

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
javascript递归回溯法解八皇后问题
Apr 22 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
基于JavaScript实现购物车功能
Feb 07 #Javascript
js实现类bootstrap模态框动画
Feb 07 #Javascript
canvas实现探照灯效果
Feb 07 #Javascript
javascript数据类型详解
Feb 07 #Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 #Javascript
vuejs指令详解
Feb 07 #Javascript
fullCalendar中文API官方文档
Feb 07 #Javascript
You might like
计算php页面运行时间的函数介绍
2013/07/01 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
php计算整个目录大小的方法
2015/06/01 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
python搜索指定目录的方法
2015/04/29 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
python环境下安装opencv库的方法
2020/03/05 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
HTML5未来发展趋势
2016/02/01 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
简短大学毕业感言
2014/01/18 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
综合管理员岗位职责
2015/02/11 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
工程部岗位职责范本
2015/04/11 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python