静态形式 twitter-bootstrap 和 Xampp

Question

我有一个静态表单，其代码如下。基本上我想用 Twitter-bootstrap 来设计它。因此我想知道如何在 Xampp 下实现它。我已将 bootstrap 文件夹放在 Xammp/htdocs/MyLocalHostWebsiteFolderName/bootstrap 下，在表单 HTML 代码中添加了一个 class 但是 bootstrap 没有用表单编译。

你能帮我重振旧代码吗？

<html>
<head>   
    <title>Limited Sampling Strategies for AUC estimation</title>

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".msg_body").hide();
            $(".msg_head").click(function(){
                $(this).next(".msg_body").slideToggle(600);
            });
        });
    </script>
</head>      
<body>
<center>
<form action="form.php" class="form-horizontal" target="results" enctype="multipart/form-data" method='post'>
<h1>Limited Sampling Strategies for AUC estimation</h1>

<table border=0>
<tr valign="top">
<td>
<table border=1>
    <caption>Data</caption>
    <tr>
        <th>Concentrations</th>
        <td> <input type="file" name="concentrations" size="20"></td>
    </tr>
    <tr>
        <th>Times</th>
        <td> <input type="file" name="times" size="20"></td>
    </tr>
    <tr>    
        <th>Covariates</th>
        <td> <input type="file" name="covariates" size="20"></td>   
    </tr>
</table>
<br>
</td>

</table>

</form>
</center>
</body>
</html>

Answer 1

解决了我的问题。表单代码应在 HTML 代码之前调用 bootstrap 库，否则 CSS 类将无法识别。仅将表单 HTML 代码放在 bootstrap 文件夹中是不够的。结构是这样的

<!DOCTYPE html>

          <head>
            <title>Bootstrap 101 Template</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <!-- Bootstrap -->
            <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
          </head>
          <body>
        <center>
        <form class="form-inline" action="form.php" target="results" enctype="multipart/form-data" method='post'>

        </form>
        </center>
         <script src="http://code.jquery.com/jquery.js"></script>
            <script src="js/bootstrap.min.js"></script>
        </body>

        </html>

静态形式 twitter-bootstrap 和 Xampp

Static Form twitter-bootstrap and Xampp

forms

xampp

static

twitter-bootstrap