boostrap-非常好用但是容易让人忽略的地方------input-group-btn
1.正常的使用
<div class="form-group">
<div class="input-group">
<input class="form-control" type="text" placeholder="1000">
<div class="input-group-addon">人民币</div>
</div>
</div>
效果
2.特殊使用(两个控件合并成一个)
<div class="form-group">
<div class="input-group">
<div class="input-group-btn">
<select class="form-control" style="width: 110px;">
<option>http://</option>
<option>https://</option>
</select>
</div>
<input class="form-control" type="email" placeholder="www.baidu.com">
</div>
</div>
效果
boostrap-非常好用但是容易让人忽略的地方------input-group-btn的更多相关文章
- boostrap-非常好用但是容易让人忽略的地方------Font Awesome
font-awesome基本用法 官方代码传送门 font-awesome在bootstrap中的特殊用法(这个才是重点) 要点归纳1(官方) 官方代码传送门 要点归纳2(我的) <a href ...
- boostrap-非常好用但是容易让人忽略的地方------clearfix
代码 显示结果 代码 结果
- boostrap-非常好用但是容易让人忽略的地方------row
row是非常好用但是却非常容易忽略的地方. 想实现内部元素相对父级的padding=0,则在父子中间加个row.如下图 列嵌套也是同样的道理 经验之谈:学会row的用法,在手机版布局的时候会很方便,否 ...
- boostrap-非常好用但是容易让人忽略的地方------modal
使用bootstrap框架好久了,在开发中也用到了或者遇到了很多的问题,所以跟大家分享一下 bootstrap modal 组件的样式 .modal-lg .modal-sm 说明:这个是bootst ...
- boostrap-非常好用但是容易让人忽略的地方【7】:list-unstyled list-inline
无样式列表 list-unstyled:去掉ul的默认样式 内联列表 list-inline:将ul子元素放置于同一行
- boostrap-非常好用但是容易让人忽略的地方【6】:role属性
普通样式,鼠标hover没有任何效果 <span>content</span> 加上role属性的样式,鼠标hover会有cursor:pointer的效果 <span ...
- boostrap-非常好用但是容易让人忽略的地方【5】:input-group-btn
1.正常的使用 <div class="form-group"> <div class="input-group"> <input ...
- boostrap-非常好用但是容易让人忽略的地方【4】:Font Awesome
font-awesome基本用法 官方代码传送门 font-awesome在bootstrap中的特殊用法(这个才是重点) 要点归纳1(官方) 官方代码传送门 要点归纳2(我的) <a href ...
- boostrap-非常好用但是容易让人忽略的地方【3】:clearfix
代码 显示结果 代码 结果
随机推荐
- 解压system.img
解压: All-Series:~$ simg2img system.img system.img.ext4 All-Series:~$ mkdir tmp All-Series:~$ mount -t ...
- 屏蔽电信流氓广告造成的诡异的问题--Android WebView 长时间不能载入页面
发如今家里的时候用Android App里的WebView打开站点非常慢,会有十几秒甚至更长时间的卡住. 可是在电脑上打开相同的网页却非常快. 查找这个问题的过程比較曲折,记录下来. 抓取Androi ...
- 007 字符串(keep it up)
如果你有一个isSubstring函数.能够检測一个字符串是否是还有一个字符串的子串. 给出字符串s1和s2.仅仅使用一次isSubstring就能推断s2是否是s1的旋转字符串, 请写出代码.旋转 ...
- WordPress更改固定链接出现404的解决方案
很多站长在玩WordPress的时候,可能会碰到一个问题,就是想把WordPress伪静态,在后台设置好固定链接之后,就会出现文章页面或者所有的页面都出现404错误.解决方法如下: 1,.htacce ...
- centos一些命令
1.查看系统使用端口并释放端口 [root@my_nn_01 WEB-INF]# lsof -w -n -i tcp:80 COMMAND PID USER FD TYPE DEVICE ...
- 二叉树的建立与遍历(山东理工OJ)
题目描写叙述 已知一个按先序序列输入的字符序列,如abc,,de,g,,f,,,(当中逗号表示空节点).请建立二叉树并按中序和后序方式遍历二叉树,最后求出叶子节点个数和二叉树深度. 输入 输入一个长度 ...
- InputStreamReader 和 OutputStreamWriter类使用方法简单介绍,及演示。
InputStreamReader 和 OutputStreamWriter类使用方法简单介绍. 一.InputStreamReader类 InputStreamReader 将字节流转换为字符流.是 ...
- 【解决】/usr/bin/ld: cannot find -lc
现象:运行gcc静态编译程序时报错: /usr/bin/ld: cannot find -lc collect2: ld returned 1 exit statusmake: *** [gcc_dr ...
- 机械革命X5(MECHREVO MR-X5)开包检验
不废话.直接的问题,左右X5没有更具体的信息.为了通过有机会了解后续的选择,具体的数据被释放约: 首先看包装: 1.快递包裹,基于卖方这可以是不同的,包装各不相同 watermark/2/text/a ...
- Hadoop学习笔记Hadoop伪分布式环境建设
建立一个伪分布式Hadoop周围环境 1.主办(Windows)顾客(安装在虚拟机Linux)网络连接. a) Host-only 主机和独立客户端联网: 好处:网络隔离: 坏处:虚拟机和其他serv ...