<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--移动设备优先-->
    <title>bootstrap</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style>
    </style>
</head>
<body>
<div class="container">
    <h1>基本用法</h1>

    <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" />
        <span class="input-group-addon">.00</span>
    </div>

    <div class="input-group input-group-lg">
        <span class="input-group-addon glyphicon glyphicon-user"></span>
        <input type="text" class="form-control" />

    </div>
    <div class="input-group">
        <span class="input-group-addon glyphicon glyphicon-user"></span>
        <input type="text" class="form-control" />

    </div>
    <div class="input-group input-group-sm">
        <span class="input-group-addon glyphicon glyphicon-user"></span>
        <input type="text" class="form-control" />

    </div>
    <hr/>
    <div class="input-group">
                <span class="input-group-addon">
                    <input type="checkbox" />
                </span>
        <input type="text" class="form-control" />

    </div>
    <hr />
    <div class="input-group">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-danger">OK</button>
                    <button type="button" class="btn btn-danger">OK</button>
                    <button type="button" class="btn btn-danger">OK</button>
                </span>
        <input type="text" class="form-control" />
    </div>
    <hr/>
    <div class="input-group">
        <div class="input-group-btn">
            <button type="button"
                    class="btn btn-default dropdown-toggle"
                    data-toggle="dropdown">
                Action
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">项目</a></li>
                <li><a href="#">项目</a></li>
                <li><a href="#">项目</a></li>
            </ul>
        </div>
        <input type="text" class="form-control" />

    </div>
</div>
</body>
</html>

⑨bootstrap组件 按钮式下拉菜单 输入框 使用基础案例的更多相关文章

  1. Bootstrap按钮式下拉菜单

    前面的话 按钮式下拉菜单仅从外观上看,和下拉菜单效果基本上是一样的.不同的是普通的下拉菜单是block元素,而按钮式下拉菜单是inline-block元素.本文将详细介绍Bootstrap按钮式下拉菜 ...

  2. 8.bootstrap下拉菜单、按钮组、按钮式下拉菜单

    下拉菜单 dropdown 对齐方式: .dropdown-menu-right     .dropdown-menu-left <div class="container" ...

  3. 用bootstrap和css3制作按钮式下拉菜单

    利用bootstrap框架的字体图标和下拉菜单效果,以及css3的动画效果,可以做出比较优雅的按钮式下拉菜单样式 <style> .myBtnStyle .dropdown-menu sp ...

  4. Bootstrap下拉菜单、按钮式下拉菜单

    1. 概述 下拉菜单使用频率也是比较高的,比较常见的使用场景是在导航菜单栏,某个主菜单含有下拉的子菜单. Bootstrap为下拉菜单提供了两种实现方式,即普通的下拉菜单还有按钮式的下拉菜单.我们先看 ...

  5. Bootstrap3系列：按钮式下拉菜单

    1. 基本实例 把按钮放入 .btn-group 中,加入适当的菜单标签,让按钮触发下拉菜单. 1.1 示例代码 <div class="btn-group"> < ...

  6. Bootstrap系列 -- 24. 下拉菜单基本用法

    在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“dropdown.js”的文 ...

  7. 实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法 (转)

    实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法 问题描述,在下拉菜单中,添加其他元素,例如,原文作者所述的<a>和我自己实际用到的<input> ...

  8. 【Bootstrap】 bootstrap-select2下拉菜单插件

    这次开发了个小TRS系统,虽然是很小,但是作为初心者,第一次用到了很多看起来洋气使用起来有相对简单的各种前端(主要是和bootstrap配合使用)组件.包括bootstrap-select2,boot ...

  9. Bootstrap系列 -- 27. 下拉菜单对齐方式

    Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right ...

随机推荐

  1. 在 JavaScript 中使用构造器函数模拟类

    今天,我们要讲的是在 JavaScript 中使用构造器函数(construcor function)模拟类. 构造器函数简介 你可以使用 ES6 的 class 关键字来实现类,不过我建议你使用传统 ...

  2. hdu1356&hdu1944 博弈论的SG值（王道）

    S-NimProblem DescriptionArthur and his sister Caroll have been playing a game called Nim for some ti ...

  3. uva11538

    解题思路: 1. 计数问题, 有三种相对摆放方式: 水平, 竖直, 对角线. 根据加法原理即可, 并且没有交集. 水平和竖直是一样的, 只要n*m矩形旋转90度. 所以结果是: n*m*(m-1)+n ...

  4. localStorage和sessionStorage总结以及区别

    (1)兼容的手机和浏览器: (2)使用 .setItem( key, value)存键值数据 sessionStorage.setItem("key","value&qu ...

  5. HIVE---基于Hadoop的数据仓库工具讲解

    Hadoop: Hadoop是一个由Apache基金会所开发的分布式系统基础架构.用来开发分布式程序.充分利用集群的威力进行高速运算和存储.Hadoop实现了一个分布式文件系统(Hadoop Dist ...

  6. 【转】Wi-Fi 20mhz 和 40mhz 频段带宽的区别是什么？

    一.无线网卡模式 wifi现在市场上主要存在802.11a/b/g/n/ac五种模式的无线网卡: 1.b的最大速率11Mbps,频段2.4G,带宽22M: 2.a的最大速率54Mbps,频段5G,带宽 ...

  7. Python系列之lambda、函数、序列化

    lambda 在python中使用lambda来创建匿名函数,而用def创建的方法是有名称的,除了从表面上的方法名不一样外,python lambda还有哪些和def不一样呢? 1 python la ...

  8. javascript正则表达式入门

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  9. SqlServer和Oracle中一些常用的sql语句8 触发器和事务

    --创建和执行事后触发器 --更新仓库备份表中记录时自动创建数据表且插入三条记录 create trigger db_trigger1 on 仓库备份 for update as begin if E ...

  10. ItemsPanelTemplate的用法

    项目里想用Silverlight制作工具栏,之前用的是Image和TextBlock完成的,但是代码混乱,在后来版本中突然想到ListBox可以实现这样的效果.使用后效果确实不错.下面是我的笔记 &l ...