Question

我正在使用bootstrap 3.输入类型=文本元素很酷。现在我想在div元素周围创建一个类似的圆形边框。我尝试过的任何东西看起来都很难看，是否可以使用bootstrap 3？

提前致谢

Answer 1

要快速使div看起来像Bootstrap输入，只需在div中添加.form-control类。

<div class="form-control">I am inside a div.</div>

同时查看Bootstrap Panels。由于div不是表单控件，因此panals具有圆角，更适合div。

<div class="panel panel-default">
    <div class="panel-body">I am inside a panel.</div>
</div>

Here is a JSFiddle demo of both options.

Answer 2

由于您正在尝试模拟引导输入，@ James Lawruk建议使用。form-control是最简单的方法。

但是如果你想学习如何模仿你在其他地方（你应该）看到的样式，你需要检查.form-control中使用的css（如果在Chrome上，右键单击并“检查元素”），复制相关的样式，并创建自己的类来应用。

在这种情况下：

.form-control{
  display: block;
  width: 100%; /* THIS */
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555; /* THIS */
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc; /* THIS */
  border-radius: 4px; /* THIS */
}

变为

.custom{
  width: 100%;
  color: #555;
  border: 1px solid #ccc;
  border-radius: 4px;
}

注意：我忽略了一些也附加到.form-control的伪类，例如：focus，但伪元素是你可能不想应用专为其他目的而设计的类的另一个原因。

如何使用bootstrap在div周围创建圆形边框？

2 个答案: