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提高】---java反射机制

    java反射机制 一.概述 1.什么是反射机制 反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态 ...

  2. Kibana安全特性之权限控制

    1.  前言 在之前的例子中,我们都是直接输入地址访问的,系统也没有提示我们要输入用户名密码.但是,在实际使用过程中不大可能所有人都是超级管理员可以做任何操作,一定是有权限控制的,这里我们借助X-Pa ...

  3. 17-Flink消费Kafka写入Mysql

    戳更多文章: 1-Flink入门 2-本地环境搭建&构建第一个Flink应用 3-DataSet API 4-DataSteam API 5-集群部署 6-分布式缓存 7-重启策略 8-Fli ...

  4. ansible学习系列1-ansible简介

    1.ansible简介 官方说明:Ansible is an IT automation tool. It can configure systems, deploy software, and or ...

  5. [ Java面试题 ]并发篇

    1.Java内存模型是什么? Java内存模型规定和指引Java程序在不同的内存架构.CPU和操作系统间有确定性地行为.它在多线程的情况下尤其重要.Java内存模型对一个线程所做的变动能被其它线程可见 ...

  6. 【Node.js】通过mongoose得到模型，不能新添字段的问题

    问题描述 通过node.js为查询到的json对象添加新的字段,对象成功保存到数据库中,但新增字段却没保存. 前几天用vue+node.js+mongodb技术做一个购物车功能的网页,发现node.j ...

  7. 重复造轮子，编写一个轻量级的异步写日志的实用工具类（LogAsyncWriter）

    一说到写日志,大家可能推荐一堆的开源日志框架,如:Log4Net.NLog,这些日志框架确实也不错,比较强大也比较灵活,但也正因为又强大又灵活,导致我们使用他们时需要引用一些DLL,同时还要学习各种用 ...

  8. React-native搭建移动端ios开发环境实践笔记

    开发环境的搭建,按照 https://reactnative.cn/docs/getting-started/ 里面的步骤一步一步来,这里记录下需要注意的几点:1.初始化react-native项目的 ...

  9. __tostring()和__invoke()的用法

    PHP有很多内置的魔术方法,这里我们聊哈tostring和involk吧. __tostring()魔术方法 将一个对象当做一个字符串来使用时,会自动调用该方法,并且在该方法中,可以返回一定的字符串, ...

  10. Android开发——Notification通知的各种Style详解

    本来是想与之前讲解使用Notification通知使用一起写的,查看了资料,觉得有必要将这Style部分单独拿出来讲解 前篇:Android开发——Notification通知的使用及Notifica ...