Html 引导式联系人表单问题_Html_Twitter Bootstrap

Html 引导式联系人表单问题

html twitter-bootstrap

Html 引导式联系人表单问题,html,twitter-bootstrap,Html,Twitter Bootstrap,我正在学习引导程序的教程，我完全按照视频中所示的编码，但不知怎么的，有一个错误我无法理解当我从html代码创建的网页中单击联系人按钮时，它将显示一个联系人表单，允许您输入姓名、电子邮件和消息问题是，在视频中，与网页的其他部分相比，联系人表单是明亮的，可以让你点击它并填写信息，但当我尝试这样做时，联系人表单会像网页的其他部分一样褪色/变暗，当我尝试点击它时，它会消失并再次显示网页代码如下： <!DOCTYPE html> <html lang="en"> <

我正在学习引导程序的教程，我完全按照视频中所示的编码，但不知怎么的，有一个错误我无法理解

当我从html代码创建的网页中单击联系人按钮时，它将显示一个联系人表单，允许您输入姓名、电子邮件和消息

问题是，在视频中，与网页的其他部分相比，联系人表单是明亮的，可以让你点击它并填写信息，但当我尝试这样做时，联系人表单会像网页的其他部分一样褪色/变暗，当我尝试点击它时，它会消失并再次显示网页

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Contact Form tutorial from BootstrapBay.com">
    <meta name="author" content="BootstrapBay.com">
    <title>BootstrapBay Tutorial</title>
    <link href="../bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="../bootstrap-3.3.4-dist/css/custom.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">BootstrapBay</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>       
            <li><a href="#about">About</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Themes <b class="caret"></b></a>
             <ul class="dropdown-menu">
              <li class="dropdown-header">Admin & Dashboard</li>
                <li><a href="#">Admin 1</a></li>
                <li><a href="#">Admin 2</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Portfolio</li>
                <li><a href="#">Portfolio 1</a></li>
                <li><a href="#">Portfolio 2</a></li>
              </ul>
            </li>            
            <li><a href="#contact" data-toggle="modal">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

  <div class="container">
    <div class="jumbotron text-center">
      <h1>Bootstrap Themes</h1>
      <p>BootstrapBay is your #1 source for premium Bootstrap themes & templates</p>
      <a href="#" class="btn btn-primary">Buy Themes</a>
      <a href="#" class="btn btn-success">Sell Themes</a>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <a href="#" class="thumbnail">
          <img src="img/slate.jpg" alt="Slate Bootstrap Admin Theme">
        </a>
        <h3>Slate</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at. Pellentesque mattis justo vel augue pretium euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce eu turpis eros.</p>
        <a href="#" class="btn btn-danger">View</a>
      </div>
      <div class="col-sm-4">
        <a href="#" class="thumbnail">
          <img src="img/appi.jpg" alt="Appi Landing Page Template">
        </a>
        <h3>Appi</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at. Pellentesque mattis justo vel augue pretium euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce eu turpis eros.</p>
        <a href="#" class="btn btn-danger">View</a>
      </div>
      <div class="col-sm-4">
        <a href="#" class="thumbnail">
          <img src="img/jiggy.jpg" alt="Jiggy Portfolio Theme">
        </a>
        <h3>Jiggy</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at. Pellentesque mattis justo vel augue pretium euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce eu turpis eros.</p>
        <a href="#" class="btn btn-danger">View</a>
      </div>
    </div>
  </div>  



    <!-- Fixed footer -->
    <div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
      <div class="container">
        <div class="navbar-text pull-left">
          <p>© 2014 BootstrapBay.</p>
        </div>
        <div class="navbar-text pull-right">
          <a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
          <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
          <a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
        </div>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <div class="modal fade" id="contact" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <form class="form-horizontal" role="form">
            <div class="modal-header">
              <h4>Contact<h4>
            </div>
            <div class="modal-body">
              <div class="form-group">
                <label for="contact-name" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="contact-name" placeholder="First & Last Name">
                </div>
              </div>
              <div class="form-group">
                <label for="contact-email" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                  <input type="email" class="form-control" id="contact-email" placeholder="example@domain.com">
                </div>
              </div>
              <div class="form-group">
                <label for="contact-message" class="col-sm-2 control-label">Message</label>
                <div class="col-sm-10">
                  <textarea class="form-control" rows="4"></textarea>
               </div>
              </div>
            </div>
            <div class="modal-footer">
              <a class="btn btn-default" data-dismiss="modal">Close</a>
              <button type="submit" class="btn btn-primary">Send</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>


    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

  </body>
</html>


BootstrapBay教程
切换导航





管理和仪表板



投资组合






引导主题
BootstrapBay是高级引导主题和模板的#1来源
石板
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个很好的例子。佩伦茨克·马蒂斯·胡斯托·奥古斯·普雷蒂姆·尤伊斯莫。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。Fusce eu turpis eros
阿皮
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个很好的例子。佩伦茨克·马蒂斯·胡斯托·奥古斯·普雷蒂姆·尤伊斯莫。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。Fusce eu turpis eros
抖动的
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个很好的例子。佩伦茨克·马蒂斯·胡斯托·奥古斯·普雷蒂姆·尤伊斯莫。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。Fusce eu turpis eros
©2014 BootstrapBay
联系
名称
电子邮件
消息
关
邮寄

代码中的相同CSS和JS文件有多个链接。有可能其中一些已经坏了，还没有装好。请使用正确的链接，然后重试

您的代码运行良好：


切换导航







管理和仪表板





投资组合









引导主题
BootstrapBay是高级引导主题和模板的#1来源
石板
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个很好的例子。佩伦茨克·马蒂斯·胡斯托·奥古斯·普雷蒂姆·尤伊斯莫。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。Fusce-eu-turpis
厄洛斯。

阿皮
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个很好的例子。佩伦茨克·马蒂斯·胡斯托·奥古斯·普雷蒂姆·尤伊斯莫。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。Fusce-eu-turpis
厄洛斯。

抖动的
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个很好的例子。佩伦茨克·马蒂斯·胡斯托·奥古斯·普雷蒂姆·尤伊斯莫。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。Fusce-eu-turpis
厄洛斯。

©2014 BootstrapBay
联系
名称
电子邮件
消息
关
邮寄

当我将其更改为时。它最终给了它明亮的颜色，而网页的其余部分在后面淡出