извинения, если мой вопрос был рассмотрен в прошлом.Я считаю себя нубом и изучаю javascript около 18 месяцев.
Я использовал этот шаблон Boostrap , чтобы начать работу с HTML и CSS.У меня была простая однократная форма ввода для формы ввода типа «подписаться здесь», и я наткнулся на эти макеты форм.
Я попытался реализовать эффект формы «isao» (в нижней частидемо-страница), но в проекте это выглядит беспорядочно.При наведении курсора на метку формы эффект перехода работает как в демонстрационной версии, так и при выборе текстового поля.Однако форматирование все неправильно, все сгруппировано, текстовое поле расположено слева и не выше надписи, где это должно быть.Также видно, где демонстрация показывает, что текстовое поле прозрачно.
Я скачал исходные файлы, вставил их в каталог src моего проекта и связал css-файлы форм и javascript в индексе моего проекта.есть также некоторый встроенный javascript, который я также скопировал в индексный файл моего проекта.
Предположительно, я скопировал и вставил код из источника, ожидающего сделать твики, но я в растерянности.
Может ли кто-нибудь помочь мне разгадать мою ситуацию?
<!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>