twitter-bootstrap - 输入字段的引导 css

Question

我有一个输入字段，我想使用 bootstrap alert css 类。问题是我无法让它工作，因为 bootstrap 还定义了更具体的选择器input[type="text"]。那么，是这样吗？我可以忘记在输入元素上使用那个警报 css 类吗？我真的很想避免仅为输入字段创建更具体的 css 规则......

Answer 1

您不必“忘记它”，但您必须接触一点 CSS（或者实际上是 LESS）。

您可以使用 LESS mixins 完成大部分工作：

input.myInputAlert {    
  .alert;
}

这大致给出了以下内容

input.myInputAlert {
  /* padding: 8px 35px 8px 14px; */
  /* margin-bottom: 20px; */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #c09853;
}

我删除了填充和边距规则，让它使用真实input值。

无需太多测试，它看起来确实有效：http: //jsbin.com/oqoqeg/2

---

你可以在那里看到 LESS 编译（lesscss.org）