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. Hbase篇--HBase中一对多和多对多的表设计

    一.前述 今天分享一篇关于HBase的一对多和多对多的案例的分析. 二.具体案例 案例一.多对多    人员-角色   人员有多个角色  角色优先级   角色有多个人员   人员 删除添加角色   角 ...

  2. ActiveMq主从机制

    搭建mq主从时会在数据库创建3张关于mq的表: 下面介绍ACTIVEMQ_LOCK这张表的作用: Although the JDBC Store does not offer the best per ...

  3. Jquery.ajax dataType参数

    dataType 类型:String 预期服务器返回的数据类型.如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML.在 1.4 ...

  4. EF下lambda与linq查询&&扩展方法

    1. linq查询数据 WebTestDBEntities db = new WebTestDBEntities(); 1.1 linq查询所有列数据 var userInfoList = from ...

  5. Spring 中 SQL 的存储过程

    SimpleJdbcCall 类可以被用于调用一个包含 IN 和 OUT 参数的存储过程.你可以在处理任何一个 RDBMS 时使用这个方法,就像 Apache Derby, DB2, MySQL, M ...

  6. String str=null; 和String str=""的区别

    1.最大的区别在于String str=null没有分配内存,String str=""分配了内存 2.String str=null   这个引用指向了一个null ,没有地址没 ...

  7. Flow 常用知识点整理

    Flow入门初识 Flow是facebook出品的JavaScript静态类型检查工具. 由于JavaScript是动态类型语言,它的灵活性也会造成一些代码隐患,使用Flow可以在编译期尽早发现由类型 ...

  8. linux为什么不可以添加硬链接

    假设有个文件夹1 文件夹1里面还有个文件夹2 文件夹2里面还有个文件夹3 然后发现哎呀直接文件夹3放到文件夹1下就行了访问多方便. 也就是文件夹1下有文件夹2和文件夹3,然后问题就来了文件夹1下的文件 ...

  9. App阅读pdf和扫描二维码功能

    在之前开发的Android手机App中,需要实现阅读pdf和扫描二维码的功能,在github 上找到大牛封装好包,亲测可用. 阅读pdf: https://github.com/barteksc/An ...

  10. HTTP 常见的状态码