Bootstrap -- 下拉菜单、输入框组、导航菜单

1. 下拉菜单

可以使用带有各种大小按钮的下拉菜单：.btn-lg、.btn-sm 或 .btn-xs。

实现下拉菜单：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

    <div class="dropdown">

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

        编程语言<span class="caret"></span>

        </button>

        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">

            <li role="presentation">

                <a role="menuitem" tabindex="-1" href="#">Java</a>

            </li>

            <li role="presentation">

                <a role="menuitem" tabindex="-1" href="#">C#</a>

            </li>

            <li role="presentation">

                <a role="menuitem" tabindex="-1" href="#">Python</a>

            </li>

        </ul>

    </div>

</body>

</html>

下拉菜单效果：

2. 输入框组: 使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。

使用输入框组：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

    <div class="input-group">

        <span class="input-group-addon">www.</span>

        <input type="text" class="form-control" placeholder="域名">

        <span class="input-group-addon">.com</span>

    </div>

</body>

</html>

输入框组样式：

3. 导航菜单

实现导航菜单：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

    <p>导航菜单</p>

    <ul class="nav nav-tabs">

      <li class="active"><a href="#">主页</a></li>

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

      <li><a href="#">Asp.Net</a></li>

      <li><a href="#">VB.Net</a></li>

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

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

    </ul>

</body>

</html>

导航菜单样式：

4. 带有下拉菜单的导航菜单

实现带有下拉菜单的导航菜单：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My Test bootstrap</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

    <p>导航菜单</p>

    <ul class="nav nav-tabs">

      <li class="active"><a href="#">主页</a></li>

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

      <li><a href="#">Asp.Net</a></li>

      <li class="dropdown">

          <a class="dropdown-toggle" data-toggle="dropdown" href="#">

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

          </a>

          <ul class="dropdown-menu">

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

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

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

          </ul>

      </li>

      <li><a href="#">VB.Net</a></li>

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

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

    </ul>

</body>

</html>

导航菜单样式：

Bootstrap -- 下拉菜单、输入框组、导航菜单的更多相关文章

  1. Bootstrap下拉菜单

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

  2. 第二百四十四节，Bootstrap下拉菜单和滚动监听插件

    Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...

  3. bootstrap 下拉菜单不显示的解决办法

    bootstrap 下拉菜单不显示,最后改成如下正常显示: <div class="btn-group open"> <ul class="dropdo ...

  4. Bootstrap下拉菜单的使用(附源码文件)--Bootstrap

    1.Bootstrap下拉菜单的使用,源代码如下:(如有不当之处,还望大佬们指出哈……) <!DOCTYPE html> <html lang="en"> ...

  5. bootstrap下拉菜单(Dropdowns)

    本章将重点讲解bootstrap下拉菜单(Dropdowns),下拉菜单是可切换的,是以列表格式显示链接的上下文菜单. <!DOCTYPE html><html><hea ...

  6. Web标准：八、下拉及多级弹出菜单

    Web标准:八.下拉及多级弹出菜单 知识点: 1.带下拉子菜单的导航菜单 2.绝对定位和浮动的区别和运用 3.CSS自适应宽度滑动门菜单   1)带下拉子菜单的导航菜单 带下拉子菜单的就是在一级导航下 ...

  7. Bootstrap<基础十五> 输入框组

    Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输 ...

  8. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  9. 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版

    上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 ,初始状态下只有一个输入框组,可以通过点击输入框组的右侧“+”(或自定义的文字)可以在原输入框组的下面 ...

随机推荐

  1. 微信小程序入门（五）

    24.MINA框架讲解 MINA框架架构 25.小程序运行机制 小程序在首次打开的时间会比较长,后续再打开启动会很快,那么小程序是如何启动的呢? 运行机制-启动 冷启动 热启动 热启动:假入用户已经打 ...

  2. 谷歌浏览器的各种插件网址Chrome插件（谷歌浏览器）-超级详细

    各种各样的插件,可以查找对自己有用的,自行下载安装 http://chromecj.com/

  3. 浅谈Web开发中的定时任务

    曾经做过Windows server下的定时任务的业务,最近又做了一些Linux下使用Crontab做的定时任务的业务,觉得有必要进行一次小结,于是有了如下这篇文章. Windows Server下 ...

  4. Nginx 优化静态文件访问

    简介 Web 开发中需要的静态文件有:CSS.JS.字体.图片,可以通过web框架进行访问,但是效率不是最优的. Nginx 对于处理静态文件的效率要远高于 Web 框架,因为可以使用 gzip 压缩 ...

  5. 从0打卡leetcode之day 5 ---两个排序数组的中位数

    前言 我靠,才坚持了四天,就差点不想坚持了.不行啊,我得把leetcode上的题给刷完,不然怕是不好进入bat的大门. 题目描述 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2 . ...

  6. Python多版本共存（生产环境）

    安装pyenv $ git clone git://github.com/yyuu/pyenv.git ~/.pyenv $ echo 'export PYENV_ROOT="$HOME/. ...

  7. 如何学习SpringCloud？（SpringCloud模板）

    前言 对于SpringCloud来说(下面简称SC),现在网上已经有很多教程写的非常详细,因为SC的组件特别多,虽然不是所有组件都需要用到,但是学习的时候我们都需要去学习和了解.所以我想如果再写把每一 ...

  8. [开源]快速构建一个WebApi项目

    项目代码:MasterChief.DotNet.ProjectTemplate.WebApi 示例代码:https://github.com/YanZhiwei/MasterChief.Project ...

  9. 网络编程第六讲Select模型

    网络模型第六讲Select模型 一丶Select模型是什么 以前我们讲过一个迭代模型.就是只服务一个客户端连接.但是实际网络编程中.复杂的很多. 比如一个 C/S架构程序 (客户端/服务端) 客户端很 ...

  10. Django学习笔记（1）——初识Django

    一:Web框架介绍 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以快速帮你开发特定的系统. Web框架是别人已经设定好的一个web网站模板,你学习它 ...