javascript - 如何在 bootstrap 3 项目中实现自定义表单（来自演示的 css 源文件）
问题描述
抱歉，如果我的问题过去曾被提及。我认为自己是一个菜鸟，并且断断续续地学习 javascript 大约 18 个月左右。
我已经使用这个 boostrap 模板开始使用 html 和 css。我有一个简单的“在这里订阅”类型的输入表单，我遇到了这些表单布局。
我试图实现“isao”表单效果（靠近演示页面的底部），但在项目中它看起来绝对是一团糟。将鼠标悬停在表单的标签上时，过渡效果与演示中的效果一样，在选择文本框时也是如此。但是格式完全错误，它全部聚集在一起，文本框与左侧相邻，而不是在它应该在的标签上方。它也是可见的，其中演示显示文本框是透明的。
我下载了源文件，将它们粘贴到我项目的 src 目录中，并将表单 css 文件和 javascript 链接到我的项目索引中。还有一些内联 javascript，我也将其复制到我的项目的索引文件中。
诚然，我已经从源代码中复制并粘贴了代码，希望能够制作 tweeks，但我不知所措。
有人可以帮我解开我的情况吗？
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hero in Your Own Home</title>
<!-- CSS -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/demo.css" />
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/set1.css">
<link rel="stylesheet" type="text/css" href="assets/TextInputEffects/css/set2.css">
<link rel="stylesheet" type="text/css" href="assets/css/form-elements.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/media-queries.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon_hiyoh.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 subscribe section-description wow fadeIn">
<h2>Be in the <strong>Know</strong></h2>
<div class="divider-1 wow fadeInUp"><span></span></div>
</div>
</div>
<div class="row">
<section class="content bgcolor-8">
<h2>Isao</h2>
<div class="col-sm-4">
<span class="input input--isao">
<input class="input__field input__field--isao" type="text" id="input-38" />
<label class="input__label input__label--isao" for="input-38" data-content="First Name">
<span class="input__label-content input__label-content--isao">First Name</span>
</label>
</span>
</div>
<div class="col-sm-4">
<span class="input input--isao">
<input class="input__field input__field--isao" type="text" id="input-39" />
<label class="input__label input__label--isao" for="input-39" data-content="Middle Name">
<span class="input__label-content input__label-content--isao">Middle Name</span>
</label>
</span>
</div>
<div class="col-sm-4">
<span class="input input--isao">
<input class="input__field input__field--isao" type="text" id="input-40" />
<label class="input__label input__label--isao" for="input-40" data-content="Last Name">
<span class="input__label-content input__label-content--isao">Last Name</span>
</label>
</span>
</div>
</section>
</div>
</div>
<!-- Javascript -->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/retina-1.1.0.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<script src="assets/js/scripts.js"></script>
<!--[if lt IE 10]>
<script src="assets/js/placeholder.js"></script>
<![endif]-->
<script src="assets/TextInputEffects/js/classie.js"></script>
<script>
(function() {
// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
if (!String.prototype.trim) {
(function() {
// Make sure we trim BOM and NBSP
var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
String.prototype.trim = function() {
return this.replace(rtrim, '');
};
})();
}
[].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
// in case the input is already filled..
if( inputEl.value.trim() !== '' ) {
classie.add( inputEl.parentNode, 'input--filled' );
}
// events:
inputEl.addEventListener( 'focus', onInputFocus );
inputEl.addEventListener( 'blur', onInputBlur );
} );
function onInputFocus( ev ) {
classie.add( ev.target.parentNode, 'input--filled' );
}
function onInputBlur( ev ) {
if( ev.target.value.trim() === '' ) {
classie.remove( ev.target.parentNode, 'input--filled' );
}
}
})();
</script>
</body>
解决方案
推荐阅读
- python - 如何在python中循环一些数字
- javascript - 有没有办法命名自定义 Web 组件？
- google-cloud-platform - 如何在 Cloud Run 中自动部署来自 Cloud Build 的最新映像
- azure - DevOps 服务容器：如何在分支上挂载带有源的卷
- flutter - Flutter RawKeyboardListener 在发布模式下不起作用
- svg - 在嵌套 SVG 中使用视图框实现缩放
- adobe-indesign - 用于 InDesign 的拆分窗口 java 脚本
- python - 在文本框中查看外部py文件的函数（函数运行时）
- c++ - 以编程方式在输入流中输入文本以响应命令行程序
- javascript - 跨源 iframe 中的 JavaScript 对话框 alert()、confirm() 和 prompt() 不再起作用