Bootstrap3基础 input-group-btn 按钮与输入框 横向组合

礼悟:
     公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
          虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。


               ide:visual studio 2017  
            browser:Chrome / Firefox
     bootstrap:3.3.7

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
    <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

</head>
<body>
    <div class="container">
        <br />
        <form>
            <div class="input-group">
                <input type="text" class="form-control" />
                <span class="input-group-btn">
                    <button class="btn btn-primary">搜索</button>
                </span>
            </div>
        </form>
    </div>
</body>
</html>

  

效果



Bootstrap,优秀的前端开源框架,值得学习。
学习资源:v3.bootcss.com + itcast和itheima视频库 + 清净的心地。如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。

原文地址:https://www.cnblogs.com/jizuiku/p/8371228.html

时间: 2024-08-04 19:39:47

Bootstrap3基础 input-group-btn 按钮与输入框 横向组合的相关文章

Bootstrap3基础 btn-primary/warning... 三类按钮的六种样式

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Firefox / Chrome   bootstrap:3.3.7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

html移动应用 input 标签 清除按钮功能如何实现(不触发键盘)

有个需求是:输入框有文本的时候就显示清除按钮,没有文本则隐藏清除按钮,点击清除按钮不能影响键盘弹出的状态. 网上有css实现自动显示和隐藏清除按钮的方案,但是考虑到兼容性,我们还是使用js来实现. css body{             background: #eee;         }         form{             margin: 30px 0;             position: relative;         }         #keyword{

cocos2dx基础篇(7)——菜单按钮CCMenu、CCMenuItem

[本节内容] 菜单按钮在游戏中是经常被用到的,比如主菜单界面的菜单选项,暂停游戏时的菜单选项等等.cocos2dx引擎同样为我们提供了CCMenu菜单的功能,并包含了一些简单的菜单项CCMenuItem.且菜单项附带触碰按钮时,自动放大的效果. 温馨提示:本节内容比较多,需要大家慢慢分析,不要急于求成. 本节组织结构如下: 一.介绍CCMenu. 二.介绍CCMenuItem,及其具体的六个子类. 三.代码实战. [一.菜单CCMenu] 菜单CCMenu是专门用来承载菜单按钮的CCLayer图

取消chrome浏览器下input和textarea的默认样式;html5默认input内容清除“&#215;”按钮去除办法

取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: input::-ms-clear { display: none; }

HTML中使用&lt;input&gt;添加的按钮打开一个链接

在HTML中,<form>表单的<input type="button">可以添加一个按钮.如果想让该按钮实现<a> 的超链接功能,需要如下实现: 在新的窗口中打开页面(target = blank):<input type="button" onclick="window.open('new.jsp')"> 在当前窗口中打开页面(target = self)  :  <input type=

原生HTML5 input type=file按钮UI自定义

原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度为0,使用绝对定位遮罩在自定义的按钮标签层的之上. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>原生HTML5 input typ

苹果手机上input的button按钮颜色异常

在手机端上写了一个页面,按钮的地方是用input标签button按钮,给的是绿色的背景颜色,在安卓手机上显示正常,在苹果手机上显示不正常,如下图 解决办法: css加上下面这一行代码就可以了,input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; } 希望能帮到你~

遭遇input与button按钮背景图失效不显示的解决办法

笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器Safari.Opera下不兼容的问题,其中IE6最为棘手,历来IE6就被诸位前端代码人员所诅咒,无奈其用户在 中国大陆又非常多!可恶的微软啊,你当年造IE6的时候为何不严格遵守W3C标准呢? 今天做公司的交友网站前端网页页面的时候笔者又遇到了难解决的网页前端DIVCSS代码问题,一个平时不会发生的怪

利用js代码:document.forms[0].approval.value=&#39;false&#39;,当点击 &lt;input type=&quot;image&quot;按钮向表单传递不同的参数。

<form action="flow_myTaskList"> <input type="hidden" name="approval" value="true"/> <!-- 表单操作 --> <div id="InputDetailBar" style="float:none"> <!--onclick事件在submit之前触发-