如何在bootstrap 3中创建聊天输入框？

Question

我想在bootsrap中创建一些东西：

[colorpicker |输入框|按钮] [切换按钮]

我用过：

        <div class="input-group">
              <input type="text" class="form-control">                  
              <span class="input-group-btn">
                <button class="btn btn-default" type="button">Send</button>
                <button class="btn btn-default">Users</button>
              </span>
            </div>

但是，我不知道我应该使用什么colorPicker for bootstrap（只有9种颜色的选择器）以及如何在左侧添加它。

欢迎任何帮助。

小提琴：http://jsfiddle.net/5B5v5/

Answer 1

因为我觉得你说你想要一个只有9种颜色选择的颜色选择器，我会选择一个下拉菜单而不是一个完全烘焙的颜色选择器插件......就像这样：

<div class="form-inline">
  <div class="input-group">
    <div class="input-group-btn">
<!-- COLOR PICKER -->
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#"><span style="color:cyan" class="glyphicon glyphicon-tint"></span> Cyan</a></li>
          <li><a href="#"><span style="color:blue" class="glyphicon glyphicon-tint"></span> Blue</a></li>
          <li><a href="#"><span style="color:magenta" class="glyphicon glyphicon-tint"></span> Magenta</a></li>
          <li><a href="#">...more...</a></li>
        </ul>
<!-- END COLOR PICKER -->
      </div><!-- /btn-group -->
      <input type="text" class="form-control">
    </div>
    <button class="btn btn-primary" type="button">Send</button>
    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-user"></span></button>
  </div>
</div>

DEMO：http://www.bootply.com/ecziRvg9Jg

如果您 找到一个真正的颜色选择器，只允许您使用9种颜色，请将其附加到我在代码中注释的按钮。