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 相关文章推荐
js获取系统的根路径实现介绍
Sep 08 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
IE浏览器中图片onload事件无效的解决方法
Apr 29 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
四十九个javascript小知识实用技巧
Nov 20 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 flush()与ob_flush()的区别详解
2013/06/03 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
PHP预定义变量9大超全局数组用法详解
2016/04/23 PHP
javascript Array对象基础知识小结
2010/11/16 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
Python生成随机密码的方法
2017/06/16 Python
Python使用OpenCV进行标定
2018/05/08 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
numpy基础教程之np.linalg
2019/02/12 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
python爬虫之遍历单个域名
2019/11/20 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
Python的in,is和id函数代码实例
2020/04/18 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
股权投资意向书
2014/04/01 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
大学生党课感想
2015/08/11 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle