如何在引导中将输入文本框嵌入到图像的顶部？
如何在引导中将输入文本框嵌入到图像的顶部？
提问于 2015-02-22 03:47:13
我想精确地将这些输入文本框放在引导图像上。这些输入文本框将定义为相对于背景中的图像和彼此之间的图像。到目前为止，我已经能够为容器添加背景图像并将输入文本字段放置在它们上，但是根据上述标准放置的位置一直是一个问题。请帮帮忙。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Wiredeiki App </title>
<meta name="description" content="Wiredwiki App">
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body data-spy="scroll" data-target="#my-navbar">
<script type='text/javascript'>
$(document).ready(function(){
$('#check_generator').css({'background-image': 'yellow'});
});
</script>
<!-- Navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand">Wiredwiki</a>
</div><!-- Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<a href="" class="btn btn-warning navbar-btn navbar-right">Download Now</a>
<ul class="nav navbar-nav">
<li><a href="#feedback">Feedback</a>
<li><a href="#gallery">Gallery</a>
<li><a href="#features">Features</a>
<li><a href="#faq">Faq</a>
<li><a href="#contact">ContactUs</a>
</ul>
</div>
</div><!-- End Container-->
</nav><!-- End navbar -->
<!-- jumbotron-->
<div class="jumbotron">
<div class="container text-center">
<h1>Print Online Checks for Free</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consectetur </p>
<div class="btn-group">
<a href="" class="btn btn-lg btn-primary">Download App</a>
<a href="" class="btn btn-lg btn-success">Spread the word</a>
</div>
</div><!-- End container -->
</div><!-- End jumbotron-->
<!-- call to action -->
<!-- Gallery -->
<div class="container">
<section>
<div class="page-header" id="gallery">
<h2>Gallery.<small> Check out the Awesome Gallery</small></h2>
</div>
<div class="carousel slide" id="screenshot-carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#screenshot-carousel" data-slide-to="0" class="active"></li>
<li data-target="#screenshot-carousel" data-slide-to="1"></li>
<li data-target="#screenshot-carousel" data-slide-to="2"></li>
<li data-target="#screenshot-carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="highway.jpg" alt="Text of the image">
<div class="carousel-caption">
<h3>Highway heading</h3>
<p>This is the caption</p>
</div>
</div>
<div class="item">
<img src="river.jpg" alt="Text of the image">
<div class="carousel-caption">
<h3>River heading</h3>
<p>This is the caption</p>
</div>
</div>
<div class="item">
<img src="street.jpg" alt="Text of the image">
<div class="carousel-caption">
<h3>Street heading</h3>
<p>This is the caption</p>
</div>
</div>
<div class="item">
<img src="painting.jpg" alt="Text of the image">
<div class="carousel-caption">
<h3>Painting heading</h3>
<p>This is the caption</p>
</div>
</div>
</div><!-- End Carousel inner -->
<a href="#screenshot-carousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#screenshot-carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- End Carousel -->
</section>
</div>
<!-- features -->
<div class="container" id = "check_generator" onload="colorize()">
<input type="text" id="usr">
</div><!-- End Container -->
<!-- features -->
<div class="container">
<section>
<div class="page-header" id="features">
<h2>Features.<small> Some of the coolest Features of this app.</small></h2>
</div><!-- End Page Header -->
<div class="row">
<div class="col-sm-8">
<h3>This is the heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mauris tortor, eleifend sit amet fringilla ac, tincidunt id massa. Proin et odio mattis, venenatis lacus vel, faucibus elit</p>
</div>
<div class="col-sm-4">
<img src="imac.jpg" class="img-responsive" alt="image">
</div>
</div><!-- End row -->
<div class="row">
<div class="col-sm-8">
<h3>This is the heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mauris tortor, eleifend sit amet fringilla ac, tincidunt id massa. Proin et odio mattis, venenatis lacus vel, faucibus elit</p>
</div>
<div class="col-sm-4">
<img src="smartphone.jpg" class="img-responsive" alt="image">
</div>
</div>
<div class="row">
<div class="col-sm-8">
<h3>This is the heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mauris tortor, eleifend sit amet fringilla ac, tincidunt id massa. Proin et odio mattis, venenatis lacus vel, faucibus elit</p>
</div>
<div class="col-sm-4">
<img src="user.jpg" class="img-responsive" alt="image">
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-body">
<span class="glyphicon glyphicon-ok"></span>
<h4>This is the Heading</h4>
<p>Nam velit est, tempor vel posuere et, auctor a lectus. Aenean gravida, est accumsan dictum rhoncus, lectus mi suscipit lacus, suscipit accumsan augue tellus vitae dolor. Morbi in euismod dui</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-body">
<span class="glyphicon glyphicon-star"></span>
<h4>This is the Heading</h4>
<p>Nam velit est, tempor vel posuere et, auctor a lectus. Aenean gravida, est accumsan dictum rhoncus, lectus mi suscipit lacus, suscipit accumsan augue tellus vitae dolor. Morbi in euismod dui</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-body">
<span class="glyphicon glyphicon-play-circle"></span>
<h4>This is the Heading</h4>
<p>Nam velit est, tempor vel posuere et, auctor a lectus. Aenean gravida, est accumsan dictum rhoncus, lectus mi suscipit lacus, suscipit accumsan augue tellus vitae dolor. Morbi in euismod dui</p>
</div>
</div>
</div>
</div><!-- end row -->
</section>
</div><!-- End Container -->
<!-- Faq -->
<div class="container">
<section>
<div class="page-header" id="faq">
<h2>FAQ.<small> Engaging with consumers.</small></h2>
</div><!-- End Page Header -->
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a href="#collapse-1" data-toggle="collapse" data-parent="#accordion">
Question one?
</a>
</div><!-- End panel title -->
<div id="collapse-1" class="panel-collapse collapse in">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas non urna in fringilla. Praesent consequat est at feugiat faucibus
</div>
</div><!-- End Panel collapse -->
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a href="#collapse-2" data-toggle="collapse" data-parent="#accordion">
Question Two?
</a>
</div><!-- End panel title -->
<div id="collapse-2" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas non urna in fringilla. Praesent consequat est at feugiat faucibus
</div>
</div><!-- End Panel collapse -->
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a href="#collapse-3" data-toggle="collapse" data-parent="#accordion">
Question Three?
</a>
</div><!-- End panel title -->
<div id="collapse-3" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas non urna in fringilla. Praesent consequat est at feugiat faucibus
</div>
</div><!-- End Panel collapse -->
</div>
</div>
</div><!-- End panel group -->
</section>
</div><!-- End container -->
<!-- Contact -->
<div class="container">
<section>
<div class="page-header" id="contact">
<h2>Contact Us.<small> Contact us for more.</small></h2>
</div><!-- End Page Header -->
<div class="row">
<div class="col-lg-4">
<p>Send us a message, or contact us from the address below</p>
<address>
<strong>Wiredwiki Pvt Ltd.</strong></br>
111, Malviya nagar </br>
Plot no. 45</br>
New delhi - 110017</br>
P: +91 9999999999
</address>
</div>
<div class="col-lg-8">
<form action="" class="form-horizontal">
<div class="form-group">
<label for="user-name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="user-name" placeholder="Enter you name">
</div>
</div><!-- End form group -->
<div class="form-group">
<label for="user-email" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="user-email" placeholder="Enter you Email Address">
</div>
</div><!-- End form group -->
<div class="form-group">
<label for="user-url" class="col-lg-2 control-label">Your Website</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="user-email" placeholder="If you have Any.">
</div>
</div><!-- End form group -->
<div class="form-group">
<label for="user-message" class="col-lg-2 control-label">Any Message</label>
<div class="col-lg-10">
<textarea name="user-message" id="user-message" class="form-control"
cols="20" rows="10" placeholder="Enter your Message"></textarea>
</div>
</div><!-- End form group -->
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div><!-- End the row -->
</section>
</div>
<!-- Feedback-->
<div class="container">
<section>
<div class="page-header" id="feedback">
<h2>Feedback.<small> Check out the Awesome Feedback</small></h2>
</div>
<div class="row">
<div class="col-md-4">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi gravida quam ac ante rutrum, in mollis ligula mattis. Integer nulla nisi, ullamcorper et posuere vel</p>
<footer>John doe</footer>
</blockquote>
</div>
<div class="col-md-4">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi gravida quam ac ante rutrum, in mollis ligula mattis. Integer nulla nisi, ullamcorper et posuere vel</p>
<footer>John doe</footer>
</blockquote>
</div>
<div class="col-md-4">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi gravida quam ac ante rutrum, in mollis ligula mattis. Integer nulla nisi, ullamcorper et posuere vel</p>
<footer>John doe</footer>
</blockquote>
</div>
</div><!-- End row -->
</section>
</div><!--End Container-->
<section>
<div class="well">
<div class="container text-center">
<h3>Subscribe for more free stuff</h3>
<p>Enter your name and email</p>
<form action="" class="form-inline">
<div class="form-group">
<label for="subscription">Subscribe</label>
<input type="text" class="form-control" id="subscription" placeholder="Your name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="text" class="form-control" id="email" placeholder="Enter your Email">
</div>
<button type="submit" class="btn btn-default">Subscribe</button>
<hr>
</form>
</div><!-- end Container-->
</div><!-- end well-->
</section><!-- Call to action -->
<!-- Footer -->
<footer>
<hr>
<div class="container text-center">
<h3>Subscribe for more free stuff</h3>
<p>Enter your name and email</p>
<form action="" class="form-inline">
<div class="form-group">
<label for="subscription">Subscribe</label>
<input type="text" class="form-control" id="subscription" placeholder="Your name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="text" class="form-control" id="email" placeholder="Enter your Email">
</div>
<button type="submit" class="btn btn-default">Subscribe</button>
</form>
<hr>
<ul class="list-inline">
<li><a href="http://www.twitter.com/wiredwiki">Terms and Conditions</a></li>
</ul>
<p>© Copyright @ 2015</p>
</div><!-- end Container-->
</footer>
<!-- Latest compiled and minified JavaScript -->
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2015-02-22 04:58:58
我知道您所引用的是引导程序的默认样式表，但是有几件事您需要首先了解。为了根据您自己的首选项来操作引导中任何内容的位置或外观，您必须创建一个自定义样式表，然后确保它在引导样式表之后被引用，这样引导程序就不会否定您的样式。然后，您必须了解足够的css，以便根据您的喜好更改您的样式。您目前正在使用javascript将背景图像放置在div中，这在语义上是不正确的。这里有一个解释基本知识的链接，但是您确实需要了解更多关于css的知识，以便通过引导来完成您想要的事情。http://bootstrapbay.com/blog/customize-bootstrap/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28654289
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号