如何使Bootstrap的输入和textarea具有Material Design外观？

Question

我想让Bootstrap的textarea和input字段显示Material Design。

  

我目前正在使用稳定版的Bootstrap - 3.3.7

我打算发生的事情是：

• 当字段聚焦时，使标签浮动。
• 彩色线条从底部边框的中间向左右扩展。 （类似于这个家伙的question）

我尝试了一种可能的解决方案，虽然它确实有效，但我不想出于某种原因使用它。

• 解决方案来自this教程网站以及此CodePen demo中Bootstrap的类似实现。

演示代码为here（仅限浮动标签）。

原因是什么？

1. 你需要添加两个<span>元素，一个用于'bar'，一个用于'highlight'，用于扩展的彩色线，我不喜欢这样做。
2. <input type=email>存在一个错误，如果您没有输入所需的字符，浮动标签将作为占位符返回，这对该字段来说是一团糟。

好的，CSS background-image / transition / animation和/或使用jQuery可以吗？

这是我剩下的demo代码。

感谢。

Answer 1

这可能会更好地替换你的bootstrap.min.css： （删除bootstrap.min.css的内容并粘贴它。）

不幸的是，这里粘贴的样式太多了所以我把它放在github文件中给你：

RAW代码版本：https://gist.githubusercontent.com/ErikThiart/89f8cb843cb2dcee32113a896e51426f/raw/a20f6c28437aab63951e112c68aa28ecfc643f23/Material%2520Design

要点版本： https://gist.github.com/ErikThiart/89f8cb843cb2dcee32113a896e51426f

Answer 2

查看MDB，他们已经完成了所有这些：）