<!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. mysql 隔离级别与锁

    1.什么是事务 事务是一条或多条数据库操作语句的组合,具备ACID,4个特点. 原子性:要不全部成功,要不全部撤销 隔离性:事务之间相互独立,互不干扰 一致性:数据库正确地改变状态后,数据库的一致性约 ...

  2. mysql连接字符集default

    用mysql客户端工具输入中文数据报错,或乱码问题解决 数据库字符集为latin1时 用mysql工具,然后选择连接>l连接属性>高级>字符集选择default

  3. 1、Sencha cmd学习笔记(一) 使你的sencha cmd跑起来

    带着Ext JS 5来使用sencha cmd -------------------------------------------------------------------  这个指导通过处 ...

  4. Spring 工作原理

    1.spring原理 内部最核心的就是IOC了,动态注入,让一个对象的创建不用new了,可以自动的生产,这其实就是利用java里的反射,反射其实就是在运行时动态的去创建.调用对象,Spring就是在运 ...

  5. 菊花加载第三方--MBprogressHUD

    上次说到了网络请求AFN,那么我们在网络请求的时候,等待期间,为了让用户不认为是卡死或程序出错,一般都会放一个菊花加载,系统有一个菊花加载类叫UIProgressHUD.但是我今天要说的是一个替代它的 ...

  6. IOS开发－ObjC－对象、封装

    C语言是基于过程的一种编程语言,而OC语言是基于对象的一种语言. C是和其他的面向对象的语言的区别在于C语言更注重地层操作,思维方式相比面向对象的语言而言更接近机器的思维方式,而面向对象的语言更接近于 ...

  7. 饼干是这样压缩的——PHP使用zlib扩展实现页面GZIP压缩输出

    饼干是这样压缩的——PHP使用zlib扩展实现页面GZIP压缩输出 GZIP(GNU-ZIP)是一种压缩技术.经过GZIP压缩后页面大小可以变为原来的30%甚至更小.这样用户浏览的时候就会感觉很爽很愉 ...

  8. java web面试

    1. session和cookie的区别和联系,session的生命周期,多个服务部署时session管理. 原博http://blog.csdn.net/shuaishenkkk/article/d ...

  9. 【Xilinx-LVDS读写功能实现】-00-开始

    最近用到了一款LVDS接口的摄像头,640*480灰度图像,数据速率为600Mbps,位宽10bit,DDR双边沿采样. 实现数据的采集需要用到FPGA内的SERDES模块,现在已经仿真通过了,等到上 ...

  10. js原生之scrollTop、offsetHeight和offsetTop等属性用法详解

    scrollTop.offsetHeight和offsetTop等属性用法详解:标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼容 ...