bootstrap框架之输入框组

最新推荐文章于 2024-10-12 20:42:44 发布

青菜白玉

最新推荐文章于 2024-10-12 20:42:44 发布

阅读量411

点赞数

分类专栏： bootstrap

本文链接：https://blog.youkuaiyun.com/weixin_43416149/article/details/104256367

版权

bootstrap 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了Bootstrap框架中输入框组的基础用法，包括addon元素的应用，如label、icon、复选框、单选框和按钮的组合，并提到了在addon中添加下拉菜单的方法。同时，文章探讨了如何通过data-toggle属性实现这一功能。此外，还提及了源码中的显示方式，使用display: table-cell确保元素等高，并讨论了addon元素圆角的复杂处理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基础用法

<div class="input-group">
	<span class="input-group-addon">@</span>
	<input type="text" class="form-control">
</div>

addon元素

addon元素不仅可以是label和icon，还可以是复选框、单选框和按钮。

<span class="input-group-addon"><input type="checkbox"></span>

<span class="input-group-btn">
	<button type="button" class="btn btn-default"></button>
</span>

也可以设置下拉菜单在addon元素里面，只要按钮设置好data-toggle即可

源码

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.form-control::-moz-placeholder,
.form-control:-ms-input-placeholder,
.form-control::-webkit-input-placeholder {
  color: #999;
}

.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}
.input-group .form-control {
  float: left;
  width: 100%;
  margin-bottom: 0;
}
.input-group-addon,
.input-group-btn {
  width: 1%; /* 设置最小值，方便表格模式进行等分*/
  white-space: nowrap;
  vertical-align: middle;
}
.input-group-btn,
.input-group-addon,
.input-group .form-control {
  display: table-cell;
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group-addon {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  color: #555;
  text-align: center;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.input-group-btn {
  position: relative;
  font-size: 0;
  white-space: nowrap;
}
.input-group-btn > .btn {
  position: relative;
}