<!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. html背景图片拉伸至全屏

    本来想在body的css中设置,但发现怎么弄也无法搞定,技术水平有限吧,最后通过下面方式来达到效果: <img src = 'url' border = '0' width = '100%' h ...

  2. 用weka来做Logistic Regression

    1.首先下载安装weka http://www.cs.waikato.ac.nz/ml/weka/downloading.html 2.打开weka,选择第一项Explorer 3.准备数据集文件,在 ...

  3. iOS强制切换横屏、竖屏

    切换横竖屏最直接的方式是调用device的setOrientation方法.但是从sdk3.0以后,这个方法转为似有API,如果要上AppStore的话,要慎用! if ([[UIDevice cur ...

  4. 从字符串拼接看JS优化原则

    来自知乎的问题:JavaScript 怎样高效拼接字符串? 请把以下用于连接字符串的JavaScript代码修改为更高效的方式: var htmlString ='< div class=”co ...

  5. 前段验证框架 formValidator

    http://blog.csdn.net/lorinzhang/article/details/7283557

  6. PowerShell学习小结

    1. 获取所有别名信息Get-Alias 2. 获取指定别名信息Get-Alias xx 3. 通过command name获得指定别名信息Get-Alias -Definition xx-xxx 4 ...

  7. 反射机制（实例化Class）对象

    反,就是利用对象找到对象的出处 Object类中有一个方法,getClass() Date date = new Date(); System.out.println(date.getClass()) ...

  8. ZOJ 1108 & HDU 1160 - FatMouse's Speed

    题目大意:给你n只老鼠的体重w和速度s,让你找出最长的子序列使得w[i] < w[j] 且 s[i] > s[j] (i < j).求最长序列的长度并输出该序列. LIS(Longe ...

  9. Nodejs之发送邮件nodemailer

    nodejs邮件模块nodemailer的使用说明 1.介绍 nodemailer是node的一个发送邮件的组件,其功能相当强大,普通邮件,传送附件,邮件加密等等都能实现,而且操作也十分方便. nod ...

  10. windy数（bzoj 1227）

    Description windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道,在A和B之间,包括A和B,总共有多少个windy数? In ...