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. java自动拆装箱（转载）

    转载自:http://www.cnblogs.com/dolphin0520/p/3780005.html 注意:Integer的缓存机制.

  2. oracle数据库默认是10次尝试失败后锁住用户

    一般数据库默认是10次尝试失败后锁住用户 1.查看FAILED_LOGIN_ATTEMPTS的值select * from dba_profiles: 2.修改为无限次(为安全起见,不建议使用)alt ...

  3. es6学习笔记--模板字符串

    这几天简单看了一下深入浅出es6这本书,感觉特实用,学习了一个新特性---模板字符串在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串,在es6出来之前,我们都通常 ...

  4. 《HelloGitHub月刊》第 10 期

    前言 这一年感谢大家的支持,小弟这里给大家拜年了! <HelloGitHub月刊>会一直做下去,欢迎大家加入进来提供更多的好的项目. 最后,祝愿大家:鸡年大吉- <HelloGitH ...

  5. Springboot 拦截器的背后

    今天写了个拦截器对一些mapping做了些处理,写完之后突然很想看看拦截器是怎么加进spring里面.对着源码debug了一遍.又有了新的收获. 1.拦截器的实现 1.实现HandlerInterce ...

  6. Connection open error . Connection Timeout Expired. The timeout period elapsed during the post-login phase.

    是这样的,最近我在开发Api(重构),用的数据库是Sqlserver,使用的Orm是 SqlSugar(别问我为什么选这个,boss选的同时我也想支持国人写的东西,且文档也很全). 被催的是,写好了程 ...

  7. [工具向]__androidstudio签名打包apk及配置自动签名

    前言 好几天了,没怎么更新了,最近迷上了抓妖,有些懈怠了,这两天在看android的一些东西,java暂时就先放了放,昨天终于是完成了一个小阶段的任务,今天来对这两天的东西进行一下总结. *** 因为 ...

  8. 【SpringCloud】Zuul在何种情况下使用Hystrix

    首先,引入spring-cloud-starter-zuul之后会间接引入: hystrix依赖已经引入,那么何种情况下使用hystrix呢? 在Zuul的自动配置类ZuulServerAutoCon ...

  9. 使用MaxCompute Java SDK 执行任务卡住了，怎么办？

    场景一 用户AA: “亲,用 MaxCompute Java SDK 跑作业,为什么卡住不动了?”me: “有 Logview 吗?发来看下”A: “没有,我用的是SDK,没Logview” 场景二 ...

  10. 第6章 演示服务器和测试 - Identity Server 4 中文文档(v1.0.0)

    您可以使用您喜欢的客户端库尝试IdentityServer4.我们在demo.identityserver.io上有一个测试实例.在主页面上,您可以找到有关如何配置客户端以及如何调用API的说明. 此 ...