Javascript 如何在引导中在图像顶部嵌入输入文本框？_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 如何在引导中在图像顶部嵌入输入文本框？

javascript jquery html css twitter-bootstrap

Javascript 如何在引导中在图像顶部嵌入输入文本框？,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我想精确地将这些输入文本框放置在引导中的图像上。这些输入文本框将相对于背景中的图像以及彼此进行定义。到目前为止，我已经能够为容器添加一个背景图像，并在其上放置输入文本字段，但根据上述标准的放置一直是一个问题。请帮忙 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Wiredeiki App </title>

我想精确地将这些输入文本框放置在引导中的图像上。这些输入文本框将相对于背景中的图像以及彼此进行定义。到目前为止，我已经能够为容器添加一个背景图像，并在其上放置输入文本字段，但根据上述标准的放置一直是一个问题。请帮忙

<!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>&copy; Copyright @ 2015</p>

      </div><!-- end Container-->


    </footer>


    <!-- Latest compiled and minified JavaScript -->


</body> 
</html>

我知道您正在引用bootstrap的默认样式表，但有几件事需要您首先了解。为了根据您自己的偏好操纵引导中任何内容的位置或外观，您必须创建一个自定义样式表，然后确保在引导样式表之后引用它，以便引导不会否定您的样式。然后，您必须了解足够的css，以便根据您的偏好更改样式。您当前正在使用javascript在div中放置一个语义不正确的背景图像。这里有一个解释基本知识的链接，但是您确实需要学习更多关于css的知识，以便通过引导实现您想要的功能

如果没有一些代码，没有人能够帮助您。请将您的工作发布到JSFIDLE中好吗？你能给人们更多的合作机会，他们就能更好地帮助你。谢谢。@RobR谢谢你的建议。到目前为止，我已经添加了我的工作。@JakeTaylor我已经添加了代码。请查看一下。我在任何地方都没有看到自定义css样式表的链接。你有自己的样式表吗？而且这里有很多代码。你为什么不删除所有的东西，除了有问题的代码。不用担心。一旦你建立了一个样式表，并开始摆弄你的样式，它将更容易帮助你进一步定制任何你需要的东西。