你好,我真的需要你的帮助。我一直在谷歌上搜索如何制作一个像推特的“正在发生的事情”框这样的推文框,供用户使用 bootstrap 3 发布新内容,但到目前为止我找不到任何接近的内容。
有人有任何想法或关键字可以提供帮助吗?非常感谢!
最佳答案
您可能会发现很多插件都可以做同样的事情。但是如果你想自己做,请按照以下步骤操作(这只包含基本功能)
像下面这样定义一个 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>
关于html - 使用 Bootstrap 的类似 Twitter 的推文框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34801238/