<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <!-- 处理低版本IE 4.0不考虑IE8 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 移动端视口的设置 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入bootstrap.css -->

    <link rel="stylesheet" href="css/bootstrap.css">

    <script src="js/jquery-1.11.3.min.js"></script>

    <script src="js/bootstrap.js"></script>

    <style>

        #login{

            width:400px;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="dropdown">

        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">

        Dropdown

        <span class="caret"></span>

        </button>

        <ul class="dropdown-menu">

        <li><a href="#">Action</a></li>

        <li><a href="#">Another action</a></li>

        <li><a href="#">Something else here</a></li>

        <li><a href="#">Separated link</a></li>

        </ul>

    </div>

</div>

<br>

<br>

<div class="container">

    <ul class="nav nav-tabs">

        <li class="active"><a href="#">one</a></li>

        <li><a href="#">two</a></li>

        <li><a href="#">three</a></li>

    </ul>

    <br>

    <ul class="nav nav-tabs" style="width:400px;">

        <li class="active"><a href="#">one</a></li>

        <li><a href="#">two</a></li>

        <li><a href="#">three</a></li>

    </ul>

    <br>

    <ul class="nav nav-tabs nav-justified" style="width:400px;">

        <li class="active"><a href="#">one</a></li>

        <li><a href="#">two</a></li>

        <li><a href="#">three</a></li>

    </ul>

    <br>

    <ul class="nav nav-tabs nav-tabs-justified">

        <li class="active"><a href="#">one</a></li>

        <li><a href="#">two</a></li>

        <li><a href="#">three</a></li>

    </ul>

    <br>

    <ul class="nav nav-pills">

        <li class="active"><a href="#">one</a></li>

        <li><a href="#">two</a></li>

        <li><a href="#">three</a></li>

    </ul>

</div>

</body>

<script>

    /*

         下拉菜单

             属性

                 — data-*

                 — aria-*

                 — rolr

                 open                显示下拉菜单

                 dropdown-menu-right   下拉菜单右浮动

                 dropdown-header   下拉头部

                 divider  分割线

        标签页

            头部

                — nav

                — nav-tabs 不适合竖状展示

                — nav-justified 端点对齐

                — nav-tabs-justified

                — nav-pills 圆角

                — nav-stacked 竖状菜单

                — 带下拉菜单的头部

     */

</script>

bootstrap_下拉菜单+头部的更多相关文章

  1. Bootstrap_下拉菜单

    在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件. 一.普通下拉菜单 <div class="dropdown"&g ...

  2. lightinthebox头部分类菜单下拉导航，使鼠标移到See All Categories就显示下拉菜单

    lightinthebox头部分类菜单下拉导航,使鼠标移到See All Categories就显示下拉菜单 打开includes\templates\lightinthebox\common\tpl ...

  3. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  4. Bootstrap系列 -- 26. 下拉菜单标题

    Bootstrap下拉菜单中使用 dropdown-header 来显示菜单标题,和上一篇说道的分割线一样 <div class="dropdown"> <but ...

  5. 纯CSS实现带小角的对话框式下拉菜单

    最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang= ...

  6. Bootstrap下拉菜单

    前面的话 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...

  7. boostrapt的二级下拉菜单

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta conte ...

  8. jquery 实现下拉菜单

    Jquery 是一个轻量的框架,个人认为非常好用,今天就写一个非常简单的例子,实现下拉菜单功能: 首先肯定要在页面引用jquery.js  版本不限 : 接下来把=================== ...

  9. CSS 笔记——导航栏、下拉菜单、提示工具

    8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...

随机推荐

  1. transform和transition

    作者:zccst 例如:图片墙  .另外还有,便签墙 使用的样式: 1,正常情况下 ul#index_cards li {     background: url("../images/ca ...

  2. Linux ALSA声卡驱动之二：声卡的创建

    1. struct snd_card 1.1. snd_card是什么 snd_card可以说是整个ALSA音频驱动最顶层的一个结构,整个声卡的软件逻辑结构开始于该结构,几乎所有与声音相关的逻辑设备都 ...

  3. IP头，TCP头，UDP头，MAC帧头定义（转）

    源:IP头,TCP头,UDP头,MAC帧头定义 一.MAC帧头定义 /*数据帧定义,头14个字节,尾4个字节*/ typedef struct _MAC_FRAME_HEADER { ]; //目的m ...

  4. jQuery插件的开发

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

  5. ARM处理器简介

    参考: http://www.arm.com/zh/products/processors/instruction-set-architectures/index.php 1.ARM核演变图 2.AR ...

  6. Windows 7 Professional安装多语言包

    本文出自 "王春海的博客" 博客,请务必保留此出处http://wangchunhai.blog.51cto.com/225186/223635 下载了Windows 7 Prof ...

  7. 微信上传图片接口实现 JS

    //2.微信上传图片接口实现 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></scri ...

  8. 环信 之 iOS 客户端集成四：集成UI 之 会话列表

    1. 初始化 EaseConversationListViewController *chatListVC = [[EaseConversationListViewController alloc] ...

  9. jq动态添加的元素触发绑定事件无效

    <div class='a'> <div class='b'> </div> 其中$('.a')是html页面的元素,$('.b')是jq动态添加的元素.$(&qu ...

  10. PHP常用函数（收集）

    <?php //===============================时间日期=============================== //y返回年最后两位,Y年四位数,m月份数字 ...