如何使用HTML和css

时间：2017-09-07 16:29:49

标签： javascript html css bootstrap-modal

我有一个预注册表格，客户将填写他们的信息。我将使用firebase来保存数据。 但内容看起来并不像我想要的那样。我想要以下但我不知道该怎么做（也许我厌倦​​了所有的谷歌搜索）：

  • 向左移动以查看姓名，电话号码等字段。
  • 在字段下方插入文本区域
  • 提交表单时，会出现一张小确认卡，上面写着“谢谢你，我们会联系”的消息。

页面如下所示

The Messy Modal

以下是我现在的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <!Required meta tags always come first -->
    <meta charset="utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <! Custom CSS -->
    <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<!-- Top logo nav bar -->
<nav class="navbar navbar-light bg-light navbar-fixed-top">
  <a class="navbar-brand" href="#">
    <img src="images/Digimaat_logo1.jpg" width="30" height="30" class="d-inline-block align-top" alt="Play'n Learn" height="26">
    Play & Learn</a>

</nav>

    <div id="stage">
        <div id="stage-caption">
            <h1 class="display-3">That's handy, Harry! Stick with Play and Learn</h1>
            <p>I see Play and Learn in your future</p>

            <a href="#myModal" class="btn btn-lg btn-success" data-toggle="modal">Reserve a seat now</a>
            <div class="modal fade" id="myModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h4 class="modal-title">Reserve a seat</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</button>

                    </div>
                    <div class="modal-body">
                    <div class="container-fluid">
                        <h4>Text in a modal</h4>
                        <p>Due to limited space, you can provide your contact information to be notified when registration begins</p>
                        <hr>
                        <p><small class="text-muted">PS: We will never share your information!</p>

        <form>
              <div class="form-group">
                <label class="col-lg-2 control-label formGroupExampleInput">Your full Name</label>
                <div class="col-lg-10">
                <input class="form-control" id="inputName" placeholder="Name" type="text">
                </div>

              </div>
              <div class="form-group">
                <label for="formGroupExampleInput2">Your</label>
                <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
              </div>
        </form>
                </div>
                    </div>

                    <div class="modal-footer">
                        <button class="btn btn-primary" type="button">Send</button> 
                    </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

<section id="feature-one">
    <div class="container">
        <div class="row-">
            <div class="feature-content">
                <div class="col-lg-6">
                <iframe width="100%" height="315"Insert></iframe> 
                </div>

                <div class="col-lg-5 col-lg-offset-1">
                <h6>Watch this </h6>
                <h2>Witness the power of play.</h2>
                <p class="lead"> Lorem ipsum dolor.........................</p>
                <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p></div> <hr>
                <a href="#myModal" class="btn btn-lg btn-success" data-toggle="modal">Reserve a seat now</a>
            </div>
        </div>
    </div>
</section>

<section id="feature-two" class="feature-sign">
    <div class="container">
        <div class="row">
            <div class="feature-content">
                <div class="col-lg-6 feature-caption">
                    <h6> Unique space </h6>
                    <h2>Our friends develop their ingeniouty toward the future.</h2>
                    <p class="lead">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                </div>
                <div class="col-lg-6 text-sm-center hidden-sm-down"></div>
                <!--Insert image here--->
                <img src="...."alt="somethin"
            </div>
        </div>
    </div>
</section>

<section id="feature-one">
    <div class="container">
        <div class="row-">
            <div class="feature-content">
                <div class="col-lg-6">
                <iframe width="100%" height="315"Insert></iframe> 
                </div>

                <div class="col-lg-5 col-lg-offset-1">
                <h6>Watch this </h6>
                <h2>Witness the power of play.</h2>
                <p class="lead"> Lorem ipsum dolor.........................</p>
                <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p></div>
            </div>
        </div>
    </div>

</section>

<section id="feature-two" class="feature-sign">
    <div class="container">
        <div class="row">
            <div class="feature-content">
                <div class="col-lg-6 feature-caption">
                    <h6> Unique space </h6>
                    <h2>Our friends develop their ingeniouty toward the future.</h2>
                    <p class="lead">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
                </div>
                <div class="col-lg-6 text-sm-center hidden-sm-down"></div>
                <!--Insert image here--->
                <img src="...."alt="somethin"
            </div>
        </div>
    </div>

<footer id="main-footer">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                &copy; 2018 Play & Learn - Botswana. <br>
                Coded with passion by: Play & Learn
            </div>
            <div class="col-md-2">
            <h6> What we offer</h6>
            <ul class="list-unstyled">
                <li><a href="">Programming</a></li>
                <li><a href="">Robotics</a></li>
                <li><a href="">Engeneering</a></li>
            </ul>
        </div>
        <div class="col-md-2">
            <h6> Information</h6>
            <ul class="list-unstyled">
                <li><a href="">Contact us</a></li>
                <li><a href="">Tel: 0574545254</a></li>
                <li><a href="">Gaborone, Botswana</a></li>
            </ul>
        </div>
        <div class="col-md-2">
            <h6> Social</h6>
            <ul class="list-unstyled">
                <li><a href="">Facebook</a></li>
                <li><a href="">Instangram</a></li>
                <li><a href="">Twitter</a></li>
            </ul>
        </div>

</section>
<!--jquery first, then Bootstrap JS. -->
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>

</html>

/*Css*/
/* Play and Learn.css*/
html,
body {
    height: 100%;
}
body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    color:#6c6f73;
}

h1,h2,h3,h4,h5 {
    color: #333;
}
h6 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.8rem;
    letter-spacing: 0.1rem;
}
img {
    max-width: 100%;
}
.blockquote {
    font-size: 1.6rem;
    color: #333;
    border: none;
    padding: 0;
}
.blockquote-footer {
    margin: 1rem 0 0;
}
#stage {
    background-image:url('https://images.unsplash.com/photo-1448056975861-28196f26abd6?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80') no-repeat center center fixed;
    background-size: 100%;
    color: white;
    height: 10%;
    width: 100%;
    display: flex;
    aligh-items: center;
}
#stage-caption {
    font-size: 1.4rem;
    font-weight: 200;
    max-width: 60rem;
    margin: 0 auto;
    text-align: center;
}
#stage-caption h1 {
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
}
.modal-body  {
    text-align: left;
}

1 个答案:

答案 0 :(得分：0)

$('#send').click(function(){
  alert('confirm message');//////Here you might add some confirm message
});
相关问题
最新问题