Bootstrap3基础 input-group-btn 按钮与输入框 横向组合
| 内容 | 参数 |
|---|---|
| OS | Windows 10 x64 |
| browser | Firefox 65.0.2 |
| framework | Bootstrap 3.3.7 |
| editor | Visual Studio Code 1.32.1 |
| typesetting | Markdown |
code
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><!-- IE将使用最新的引擎渲染网页 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 页面的宽度与设备屏幕的宽度一致初始缩放比例 1:1 --><meta name="viewport" content="width=device-width, initial-scale=1"><title>Demo</title><meta name="author" content="www.cnblogs.com/kemingli"><!-- 引入外部bootstrap的css文件(压缩版)，版本是3.3.7 --><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --><!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --><!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]-->
</head><body><!-- start : demo --><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><!-- end : demo --><!-- NO.1 加载框架依赖的jQuery文件(压缩版)，版本是1.12.4 --><script src="bootstrap/js/jquery.min.js"></script><!-- NO.2 加载Bootstrap的所有JS插件，版本是3.3.7 --><script src="bootstrap/js/bootstrap.min.js"></script>
</body></html>
result
resource
- [ 文档 ] getbootstrap.com/docs/3.3
- [ 源码 ] github.com/twbs/bootstrap
- [ 源码 ] archive.mozilla.org/pub/firefox/releases/65.0/source/
- [ 平台 ] www.cnblogs.com
- [ 平台 ] github.com
- [ 扩展 - 平台] www.bootcss.com
- [ 扩展 - 浏览器 ] www.mozilla.org/zh-CN/firefox/developer
Bootstrap是前端开源框架，优秀，值得学习。
博文讲述的是V3版本，更为先进的是V4版本。学有余力的话，可作简单地了解。
Firefox是开源的浏览器，优秀，值得关注。
面对开源框架，分析、领悟与应用，能对其进行加减裁化，随心所欲而不逾矩。
博文的质量普通，仅供参考。盲目复制，处处是坑。Think twice before you act(三思而后行)！
转载于:https://www.cnblogs.com/kemingli/p/10545395.html
Bootstrap3基础 input-group-btn 按钮与输入框 横向组合相关推荐
- html中按钮下拉菜单,Bootstrap3.0学习笔记之按钮与下拉菜单
前面的文章算是把Bootstrap CSS部分简单的学习了一遍,应该忽视了比较多的细节问题.不过大部分的内容我都过了一遍,并且用代码实现了一遍,而且看到了真实的效果.挺不错的.那么接下来的几篇文章主要 ...
- Java-GUI编程实战之管理系统 Day2【Swing(组件介绍、布局管理器、事件类及监听器类)、基础组件按钮和输入框的用法】
视频.课件.源码[链接:https://pan.baidu.com/s/13ffqGDzH-DZib6-MFViW3Q 提取码:zjxs] Java-GUI编程实战之管理系统 Day1[项目开发流程. ...
- 怎么修改谷歌浏览器文件提交按钮样式_使用css自定义input file浏览按钮样式
前言 文件上传用途非常广泛,浏览器自带文件控件不太美观,很多时候不能满足需求,需要自定义input [type=file]的样式. 不同浏览器的file控件表现形式不一样 火狐 谷歌 IE 不同浏览器 ...
- 12.12 带触发器按钮的输入框
带触发器按钮的输入框 的实现方式 带触发器按钮的输入框一般是在输入框的右方放置一个按钮, 点击按钮后弹出一个新的窗口, 在窗口中选中某值后,回填到输入框中, 直观的实现方式是在使用fieldconta ...
- 通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里
本人公众号上线啦!!! 公众号与博客名一样:没有腹肌的程序猿 公众号文章类型:工作上所遇到的需求实现方案分享. 此外也会提供一些数据集供大家使用.(这个还在规划中,毕竟打工人时间挺紧的,哈哈哈哈) 到 ...
- FTXUI基础笔记（botton按钮组件进阶）
前一篇: FTXUI基础笔记(botton按钮组件基础) 四种样式: Container::Vertical({ Button("Ascii ...
- 金蝶K/3 wise基础资料界面 复制按钮灰色无法选中的问题
项目场景:K/3 wise基础资料界面 复制按钮灰色无法选中的问题 问题描述 复制按钮呈现灰色无法选中 原因分析: 1.是否具有复制权限 2.是否在参数设置界面将"不显示项目移动数据&quo ...
- 【css】苹果手机上input的button按钮颜色显示问题
在手机页面上写了个input的button按钮,但是颜色显示不对 可以在css中加上下面这句 input[type=button], input[type=submit], input[type=fi ...
- 在jsp页面中点击编辑按钮，显示input边框，可编辑，点击保存按钮，输入框消失，不可编辑，并将文本框中的内容保存到数据库中
寻找的资料 一. 默认readonly不允许编辑.点击编辑的时候加上边框样式,去掉readonly属性 <style>.readonly input{border:none}</st ...
最新文章
- php 无法输出图像,ThinkPHP里无法输出图片 设置响应头
- 五、【线性表】线性表的链式表示和实现
- HTTP VS RPC
- arthas命令使用示例：watch
- 你对一个程序员有多尊重
- IPv6 RIPng (PT)
- 如何判断两个jq对象是同一个对象
- android 65536 gradle,如何防止在Android Gradle中使用Multi-dex
- iOS UIButton文字和图片间距随意调整
- 春节档总票房已破50亿 电影票一票难求
- JVM和GC知识点整理
- JavaScript中的ActiveXObject对象
- 重新学习《C++Primer5》第16章-模板与泛型编程
- 苹果6swifi温度过高 iphone6s温度过高提醒修复教程
- Flink实时数仓--ClickHouse数据可视化接口实现、Sugar 数据大屏
- 三、pytest接口自动化之pytest中setup/teardown,setup_class/teardown_class讲解
- php使用QQ登录API,QQ的账号登录及api操作
- Universal-Image-Loader 图片来源于drawable改动 Scheme.DRAWABLE.wrap(R.drawable.img)报错
- kdj值应用口诀_KDJ指标应用口诀
- 推荐一些奇奇怪怪的好东西