<!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. 自己实现的sax XML解析，可能会有误

    package com.agatha.bean; public class OrderInfoBean { private String order_id; private String room_t ...

  2. 11、手把手教你Extjs5（十一）模块界面的总体设计

    上一节中设计了一些模块自定义中用到的要素,为了直观起见,这一节先建立一个模块的主界面.看过我 模块管理常规功能自定义系统的设计与实现 博客的人应该会有所了解了.一个模块的主界面是一个Grid,在其上方 ...

  3. Eclipse PHP 代码无法自动提示函数

    在 linux 系统的 workwpace 里按 ctrl+h,显示出隐藏的文件,找到 .metadata 文件夹,然后将该文件夹删除,再重启 Eclipse 即可.其实它会将之前 Eclipse 连 ...

  4. html页面头部里的meta

    作者:zccst html中的http-equiv属性应用详解 一.简介 http-equiv 属性 -- HTTP协议的响应头报文 此属性出现在meta标签中 此属性用于代替name,HTTP服务器 ...

  5. iOS tableViewCell plane格式下,接近section边缘不显示分割线却被复用解决办法

    今天做公司产品的时候遇到了如题问题,困扰我很长时间,用尽各种办法不能解决,究其原因不知为何,自定义cell低端有view划线的时候,划线一般的显示1像素,而贴着section的显示很少 顶多0.3像素 ...

  6. SQL Server 2012 - 数据表的操作

     unicode:双字节编码      variable:可变的    character:字符 T-SQL:  Transact Structured Query Language unique:唯 ...

  7. 【转】23种设计模式UML图

    原文:http://blog.csdn.net/bwwlpnn/article/details/7421628

  8. IOS开发中如何使用通知NSNotification传值

    通知 是在跳转控制器之间常用的传值代理方式,除了代理模式,通知更方便.便捷,一个简单的Demo实现通知的跳转传值. 输入所要发送的信息 ,同时将label的值通过button方法调用传递, - (IB ...

  9. UOJ #192 【UR #14】 最强跳蚤

    题目链接:最强跳蚤 这道题本来不想写博客的--但是鉴于自己犯了低级错误,还是写篇博客记载一下. 一开始我的想法和题解里面的算法而比较类似,也是先分解质因数,然后用质因子是否出现偶数次来判断当前这个数是 ...

  10. JAVA-Unit01： 数据库原理 、 SQL（DDL、DML）

    Unit01: 数据库原理 . SQL(DDL.DML) SQL语句是不区分大小写的,但是行业里习惯将关键字与分关键字用大小写岔开以提高可读性. SELECT SYSDATE FROM dual DD ...