Bootstrap3基础 input-group-btn 按钮与输入框 横向组合
2018-01-28 15:15
495 查看
礼悟:
公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。
代码
效果
Bootstrap,优秀的前端开源框架,值得学习。
学习资源:v3.bootcss.com + itcast和itheima视频库 + 清净的心地。如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。
公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。
ide:visual studio 2017
browser:Chrome / Firefox
bootstrap:3.3.7
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视频库 + 清净的心地。如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。
相关文章推荐
- Bootstrap3基础 btn-group/-vertical 按钮组(横着、竖着排列)
- Bootstrap3基础 form-group 输入框之间出现间隔
- Bootstrap CSS组件之按钮组(btn-group)
- Bootstrap3基础 btn-primary/warning... 三类按钮的六种样式
- Bootstrap—输入框组input-group
- BootStrap--CSS组件--按钮组(btn-group)
- bootstrap 中 input输入框与其他样式的组合
- BootStrap--CSS组件--输入框组(input-group)
- input输入框,回车激活按钮事件代码
- bootstrap中的form-group和input-group
- 基于Bootstrap的jQuery开关按钮组合
- 在input输入框中回车激活点击按钮事件代码
- map循环中点击按钮实现清空Input输入框内容
- Bootstrap基础8——输入框input
- bootstrap btn 按钮颜色
- 练习:创建一个按钮,点击一次,则创建一个<input type="text"><input> 点击三次按钮,应该有三个输入框被创建出来。
- Bootstrap弹出层model上自定义的弹出层中input输入框失效, 无法输入
- Bootstrap3基础 input-group glyphicon 输入框组与可爱的glyphicon图标
- 一个输入框input,一个按钮input,点按钮时把文本框中的内容打开
- javascript动态添加、删除按钮和input输入框