<!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. 关于SSH

    SSH的英文全称是Secure Shell. 传统的网络服务程序,如:ftp和telnet在本质上都是不安全安全安全安全的,因为它们在网络上用明文传送口令和数据,别有用心的人非常容易就可以截获这些口令 ...

  2. Bmob云IM实现头像更换并存入Bmob云数据库中（1.拍照替换，2.相册选择）

    看图效果如下: 1.个人资料界面 2.点击头像弹出对话框 3.点击拍照 4.切割图片,选择合适的部分 5.点击保存,头像替换完毕,下面看从相册中选择图片. 6.点击相册 7.任选一张图片 8.切割图片 ...

  3. HDU 5974 数学

    A Simple Math Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Ot ...

  4. The Twin Towers zoj2059 DP

    The Twin Towers Time Limit: 2 Seconds      Memory Limit: 65536 KB Twin towers we see you standing ta ...

  5. swiper拖拽之后不自动滑动问题

    //swiper轮播图 var mySwiper = new Swiper('.swiper-container',{ initialSlide :0, autoplay : 3000, direct ...

  6. 渣渣学QT

    初学QT,自己的一些小总结,错误之处,望大神指点一二: 1,添加资源文件时想应用在界面的背景,但是发现用不了,后来才知道是没有"构建"?应该是要在构建之后才将所添加的资源文件真正的 ...

  7. WinForm 读写配置文件

    //读配置文件 方法(1) //ConfigurationManager.RefreshSection("appSettings"); //强制重新载入 string settin ...

  8. ListBox数据绑定无效

    public class DataList { public List<string> listSource; private DataTable table; public DataLi ...

  9. win10 sdk 是否向下兼容

    向下兼容(downward compatibility),又称向后兼容(backward compatibility).回溯兼容,在计算机中指在一个程序.库或硬件更新到较新版本后,用旧版本程序创建的文 ...

  10. win10 uwp 打开文件管理器选择文件

    本文:让文件管理器选择文件,不是从文件管理器获得文件. 假如已经获得一些文件,那么如何从文件管理器选择这些文件? 使用方法很简单. 从网上拿图来说 打开文件夹自动选择所有文件 首先需要获得文件夹,因为 ...