如何在引导程序中将输入文本框嵌入图像的顶部？

243

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

<!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>

杰克·泰勒（Jake Taylor）

我了解您是在参考bootstrap的默认样式表，但是首先需要了解一些内容。为了根据自己的喜好控制引导程序中任何内容的位置或外观，您必须制作一个自定义样式表，然后确保在引导程序样式表后对其进行引用，以使引导程序不会否定您的样式。然后，您必须了解足够的CSS，才能根据自己的喜好更改样式。您当前正在使用javascript将背景图片放置在语义上不正确的div中。这是一个解释基本知识的链接，但是您确实需要了解有关css的更多信息，以便完成Bootstrap所需的工作。http://bootstrapbay.com/blog/customize-bootstrap/

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-03-27

我来说两句

0 条评论

登录后参与评论

上一篇：使图像或背景图像在div旋转时消失吗？

TOP 榜单

文章

如何在引导程序中将输入文本框嵌入图像的顶部？

如何在引导程序中将输入文本框嵌入图像的顶部？

蓝屏死机没有修复解决方案

计算数据帧中每行的NA

UITableView的项目向下滚动后更改颜色，然后快速备份

Node.js中未捕获的异常错误，发生调用

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

Linux的官方Adobe Flash存储库是否已过时？

验证REST API参数

ggplot：对齐多个分面图-所有大小不同的分面

Mac OS X更新后的GRUB 2问题

通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

带有错误“ where”条件的查询如何返回结果？

用日期数据透视表和日期顺序查询

VB.net将2条特定行导出到DataGridView

如何从视图一次更新多行（ASP.NET - Core）

Java Eclipse中的错误13，如何解决？

尝试反复更改屏幕上按钮的位置 - kotlin android studio

离子动态工具栏背景色

应用发明者仅从列表中选择一个随机项一次

当我尝试下载 StanfordNLP en 模型时，出现错误

python中的boto3文件上传

在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID