<!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. 【笔记】php常用函数

    phpusleep() 函数延迟代码执行若干微秒.unpack() 函数从二进制字符串对数据进行解包.uniqid() 函数基于以微秒计的当前时间,生成一个唯一的 ID.time_sleep_unti ...

  2. bzoj2111 Perm 排列计数

    称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,...N的排列中有多少是Magic的,答案可能很大,只能输 ...

  3. POJ-2417-Discrete Logging（BSGS）

    Given a prime P, 2 <= P < 2 31, an integer B, 2 <= B < P, and an integer N, 1 <= N &l ...

  4. 在CentOS6上利用PXE+Kickstart+Apache+DHCP实现无人值守安装

    在CentOS6上利用PXE+Kickstart+Apache+DHCP实现无人值守安装 1.PXEServer:OS:CentOS6.9IP:172.16.25.69: (1)apache:# mo ...

  5. python下selenium测试报告整合

    使用过一段时间的Robot Framework测试框架,测试之前需要先搭环境,需要安装的东西很多,这一点个人有些排斥. 每一个测试内容对应一个Test_Case,Robot有自己语法格式,如判断.循环 ...

  6. zoj3211dream city dp 斜率

    Dream City Time Limit: 1 Second      Memory Limit:32768 KB JAVAMAN is visiting Dream City and he see ...

  7. [C#]Winform后台提交数据且获取远程接口返回的XML数据,转换成DataSet

    #region 接口返回的Xml转换成DataSet /// <summary> /// 返回的Xml转换成DataSet /// </summary> /// <par ...

  8. 写博客 Why？

    博客?英文名字为blogger,它是一种网络日记. 一.我为什么要写博客? 这是我第一回写博客,写的可能不是非常的好,请多多给些意见.在平常的学习的时候,我怕忘掉自己学的知识,常常都会记录下来,但回头 ...

  9. dotweb框架之旅 [四] - 常用对象-HttpContext

    dotweb属于一个Web框架,希望通过框架行为,帮助开发人员快速构建Web应用,提升开发效率,减少不必要的代码臃肿. dotweb包含以下几个常用对象: App(dotweb) App容器,为Web ...

  10. 关于Java和JavaScript对字符串截取处理的总结

    在JavaWeb开发中,经常需要对字符串进行处理,包括Java语言和JS语言,总是容易弄混淆,这里简单对比一下两种语言对于字符串截取方法. 一.先看Java public class StringDe ...