html - 使用 Bootstrap 的类似 Twitter 的推文框

Question

你好，我真的需要你的帮助。我一直在谷歌上搜索如何制作一个像推特的“正在发生的事情”框这样的推文框，供用户使用 bootstrap 3 发布新内容，但到目前为止我找不到任何接近的内容。

有人有任何想法或关键字可以提供帮助吗？非常感谢!

Answer 1

您可能会发现很多插件都可以做同样的事情。但是如果你想自己做，请按照以下步骤操作(这只包含基本功能)

像下面这样定义一个 span 或 div

  <div class="container">
  <div id="mockTextBox">
    What's Happening ?
  </div></br>
  <textarea id="originalTextBox" class="form-control">
  </textarea>
</div>

首先隐藏文本区域，将span/div显示为文本框。

然后定义事件

$(document).ready(function(){
  $('#originalTextBox').hide()
  $('#mockTextBox').click(function(){
    $('#mockTextBox').hide()
    $('#originalTextBox').show()
  })
})

相应地应用 CSS，你就得到了你想要的。

#mockTextBox
{
  width:300px;
  height:50px;
  border:1px solid;
}

#originalTextBox
{
  width:300px;
  height:50px;
  resize:none;
}

检查此示例 http://codepen.io/Midhun052/pen/mVByzK

为了美观，我已将 Bootstrap 类添加到上面代码笔中的文本区域。

刚刚更新

更多的 CSS 和图片

$(document).ready(function() {
  $('#originalTextBox').hide()
  $('#mockTextBox').click(function() {
    $('#mockTextBox').hide()
    $('#originalTextBox').show()
  })
})

#mockTextBox
{
  width:300px;
  height:50px;
  border:1px solid;
  display:inline-block;
  margin-top:10px;
    border: 1px solid #337ab7;
  
}

#txt
{
 border:1px solid; 
 display:inline;
  height:20px;
  
}

#originalTextBox
{
    width: 310px;
    height: 100px;
    resize: none;
    border: 1px solid #337ab7;
    background-color: #337ab7;
    margin: 10px;
}

#originalTextBox textarea
{
 
  resize:none;
  margin:5px;
  width:300px;
}

.class2
{
     float: right;
    margin-top: 12px;
    margin-right: 2px;
}

.imgF1
{
  width:20px;
  height:20px;
  margin:5px
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="container">  
  <div id="mockTextBox">   
    <img src="http://lorempixel.com/46/46"/>
    <div id="txt">What's Happening ?</div>
    <img class="class2" src="http://lorempixel.com/16/16"/>
  </div>
  <div id="originalTextBox">
  <textarea  class="form-control">
  </textarea>
    <img class="imgF1" src="http://lorempixel.com/46/46">Post your photo</img>
  </div>
</div>