javascript - 联系页面设计如何添加Bootstrap

Question

我在 Bootstrap 站点中有任务。我必须在 Bootstrap 站点中设置联系页面。我在我的网站上创建了联系页面。它没有显示响应式设计..

我已经开发了代码 html 和 css。它运作良好。如何设置设计响应式设计？

它的我的 CSS:

body{
                font-family:Verdana, Arial, Helvetica, sans-serif;
                font-size:14px;
            }
            p, h1, form, button{border:0; margin:0; padding:0;}
            .spacer{clear:both; height:1px;}

            /* ----------- My Form ----------- */

             @media only screen and (max-width: 500px)
    {
        .myform
        {
            width: 200px;
        }


    }


            .myform{
                margin:0 auto;
                width:566px;
                padding:14px;
            }

            /* ----------- form-wrapper ----------- */
            #form-wrapper{
                background: none repeat scroll 0 0 #C6C6C6;
                border: 2px solid #8B8B8B;
                border-radius: 10px;
                -moz-border-radius: 10px;
                -op-border-radius: 10px;
                -webkit-border-radius: 10px;
            }
            #form-wrapper h1 {
                font-weight:bold;
                margin-bottom:8px;
            }
            #form-wrapper p{
                font-size:11px;
                color:#666666;
                margin-bottom:20px;
                border-bottom:solid 1px #7E7E7E;
                padding-bottom:10px;
            }
            #form-wrapper label{
                display:block;
                font-weight:bold;
                text-align:right;
                width:193px;
                float:left;
            }
            #form-wrapper .small{
                color:#666666;
                display:block;
                font-size:11px;
                font-weight:normal;
                text-align:right;
                width:193px;
            }
            #form-wrapper input,#form-wrapper textarea{
                float:left;
                border:solid 1px #aacfe4;
                width:284px;
                margin:2px 0 20px 10px;
                border-radius: 15px;
                -moz-border-radius: 15px;
                -op-border-radius: 15px;
                -webkit-border-radius: 15px;
                font-size: 14px;
            }

            #form-wrapper input{
                height: 25px;
                padding: 4px 10px;
            }
            #form-wrapper textarea{
                padding: 10px 10px;
                overflow: auto;
            }
            /* ----------- Form Button ----------- */
            #form-wrapper button {
               background: #2c3e4a;
               background: -webkit-gradient(linear, left top, left bottom, from(#919496), to(#2c3e4a));
               background: -webkit-linear-gradient(top, #919496, #2c3e4a);
               background: -moz-linear-gradient(top, #919496, #2c3e4a);
               background: -ms-linear-gradient(top, #919496, #2c3e4a);
               background: -o-linear-gradient(top, #919496, #2c3e4a);
               padding: 5px 10px;
               -webkit-border-radius: 15px;
               -moz-border-radius: 15px;
               border-radius: 15px;
               margin-left: 315px;
               color: white;
               font-size: 20px;
               text-decoration: none;
               vertical-align: middle;
            }
            #form-wrapper button:hover {
               background: #3d4b54;
               color: #ccc;
            }

这里附上html代码:

    <form id="form" name="form" method="post" action="mail.php">

        <h1>Contact Us</h1>

        <label for="name">Name
            <span class="small">Add your name</span>
        </label>
        <input type="text" name="name" placeholder="Enter your Name" id="name" />

        <label for="email">Email
            <span class="small">Add a valid address</span>
        </label>
        <input type="text" name="email" placeholder="mail@example.com" id="email" />

        <label for="phone">Phone
            <span class="small">Add valid 10 digit your mobile no.</span>
        </label>
        <input type="text" name="phone" placeholder="Enter Your Number" id="phone" />

        <label for="message">Message
            <span class="small">Write something to us</span>
        </label>
        <textarea placeholder="Write something to us" name="message" id="message"  rows="5"></textarea>

        <button type="submit">Send</button>
        <div class="spacer"></div>

    </form>
</div>

其全站基于 Bootstrap 的网站。如何设置联系页面和我的 css 响应？如何改变它响应？

Answer 1

如果您使用的是 Bootstrap 3，这就是您的操作方式，如果您使用的是旧版本，请参阅此 Bootstrap 2.3.2

.wrapper {
  margin-top: 50px;
}
#theForm {
  background: none repeat scroll 0 0 #C6C6C6;
  border: 2px solid #8B8B8B;
  border-radius: 10px;
  padding: 20px;
  -moz-border-radius: 10px;
  -op-border-radius: 10px;
  -webkit-border-radius: 10px;
}
#helpBlock {
  margin: 3px 0;
}
button.btn-new {
  background: #2c3e4a;
  background: -webkit-gradient(linear, left top, left bottom, from(#919496), to(#2c3e4a));
  background: -webkit-linear-gradient(top, #919496, #2c3e4a);
  background: -moz-linear-gradient(top, #919496, #2c3e4a);
  background: -ms-linear-gradient(top, #919496, #2c3e4a);
  background: -o-linear-gradient(top, #919496, #2c3e4a);
  padding: 5px 10px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  color: white;
  font-size: 20px;
  text-decoration: none;
  vertical-align: middle;
}
button.btn-new:hover {
  background: #3d4b54;
  color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
  <div class="container">
    <form class="form-horizontal" name="theForm" id="theForm">
      <h1>Contact Us</h1>

      <div class="form-group">
        <label for="name" class="col-sm-2 control-label">Name</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="name" placeholder="Name" /> <span id="helpBlock" class="help-block">Add your name.</span>

        </div>
      </div>
      <div class="form-group">
        <label for="email" class="col-sm-2 control-label">EMail</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="email" placeholder="EMail" /> <span id="helpBlock" class="help-block">Add your name.</span>

        </div>
      </div>
      <div class="form-group">
        <label for="phone" class="col-sm-2 control-label">Phone</label>
        <div class="col-sm-10">
          <input type="tel" class="form-control" id="phone" placeholder="Phone" /> <span id="helpBlock" class="help-block">Add your name.</span>

        </div>
      </div>
      <div class="form-group">
        <label for="message" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
          <textarea class="form-control" placeholder="Write something to us" name="message" id="message" rows="5"></textarea> <span id="helpBlock" class="help-block">Add your name.</span>

        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-new">Send</button>
        </div>
      </div>
    </form>
  </div>
</div>