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. linux的tomcat服务器上部署项目的方法

    在tomcat服务器上部署项目的前提,是我们已经准备好了tomcat服务器.在CentOs环境下部署JavaWeb环境,部署tomcat服务器在前面的文章中已经总结过了,可以参考以前文章. 一  to ...

  2. BBS论坛（九）

    9.1.权限和角色模型定义 (1)cms/models class CMSPermission(object): ALL_PERMISSION = 0b11111111 # 1.访问者的权限 VISI ...

  3. java代码之美（6）---guava之multimap

    guava之multimap 上一篇讲到Multiset它可以对存入相同元素做一个计数的功能,那multimap呢? 一.概述 1.基本介绍和案例说明 multimap和MultiSet的继承结果很相 ...

  4. Webpack+Vue如何导入Jquery和Jquery的第三方插件

    创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; expo ...

  5. A10映射方法

    #创建服务 slb server rs_10.90.6.95 10.90.6.95 port 5001 tcp slb server rs_10.90.6.96 10.90.6.96 port 500 ...

  6. Qt之自定义托盘

    说起Qt,真是个不错的ui库,不仅仅ui做的好,其他方面也不差,在平台扩展方面也是非常的强大.这篇文章我将会分析下qt的托盘,QSystemTrayIcon是qt的托盘类,托盘类的用途是什么我就不说了 ...

  7. Ocelot + Consul实践

    关于Consul(https://www.consul.io)是一个分布式,高可用,支持多数据中心的服务发现和配置共享的服务软件,由 HashiCorp 公司用 Go 语言开发, 基于 Mozilla ...

  8. Python爬虫入门教程 24-100 微医挂号网医生数据抓取

    1. 写在前面 今天要抓取的一个网站叫做微医网站,地址为 https://www.guahao.com ,我们将通过python3爬虫抓取这个网址,然后数据存储到CSV里面,为后面的一些分析类的教程做 ...

  9. C#版 - Leetcode 414. Third Maximum Number题解

    版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. C#版 - L ...

  10. 如何在SpringBoot中集成JWT(JSON Web Token)鉴权

    这篇博客主要是简单介绍了一下什么是JWT,以及如何在Spring Boot项目中使用JWT(JSON Web Token). 1.关于JWT 1.1 什么是JWT 老生常谈的开头,我们要用这样一种工具 ...