Javascript 如何扩展引导表单，如stackoverflow搜索表单？
我实际上是CSS新手，不知道如何创建一个像stackoverflow搜索表单这样的输入，我认为可以使用jquery按钮触发并更改表单的宽度值？？有什么建议或解决方案吗？Javascript 如何扩展引导表单，如stackoverflow搜索表单？,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我实际上是CSS新手，不知道如何创建一个像stackoverflow搜索表单这样的输入，我认为可以使用jquery按钮触发并更改表单的宽度值？？有什么建议或解决方案吗？ <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" co
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.form-control{
width:100px;
}
.form-control:focus{
width:400px;
outline:none;
transition: all 600ms cubic-bezier(.165, .84, .44, 1);
}
</style>
</head>
<body>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</body>
</html>
引导示例
.表格管制{
宽度：100px；
}
.窗体控件：焦点{
宽度：400px；
大纲：无；
过渡：所有600ms立方贝塞尔（.165、.84、.44、1）；
}
电邮：
*{
保证金：0；
填充：0；
框大小：边框框；
-moz框大小：边框框；
列表样式：无；
字体系列：helvetica、arial、无衬线字体；
字号：14px
}
分栏{
高度：40px；
背景：#ccc；
盒影：插入0 40px 40px-20px#eee；
右边填充：200px；
}
div#bar>div{
位置：相对位置；
顶部填充物：5px
}
分割条输入，分割条ul{
浮动：对；
}
分割条输入{
高度：30px；
宽度：275px；
边界半径：5px；
边界：无；
填充物：5px；
边框顶部：1px实心#ccc；
边框底部：1px实心#fff；
背景：#eee；
颜色：#333；
过渡：全部。7秒
}
分割条输入：焦点{
宽度：625px；
背景：白色；
位置：相对位置；
z指数：20
}
分割条输入：焦点+ul{
位置：绝对位置；
右：300px；
不透明度：0
}
分栏{
宽度：400px；
高度：30px；
位置：绝对位置；
右：300px；
不透明度：1；
过渡：不透明度.35s
}
里巴尔区{
浮动：对；
线高：30px；
左边距：20px；
}
- 问题
- 工作
- 文件
- 标签
- 使用者